@arcgis/core/widgets/ScaleRangeSlider.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"../intl.js";import{on as t}from"../core/events.js";import{destroyMaybe as i}from"../core/maybe.js";import{watch as l,initial as a,when as s}from"../core/reactiveUtils.js";import{property as n}from"../core/accessorSupport/decorators/property.js";import{cast as o}from"../core/accessorSupport/decorators/cast.js";import"../core/has.js";import"../core/RandomLCG.js";import{subclass as r}from"../core/accessorSupport/decorators/subclass.js";import c from"./Slider.js";import m from"./Widget.js";import{css as d}from"./ScaleRangeSlider/css.js";import{getScalePreviewSource as u,getScalePreviewSpriteBackgroundPosition as p}from"./ScaleRangeSlider/scalePreviewUtils.js";import v from"./ScaleRangeSlider/ScaleRanges.js";import h from"./ScaleRangeSlider/ScaleRangeSliderViewModel.js";import{loadCalciteComponents as S}from"./support/componentsUtils.js";import{globalCss as M}from"./support/globalCss.js";import{storeNode as b,setFocus as g}from"./support/widgetUtils.js";import{messageBundle as _}from"./support/decorators/messageBundle.js";import{tsx as f}from"./support/jsxFactory.js";import{formatNumber as w}from"../intl/number.js";import{substitute as y}from"../intl/substitute.js";const x={preview:!0,scaleMenus:{maxScaleMenu:!0,minScaleMenu:!0}},I={maximumFractionDigits:0},L="1:",T=16;let C=class extends m{constructor(e,i){super(e,i),this._activeMenu=null,this._activeThumb=null,this._customInput=null,this._maxThumbNode=null,this._minThumbNode=null,this._previewAutoCloseTimeoutId=void 0,this._previewPopover=null,this._slider=new c({thumbCreatedFunction:(e,i,l)=>{0===e?this._minThumbNode=l:1===e&&(this._maxThumbNode=l),this.addHandles([t(l,"mouseenter",(()=>{this._activeThumb=e,this.scheduleRender()})),t(l,"mouseleave",(()=>{this._previewAutoCloseTimeoutId||(this._activeThumb=null,this.scheduleRender())}))])}}),this.disabled=!1,this.messages=null,this.region="US",this.viewModel=new h,this.visibleElements=x,this._afterInputNumberCreate=e=>{"value"in e&&null!=e.value&&"setNumberValue"in e&&e.setNumberValue({committing:!1,value:e.value,origin:"direct"}),this._customInput=e},this._handleCustomScaleInputChange=(e,t)=>{const{viewModel:{scaleRanges:i}}=this,l=Number.parseFloat(t.value);Number.isNaN(l)?t.value=e:this._setScale(i.clampScale(l))}}loadDependencies(){return S({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),dropdown:()=>import("@esri/calcite-components/dist/components/calcite-dropdown"),"dropdown-group":()=>import("@esri/calcite-components/dist/components/calcite-dropdown-group"),"dropdown-item":()=>import("@esri/calcite-components/dist/components/calcite-dropdown-item"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),"input-number":()=>import("@esri/calcite-components/dist/components/calcite-input-number"),label:()=>import("@esri/calcite-components/dist/components/calcite-label"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover")})}initialize(){this.addHandles([l((()=>this.viewModel),(e=>this._slider.viewModel=e?.sliderViewModel??null),a),l((()=>this._interactive),(e=>{this._slider.disabled=!e,e||this._setActiveMenu(null)}),a),this._slider.on("thumb-drag",(({index:e})=>{this._activeThumb=e,clearTimeout(this._previewAutoCloseTimeoutId);const t=250;this._previewAutoCloseTimeoutId=setTimeout((()=>{this._previewAutoCloseTimeoutId=void 0,this._activeThumb=null}),t)})),s((()=>!0===this.view?.stationary),(()=>this.scheduleRender()))])}destroy(){this._slider=i(this._slider)}get _maxScaleMenuEnabled(){const{scaleMenus:e}=this.visibleElements;return!0===e||"boolean"!=typeof e&&e.maxScaleMenu}get _minScaleMenuEnabled(){const{scaleMenus:e}=this.visibleElements;return!0===e||"boolean"!=typeof e&&e.minScaleMenu}get _interactive(){return"disabled"!==this.viewModel?.state&&!this.disabled}get effectiveMaxScale(){return this.viewModel.effectiveMaxScale}get effectiveMinScale(){return this.viewModel.effectiveMinScale}get effectiveMaxScaleLimit(){return this.viewModel.effectiveMaxScaleLimit}get effectiveMinScaleLimit(){return this.viewModel.effectiveMinScaleLimit}get icon(){return"actual-size"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get layer(){return this.viewModel.layer}set layer(e){this.viewModel.layer=e}get maxScale(){return this.viewModel.maxScale}set maxScale(e){this.viewModel.maxScale=e}get maxScaleLimit(){return this.viewModel.maxScaleLimit}set maxScaleLimit(e){this.viewModel.maxScaleLimit=e}get mode(){return this.viewModel.mode}set mode(e){this.viewModel.mode=e}get minScale(){return this.viewModel.minScale}set minScale(e){this.viewModel.minScale=e}get minScaleLimit(){return this.viewModel.minScaleLimit}set minScaleLimit(e){this.viewModel.minScaleLimit=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}castVisibleElements(e){return{...x,...e,scaleMenus:"boolean"==typeof e?.scaleMenus?e.scaleMenus:{...x.scaleMenus,...e?.scaleMenus}}}formatScale(e){return`${L}${w(e,I)}`}render(){const{_interactive:e,_slider:t,label:i,view:l,viewModel:{state:a}}=this,s=this._getLabel("min"),n=this._getLabel("max"),{segmentElements:o}=t,r=o.at("min-scale-only"===this.mode?-1:-2);return r&&r.classList.add(d.segmentElementActive),f("div",{"aria-label":i,class:this.classes(d.base,M.widget,e?null:M.disabled)},f("div",{class:d.scaleIndicatorWrapper,dir:"ltr"},"ready"===a&&l?this._renderCurrentScaleIndicator():null,t.render(),this._renderPreviewPopover()),f("div",{class:d.scaleMenuContainer},this._minScaleMenuEnabled&&s?this._renderScaleMenuToggle("min",s):null,f("div",{class:d.scaleMenuSeparator}),this._maxScaleMenuEnabled&&n?this._renderScaleMenuToggle("max",n):null))}_renderPreviewPopover(){const{_activeThumb:e}=this,t=null!=e&&this.visibleElements.preview,i=t?0===e?this._minThumbNode:this._maxThumbNode:"";return f("calcite-popover",{afterCreate:b,afterUpdate:()=>this._previewPopover?.reposition(),bind:this,"data-node-ref":"_previewPopover",label:this.messages.preview,offsetDistance:T,open:t,overlayPositioning:"fixed",placement:"top",referenceElement:i,triggerDisabled:!0},this._renderScalePreview())}_renderScalePreview(){const{_activeThumb:e,_slider:t,region:i,viewModel:{scaleRanges:l}}=this,a=0===e||"range"!==this.mode?t.values[0]:t.values[1],s=Object.keys(v.RecommendedScales).indexOf(l.findScaleRangeByIndex(a).id),n={backgroundImage:u(i),backgroundPosition:p(s)};return f("div",{class:d.scalePreview},f("div",{class:d.scalePreviewThumbnail,styles:n}))}_getLabel(e){const{_slider:t,messages:i,mode:l,viewModel:{scaleRanges:a}}=this,[s,n]=t.values,o="min"===e||"range"!==l?s:n,r=i.scaleRangeLabels[a.findScaleRangeByIndex(o).id];switch(l){case"range":return r;case"max-scale-only":return"min"===e?null:r;case"min-scale-only":return"min"===e?r:null}}_renderScaleMenuToggle(e,t){const{_activeMenu:i,_interactive:l}=this,a=i===e;return[f("calcite-dropdown",{closeOnSelectDisabled:!0,"data-type":e,open:a,overlayPositioning:"fixed",placement:"max"===e?"bottom-end":"bottom-start",scale:"s",onCalciteDropdownClose:({currentTarget:t})=>{this._activeMenu===e&&this._setActiveMenu(null),g(t.querySelector("calcite-button"))},onCalciteDropdownOpen:()=>this._setActiveMenu(e)},f("calcite-button",{appearance:a?"outline":"transparent","aria-pressed":a.toString(),class:d.scaleMenuToggle,disabled:!l,iconEnd:"chevron-down",scale:"s",slot:"trigger"},t),a&&"max"===e?this._renderMaxScaleMenu():null,a&&"min"===e?this._renderMinScaleMenu():null)]}_renderMinScaleMenu(){const{effectiveMaxScale:e,effectiveMinScaleLimit:t,view:i,viewModel:{scaleRanges:l}}=this,a=i?i.scale:void 0;return this._renderScaleMenu({type:"min",min:t,max:l.findScaleRange(e).minScale,viewScale:a})}_renderMaxScaleMenu(){const{effectiveMinScale:e,effectiveMaxScaleLimit:t,view:i,viewModel:{scaleRanges:l}}=this,a=i?i.scale:void 0;return this._renderScaleMenu({type:"max",min:l.findScaleRange(e).maxScale,max:t,viewScale:a})}_renderScaleMenu({viewScale:e,min:t,max:i,type:l}){const{effectiveMaxScale:a,effectiveMinScale:s,messages:n}=this,o="max"===l?a:s,r=v.fromScaleRange({minScale:t,maxScale:i}),c=this.messages.featuredScaleLabels,m=v.RecommendedScales,d=Object.keys(m).filter((e=>r.contains(m[e]))).map((e=>this._renderScaleMenuItem({scaleLabel:c[e],scaleValue:m[e],isSelected:o===m[e],valueVisible:"world"!==e})));return f("calcite-dropdown-group",{key:`${this.id}__scale-menu--${l}`},this._renderCustomScaleValue({currentScale:o}),null!=e?this._renderScaleMenuItem({scaleValue:e,scaleLabel:n.featuredScaleLabels.current,isSelected:o===e,valueVisible:!0}):null,d)}_renderCustomScaleValue({currentScale:e}){const{messages:t}=this,i=Math.round(e).toString();return f("calcite-dropdown-item",{afterCreate:e=>{g(e)},key:"custom-scale",label:t.featuredScaleLabels.custom,onCalciteDropdownItemSelect:()=>{g(this._customInput)}},f("calcite-label",{scale:"s"},f("span",null,t.featuredScaleLabels.custom),f("calcite-input-number",{afterCreate:this._afterInputNumberCreate,groupSeparator:!0,inputMode:"numeric",max:v.RecommendedScales.world,min:0,numberButtonType:"none",placeholder:t.customScaleInputTooltip,prefixText:L,scale:"s",step:1,value:i,onCalciteInputNumberChange:({currentTarget:e})=>this._handleCustomScaleInputChange(i,e)})))}_renderScaleMenuItem(e){const{scaleValue:t,scaleLabel:i,valueVisible:l,isSelected:a}=e;return f("calcite-dropdown-item",{key:i,label:i,selected:a,onCalciteDropdownItemSelect:this._setScale.bind(this,t)},i,l?f("div",{class:d.scaleMenuSubLabel},this.formatScale(t)):void 0)}_renderCurrentScaleIndicator(){const{_slider:e,messages:t,view:i,viewModel:{scaleRanges:l}}=this,a=l.clampScale(i.scale),s=this.viewModel.mapScaleToSlider(a),n=s/e.max,o=t.scaleRangeLabels[l.findScaleRangeByIndex(s).id],r=y(t.currentScaleTooltip,{scaleLabel:o});return f("div",{class:d.scaleIndicatorContainer,key:"scale-indicator"},f("div",{"aria-label":r,class:d.scaleIndicator,styles:{left:100*n+"%"},title:r},this.renderCurrentScaleIndicatorIcon()))}renderCurrentScaleIndicatorIcon(){return f("calcite-icon",{class:d.scaleIndicatorIcon,icon:"caret-up",scale:"s"})}_setScale(e){"max"===this._activeMenu?this.maxScale=Math.min(e,this.effectiveMinScale-1):this.minScale=Math.max(e,this.effectiveMaxScale+1),this._setActiveMenu(null)}_setActiveMenu(e){this._activeMenu=e}};e([n()],C.prototype,"_activeMenu",void 0),e([n()],C.prototype,"_activeThumb",void 0),e([n()],C.prototype,"_customInput",void 0),e([n()],C.prototype,"_maxScaleMenuEnabled",null),e([n()],C.prototype,"_minScaleMenuEnabled",null),e([n()],C.prototype,"_slider",void 0),e([n({readOnly:!0})],C.prototype,"_interactive",null),e([n()],C.prototype,"disabled",void 0),e([n()],C.prototype,"effectiveMaxScale",null),e([n()],C.prototype,"effectiveMinScale",null),e([n()],C.prototype,"effectiveMaxScaleLimit",null),e([n()],C.prototype,"effectiveMinScaleLimit",null),e([n()],C.prototype,"icon",null),e([n()],C.prototype,"label",null),e([n()],C.prototype,"layer",null),e([n()],C.prototype,"maxScale",null),e([n()],C.prototype,"maxScaleLimit",null),e([n(),_("esri/widgets/ScaleRangeSlider/t9n/ScaleRangeSlider")],C.prototype,"messages",void 0),e([n()],C.prototype,"mode",null),e([n()],C.prototype,"minScale",null),e([n()],C.prototype,"minScaleLimit",null),e([n()],C.prototype,"region",void 0),e([n()],C.prototype,"view",null),e([n()],C.prototype,"viewModel",void 0),e([n()],C.prototype,"visibleElements",void 0),e([o("visibleElements")],C.prototype,"castVisibleElements",null),C=e([r("esri.widgets.ScaleRangeSlider")],C);const R=C;export{R as default};