jtBaseApp/node_modules/@arcgis/core/widgets/Swipe.js

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.25/esri/copyright.txt for details.
*/
import{_ as e}from"../chunks/tslib.es6.js";import{eventKey as t}from"../core/events.js";import{property as i}from"../core/accessorSupport/decorators/property.js";import"../core/arrayUtils.js";import"../core/accessorSupport/ensureType.js";import{subclass as r}from"../core/accessorSupport/decorators/subclass.js";import n from"./Widget.js";import"./support/widgetUtils.js";import{messageBundle as o}from"./support/decorators/messageBundle.js";import{tsx as s}from"./support/jsxFactory.js";import a from"./Swipe/SwipeViewModel.js";const l={base:"esri-swipe",baseDisabled:"esri-swipe--disabled",vertical:"esri-swipe--vertical",horizontal:"esri-swipe--horizontal",container:"esri-swipe__container",divider:"esri-swipe__divider",handle:"esri-swipe__handle",handleHidden:"esri-swipe__handle--hidden",widgetIcon:"esri-icon-up-down-arrows",handleIcon:"esri-swipe__handle-icon",dragIconHorizontal:"esri-icon-drag-horizontal",dragIconVertical:"esri-icon-drag-vertical",widget:"esri-widget",disabled:"esri-disabled"},d={handle:!0,divider:!0};let c=class extends n{constructor(e,t){super(e,t),this.disabled=!1,this.iconClass=l.widgetIcon,this.messages=null,this.viewModel=new a,this._pointerOffset=null,this._container=null,this._onContainerPointerDown=this._onContainerPointerDown.bind(this),this._onContainerPointerMove=this._onContainerPointerMove.bind(this),this._onContainerPointerUp=this._onContainerPointerUp.bind(this)}get direction(){return this.viewModel.direction}set direction(e){this.viewModel.direction=e}get dragLabel(){return this._get("dragLabel")??this.messages?.dragLabel??""}set dragLabel(e){this._set("dragLabel",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get leadingLayers(){return this.viewModel.leadingLayers}set leadingLayers(e){this.viewModel.leadingLayers=e}get position(){return this.viewModel.position}set position(e){this.viewModel.position=e}get trailingLayers(){return this.viewModel.trailingLayers}set trailingLayers(e){this.viewModel.trailingLayers=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}set visibleElements(e){this._set("visibleElements",{...d,...e})}get visibleElements(){return this._get("visibleElements")||d}render(){const{state:e,direction:t}=this.viewModel,i="disabled"===e||this.disabled,r={[l.disabled]:i,[l.baseDisabled]:i,[l.vertical]:"vertical"===t,[l.horizontal]:"horizontal"===t};return s("div",{class:this.classes(l.base,l.widget,r)},"disabled"===e?null:this.renderContainer())}renderHandle(){const{direction:e}=this.viewModel,{visibleElements:t}=this,i={[l.dragIconHorizontal]:"vertical"===e,[l.dragIconVertical]:"horizontal"===e},r=this.classes(l.handle,!t.handle&&l.handleHidden);return s("div",{key:"handle",role:"presentation",class:r},s("span",{"aria-hidden":"true",class:this.classes(l.handleIcon,i)}))}renderDivider(){const{visibleElements:e}=this;return e&&e.divider?s("div",{key:"divider",role:"presentation",class:l.divider}):null}renderContent(){return[this.renderDivider(),this.renderHandle()]}renderContainer(){const{disabled:e,dragLabel:t,viewModel:i}=this,{max:r,min:n,direction:o,position:a}=i,d=`${a}%`,c={top:"vertical"===o?d:null,left:"vertical"===o?null:d},p=this.renderContent();return s("div",e?{key:"container",role:"presentation",styles:c,class:l.container}:{tabIndex:0,key:"container",bind:this,afterCreate:this._afterContainerCreate,onkeydown:this._onContainerKeyDown,"touch-action":"none",role:"slider",title:t,"aria-label":t,"aria-orientation":o,"aria-valuemax":`${r}`,"aria-valuemin":`${n}`,"aria-valuenow":`${a}`,"aria-valuetext":d,styles:c,class:l.container},p)}_afterContainerCreate(e){this._container=e,e.addEventListener("pointerdown",this._onContainerPointerDown)}_calculatePointerOffset(e){const{direction:t}=this,i=e.target,r=("vertical"===t?i.clientHeight:i.clientWidth)/2,n=i.getBoundingClientRect(),o=e.clientX-n.left,s=e.clientY-n.top;this._pointerOffset="vertical"===t?s-r:o-r}_onContainerPointerDown(e){e.preventDefault(),this._container&&document.activeElement!==this.container&&this._container.focus(),this._calculatePointerOffset(e),document.addEventListener("pointerup",this._onContainerPointerUp),document.addEventListener("pointermove",this._onContainerPointerMove)}_onContainerPointerUp(e){e.preventDefault(),document.removeEventListener("pointerup",this._onContainerPointerUp),document.removeEventListener("pointermove",this._onContainerPointerMove)}_onContainerPointerMove(e){e.preventDefault();const{_pointerOffset:t,container:i,direction:r}=this,{clientX:n,clientY:o}=e,{top:s,left:a,width:l,height:d}=i.getBoundingClientRect(),c=("vertical"===r?o-s-t:n-a-t)/("vertical"===r?d:l)*100;this.position=c}_getKeyPosition(e){const i=t(e),{position:r}=this,{max:n,min:o,step:s,stepMultiplier:a,direction:l}=this.viewModel,d=s*a;["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageUp","PageDown"].includes(i)&&(e.preventDefault(),e.stopPropagation());if("vertical"===l?"ArrowDown"===i||"ArrowRight"===i:"ArrowUp"===i||"ArrowRight"===i){return r+(e.shiftKey?d:s)}if("vertical"===l?"ArrowUp"===i||"ArrowLeft"===i:"ArrowDown"===i||"ArrowLeft"===i){return r-(e.shiftKey?d:s)}if("Home"===i)return o;if("End"===i)return n;if("vertical"===l?"PageDown"===i:"PageUp"===i)return r+d;return("vertical"===l?"PageUp"===i:"PageDown"===i)?r-d:null}_onContainerKeyDown(e){const t=this._getKeyPosition(e);"number"==typeof t&&(this.position=t)}};e([i()],c.prototype,"direction",null),e([i()],c.prototype,"disabled",void 0),e([i()],c.prototype,"dragLabel",null),e([i()],c.prototype,"iconClass",void 0),e([i()],c.prototype,"label",null),e([i()],c.prototype,"leadingLayers",null),e([i(),o("esri/widgets/Swipe/t9n/Swipe")],c.prototype,"messages",void 0),e([i()],c.prototype,"position",null),e([i()],c.prototype,"trailingLayers",null),e([i()],c.prototype,"view",null),e([i({type:a})],c.prototype,"viewModel",void 0),e([i()],c.prototype,"visibleElements",null),c=e([r("esri.widgets.Swipe")],c);const p=c;export{p as default};