@arcgis/map-components
Version:
ArcGIS Map Components
4 lines • 13.2 kB
JavaScript
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
import{b}from"./MF2SVVTD.js";import d from"./HXOMZNNJ.js";import{a as E}from"./MZHKSD55.js";import{a as _}from"./HA5P4MAX.js";import c from"./MX24TT2G.js";import a from"./2WKS6ZFG.js";import{e as T}from"./4TYQGSWG.js";import"./JDUE7Q24.js";import"./DXCYBWXJ.js";import{B as w,E as C,P as I,Q as s,S as m,U as M,a as h,f as y,j as S,k as n}from"./HX57SHRL.js";export default $arcgis.t(([R,p,{substitute:D},{watch:L},B,,,x])=>{function N(l){if(l==null||Number.isNaN(l))return 0;let e=l+180;return Math.trunc(k(e,360))}function W(l){let e=l;return e==null||(typeof e=="string"&&(e=Number.parseInt(e,10)),Number.isNaN(e))?0:k(Math.trunc(e),360)-180}function k(l,e){return(l%e+e)%e}var P={fromAttribute:l=>p.fromHex(l),toAttribute:l=>typeof l=="string"?l:l?.toHex()??""},G=S`{calcite-block>.arcgis-grid-controls{background:none;padding:0}.arcgis-ui-corner .arcgis-expand .arcgis-widget--panel .arcgis-widget--panel.arcgis-grid-controls{overflow-y:visible}.arcgis-grid-controls{user-select:none;display:flex;flex-flow:column wrap;padding:var(--calcite-spacing-sm);.container{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--calcite-spacing-sm)}.numeric-inputs-container{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:var(--calcite-spacing-sm)}arcgis-labeled-switch{margin-block-end:var(--calcite-spacing-sm)}.switch--bordered{border-width:0 0 var(--calcite-spacing-px) 0;border-style:solid;border-color:var(--calcite-color-border-1);padding-block-end:var(--calcite-spacing-sm)}.tile-group{display:flex;column-gap:var(--calcite-spacing-md);align-items:start;margin-bottom:calc(0px - var(--calcite-spacing-sm))}.tile{position:relative;.content{display:flex;flex-direction:column;row-gap:var(--calcite-spacing-md);align-items:center;padding:var(--calcite-spacing-md);color:var(--calcite-color-text-2)}&.disabled{opacity:var(--calcite-opacity-disabled)}&:focus-within{outline:var(--calcite-spacing-base) solid var(--calcite-color-brand);outline-offset:var(--calcite-spacing-base)}input[type=radio]{appearance:none;position:absolute;inset:0;opacity:.001;border:var(--calcite-spacing-px) solid transparent;cursor:pointer;&:checked+.content{border:var(--calcite-spacing-px) solid var(--calcite-color-brand)}+.content{border:var(--calcite-spacing-px) solid transparent;calcite-label{margin-bottom:calc(0px - var(--calcite-label-margin-bottom, .75rem));font-weight:var(--calcite-font-weight-medium)}}}}.inline-icon{margin-left:var(--calcite-spacing-xs);vertical-align:top;color:var(--calcite-color-status-warning)}}}`,A="arcgis-grid-controls",c={base:A,borderedSwitch:"switch--bordered",container:"container",numericInputsContainer:"numeric-inputs-container",tileGroup:"tile-group",tile:"tile",tileDisabled:"disabled",tileContent:"content",inlineIcon:"inline-icon"},u={componentIcon:"grid-unit",gridTheme:{light:"circle",dark:"circle-area",custom:"palette"},placementState:{interactive:"maximum-territory-distance",place:"move",rotate:"rotate"},warning:"exclamation-mark-triangle"},v=p.fromArray([115,115,115]),f=p.fromArray([200,200,200]),j=["interactive","place","rotate"],q=x(B),$=class extends I{constructor(){super(...arguments),this._labelUid=y(),this._messages=E({}),this._viewModel=q(this),this._placementModeButtonRefs=new Map,this.numericSpacingInputShouldBeVisible=this._viewModel.numericSpacingInputShouldBeVisible,this.position="bottom-right",this.icon=u.componentIcon,this.snappingOptions=this._viewModel.snappingOptions,this.hideColorSelection=!1,this.hideDynamicScaleToggle=!1,this.hideGridEnabledToggle=!1,this.hideNumericInputs=!1,this.hideGridSnapEnabledToggle=!1,this.hideLineIntervalInput=!1,this.hideOutOfScaleWarning=!1,this.hidePlacementButtons=!1,this.hideRotateWithMapToggle=!1,this.rotation=this._viewModel.rotation,this.rotateWithMap=this._viewModel.rotateWithMap,this.spacing=this._viewModel.spacing,this.majorLineInterval=this._viewModel.majorLineInterval,this.gridColor=this._viewModel.gridColor,this.displayEnabled=this._viewModel.displayEnabled,this.gridOutOfScale=this._viewModel.gridOutOfScale,this.unit=this._viewModel.unit,this.dynamicScaling=this._viewModel.dynamicScaling,this.gridControlsEnabled=this._viewModel.gridControlsEnabled,this.interactivePlacementState=this._viewModel.interactivePlacementState,this.snappingEnabled=this._viewModel.snappingEnabled,this.effectiveSpacingAfterDynamicScaling=this._viewModel.effectiveSpacingAfterDynamicScaling,this.placementDisabled=this._viewModel.placementDisabled,this.autoDestroyDisabled=!1,this.arcgisPropertyChange=T()("customColor","theme","spacing","rotation","majorLineInterval","rotateWithMap","dynamicScaling","snappingEnabled","interactivePlacementState","displayEnabled","gridOutOfScale","effectiveSpacingAfterDynamicScaling","gridControlsEnabled","gridColor"),this.arcgisReady=w()}static{this.properties={_placementModeButtonRefs:16,_warningIconTooltipRef:16,_themePopoverRef:16,numericSpacingInputShouldBeVisible:16,referenceElement:1,position:3,icon:1,customColor:[3,{converter:P}],snappingOptions:0,theme:1,hideColorSelection:5,hideDynamicScaleToggle:5,hideGridEnabledToggle:5,hideNumericInputs:5,hideGridSnapEnabledToggle:5,hideLineIntervalInput:5,hideOutOfScaleWarning:5,hidePlacementButtons:5,hideRotateWithMapToggle:5,rotation:11,rotateWithMap:5,spacing:11,majorLineInterval:11,gridColor:[3,{converter:P}],displayEnabled:4,gridOutOfScale:7,unit:1,dynamicScaling:5,gridControlsEnabled:4,interactivePlacementState:3,snappingEnabled:5,effectiveSpacingAfterDynamicScaling:43,placementDisabled:5,autoDestroyDisabled:5,messageOverrides:0,label:1}}static{this.styles=G}static{this.shadowRootOptions=C}get theme(){let e=this.gridColor;return!e||v.equals(e)?"dark":f.equals(e)?"light":"custom"}set theme(e){let t=this._viewModel.view;switch(e){case"dark":this.gridColor=v;break;case"custom":this.customColor==null&&(this.customColor=t?.theme?.accentColor??new R().accentColor),this.gridColor=this.customColor;break;case"light":default:this.gridColor=f;break}}async destroy(){await this.manager.destroy()}trySetDisplayEnabled(e){this._viewModel.trySetDisplayEnabled(e)}loaded(){this.manager.onLifecycle(()=>[L(()=>this._viewModel.gridColor,e=>{let t=e instanceof p?e:typeof e=="string"?p.fromHex(e):null;t&&!v.equals(e)&&!f.equals(t)?this.customColor=t:v.equals(t)?this.theme="dark":f.equals(t)&&(this.theme="light")})])}_togglePlacementState(e){this.interactivePlacementState=this.interactivePlacementState===e?null:e}_setWarningIconRef(e){this._warningIconTooltipRef=e}_setPopoverRef(e){this._themePopoverRef=e}_emptyFunction(e){}_setPlacementButtonRef(e){if(e){let t=e.dataset.placementAction;this._placementModeButtonRefs.set(t,e)}else this._placementModeButtonRefs.clear()}render(){return n`<div class=${s(h(c.base,_.widget,_.panel))}><div class=${s(c.container)}>${this._renderContent()}</div></div>`}_renderContent(){let{hideGridEnabledToggle:e,hidePlacementButtons:t,hideNumericInputs:i,hideLineIntervalInput:a,hideGridSnapEnabledToggle:r,hideDynamicScaleToggle:o,hideRotateWithMapToggle:d,hideColorSelection:g}=this;return[e?void 0:this._renderEnabledToggle(),t?void 0:this._renderGridPlacementButtons(),i?void 0:this._renderNumericInputs(),a?void 0:this._renderIntervalInput(),!r&&this.snappingOptions?this._renderSnappingToggle():void 0,o?void 0:this._renderDynamicScaleToggle(),d?void 0:this._renderRotateToggle(),g?void 0:this._renderColorSelection()]}_renderGridPlacementButtons(){let{interactivePlacementState:e,placementDisabled:t,gridControlsEnabled:i}=this,a=t||!i;return n`<calcite-label scale=s>${this._messages.placementOptions}<calcite-action-bar expand-disabled layout=horizontal>${j.map(r=>this._renderPlacementModeButton(r,a,e))}</calcite-action-bar></calcite-label>`}_renderPlacementModeButton(e,t,i){let a=this._messages?.placementState?.[e],r=this._placementModeButtonRefs.get(e);return n`<div><calcite-action .active=${i===e} alignment=center .disabled=${t} .icon=${u.placementState[e]} data-placement-action=${e??m} =${()=>this._togglePlacementState(e)} .text=${a??""} ${b(this._setPlacementButtonRef)}></calcite-action>${r?n`<calcite-tooltip overlay-positioning=fixed placement=top .referenceElement=${r}>${a}</calcite-tooltip>`:void 0}</div>`}_renderNumericInputs(){let{rotation:e,spacing:t,effectiveSpacingAfterDynamicScaling:i,numericSpacingInputShouldBeVisible:a,gridControlsEnabled:r}=this,o=i!=null&&i!==t;return n`<div class=${s(h(c.numericInputsContainer))}>${[a?n`<calcite-label scale=s><span>${this._messages?.inputLabel?.spacing}${o?n`<calcite-icon class=${s(h(c.inlineIcon))} .icon=${u.warning} scale=s tabindex=0 ${b(this._setWarningIconRef)}></calcite-icon>`:void 0}</span><calcite-input-number .disabled=${!r} number-button-type=none .value=${t?.toFixed(2)} =${({currentTarget:d})=>{let g=Number.parseFloat(d.value);this.spacing=g,g!==this.spacing&&(d.value=`${this.spacing}`)}}></calcite-input-number>${o&&this._warningIconTooltipRef?n`<calcite-tooltip overlay-positioning=fixed placement=leading .referenceElement=${this._warningIconTooltipRef}>${D(this._messages?.warnings?.dynamicSpacing??"",{actualSpacingIncludingUnit:i},{format:{actualSpacingIncludingUnit:{type:"number",intlOptions:{minimumFractionDigits:2,maximumFractionDigits:2,unit:this.unit??"meters",style:"decimal"}}}})}</calcite-tooltip>`:void 0}</calcite-label>`:void 0,n`<calcite-label scale=s>${this._messages?.inputLabel?.angle}<calcite-input-number .disabled=${!r} integer number-button-type=none suffix-text=\u00B0 .value=${`${N(e)}`} =${({currentTarget:d})=>this.rotation=W(d.value)}></calcite-input-number></calcite-label>`]}</div>`}_renderIntervalInput(){let{majorLineInterval:e,gridControlsEnabled:t}=this;return n`<div class=${s(h(c.numericInputsContainer))}><calcite-label scale=s>${this._messages?.inputLabel?.interval}<calcite-input-number .disabled=${!t} integer max=15 min=1 number-button-type=vertical .value=${`${e}`} =${({currentTarget:i})=>{let a=Number.parseInt(i.value,10);this.majorLineInterval=a,a!==this.majorLineInterval&&(i.value=`${this.majorLineInterval}`)}}></calcite-input-number></calcite-label></div>`}_renderSnappingToggle(){let{snappingOptions:e,gridControlsEnabled:t}=this,i=e?.gridEnabled??!1;return n`<arcgis-labeled-switch .checked=${!!i} .disabled=${!(t&&e)} .label=${this._messages?.switchLabel?.snap} =${a=>{a.stopPropagation(),this.snappingOptions?.set("gridEnabled",a.detail)}}></arcgis-labeled-switch>`}_renderDynamicScaleToggle(){let{_messages:e,gridOutOfScale:t,dynamicScaling:i,gridControlsEnabled:a}=this,r=!this.hideOutOfScaleWarning&&t;return n`<arcgis-labeled-switch .checked=${i} .disabled=${!a} .hint=${r?e?.warnings?.outOfScale:void 0} .hintIcon=${u.warning} hint-kind=warning .label=${e?.switchLabel?.scaling} =${o=>{o.stopPropagation(),this.dynamicScaling=o.detail}}></arcgis-labeled-switch>`}_renderRotateToggle(){let{gridControlsEnabled:e,rotateWithMap:t}=this;return n`<arcgis-labeled-switch .checked=${t} .disabled=${!e} .label=${this._messages?.switchLabel?.rotateWithMap??""} =${i=>{i.stopPropagation(),this.rotateWithMap=i.detail}}></arcgis-labeled-switch>`}_renderEnabledToggle(){return n`<div class=${s(c.borderedSwitch)}><arcgis-labeled-switch .checked=${this.displayEnabled} .disabled=${!!this.interactivePlacementState} .label=${this._messages?.switchLabel?.display} =${e=>{e.stopPropagation(),this.trySetDisplayEnabled(e.detail)}}></arcgis-labeled-switch></div>`}_renderColorSelection(){let{customColor:e}=this;return n`<calcite-label scale=s>${this._messages?.inputLabel?.theme}<div class=${s(c.tileGroup)}>${[this._renderThemeTile({value:"dark"}),this._renderThemeTile({value:"light"}),this._renderThemeTile({value:"custom"}),this._themePopoverRef?n`<calcite-popover auto-close .label=${this._messages?.gridLineColorPopoverLabel??""} overlay-positioning=fixed .referenceElement=${this._themePopoverRef}><calcite-color-picker alpha-channel saved-disabled .value=${e?.toHex({digits:8})??"#000000ff"} =${t=>{let i=p.fromHex(t.currentTarget.value);i&&(this.customColor=i,this.theme="custom")}}></calcite-color-picker></calcite-popover>`:void 0]}</div></calcite-label>`}_renderThemeTile(e){let{theme:t,gridControlsEnabled:i}=this,{value:a}=e,r=this._messages?.gridTheme?.[a],o=`${this._labelUid}--theme_tile_${a}`,d=`${o}__label`,g=u.gridTheme[a];return n`<div class=${s(h({[c.tile]:!0,[c.tileDisabled]:!i}))} role=button ${b(a==="custom"?this._setPopoverRef:this._emptyFunction)}><input aria-labelledby=${d??m} .checked=${t===a} .disabled=${!i} id=${o??m} .name=${`${this._labelUid}--theme`} =${O=>{this.theme=a,O.currentTarget.focus()}} tabindex=0 type=radio><div class=${s(c.tileContent)}><calcite-icon .icon=${g} scale=l></calcite-icon><calcite-label .for=${o} id=${d??m}>${r}</calcite-label></div></div>`}};M("arcgis-grid-controls",$);return $},"views/Theme","Color","intl","core/reactiveUtils","widgets/support/GridControls/GridControlsViewModel",a,c,d)