@arcgis/map-components
Version:
ArcGIS Map Components
2 lines • 6.92 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{a as $,b as R}from"./LTEIJYVA.js";import{a as s}from"./Q52QESBE.js";import k from"./KA7BM2DQ.js";import{a as f}from"./HZFVK34O.js";import{a as n}from"./54VXNFQ4.js";import j from"./LKOVDQTE.js";import e from"./OAWV35F7.js";import{h as g}from"./AKBXFBDL.js";import"./LMBRORN7.js";import c from"./5E6WEUZS.js";import{i as v}from"./PBSJQPB2.js";import{N as h,O as u,P as p,Q as m,R as a,U as b,a as l,b as i,x as d}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{watch:y},M,{g:_},,,w])=>{var x=[-45,0,45,-90,90,-135,180,135],C={0:{label:"north",iconName:"chevron-up"},45:{label:"northEast",iconName:"chevron-up-right"},90:{label:"east",iconName:"chevron-right"},135:{label:"southEast",iconName:"chevron-down-right"},180:{label:"south",iconName:"chevron-down"},"-135":{label:"southWest",iconName:"chevron-down-left"},"-90":{label:"west",iconName:"chevron-left"},"-45":{label:"northWest",iconName:"chevron-up-left"}},S=l`:host{outline:none;box-shadow:none!important;background-color:transparent!important;user-select:none;calcite-action-pad{display:contents}calcite-action-group{touch-action:none}calcite-action{aspect-ratio:1}}.root{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;calcite-action{--calcite-color-focus: var(--calcite-color-foreground-3)}calcite-action:not([active]){--calcite-action-background-color-press: var(--calcite-color-foreground-1)}calcite-action[active]{--calcite-action-background-color: var(--calcite-color-foreground-3)}calcite-icon{transform:var(--rotation, unset)}{calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.rotation-container{display:block;width:100%;calcite-action{flex:.3}}.rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}`,B=w(M),r=class extends u{constructor(){super(...arguments),this.messages=f({}),this._onContextMenu=t=>t.preventDefault(),this._buttons={},this.viewModel=B(this),this.angle=this.viewModel.angle,this.rotation=this.viewModel.rotation,this.view=this.viewModel.view,this.autoDestroyDisabled=!1,this.disabled=this.viewModel.disabled,this.hideDirectionalButtons=!1,this.icon="move",this.showRotationResetButton=!1,this.showRotationSlider=!1,this.state=this.viewModel.state,this.visualScale="s",this.arcgisPropertyChange=g()("state"),this.arcgisReady=d()}static{this.properties={_rotationEnabled:16,angle:16,rotation:16,view:0,autoDestroyDisabled:5,disabled:5,hideDirectionalButtons:5,icon:1,label:1,messageOverrides:0,referenceElement:1,showRotationResetButton:5,showRotationSlider:5,state:32,visualScale:1}}static{this.styles=S}get _rotationEnabled(){return this.view?.ready?this.view.constraints.rotationEnabled??!1:!0}async destroy(){await this.manager.destroy()}loaded(){this.manager.onLifecycle(()=>[y(()=>this.viewModel.angle,()=>{this._buttonsContainer?.contains(document.activeElement)&&(this.viewModel.angle==null?_(this)?.focus():v(this._buttons[this.viewModel.angle]))})])}_rotateIcon(t){return{"--rotation":`rotate(${t}deg)`}}_setButtonContainerRef(t){t!==void 0?(this._buttonsContainer=t,queueMicrotask(()=>{this._buttons=Object.fromEntries(Array.from(t.children,e=>[Number.parseInt(e.getAttribute("data-angle")??""),e]))})):(this._buttonsContainer=void 0,this._buttons={})}_onButtonPointerDown(t){if(this._buttonsContainer===void 0)return;t.composedPath().find(o=>o.hasPointerCapture?.(t.pointerId))?.releasePointerCapture(t.pointerId);let e=$(this._buttonsContainer);this.viewModel.beginFollowingPointer(t,e)}_onSliderInput({currentTarget:t}){typeof t.value=="number"&&(this.viewModel.rotation=t.value)}_onRotationReset(){this.viewModel.rotation=0}_onClick(t){this.viewModel.moveOnce(t)}render(){let{label:t,disabled:e}=this,o=this.view==null||this.view.type==="2d";return i`<div .ariaLabel=${t??void 0} class=${p({root:!0,[n.widget]:!0,[n.disabled]:e})} tabindex=-1>${o?this._renderContent():this._renderUnsupportedMessage()}</div>`}_renderUnsupportedMessage(){return i`<section class="error"><p>${this.messages.unsupported}</p></section>`}_renderContent(){return[this.hideDirectionalButtons?void 0:this._renderDirectionalButtons(),this.showRotationSlider?this._renderRotation():void 0]}_renderDirectionalButtons(){return s("directional-buttons-container",i`<calcite-action-bar expand-disabled floating layout=grid .scale=${this.visualScale} overflow-actions-disabled><calcite-action-group class="buttons-container" dir=ltr =${{handleEvent:this._onContextMenu,capture:!0}} ${h(this._setButtonContainerRef)}>${x.slice(0,4).map(this._renderButton,this)}${this._renderCompass()}${x.slice(4).map(this._renderButton,this)}</calcite-action-group></calcite-action-bar>`)}_renderButton(t){let{label:e,iconName:o}=C[t],c=this.messages[e];return i`<calcite-action .active=${this.angle===t} alignment=center class="button" data-angle=${t??a} .disabled=${this.disabled} =${this._onClick.bind(this,t)} =${this._onButtonPointerDown} .text=${c??""} title=${c??a}><calcite-icon .icon=${o} .scale=${this.visualScale}></calcite-icon></calcite-action>`}_renderCompass(){let t=this.disabled||R(this.view)?"compass-needle":"arrow-up",e=this.rotation===0,o=this.messages.resetHeading;return i`<calcite-action alignment=center class="compass" .disabled=${this.disabled||!this._rotationEnabled||e} =${this._onRotationReset} style=${m(this._rotateIcon(this.rotation))} .text=${o??""} title=${o??a}>${!e&&i`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>`||""}</calcite-action>`}_renderRotation(){return s("slider-container",i`<calcite-action-bar expand-disabled floating layout=horizontal .scale=${this.visualScale}><calcite-action-group class="rotation-container">${this.showRotationResetButton?this._renderRotationResetButton():null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-bar>`)}_renderRotationResetButton(){let t=this.messages.resetHeading;return i`<calcite-action alignment=center class="rotation-reset-button" .disabled=${this.disabled||!this._rotationEnabled} =${this._onRotationReset} .text=${t??""} title=${t??a}><calcite-icon flip-rtl icon=rotate .scale=${this.visualScale}></calcite-icon></calcite-action>`}_renderRotationSlider(){return i`<div class="rotation-slider-container"><calcite-slider .ariaLabel=${this.messages.heading} .disabled=${this.disabled||!this._rotationEnabled} label-handles max=360 min=0 required .scale=${this.visualScale} .value=${Math.round(this.rotation)} =${this._onSliderInput}></calcite-slider></div>`}};b("arcgis-directional-pad",r);return r},"core/reactiveUtils","widgets/DirectionalPad/DirectionalPadViewModel",c,e,j,k)