@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 10.1 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as M,b as f}from"./NC74EUNL.js";import{a as g,b as n,c as r,h,j as m,k as d,m as u,n as o,p as D}from"./UKPY76M7.js";import{k as C,l as z}from"./XDKVBD6O.js";import"./3FSOG4LN.js";import{d as b}from"./CKRTMNFR.js";import{n as R}from"./3ADX47DD.js";import{d as E}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as x,R as S,c as p,d as y,q as v}from"./BJZTU5BQ.js";var $=2,w={dateStyle:"full"},P=p`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:100%;overflow:visible;border-width:1px;border-style:solid;vertical-align:top;border-color:var(--calcite-date-picker-border-color, var(--calcite-color-border-1));border-radius:var(--calcite-date-picker-corner-radius, 0)}:host([scale=s]){inline-size:236px;min-inline-size:216px;max-inline-size:380px}:host([scale=s][range][layout=horizontal]){inline-size:480px;min-inline-size:432px;max-inline-size:772px}:host([scale=m]){inline-size:298px;min-inline-size:272px;max-inline-size:480px}:host([scale=m][range][layout=horizontal]){inline-size:608px;min-inline-size:544px;max-inline-size:972px}:host([scale=l]){inline-size:334px;min-inline-size:320px;max-inline-size:600px}:host([scale=l][range][layout=horizontal]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}:host([hidden]){display:none}[hidden]{display:none}`,A=class extends x{constructor(){super(),this.rangeValueChangedByUser=!1,this.messages=b({blocking:!0}),this.layout="horizontal",this.monthStyle="wide",this.proximitySelectionDisabled=!1,this.range=!1,this.scale="m",this.calciteDatePickerChange=v({cancelable:!1}),this.calciteDatePickerRangeChange=v({cancelable:!1}),this.listen("keydown",this.keyDownHandler)}static{this.properties={activeEndDate:[16,{},{state:!0}],activeStartDate:[16,{},{state:!0}],dateTimeFormat:[16,{},{state:!0}],endAsDate:[16,{},{state:!0}],hoverRange:[16,{},{state:!0}],localeData:[16,{},{state:!0}],startAsDate:[16,{},{state:!0}],activeDate:[0,{},{attribute:!1}],activeRange:[3,{},{reflect:!0}],headingLevel:[11,{},{type:Number,reflect:!0}],layout:[3,{},{reflect:!0}],max:[3,{},{reflect:!0}],maxAsDate:[0,{},{attribute:!1}],messageOverrides:[0,{},{attribute:!1}],min:[3,{},{reflect:!0}],minAsDate:[0,{},{attribute:!1}],monthStyle:1,numberingSystem:[3,{},{reflect:!0}],proximitySelectionDisabled:[7,{},{reflect:!0,type:Boolean}],range:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],value:1,valueAsDate:[0,{},{attribute:!1}]}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=P}async reset(){this.resetActiveDates(),this.rangeValueChangedByUser=!1}async setFocus(){await E(this),R(this.el)}connectedCallback(){super.connectedCallback(),Array.isArray(this.value)?this.valueAsDate=f(this.value):this.value&&(this.valueAsDate=r(this.value)),this.min&&(this.minAsDate=r(this.min)),this.max&&(this.maxAsDate=r(this.max)),this.setActiveStartAndEndDates()}async load(){await this.loadLocaleData(),this.onMinChanged(this.min),this.onMaxChanged(this.max)}willUpdate(t){t.has("activeDate")&&this.activeDateWatcher(this.activeDate),t.has("value")&&this.valueHandler(this.value),t.has("valueAsDate")&&this.valueAsDateWatcher(this.valueAsDate),t.has("min")&&this.onMinChanged(this.min),t.has("max")&&this.onMaxChanged(this.max),t.has("messages")&&this.hasUpdated&&this.loadLocaleData().catch(console.error)}activeDateWatcher(t){this.range&&(this.rangeValueChangedByUser||(t?(this.activeStartDate=t,this.activeEndDate=o(this.activeStartDate)):this.resetActiveDates()))}valueHandler(t){Array.isArray(t)?(this.valueAsDate=f(t),this.rangeValueChangedByUser||this.resetActiveDates()):t&&(this.valueAsDate=r(t))}valueAsDateWatcher(t){this.range&&Array.isArray(t)&&!this.rangeValueChangedByUser?this.setActiveStartAndEndDates():t&&t!==this.activeDate&&(this.activeDate=t)}onMinChanged(t){this.minAsDate=r(t),this.range&&this.setActiveStartAndEndDates()}onMaxChanged(t){this.maxAsDate=r(t),this.range&&this.setActiveStartAndEndDates()}keyDownHandler(t){t.key==="Escape"&&this.resetActiveDates()}async loadLocaleData(){C.numberFormatOptions={numberingSystem:this.numberingSystem,locale:this.messages._lang,useGrouping:!1},this.localeData=await M(this.messages._lang),this.dateTimeFormat=z(this.messages._lang,w)}monthHeaderSelectChange(t){let e=new Date(t.detail.date),a=t.detail.position;this.range?a==="end"?(this.activeEndDate=e,this.activeStartDate=d(e)):(this.activeStartDate=e,this.activeEndDate=o(e)):this.activeDate=e,t.stopPropagation()}monthActiveDateChange(t){let e=new Date(t.detail);if(!this.range)this.activeDate=e;else{let a=e.getMonth(),i=a!==this.activeStartDate.getMonth()&&a!==o(this.activeStartDate).getMonth();this.activeRange==="end"?(!this.activeEndDate||this.activeStartDate&&i)&&(this.activeEndDate=e,this.activeStartDate=d(e)):(this.activeStartDate&&i||!this.activeStartDate)&&(this.activeStartDate=e,this.activeEndDate=o(e))}t.stopPropagation()}monthHoverChange(t){if(!this.range){this.hoverRange=void 0;return}let{valueAsDate:e}=this,a=Array.isArray(e)&&e[0],i=Array.isArray(e)&&e[1],s=new Date(t.detail);if(this.hoverRange={focused:this.activeRange||"start",start:a,end:i},this.proximitySelectionDisabled)i&&a||!i&&s>=a?(this.hoverRange.focused="end",this.hoverRange.end=s):!i&&s<a?this.hoverRange={focused:"start",start:s,end:a}:this.hoverRange=void 0;else if(this.activeRange)this.activeRange==="end"?(this.hoverRange.end=s,this.hoverRange.focused="end"):(this.hoverRange.start=s,this.hoverRange.focused="start");else if(a&&i){let l=Math.abs(D(s,a)),c=Math.abs(D(s,i));s>i?(this.hoverRange.end=s,this.hoverRange.focused="end"):s<a?(this.hoverRange.start=s,this.hoverRange.focused="start"):s>a&&s<i&&(l<c?(this.hoverRange.start=s,this.hoverRange.focused="start"):(this.hoverRange.end=s,this.hoverRange.focused="end"))}else a&&(s<a?this.hoverRange={focused:"start",start:s,end:a}:(this.hoverRange.end=s,this.hoverRange.focused="end"));t.stopPropagation()}monthMouseOutChange(t){this.hoverRange&&(this.hoverRange=void 0),t.stopPropagation()}resetActiveDates(){let{valueAsDate:t}=this;!Array.isArray(t)&&t&&t!==this.activeDate&&(this.activeDate=new Date(t)),Array.isArray(t)&&(t[0]&&t[0]!==this.activeStartDate&&(this.activeStartDate=new Date(t[0])),t[1]&&t[1]!==this.activeEndDate&&(this.activeEndDate=new Date(t[1]))),this.hoverRange=void 0}getEndDate(){return Array.isArray(this.valueAsDate)&&this.valueAsDate[1]||void 0}setEndDate(t){let e=this.getStartDate();this.rangeValueChangedByUser=!0,this.value=[h(e),h(t)],this.valueAsDate=[e,t],t&&this.calciteDatePickerRangeChange.emit()}getStartDate(){return Array.isArray(this.valueAsDate)&&this.valueAsDate[0]}setStartDate(t){let e=this.getEndDate();this.rangeValueChangedByUser=!0,this.value=[h(t),h(e)],this.valueAsDate=[t,e],this.calciteDatePickerRangeChange.emit()}monthDateChange(t){let e=new Date(t.detail),a=h(e);if(!this.range&&a===h(this.valueAsDate))return;if(!this.range){this.value=a||"",this.valueAsDate=e||null,this.activeDate=e||null,this.calciteDatePickerChange.emit();return}let i=this.getStartDate(),s=this.getEndDate();if(!i||!s&&e<i)i&&this.setEndDate(new Date(i)),this.activeRange=="end"?this.setEndDate(e):this.setStartDate(e);else if(!s)this.setEndDate(e);else if(this.proximitySelectionDisabled)this.setStartDate(e),this.setEndDate(null);else if(this.activeRange)this.activeRange=="end"?this.setEndDate(e):(e>s&&(this.setEndDate(null),this.activeEndDate=null),this.setStartDate(e));else{let l=D(e,i),c=D(e,s);c===0||l<0?this.setStartDate(e):l===0||c<0?this.setEndDate(e):l<c?this.setStartDate(e):this.setEndDate(e)}t.stopPropagation(),this.calciteDatePickerChange.emit()}getActiveDate(t,e,a){let i=n(new Date,e,a);return n(this.activeDate,e,a)||t||(m(a,i)&&!this.range?u(i,e,a):i)}getActiveEndDate(t,e,a){return n(this.activeEndDate,e,a)||t||n(o(new Date),e,a)}setActiveStartAndEndDates(){if(this.range){let t=n(Array.isArray(this.valueAsDate)?this.valueAsDate[0]:this.valueAsDate,this.minAsDate,this.maxAsDate),e=n(Array.isArray(this.valueAsDate)?this.valueAsDate[1]:null,this.minAsDate,this.maxAsDate);if(this.activeStartDate=this.getActiveDate(t,this.minAsDate,this.maxAsDate),this.activeEndDate=this.getActiveEndDate(e,this.minAsDate,this.maxAsDate),m(this.activeStartDate,this.activeEndDate)){let a=u(d(this.activeEndDate),this.minAsDate,this.maxAsDate),i=o(this.activeEndDate);g(a,this.minAsDate,this.maxAsDate)?this.activeStartDate=a:g(i,this.minAsDate,this.maxAsDate)&&(this.activeEndDate=i)}}}render(){let t=n(this.range&&Array.isArray(this.valueAsDate)?this.valueAsDate[0]:this.valueAsDate,this.minAsDate,this.maxAsDate),e=this.getActiveDate(t,this.minAsDate,this.maxAsDate),a=this.range&&Array.isArray(this.valueAsDate)?n(this.valueAsDate[1],this.minAsDate,this.maxAsDate):null,i=this.range&&this.activeRange?this.activeRange==="start"?this.minAsDate:t:this.minAsDate,s=this.range?this.activeStartDate:e;return this.renderMonth(s,this.maxAsDate,i,t,a)}renderMonth(t,e,a,i,s){return this.localeData&&y`<calcite-date-picker-month .activeDate=${t} .dateTimeFormat=${this.dateTimeFormat} .endDate=${this.range?s:void 0} .headingLevel=${this.headingLevel||$} .hoverRange=${this.hoverRange} .layout=${this.layout} .localeData=${this.localeData} .max=${e} .messages=${this.messages} .min=${a} .monthStyle=${this.monthStyle} =${this.monthHoverChange} =${this.monthDateChange} =${this.monthActiveDateChange} =${this.monthHeaderSelectChange} =${this.monthMouseOutChange} .range=${this.range} .scale=${this.scale} .selectedDate=${this.activeRange==="end"?s:i} .startDate=${this.range?i:void 0}></calcite-date-picker-month>`||""}};S("calcite-date-picker",A);export{A as DatePicker};