@arcgis/core/widgets/ValuePicker/ValuePickerSlider.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import{debounce as t}from"../../core/promiseUtils.js";import{watch as i,initial as s}from"../../core/reactiveUtils.js";import{property as o,subclass as l}from"../../core/accessorSupport/decorators.js";import n from"../Slider.js";import{loadCalciteComponents as r}from"../support/componentsUtils.js";import{tsx as a}from"../support/widget.js";import u from"./ValuePickerBaseComponent.js";import p from"./ValuePickerSliderVisibleElements.js";const d="esri-value-picker__slider",h={minorTick:`${d}__tick-minor`,majorTick:`${d}__tick-major`,stepsTick:`${d}__tick-steps`,tooltip:`${d}__tooltip`};function c(e){return(t,i)=>{i?.classList.add(e)}}let m=class extends u{constructor(e,i){super(e,i),this._majorTickCreatedFunction=c(h.majorTick),this._minorTickCreatedFunction=c(h.minorTick),this._stepsTickCreatedFunction=c(h.stepsTick),this._thumbNode=null,this._tooltip=null,this._slider=new n({thumbCreatedFunction:(e,t,i)=>{this._thumbNode=i}}),this.labelFormatFunction=null,this.labels=null,this.min=null,this.minorTicks=null,this.majorTicks=null,this.max=null,this.reversed=!1,this.steps=null,this.type="slider",this.visibleElements=new p,this._thumbDragDebounced=t(async e=>{await(this._tooltip?.reposition(!1))})}initialize(){this.addHandles([i(()=>this.viewModel?.values,e=>{this._slider.values=e},s),i(()=>this._slider.values,e=>{this.viewModel&&this.viewModel.values!==e&&(this.viewModel.values=e)}),this._slider.on("thumb-drag",this._thumbDragDebounced)])}destroy(){this._slider.destroy()}loadDependencies(){return r({tooltip:()=>import("@esri/calcite-components/dist/components/calcite-tooltip")})}get _ascending(){const{reversed:e,viewModel:t}=this;if(!t)return null;const{layout:i}=t;return"horizontal"===i&&!e||"vertical"===i&&e}get canNext(){const{_ascending:e,min:t,max:i,steps:s,viewModel:o}=this;if(null==e||null==t||null==i||!s?.length||!o)return!1;const{values:l}=o,n=l?.[0];return null==n||(e?n!==s[s.length-1]:n!==s[0])}get canPlay(){return null!=this.viewModel&&!!this.steps?.length&&null!=this.min&&null!=this.max}get canPrevious(){const{_ascending:e,min:t,max:i,steps:s,viewModel:o}=this;if(null==e||null==t||null==i||!s?.length||!o)return!1;const{values:l}=o,n=l?.[0];return null==n||(e?n!==s[0]:n!==s[s.length-1])}render(){const{labels:e,labelFormatFunction:t,min:i,max:s,steps:o,minorTicks:l,majorTicks:n,reversed:r,viewModel:u}=this;if(!u)return a("div",null);const{disabled:p,layout:h}=u,c=`${h}${r?"-reversed":""}`,m="position",v=[];return null!=i&&null!=s&&(l&&v.push({mode:m,values:l,tickCreatedFunction:this._minorTickCreatedFunction}),n&&v.push({mode:m,values:n,tickCreatedFunction:this._majorTickCreatedFunction}),e&&v.push({mode:m,values:e,labelsVisible:!0}),this.visibleElements.steps&&this.steps&&v.push({mode:m,values:this.steps,tickCreatedFunction:this._stepsTickCreatedFunction})),this._slider.set({disabled:p,labelFormatFunction:t,layout:c,min:i,max:s,steps:o,tickConfigs:v}),a("div",{class:d},this._slider.render(),this._renderToolTip())}animate(e){this._step(1,e)}next(){this._step(this._ascending?1:-1)}previous(){this._step(this._ascending?-1:1)}_onTooltipAfterCreate(e){this._tooltip=e}_renderToolTip(){if(!this.visibleElements.thumbTooltip||!this._thumbNode||!this._slider.values)return null;const e=this._slider.viewModel.getLabelForValue(this._slider.values[0],"value");return e?a("calcite-tooltip",{afterCreate:this._onTooltipAfterCreate,class:h.tooltip,referenceElement:this._thumbNode,topLayerDisabled:this.topLayerDisabled},e):null}_step(e,t=!1){if(!this.viewModel||!this.steps?.length)return;if(!this.viewModel.values||!this.steps.includes(this.viewModel.values[0]))return void(this.viewModel.values=[this.steps[0]]);const i=this.steps.indexOf(this.viewModel.values[0])+e;i<0||i>=this.steps.length?this.viewModel.loop||t?this.viewModel.values=[this.steps[1===e?0:this.steps.length-1]]:"playing"===this.viewModel.state&&this.viewModel.pause():this.viewModel.values=[this.steps[i]]}};e([o()],m.prototype,"_ascending",null),e([o()],m.prototype,"canNext",null),e([o()],m.prototype,"canPlay",null),e([o()],m.prototype,"canPrevious",null),e([o()],m.prototype,"labelFormatFunction",void 0),e([o()],m.prototype,"labels",void 0),e([o()],m.prototype,"min",void 0),e([o()],m.prototype,"minorTicks",void 0),e([o()],m.prototype,"majorTicks",void 0),e([o()],m.prototype,"max",void 0),e([o({nonNullable:!0})],m.prototype,"reversed",void 0),e([o()],m.prototype,"steps",void 0),e([o()],m.prototype,"type",void 0),e([o({type:p,nonNullable:!0})],m.prototype,"visibleElements",void 0),m=e([l("esri.widgets.ValuePicker.ValuePickerSlider")],m);const v=m;export{v as default};