@arcgis/map-components/dist/arcgis-map-components/4HZBZXOX.js

ArcGIS Map Components

/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
v4.32.13 */
import{b as R}from"./VOXR3NPC.js";import{a as w}from"./NYXWVKGC.js";import{a as f}from"./QKQNYHUC.js";import{a as d}from"./KWBN5CHV.js";import"./JM4XJJFL.js";import"./AX2MGWNF.js";import{A as b,B as v,C as a,D as _,E as c,G as $,b as u,g as p,q as m,r as g,s as o}from"./NIZJVZRG.js";var[{watch:x},y]=await $arcgis.l(["core/reactiveUtils","widgets/DirectionalPad/DirectionalPadViewModel"]);var C=[-45,0,45,-90,90,-135,180,135],M={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"}},n="arcgis-directional-pad",s={base:n,buttonsContainer:`${n}__buttons-container`,button:`${n}__button`,compassButton:`${n}__compass`,rotationContainer:`${n}__rotation-container`,rotationSliderContainer:`${n}__rotation-slider-container`,rotationReset:`${n}__rotation-reset-button`,error:`${n}__error`},S=g`@layer{.arcgis-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);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}}.arcgis-directional-pad__buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;--calcite-action-group-padding: 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)}@media (hover: none){calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.arcgis-directional-pad__rotation-container{display:block;width:100%;calcite-action{flex:.3}}.arcgis-directional-pad__rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}}`;function B(r){let{x:t,y:e,width:i,height:l}=r.getBoundingClientRect();return{x:t+i/2,y:e+l/2}}function E(r){return r?.spatialReference?.isWebMercator||r?.spatialReference?.isGeographic||!1}var k=w(y),h=class extends v{constructor(){super(...arguments),this.messages=f({}),this._onContextMenu=t=>t.preventDefault(),this._buttons={},this.viewModel=k(this),this.angle=this.viewModel.angle,this.rotation=this.viewModel.rotation,this.autoDestroyDisabled=!1,this.disabled=this.viewModel.disabled,this.hideDirectionalButtons=!1,this.icon="move",this.position="bottom-left",this.showRotationResetButton=!1,this.showRotationSlider=!1,this.state=this.viewModel.state,this.visualScale="s",this.arcgisPropertyChange=m()("state"),this.arcgisReady=b()}static{this.properties={_rotationEnabled:16,angle:16,rotation:16,autoDestroyDisabled:5,disabled:5,hideDirectionalButtons:5,icon:3,label:1,messageOverrides:0,position:3,referenceElement:1,showRotationResetButton:5,showRotationSlider:5,state:3,visualScale:1}}static{this.shadowRootOptions=p}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(()=>[x(()=>this.viewModel.angle,()=>{this._buttonsContainer?.contains(document.activeElement)&&(this.viewModel.angle==null?this.el.childElem?.focus():u(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(i=>i.hasPointerCapture?.(t.pointerId))?.releasePointerCapture(t.pointerId);let e=B(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,i=this.view==null||this.view.type==="2d";return o`<div .ariaLabel=${t??void 0} class=${a({[s.base]:!0,[d.widget]:!0,[d.disabled]:e})} tabindex=-1>${i?this._renderContent():this._renderUnsupportedMessage()}</div>`}_renderUnsupportedMessage(){return o`<section class=${a(s.error)}><p>${this.messages.unsupported}</p></section>`}_renderContent(){return[this.hideDirectionalButtons?void 0:this._renderDirectionalButtons(),this.showRotationSlider?this._renderRotation():void 0]}_renderDirectionalButtons(){return o`<calcite-action-pad expand-disabled layout=grid><calcite-action-group class=${a(s.buttonsContainer)} dir=ltr @contextmenu=${{handleEvent:this._onContextMenu,capture:!0}} ${R(this._setButtonContainerRef)}>${C.slice(0,4).map(this._renderButton,this)}${this._renderCompass()}${C.slice(4).map(this._renderButton,this)}</calcite-action-group></calcite-action-pad>`}_renderButton(t){let{label:e,iconName:i}=M[t],l=this.messages[e];return o`<calcite-action .active=${this.angle===t} alignment=center class=${a(s.button)} data-angle=${t??c} .disabled=${this.disabled} @click=${this._onClick.bind(this,t)} @pointerdown=${this._onButtonPointerDown} .scale=${this.visualScale} .text=${l??""} title=${l??c}><calcite-icon .icon=${i} .scale=${this.visualScale}></calcite-icon></calcite-action>`}_renderCompass(){let t=this.disabled||E(this.view)?"compass-needle":"arrow-up",e=this.rotation===0,i=this.messages.resetHeading;return o`<calcite-action alignment=center class=${a(s.compassButton)} .disabled=${this.disabled||!this._rotationEnabled||e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${_(this._rotateIcon(this.rotation))} .text=${i??""} title=${i??c}>${!e&&o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>`||""}</calcite-action>`}_renderRotation(){return o`<calcite-action-pad expand-disabled layout=horizontal><calcite-action-group class=${a(s.rotationContainer)}>${this.showRotationResetButton?this._renderRotationResetButton():null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-pad>`}_renderRotationResetButton(){let t=this.messages.resetHeading;return o`<calcite-action alignment=center class=${a(s.rotationReset)} .disabled=${this.disabled||!this._rotationEnabled} @click=${this._onRotationReset} .scale=${this.visualScale} .text=${t??""} title=${t??c}><calcite-icon flip-rtl icon=rotate .scale=${this.visualScale}></calcite-icon></calcite-action>`}_renderRotationSlider(){return o`<div class=${a(s.rotationSliderContainer)}><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)} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div>`}};$("arcgis-directional-pad",h);export{h as ArcgisDirectionalPad};