@doegis/core/widgets/Daylight.js

DOE GIS API

import{_ as e}from"../chunks/tslib.es6.js";import t from"../core/Logger.js";import{applySome as i,isNone as s}from"../core/maybe.js";import{watch as o,syncAndInitial as l,when as r,sync as a}from"../core/reactiveUtils.js";import{property as n}from"../core/accessorSupport/decorators/property.js";import"../core/accessorSupport/ensureType.js";import"../core/arrayUtils.js";import{subclass as d}from"../core/accessorSupport/decorators/subclass.js";import c from"./Widget.js";import{CSS as h}from"./Daylight/css.js";import p from"./Daylight/DaylightViewModel.js";import m from"./Daylight/VisibleElements.js";import{ORDERED_SEASONS as g}from"./Daylight/support/daylightUtils.js";import u from"./Daylight/support/SliderWithDropdown.js";import y from"./support/DatePicker.js";import{Heading as b}from"./support/Heading.js";import{getTimezoneInfos as v}from"./support/timeWidgetUtils.js";import"./support/widgetUtils.js";import{messageBundle as w}from"./support/decorators/messageBundle.js";import{tsx as _,tsxFragment as S}from"./support/jsxFactory.js";const k=/(.*)\s(.*)/,f="date",M="esri.widgets.Daylight";let C=class extends c{constructor(e,t){super(e,t),this.headingLevel=3,this.iconClass=h.widgetIcon,this.viewModel=new p,this.visibleElements=new m,this.dateOrSeason=f,this._timeSlider=new u({viewModel:this.viewModel.timeSliderViewModel,steps:this.timeSliderSteps,labelInputsEnabled:!1,visibleElements:{labels:!0},tickConfigs:[{mode:"position",values:[0,360,720,1080,1439],labelsVisible:!0,tickCreatedFunction:this._onPrimaryTickCreated.bind(this)},{mode:"position",values:[120,240,480,600,840,960,1200,1320],tickCreatedFunction:this._onSecondaryTickCreated.bind(this)}],items:[]}),this._datePicker=new y({viewModel:this.viewModel.datePickerViewModel,commitOnMonthChange:!0}),this._onPlayDayClick=()=>{this.viewModel.toggleDayPlaying()},this._onYearPlayClick=()=>{this.viewModel.toggleYearPlaying()},this._onSeasonChange=e=>{const t=e.target;this.viewModel.currentSeason=t.value},this._onSunLightingCheckboxChange=()=>{this.viewModel.toggleSunLightingEnabled()},this._onShadowCheckboxChange=()=>{this.viewModel.toggleDirectShadowsEnabled()}}get gmtOffsets(){return i(this.timezoneMessages,v)}get label(){return this.messages?.title??""}set label(e){this._overrideIfSome("label",e)}get playSpeedMultiplier(){return this.viewModel.playSpeedMultiplier}set playSpeedMultiplier(e){this.viewModel.playSpeedMultiplier=e}get timeSliderSteps(){return this._timeSlider?.steps??5}set timeSliderSteps(e){this._timeSlider.steps=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}get test(){return{datePicker:this._datePicker}}get _useAmPm(){const e=this._timeSlider.viewModel.getLabelForValue(0,"tick");return null!=e&&k.test(e)}get _labelAlignmentClass(){const e=this.viewModel.timeSliderViewModel.values?.[0]??0,t=60*(this._useAmPm?4:3),i=60*(this._useAmPm?21:21.5);return e<t?h.sliderAlignLeft:e>i?h.sliderAlignRight:null}postInitialize(){this.viewModel.isSupported&&this.addHandles([o((()=>this.viewModel.datePickerViewModel),(e=>this._datePicker.viewModel=e),l),o((()=>this.viewModel.timeSliderViewModel),(e=>this._timeSlider.viewModel=e),l),o((()=>this.timezoneMessages.chooseTimezone),(e=>this._timeSlider.buttonTooltip=e),l),o((()=>this.visibleElements?.timezone),(e=>this._timeSlider.showDropDown=e),l),o((()=>!this.viewModel.sunLightingEnabled),(e=>{this._datePicker.disabled=e,this._timeSlider.disabled=e}),l),r((()=>this.gmtOffsets),(e=>{this._timeSlider.items=e.map((e=>({utcOffset:e.utcOffset,name:e.short,label:[e.shortWithUTC,e.long]})))}),l),o((()=>[this.viewModel.utcOffset,this.gmtOffsets]),(()=>this._onUTCOffsetChange()),l),r((()=>!this.visible),(()=>this._datePicker?.close(!1)),a)])}destroy(){this._datePicker.destroy(),this._timeSlider.destroy()}render(){const{messages:e,viewModel:t,visibleElements:i}=this,s=t.isSupported;return _("div",{class:this.classes(h.base,h.widget)},s?_(S,null,i.header&&_(b,{level:this.headingLevel},e.title),this._renderTimeOptions(),i.datePicker&&this._renderDateOrSeason(),i.sunLightingToggle&&this._renderSunLightingToggle(),i.shadowsToggle&&this._renderShadowsToggle()):_("div",{key:"unsupported",class:h.panelError},_("p",null,e.unsupported)))}loadDependencies(){return Promise.all([import("@esri/calcite-components/dist/components/calcite-button.js"),import("@esri/calcite-components/dist/components/calcite-checkbox.js"),import("@esri/calcite-components/dist/components/calcite-label.js")])}_renderTimeOptions(){const{viewModel:e,visibleElements:t,messages:i}=this,{directShadowsEnabled:s,dayPlaying:o}=e,l=!e.sunLightingEnabled;return _("div",{class:this.classes(h.dayContainer,this._labelAlignmentClass,{[h.shadowOn]:s,[h.shadowOff]:!s,[h.sliderDateOn]:t.datePicker,[h.sliderDateOff]:!t.datePicker,[h.sliderAmPmOn]:this._useAmPm,[h.containerDisabled]:l}),key:"daylight-time-options"},this._timeSlider.render(),t.playButtons&&this._renderPlayPauseButton({playing:o,disabled:l,label:i.playDay,onClick:this._onPlayDayClick}))}_renderDateOptions(){const{viewModel:e,visibleElements:t,messages:i}=this,{yearPlaying:s}=e,o=!e.sunLightingEnabled;return _("div",{key:"daylight-date-options",class:this.classes(h.dateContainer,o&&h.containerDisabled)},this._datePicker.render(),t.playButtons&&this._renderPlayPauseButton({playing:s,disabled:o,label:i.playYear,onClick:this._onYearPlayClick}))}_renderPlayPauseButton({playing:e,disabled:t,label:i,onClick:s}){return _("calcite-button",{appearance:"solid",class:h.playPauseButton,disabled:t,iconStart:e?"pause-f":"play-f",label:i,round:!0,title:i,type:"button",onclick:s})}_renderSeasonOptions(){const{messages:e,viewModel:t}=this,i=!t.sunLightingEnabled;return _("select",{class:this.classes(h.select,h.seasonPicker,i&&h.seasonPickerDisabled),disabled:i,value:t.currentSeason,"aria-label":e.season,onchange:this._onSeasonChange},g.map((t=>_("option",{value:t},e[t]))))}_renderDateOrSeason(){return"date"===this.dateOrSeason?this._renderDateOptions():this._renderSeasonOptions()}_renderSunLightingToggle(){const e=this.messages?.sunLightingToggle;return _("calcite-label",{key:"date-time-toggle",layout:"inline",title:e?.tooltip,scale:"s"},_("calcite-checkbox",{class:h.sunLightingCheckbox,checked:this.viewModel.sunLightingEnabled,onCalciteCheckboxChange:this._onSunLightingCheckboxChange}),e?.label)}_renderShadowsToggle(){const e=this.messages.shadowsToggle;return _("calcite-label",{key:"shadow-toggle",layout:"inline",title:e?.tooltip,scale:"s"},_("calcite-checkbox",{class:h.shadowsCheckbox,checked:this.viewModel.directShadowsEnabled,onCalciteCheckboxChange:this._onShadowCheckboxChange}),e.label)}_onUTCOffsetChange(){const e=this.viewModel.utcOffset,t=this._timeSlider.currentItem?.utcOffset,i=this.gmtOffsets;if(s(i)||t===e)return;const o=i.findIndex((({utcOffset:t})=>t===e));o>-1&&(this._timeSlider.currentIndex=o)}_onPrimaryTickCreated(e,t,i){t.classList.add(...P,h.primaryTick),i.classList.add(...P,h.primaryTickLabel),i.onclick=t.onclick=this._makeGoToTime(e);const s=i.textContent,o=null!=s&&k.exec(s);o&&(i.innerHTML=`${o[1]}<br><div class=${h.primaryTickAmPm}>${o[2]}</div>`)}_onSecondaryTickCreated(e,t){t.classList.add(...P,h.secondaryTick),t.onclick=this._makeGoToTime(e)}_makeGoToTime(e){return()=>{this.viewModel.timeSliderPosition=e}}};e([n({readOnly:!0})],C.prototype,"gmtOffsets",null),e([n(),w("esri/widgets/Daylight/t9n/Daylight")],C.prototype,"messages",void 0),e([n(),w("esri/widgets/support/t9n/timezone")],C.prototype,"timezoneMessages",void 0),e([n()],C.prototype,"headingLevel",void 0),e([n()],C.prototype,"iconClass",void 0),e([n()],C.prototype,"label",null),e([n()],C.prototype,"playSpeedMultiplier",null),e([n()],C.prototype,"timeSliderSteps",null),e([n()],C.prototype,"view",null),e([n({type:p})],C.prototype,"viewModel",void 0),e([n({type:m,nonNullable:!0})],C.prototype,"visibleElements",void 0),e([n({cast:e=>"season"===e||"date"===e?e:(t.getLogger(M).warn(`"${e}" is not a valid option. Acceptable values are only "date" or "season". Defaulting to "${f}".`),f)})],C.prototype,"dateOrSeason",void 0),e([n()],C.prototype,"_timeSlider",void 0),e([n()],C.prototype,"_useAmPm",null),e([n()],C.prototype,"_labelAlignmentClass",null),e([n()],C.prototype,"_datePicker",void 0),C=e([d(M)],C);const P=["esri-interactive","esri-widget__anchor"],O=C;export{O as default};