12345 |
- /*
- 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 t from"../TimeInterval.js";import{equals as i}from"../core/arrayUtils.js";import s from"../core/Collection.js";import{neverReached as n}from"../core/compilerUtils.js";import{isSome as a,isNone as o,applySome as r}from"../core/maybe.js";import{watch as l,initial as m}from"../core/reactiveUtils.js";import{truncateDate as u,offsetDate as d}from"../core/timeUtils.js";import{property as c}from"../core/accessorSupport/decorators/property.js";import"../core/accessorSupport/ensureType.js";import{subclass as p}from"../core/accessorSupport/decorators/subclass.js";import{formatDate as v,convertDateFormatToIntlOptions as h}from"../intl/date.js";import w from"./Slider.js";import f from"./Widget.js";import{accessibleHandler as y}from"./support/decorators/accessibleHandler.js";import{messageBundle as x}from"./support/decorators/messageBundle.js";import{vmEvent as b}from"./support/decorators/vmEvent.js";import{tsx as _}from"./support/jsxFactory.js";import{onResize as g}from"./support/widgetUtils.js";import{getCalciteThemeClass as k}from"../support/themeUtils.js";import T from"./TimeSlider/TimeSliderViewModel.js";const j="esri-time-slider",E={widgetIcon:"esri-icon-time-clock",esriWidget:"esri-widget",esriWidgetButton:"esri-widget--button",esriButtonDisabled:"esri-button--disabled",esriDisabled:"esri-disabled",timeSlider:`${j}`,timeSliderOutOfBounds:`${j}--out-of-bounds`,timeSliderMode:`${j}__mode--`,timeSliderLayout:`${j}__layout--`,timeSliderRow:`${j}__row`,animation:`${j}__animation`,animationButton:`${j}__animation-button`,animationPlay:"esri-icon-play",animationPause:"esri-icon-pause",timeExtent:`${j}__time-extent`,timeExtentGroup:`${j}__time-extent-group`,timeExtentDate:`${j}__time-extent-date`,timeExtentTime:`${j}__time-extent-time`,timeExtentSeparator:`${j}__time-extent-separator`,playbackControls:`${j}__playback-controls`,min:`${j}__min`,minDate:`${j}__min-date`,minTime:`${j}__min-time`,slider:`${j}__slider`,sliderMajorTick:"majorTick",sliderMinorTick:"minorTick",max:`${j}__max`,maxDate:`${j}__max-date`,maxTime:`${j}__max-time`,previous:`${j}__previous`,previousButton:`${j}__previous-button`,previousIcon:"esri-icon-reverse",next:`${j}__next`,nextButton:`${j}__next-button`,nextIcon:"esri-icon-forward",warning:`${j}__warning`,warningIcon:"esri-icon-notice-triangle",warningText:`${j}__warning-text`,hasActions:`${j}--has-actions`,actions:`${j}__actions`,actionsButton:`${j}__actions-button`},M=3,S=858,$=new s([{minor:new t({value:100,unit:"milliseconds"}),major:new t({value:1,unit:"seconds"}),format:{second:"numeric"}},{minor:new t({value:500,unit:"milliseconds"}),major:new t({value:5,unit:"seconds"}),format:{second:"numeric"}},{minor:new t({value:1,unit:"seconds"}),major:new t({value:20,unit:"seconds"}),format:{minute:"numeric",second:"numeric"}},{minor:new t({value:2,unit:"seconds"}),major:new t({value:30,unit:"seconds"}),format:{minute:"numeric",second:"numeric"}},{minor:new t({value:10,unit:"seconds"}),major:new t({value:1,unit:"minutes"}),format:{minute:"numeric"}},{minor:new t({value:15,unit:"seconds"}),major:new t({value:5,unit:"minutes"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:1,unit:"minutes"}),major:new t({value:20,unit:"minutes"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:5,unit:"minutes"}),major:new t({value:2,unit:"hours"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:15,unit:"minutes"}),major:new t({value:6,unit:"hours"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:1,unit:"hours"}),major:new t({value:1,unit:"days"}),format:{day:"numeric",month:"short"}},{minor:new t({value:6,unit:"hours"}),major:new t({value:1,unit:"weeks"}),format:{day:"numeric",month:"short"}},{minor:new t({value:1,unit:"days"}),major:new t({value:1,unit:"months"}),format:{month:"long"}},{minor:new t({value:2,unit:"days"}),major:new t({value:1,unit:"months"}),format:{month:"short"}},{minor:new t({value:3,unit:"days"}),major:new t({value:1,unit:"months"}),format:{month:"short"}},{minor:new t({value:4,unit:"days"}),major:new t({value:3,unit:"months"}),format:{month:"short",year:"numeric"}},{minor:new t({value:1,unit:"weeks"}),major:new t({value:1,unit:"years"}),format:{year:"numeric"}},{minor:new t({value:1,unit:"months"}),major:new t({value:1,unit:"years"}),format:{year:"numeric"}},{minor:new t({value:2,unit:"months"}),major:new t({value:2,unit:"years"}),format:{year:"numeric"}},{minor:new t({value:1,unit:"years"}),major:new t({value:1,unit:"decades"}),format:{year:"numeric"}},{minor:new t({value:2,unit:"years"}),major:new t({value:5,unit:"decades"}),format:{year:"numeric"}},{minor:new t({value:5,unit:"decades"}),major:new t({value:10,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:1,unit:"centuries"}),major:new t({value:10,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:2,unit:"centuries"}),major:new t({value:20,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:5,unit:"centuries"}),major:new t({value:50,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:10,unit:"centuries"}),major:new t({value:100,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:20,unit:"centuries"}),major:new t({value:200,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:50,unit:"centuries"}),major:new t({value:500,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:100,unit:"centuries"}),major:new t({value:1e3,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:200,unit:"centuries"}),major:new t({value:1e3,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:500,unit:"centuries"}),major:new t({value:5e3,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:1e3,unit:"centuries"}),major:new t({value:1e4,unit:"centuries"}),format:{era:"short",year:"numeric"}}]);let C=class extends f{constructor(e,t){super(e,t),this._ignoreNextSliderUpdate=!1,this._slider=new w({precision:0,visibleElements:{rangeLabels:!1},rangeLabelInputsEnabled:!1,thumbsConstrained:!1}),this._tickFormat=null,this.disabled=!1,this.iconClass=E.widgetIcon,this.labelFormatFunction=null,this.messages=null,this.messagesCommon=null,this.tickConfigs=null,this.timeVisible=!1,this.viewModel=new T}initialize(){this.addHandles([l((()=>this._slider.values),(e=>{if(this._ignoreNextSliderUpdate)return void(this._ignoreNextSliderUpdate=!1);const t=this.viewModel.valuesToTimeExtent(e);a(this.timeExtent)?a(t)?this.timeExtent.equals(t)||(this.timeExtent=t):this.timeExtent=null:a(t)&&(this.timeExtent=t)})),l((()=>this.effectiveStops),(()=>this._updateSliderSteps()),m)])}loadDependencies(){return Promise.all([import("@esri/calcite-components/dist/components/calcite-action.js"),import("@esri/calcite-components/dist/components/calcite-action-menu.js")])}destroy(){this._slider.destroy(),this._tickFormat=null}get actions(){return this.viewModel.actions}set actions(e){this.viewModel.actions=e}get effectiveStops(){return this.viewModel.effectiveStops}get fullTimeExtent(){return this.viewModel.fullTimeExtent}set fullTimeExtent(e){this.viewModel.fullTimeExtent=e}get interactive(){return!this.disabled&&"disabled"!==this.viewModel?.state}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}set layout(e){["auto","compact","wide"].includes(e)||(e="auto"),this._set("layout",e)}get loop(){return this.viewModel.loop}set loop(e){this.viewModel.loop=e}get mode(){return this.viewModel.mode}set mode(e){this.viewModel.mode=e}get playRate(){return this.viewModel.playRate}set playRate(e){this.viewModel.playRate=e}get stops(){return this.viewModel.stops}set stops(e){this.viewModel.stops=e}get timeExtent(){return this.viewModel.timeExtent}set timeExtent(e){this.viewModel.timeExtent=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}static async getPropertiesFromWebMap(e,t){return T.getPropertiesFromWebMap(e,t)}next(){return this.viewModel.next()}play(){return this.viewModel.play()}previous(){return this.viewModel.previous()}stop(){return this.viewModel.stop()}render(){const{_slider:e,actions:t,domNode:s,effectiveStops:n,fullTimeExtent:l,interactive:m,messages:u,messagesCommon:d,mode:c,tickConfigs:p,timeExtent:h,timeVisible:w,viewModel:{state:f,timeExtentValues:y}}=this;if(a(l)){const{start:t,end:i}=l;if(a(t)&&a(i)){const s=t.getTime(),n=i.getTime(),o=e.min!==s||e.max!==n;if(o&&(e.min=s,e.max=n),a(p))e.tickConfigs!==p&&(e.tickConfigs=p);else{const t=(n-s)/(e.trackElement?.offsetWidth||400),i=$.find((e=>e.minor.toMilliseconds()>M*t)),a=this._tickFormat!==i&&null!=i;if(a&&(this._tickFormat=i),o||a){const t={mode:"position",values:this._getTickPositions(i.minor),labelsVisible:!1,tickCreatedFunction:(e,t)=>{t.classList.add(E.sliderMinorTick)}},s={mode:"position",values:this._getTickPositions(i.major),labelsVisible:!0,tickCreatedFunction:(e,t)=>{t.classList.add(E.sliderMajorTick)},labelFormatFunction:e=>v(e,i.format)};e.tickConfigs=[t,s]}}}}const x=o(this.fullTimeExtent)||o(this.timeExtent)||this.timeExtent.isAllTime||this.timeExtent.isEmpty||a(this.timeExtent.start)&&(this.timeExtent.start<this.fullTimeExtent.start||this.timeExtent.start>this.fullTimeExtent.end)||a(this.timeExtent.end)&&(this.timeExtent.end>this.fullTimeExtent.end||this.timeExtent.end<this.fullTimeExtent.start);if(x)switch(this._ignoreNextSliderUpdate=!0,c){case"time-window":e.values=[e.min,e.max];break;case"instant":case"cumulative-from-end":e.values=[e.min];break;case"cumulative-from-start":e.values=[e.max]}else a(y)?i(e.values,y)||(e.values=y):e.values=null;e.disabled=!m;const b="ready"===f,T="playing"===f,j=x||!m||o(n)||0===n.length,C="auto"===this.layout?s.clientWidth<S?"compact":"wide":this.layout,D=_("div",{class:E.animation},_("button",{"aria-disabled":j?"true":"false","aria-label":T?d.control.stop:d.control.play,bind:this,class:this.classes(E.esriWidgetButton,E.animationButton,j&&E.esriButtonDisabled),disabled:j,title:T?d.control.stop:d.control.play,onclick:this._playOrStopClick,type:"button"},_("div",{class:this.classes((b||j)&&E.animationPlay,T&&E.animationPause)}))),F=a(this.labelFormatFunction)?_("div",{key:"extent",bind:this,class:E.timeExtentDate,"data-type":"extent","data-layout":C,"data-date":r(h,(e=>[e.start,e.end])),afterCreate:this._createLabel,afterUpdate:this._createLabel}):o(h)||a(h)&&h.isAllTime?[_("div",{class:this.classes(E.warning,E.warningIcon)}),_("div",{key:"warning-text",class:E.warningText},u.noTimeExtent)]:h.isEmpty?[_("div",{class:this.classes(E.warning,E.warningIcon)}),_("div",{key:"warning-text",class:E.warningText},u.emptyTimeExtent)]:[a(h.start)&&_("div",{key:"start-date-group",class:E.timeExtentGroup},_("div",{key:"start-date",class:E.timeExtentDate},this._formatDate(h.start)),w&&_("div",{key:"start-time",class:E.timeExtentTime},this._formatTime(h.start))),a(h.start)&&a(h.end)&&h.start.getTime()!==h.end.getTime()&&_("div",{key:"separator",class:E.timeExtentSeparator},"–"),a(h.end)&&(o(h.start)||h.start.getTime()!==h.end.getTime())&&_("div",{key:"end-date-group",class:E.timeExtentGroup},_("div",{key:"end-date",class:E.timeExtentDate},this._formatDate(h.end)),w&&_("div",{key:"end-time",class:E.timeExtentTime},this._formatTime(h.end)))],B=_("div",{class:this.classes(E.timeExtent,!m&&E.esriButtonDisabled)},[F]),L=a(this.labelFormatFunction)?_("div",{key:"min-date",bind:this,class:E.minDate,"data-date":r(l,(e=>e.start)),"data-type":"min","data-layout":C,afterCreate:this._createLabel,afterUpdate:this._createLabel}):a(l)&&a(l.start)&&[_("div",{key:"min-date",class:E.minDate},this._formatDate(l.start)),w&&_("div",{key:"min-time",class:E.minTime},this._formatTime(l.start))],U=_("div",{class:this.classes(E.min,!m&&E.esriButtonDisabled)},[L]),W=_("div",{class:E.slider},e.render()),I=a(this.labelFormatFunction)?_("div",{key:"max-date",bind:this,class:E.maxDate,"data-date":r(l,(e=>e.end)),"data-type":"max","data-layout":C,afterCreate:this._createLabel,afterUpdate:this._createLabel}):a(l)&&a(l.end)&&[_("div",{key:"max-date",class:E.maxDate},this._formatDate(l.end)),w&&_("div",{key:"max-time",class:E.maxTime},this._formatTime(l.end))],R=_("div",{class:this.classes(E.max,!m&&E.esriButtonDisabled)},[I]),P=_("div",{class:E.previous},_("button",{"aria-disabled":j?"true":"false","aria-label":d.pagination.previous,bind:this,class:this.classes(E.esriWidgetButton,E.previousButton,(T||j)&&E.esriButtonDisabled),disabled:j,title:d.pagination.previous,onclick:this._previousClick,type:"button"},_("div",{class:E.previousIcon}))),A=_("div",{class:E.next},_("button",{"aria-disabled":j?"true":"false","aria-label":d.pagination.next,bind:this,class:this.classes(E.esriWidgetButton,E.nextButton,(T||j)&&E.esriButtonDisabled),disabled:j,title:d.pagination.next,onclick:this._nextClick,type:"button"},_("div",{class:E.nextIcon}))),O=t?.length>0,V=O&&_("div",{class:E.actions,title:d.options},_("calcite-action-menu",{label:d.options,class:E.actionsButton},t.toArray().map((e=>_("calcite-action",{bind:this,icon:e.icon,id:e.id,onCalciteActionClick:()=>this.viewModel.triggerAction(e),text:e.title,textEnabled:!0})))));return _("div",{class:this.classes(E.timeSlider,E.esriWidget,`${E.timeSliderMode}${c}`,`${E.timeSliderLayout}${C}`,!m&&E.esriDisabled,x&&E.timeSliderOutOfBounds,O&&E.hasActions,k()),afterCreate:e=>{this.addHandles(g(e,(()=>this.scheduleRender())))},"aria-label":u.widgetLabel},"wide"===C&&_("div",{class:E.timeSliderRow},_("div",{class:E.playbackControls},[D,B,U,W,R,P,A]),V),"compact"===C&&[_("div",{key:"time-slider-row-1",class:E.timeSliderRow},[B,V]),_("div",{key:"time-slider-row-2",class:E.timeSliderRow},[W]),_("div",{key:"time-slider-row-3",class:E.timeSliderRow},[U,P,D,A,R])])}updateWebDocument(e){this.viewModel?.updateWebDocument(e)}_createLabel(e){if(o(this.labelFormatFunction))return;const t=e.getAttribute("data-type"),i=e.getAttribute("data-layout"),s=e["data-date"];this.labelFormatFunction(s,t,e,i)}_getTickPositions(e){const{fullTimeExtent:t}=this;if(o(t)||o(t.start)||o(t.end))return[];const{start:i,end:s}=t,n=[],{value:a,unit:r}=e;let l=u(i,r);for(;l.getTime()<=s.getTime();)l.getTime()>=i.getTime()&&n.push(l.getTime()),l=d(l,a,r);return n}_formatDate(e){return e?v(e,h("short-date")):null}_formatTime(e){return e?v(e,h("long-time")):null}_updateSliderSteps(){this._slider.steps=a(this.effectiveStops)&&this.effectiveStops.length>0?this.effectiveStops.map((e=>e.getTime())):null}_playOrStopClick(){switch(this.viewModel.state){case"ready":this.viewModel.play();break;case"playing":this.viewModel.stop();break;case"disabled":break;default:n(this.viewModel.state)}}_previousClick(){this.viewModel.previous()}_nextClick(){this.viewModel.next()}};e([c()],C.prototype,"actions",null),e([c()],C.prototype,"disabled",void 0),e([c()],C.prototype,"effectiveStops",null),e([c()],C.prototype,"fullTimeExtent",null),e([c()],C.prototype,"iconClass",void 0),e([c({readOnly:!0})],C.prototype,"interactive",null),e([c()],C.prototype,"label",null),e([c()],C.prototype,"labelFormatFunction",void 0),e([c({value:"auto"})],C.prototype,"layout",null),e([c()],C.prototype,"loop",null),e([c(),x("esri/widgets/TimeSlider/t9n/TimeSlider")],C.prototype,"messages",void 0),e([c(),x("esri/t9n/common")],C.prototype,"messagesCommon",void 0),e([c()],C.prototype,"mode",null),e([c()],C.prototype,"playRate",null),e([c()],C.prototype,"stops",null),e([c()],C.prototype,"tickConfigs",void 0),e([c()],C.prototype,"timeExtent",null),e([c({nonNullable:!0})],C.prototype,"timeVisible",void 0),e([c()],C.prototype,"view",null),e([c({type:T}),b("trigger-action")],C.prototype,"viewModel",void 0),e([y()],C.prototype,"_playOrStopClick",null),e([y()],C.prototype,"_previousClick",null),e([y()],C.prototype,"_nextClick",null),C=e([p("esri.widgets.TimeSlider")],C);const D=C;export{D as default};
|