@arcgis/map-components/dist/arcgis-map-components/LW4GPIR5.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{a as u}from"./GND5YSKD.js";import{a as M}from"./NYXWVKGC.js";import{a as C}from"./QKQNYHUC.js";import{a as _}from"./KWBN5CHV.js";import"./JM4XJJFL.js";import"./AX2MGWNF.js";import{A as $,B as y,C as p,D as w,E as D,G as P,a as v,g as f,q as b,r as x,s as g}from"./NIZJVZRG.js";var L=await $arcgis.l("widgets/Swipe/SwipeViewModel");var H=x`@layer{arcgis-swipe,.arcgis-swipe{position:absolute;margin:0;background:transparent!important;padding:0;width:100%;height:100%;overflow:hidden;user-select:none}.arcgis-swipe,.arcgis-ui .arcgis-swipe{pointer-events:none!important}.arcgis-swipe__container{position:absolute;z-index:1;margin:0;outline:0;border:0;padding:0;overflow:hidden;pointer-events:auto;touch-action:none;outline-color:transparent}.arcgis-swipe--horizontal .arcgis-swipe__container{margin-left:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:col-resize;height:100%}.arcgis-swipe--vertical .arcgis-swipe__container{margin-top:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:row-resize;width:100%}.arcgis-swipe--disabled .arcgis-swipe__container{cursor:default;pointer-events:none}.arcgis-swipe__divider{position:absolute;background-color:var(--calcite-color-background)}.arcgis-swipe--horizontal .arcgis-swipe__divider{top:0;left:calc(var(--calcite-spacing-xxxl) / 2);margin-left:calc(var(--calcite-border-width-lg) * .5 * -1);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:var(--calcite-border-width-lg);height:100%}.arcgis-swipe--vertical .arcgis-swipe__divider{top:calc(var(--calcite-spacing-xxxl) / 2);left:0;margin-top:calc(var(--calcite-border-width-lg) * .5 * -1);border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:100%;height:var(--calcite-border-width-lg)}.arcgis-swipe__handle{display:flex;position:relative;align-items:center;justify-content:center;border:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-radius:var(--calcite-corner-radius-round);background-color:var(--calcite-color-background);width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl);color:var(--calcite-color-border-input)}.arcgis-swipe__handle--hidden{visibility:hidden}.arcgis-swipe--vertical .arcgis-swipe__handle{rotate:90deg}.arcgis-swipe__handle-icon{position:relative;z-index:2}.arcgis-swipe--horizontal .arcgis-swipe__handle{top:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.arcgis-swipe--vertical .arcgis-swipe__handle{left:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.arcgis-swipe__container:focus .arcgis-swipe__handle,.arcgis-swipe__container:focus .arcgis-swipe__divider{outline:inset 2px var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}.arcgis-swipe__container:focus .arcgis-swipe__handle{outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}`,l="arcgis-swipe",n={base:l,baseDisabled:`${l}--disabled`,vertical:`${l}--vertical`,horizontal:`${l}--horizontal`,container:`${l}__container`,divider:`${l}__divider`,handle:`${l}__handle`,handleHidden:`${l}__handle--hidden`,handleIcon:`${l}__handle-icon`},O=M(L),m=class extends y{constructor(){super(...arguments),this._container=null,this._swiping=!1,this.messages=C({}),this._pointerOffset=0,this.viewModel=O(this),this._onContainerPointerDown=e=>{e.preventDefault();let{_container:i}=this;i&&document.activeElement!==this.el&&i.focus(),this._swiping=!0,this._calculatePointerOffset(e)},this.autoDestroyDisabled=!1,this.direction=this.viewModel.direction,this.disabled=!1,this.hideDivider=!1,this.hideHandle=!1,this.icon="compare",this.label=this.messages.componentLabel,this.leadingLayers=this.viewModel.leadingLayers,this.position="manual",this.swipePosition=this.viewModel.position,this.state=this.viewModel.state,this.trailingLayers=this.viewModel.trailingLayers,this.arcgisPropertyChange=b()("state"),this.arcgisReady=$()}static{this.properties={autoDestroyDisabled:5,direction:3,disabled:7,hideDivider:7,hideHandle:7,icon:3,label:1,leadingLayers:0,messageOverrides:0,position:3,swipePosition:9,referenceElement:1,state:3,trailingLayers:0}}static{this.shadowRootOptions=f}static{this.styles=H}async destroy(){await this.manager.destroy()}loaded(){this.listenOn(document,"pointermove",this._onContainerPointerMove),this.listenOn(document,"pointerup",this._onContainerPointerUp)}_calculatePointerOffset(e){let{direction:i}=this,t=e.target,r=(i==="vertical"?t.clientHeight:t.clientWidth)/2,a=t.getBoundingClientRect(),o=e.clientX-a.left,d=e.clientY-a.top;this._pointerOffset=i==="vertical"?d-r:o-r}_onContainerPointerUp(e){this._swiping&&(e.preventDefault(),this._swiping=!1)}_onContainerPointerMove(e){if(!this._swiping)return;e.preventDefault();let{_pointerOffset:i,el:t,direction:r}=this,{clientX:a,clientY:o}=e,{top:d,left:s,width:c,height:h}=t.getBoundingClientRect(),z=r==="vertical"?h:c,A=(r==="vertical"?o-d-i:a-s-i)/z*100;this.swipePosition=A}_getKeyPosition(e){let{key:i}=e,{swipePosition:t}=this,{max:r,min:a,step:o,stepMultiplier:d,direction:s}=this.viewModel,c=o*d;if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageUp","PageDown"].includes(i)&&(e.preventDefault(),e.stopPropagation()),s==="vertical"?i==="ArrowDown"||i==="ArrowRight":i==="ArrowUp"||i==="ArrowRight"){let h=e.shiftKey?c:o;return t+h}if(s==="vertical"?i==="ArrowUp"||i==="ArrowLeft":i==="ArrowDown"||i==="ArrowLeft"){let h=e.shiftKey?c:o;return t-h}return i==="Home"?a:i==="End"?r:(s==="vertical"?i==="PageDown":i==="PageUp")?t+c:(s==="vertical"?i==="PageUp":i==="PageDown")?t-c:null}_onContainerKeyDown(e){let i=this._getKeyPosition(e);typeof i=="number"&&(this.swipePosition=i)}render(){let{state:e,direction:i}=this.viewModel,t=e==="disabled"||this.disabled,r={[_.disabled]:t,[n.baseDisabled]:t,[n.vertical]:i==="vertical",[n.horizontal]:i==="horizontal"};return g`<div class=${p(v(n.base,_.widget,r))}>${e==="disabled"?null:this._renderContainer()}</div>`}_renderHandle(){let{direction:e}=this.viewModel,{hideHandle:i}=this,t={[u.dragHorizontal]:e==="vertical",[u.dragVertical]:e==="horizontal"},r=v(n.handle,!!i&&n.handleHidden);return g`<div class=${p(r)} role=presentation><span aria-hidden=true class=${p(v(n.handleIcon,t))}></span></div>`}_renderDivider(){return this.hideDivider?null:g`<div class=${p(n.divider)} role=presentation></div>`}_renderContent(){return[this._renderDivider(),this._renderHandle()]}_renderContainer(){let{disabled:e,viewModel:i}=this,{max:t,min:r,direction:a,position:o}=i,d=this.label??this.messages.dragLabel??"",s=`${o}%`,c={top:a==="vertical"?s:void 0,left:a==="vertical"?void 0:s},h=this._renderContent();return e?g`<div class=${p(n.container)} role=presentation style=${w(c)}>${h}</div>`:g`<div @pointerdown=${this._onContainerPointerDown} .ariaLabel=${d} .ariaOrientation=${a} .ariaValueMax=${`${t}`} .ariaValueMin=${`${r}`} .ariaValueNow=${`${o}`} .ariaValueText=${s} class=${p(n.container)} @keydown=${this._onContainerKeyDown} role=slider style=${w(c)} tabindex=0 title=${d??D} touch-action=none>${h}</div>`}};P("arcgis-swipe",m);export{m as ArcgisSwipe};