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

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
*/
import{_ as e}from"../../chunks/tslib.es6.js";import{debounce as t}from"../../core/promiseUtils.js";import{watch as s,initial as i}from"../../core/reactiveUtils.js";import{property as o}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/Logger.js";import"../../core/RandomLCG.js";import{subclass as l}from"../../core/accessorSupport/decorators/subclass.js";import r from"../Slider.js";import{loadCalciteComponents as n}from"../support/componentsUtils.js";import"../support/widgetUtils.js";import{tsx as a}from"../support/jsxFactory.js";import u from"./ValuePickerBaseComponent.js";import p from"./ValuePickerSliderVisibleElements.js";const c="esri-value-picker__slider",d={minorTick:`${c}__tick-minor`,majorTick:`${c}__tick-major`,stepsTick:`${c}__tick-steps`,tooltip:`${c}__tooltip`};function h(e){return(t,s)=>{s?.classList.add(e)}}let m=class extends u{constructor(e,s){super(e,s),this._majorTickCreatedFunction=h(d.majorTick),this._minorTickCreatedFunction=h(d.minorTick),this._stepsTickCreatedFunction=h(d.stepsTick),this._thumbNode=null,this._tooltip=null,this._slider=new r({thumbCreatedFunction:(e,t,s)=>{this._thumbNode=s}}),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([s((()=>this.viewModel?.values),(e=>{this._slider.values=e}),i),s((()=>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 n({tooltip:()=>import("@esri/calcite-components/dist/components/calcite-tooltip")})}get _ascending(){const{reversed:e,viewModel:t}=this;if(!t)return null;const{layout:s}=t;return"horizontal"===s&&!e||"vertical"===s&&e}get canNext(){const{_ascending:e,min:t,max:s,steps:i,viewModel:o}=this;if(null==e||null==t||null==s||!i?.length||!o)return!1;const{values:l}=o,r=l?.[0];return null==r||(e?r!==i[i.length-1]:r!==i[0])}get canPlay(){return null!=this.viewModel&&!!this.steps?.length&&null!=this.min&&null!=this.max}get canPrevious(){const{_ascending:e,min:t,max:s,steps:i,viewModel:o}=this;if(null==e||null==t||null==s||!i?.length||!o)return!1;const{values:l}=o,r=l?.[0];return null==r||(e?r!==i[0]:r!==i[i.length-1])}render(){const{labels:e,labelFormatFunction:t,min:s,max:i,steps:o,minorTicks:l,majorTicks:r,reversed:n,viewModel:u}=this;if(!u)return a("div",null);const{disabled:p,layout:d}=u,h=`${d}${n?"-reversed":""}`,m="position",v=[];return null!=s&&null!=i&&(l&&v.push({mode:m,values:l,tickCreatedFunction:this._minorTickCreatedFunction}),r&&v.push({mode:m,values:r,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:h,min:s,max:i,steps:o,tickConfigs:v}),a("div",{class:c},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:d.tooltip,referenceElement:this._thumbNode},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 s=this.steps.indexOf(this.viewModel.values[0])+e;s<0||s>=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[s]]}};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};