@arcgis/core/widgets/ValuePicker.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{deprecateWidget as t}from"../core/deprecate.js";import o from"../core/Logger.js";import{destroyMaybe as i}from"../core/maybe.js";import{on as s}from"../core/reactiveUtils.js";import{property as l,subclass as n}from"../core/accessorSupport/decorators.js";import a from"./Widget.js";import{loadCalciteComponents as r}from"./support/componentsUtils.js";import{globalCss as p}from"./support/globalCss.js";import{messageBundle as c,vmEvent as u,tsx as d}from"./support/widget.js";import m from"./ValuePicker/ValuePickerCollection.js";import h from"./ValuePicker/ValuePickerCombobox.js";import v from"./ValuePicker/ValuePickerLabel.js";import y from"./ValuePicker/ValuePickerSlider.js";import b from"./ValuePicker/ValuePickerViewModel.js";import g from"./ValuePicker/ValuePickerVisibleElements.js";const w="esri-value-picker",M={actionBar:`${w}__action-bar`,caption:`${w}__caption`,captionBorder:`${w}__caption-border`,captionText:`${w}__caption-text`,separator:`${w}__separator`},k={base:null,key:"type",typeMap:{collection:m,combobox:h,label:v,slider:y}};let x=class extends a{constructor(e,i){super(e,i),this.caption=null,this.messages=null,this.messagesCommon=null,this.viewModel=new b,this.visibleElements=new g,this.announceDeprecation=()=>{t(o.getLogger(this),"Value Picker","arcgis-value-picker-legacy",{version:"5.0"})}}initialize(){this.addHandles([s(()=>this.viewModel,"animate",({first:e})=>{this.component?.animate(e)}),s(()=>this.viewModel,"next",()=>{this.component?.next()}),s(()=>this.viewModel,"previous",()=>{this.component?.previous()})])}destroy(){this.component=i(this.component)}loadDependencies(){return r({action:()=>import("@esri/calcite-components/dist/components/calcite-action"),"action-bar":()=>import("@esri/calcite-components/dist/components/calcite-action-bar")})}get canNext(){return this.component?.canNext??!0}get canPlay(){return this.component?.canPlay??!0}get canPrevious(){return this.component?.canPrevious??!0}set component(e){const t=this._get("component");e!==t&&(t?.viewModel===this.viewModel&&(t.viewModel=null),e&&t?.destroy()),e&&(e.viewModel??=this.viewModel),this._set("component",e)}get disabled(){return this.viewModel.disabled}set disabled(e){this.viewModel.disabled=e}get icon(){return"list-rectangle"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get layout(){return this.viewModel.layout}set layout(e){this.viewModel.layout=e}get loop(){return this.viewModel.loop}set loop(e){this.viewModel.loop=e}get playRate(){return this.viewModel.playRate}set playRate(e){this.viewModel.playRate=e}get values(){return this.viewModel.values}set values(e){this.viewModel.values=e}next(){this.viewModel.next()}pause(){this.viewModel.pause()}play(){this.viewModel.play()}previous(){this.viewModel.previous()}render(){const{disabled:e,state:t}=this.viewModel,o="playing"===t,i="horizontal"===this.layout,{control:s,pagination:l}=this.messagesCommon,{pause:n,play:a}=s,{previous:r,up:c,next:u,down:m}=l,h=o?n:a,v=this.visibleElements.playButton&&d("calcite-action",{active:o,alignment:"center",bind:this,disabled:e||!this.canPlay,icon:o?"pause":"play",key:"play",onclick:o?this.pause:this.play,text:h,title:h}),y=i?r:c,b=this.visibleElements.previousButton&&d("calcite-action",{alignment:"center",bind:this,disabled:e||o||!this.canPrevious,icon:i?"chevron-left":"chevron-up",key:"previous",onclick:this.previous,text:y,title:y}),g=i?u:m,k=this.visibleElements.nextButton&&d("calcite-action",{alignment:"center",bind:this,disabled:e||o||!this.canNext,icon:i?"chevron-right":"chevron-down",key:"next",onclick:this.next,text:g,title:g}),x=this.caption&&d("div",{class:M.caption},d("div",{class:M.captionBorder},d("div",{class:M.captionText},this.caption))),P="combobox"===this.component?.type||"label"===this.component?.type||"slider"===this.component?.type,f=(v||b||k)&&(x||P)&&d("div",{class:M.separator}),V=this.component?.render();return d("div",{"aria-label":this.label,class:this.classes(w,p.widget,`${w}__layout--${this.layout}`,`${w}__type--${this.component?.type}`)},d("calcite-action-bar",{class:M.actionBar,expandDisabled:!0,layout:this.layout},[v,b,k,f,x,V]))}};e([l()],x.prototype,"canNext",null),e([l()],x.prototype,"canPlay",null),e([l()],x.prototype,"canPrevious",null),e([l()],x.prototype,"caption",void 0),e([l({types:k,value:null})],x.prototype,"component",null),e([l()],x.prototype,"disabled",null),e([l()],x.prototype,"icon",null),e([l()],x.prototype,"label",null),e([l()],x.prototype,"layout",null),e([l()],x.prototype,"loop",null),e([l(),c("esri/widgets/ValuePicker/t9n/ValuePicker")],x.prototype,"messages",void 0),e([l(),c("esri/t9n/common")],x.prototype,"messagesCommon",void 0),e([l()],x.prototype,"playRate",null),e([l()],x.prototype,"values",null),e([l(),u(["animate","next","pause","play","previous"])],x.prototype,"viewModel",void 0),e([l({type:g,nonNullable:!0})],x.prototype,"visibleElements",void 0),x=e([n("esri.widgets.ValuePicker")],x);const P=x;export{P as default};