@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 11.7 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 b,b as v,j as l,m as F,n as C,q as w}from"./UKPY76M7.js";import"./XDKVBD6O.js";import{a as I}from"./YXZ62PQO.js";import"./3FSOG4LN.js";import{b as H}from"./5RDOSP2E.js";import{E as R,F as u,R as A,c as x,d as f,q as y}from"./BJZTU5BQ.js";var d={calendar:"calendar",calendarContainer:"calendar-container",calendarStart:"calendar--start",currentDay:"current-day",dayContainer:"day-container",insideRangeHover:"inside-range--hover",month:"month",noncurrent:"noncurrent",outsideRangeHover:"outside-range--hover",weekDays:"week-days",weekHeader:"week-header",weekHeaderContainer:"week-header-container"},L=x`:host([hidden]){display:none}[hidden]{display:none}.calendar-container{display:flex;inline-size:100%}:host([range][layout=vertical]) .calendar-container{flex-direction:column}.calendar{inline-size:100%}.week-header-container{display:flex;block-size:16px;padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-md)}.week-header{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-bold);inline-size:14.2857142857%;color:var(--calcite-date-picker-week-header-text-color, var(--calcite-color-text-3))}.day-container{display:flex;inline-size:100%;min-inline-size:0px;justify-content:center}.day-container calcite-date-picker-day{inline-size:100%}.week-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;padding-inline:var(--calcite-spacing-sm);padding-block-end:var(--calcite-spacing-sm)}.month-header{display:flex;inline-size:100%;justify-content:space-between}.month{display:flex;inline-size:100%;flex-direction:column;justify-content:space-between}.day{font-size:var(--calcite-font-size)}:host([scale=s]) .week-days{padding-inline:var(--calcite-spacing-xs);padding-block-end:var(--calcite-spacing-xs)}:host([scale=s]) .week-header-container{padding-inline:var(--calcite-spacing-xs);padding-block:var(--calcite-spacing-sm)}:host([scale=s]) .day{font-size:var(--calcite-font-size-sm)}:host([scale=l]) .week-header{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .week-days{padding-inline:var(--calcite-spacing-md);padding-block-end:var(--calcite-spacing-md)}:host([scale=l]) .week-header-container{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-md-plus)}:host([scale=l]) .day{font-size:var(--calcite-font-size-md)}.calendar--start{border-width:0px;border-style:solid;border-color:var(--calcite-date-picker-range-calendar-divider-color, var(--calcite-color-border-1))}:host([range][layout=horizontal]) .calendar--start{border-inline-end-width:var(--calcite-border-width-sm)}:host([range][layout=vertical]) .calendar--start{border-block-end-width:var(--calcite-border-width-sm)}.noncurrent{pointer-events:none;opacity:0}`,p=7,M=6,P=42,S=class extends R{constructor(){super(),this.activeDate=new Date,this.range=!1,this.calciteInternalDatePickerDayHover=y({cancelable:!1}),this.calciteInternalDatePickerDaySelect=y({cancelable:!1}),this.calciteInternalDatePickerMonthActiveDateChange=y({cancelable:!1}),this.calciteInternalDatePickerMonthChange=y({cancelable:!1}),this.calciteInternalDatePickerMonthMouseOut=y({cancelable:!1}),this.listen("pointerout",this.pointerOutHandler),this.listen("focusout",this.disableActiveFocus)}static{this.properties={focusedDate:[16,{},{state:!0}],activeDate:[0,{},{attribute:!1}],dateTimeFormat:[0,{},{attribute:!1}],endDate:[0,{},{attribute:!1}],headingLevel:[11,{},{type:Number,reflect:!0}],hoverRange:[0,{},{attribute:!1}],layout:[3,{},{reflect:!0}],localeData:[0,{},{attribute:!1}],max:[0,{},{attribute:!1}],messages:[0,{},{attribute:!1}],min:[0,{},{attribute:!1}],monthStyle:1,range:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],selectedDate:[0,{},{attribute:!1}],startDate:[0,{},{attribute:!1}]}}static{this.styles=L}load(){this.focusedDate=this.selectedDate||this.activeDate}willUpdate(e){e.has("activeDate")&&this.updateFocusedDateWithActive(this.activeDate),e.has("selectedDate")&&(this.focusedDate=this.selectedDate)}updateFocusedDateWithActive(e){this.selectedDate||(this.focusedDate=b(e,this.min,this.max)?e:v(e,this.min,this.max))}keyDownHandler(e){if(e.defaultPrevented)return;let a=this.el.dir==="rtl",t=e.target.value;switch(e.key){case"ArrowUp":e.preventDefault(),this.addDays(-7,t);break;case"ArrowRight":e.preventDefault(),this.addDays(a?-1:1,t);break;case"ArrowDown":e.preventDefault(),this.addDays(7,t);break;case"ArrowLeft":e.preventDefault(),this.addDays(a?1:-1,t);break;case"PageUp":e.preventDefault(),this.addMonths(-1,t);break;case"PageDown":e.preventDefault(),this.addMonths(1,t);break;case"Home":e.preventDefault(),this.activeDate.setDate(1),this.addDays(0,t);break;case"End":e.preventDefault(),this.activeDate.setDate(new Date(this.activeDate.getFullYear(),this.activeDate.getMonth()+1,0).getDate()),this.addDays(0,t);break;case"Enter":case" ":e.preventDefault();break;case"Tab":this.activeFocus=!1}}disableActiveFocus(){this.activeFocus=!1}pointerOutHandler(){this.calciteInternalDatePickerMonthMouseOut.emit()}addMonths(e,a){let t=new Date(a);t.setMonth(a.getMonth()+e),this.calciteInternalDatePickerMonthActiveDateChange.emit(v(t,this.min,this.max)),this.focusedDate=v(t,this.min,this.max),this.activeFocus=!0,this.calciteInternalDatePickerDayHover.emit(t)}addDays(e=0,a){let t=new Date(a);t.setDate(a.getDate()+e),this.calciteInternalDatePickerMonthActiveDateChange.emit(v(t,this.min,this.max)),this.focusedDate=v(t,this.min,this.max),this.activeFocus=!0,this.calciteInternalDatePickerDayHover.emit(t)}getPreviousMonthDays(e,a,t){let s=new Date(a,e,0),i=s.getDate(),n=s.getDay(),c=[];if(n===(t+M)%p)return c;if(n===t)return[i];for(let o=(p+n-t)%p;o>=0;o--)c.push(i-o);return c}getCurrentMonthDays(e,a){let t=new Date(a,e+1,0).getDate(),s=[];for(let i=0;i<t;i++)s.push(i+1);return s}getNextMonthDays(e,a,t){let s=new Date(a,e+1,0).getDay(),i=[];if(s===(t+M)%p)return i;for(let n=0;n<(M-(s-t))%p;n++)i.push(n+1);return i}betweenSelectedRange(e){return!!(this.startDate&&this.endDate&&e>this.startDate&&e<this.endDate&&!this.isRangeHover(e))}isSelected(e){return!!(l(e,this.selectedDate)||this.startDate&&l(e,this.startDate)||this.endDate&&l(e,this.endDate))}isStartOfRange(e){return!!(this.startDate&&!l(this.startDate,this.endDate)&&l(this.startDate,e)&&!this.isEndOfRange(e))}isEndOfRange(e){return!!(this.endDate&&!l(this.startDate,this.endDate)&&l(this.endDate,e)||!this.endDate&&this.hoverRange&&l(this.startDate,this.hoverRange.end)&&l(e,this.hoverRange.end))}dayHover(e){let a=e.target;a.disabled?this.calciteInternalDatePickerMonthMouseOut.emit():this.calciteInternalDatePickerDayHover.emit(a.value),e.stopPropagation()}daySelect(e){let a=e.target;this.activeFocus=!1,this.calciteInternalDatePickerDaySelect.emit(a.value),e.stopPropagation()}isFocusedOnStart(){return this.hoverRange?.focused==="start"}isHoverInRange(){if(!this.hoverRange||!this.startDate)return!1;let{start:e,end:a}=this.hoverRange,t=this.isFocusedOnStart(),s=this.startDate&&a>this.startDate,i=this.endDate&&a<this.endDate,n=this.startDate&&e>this.startDate,c=this.endDate&&e<this.endDate,o=!t&&this.startDate&&s&&(!this.endDate||i),h=t&&this.startDate&&n&&c;return o||h}isRangeHover(e){if(!this.hoverRange)return!1;let{start:a,end:t}=this.hoverRange,s=this.isFocusedOnStart(),i=this.isHoverInRange(),n=e>a&&e<this.startDate,c=e<t&&e>this.endDate,o=e>t&&e<this.endDate,h=e<a&&e>this.startDate,g=e<t&&e>this.startDate,r=e>a&&e<this.endDate,D=this.startDate&&this.endDate;if(i){if(D)return s?e<this.endDate&&(h||n):o||c;if(this.startDate&&!this.endDate)return s?n:g;if(!this.startDate&&this.endDate)return s?r:c}else if(D)return s?n:c}getDays(e,a,t,s="start"){let i=this.activeDate.getMonth(),n=i+1;i=s==="end"?n:i;let c=0,o=()=>c++%7,h=this.activeDate.getFullYear();return[...e.map(r=>({active:!1,day:r,dayInWeek:o(),date:new Date(h,i-1,r)})),...a.map(r=>{let D=new Date(h,i,r),m=l(D,new Date);return{active:this.focusedDate&&this.focusedDate!==this.startDate&&this.focusedDate!==this.endDate?l(D,this.focusedDate):l(D,this.startDate)||l(D,this.endDate),currentMonth:!0,currentDay:m,day:r,dayInWeek:o(),date:D,ref:!0}}),...t.map(r=>({active:!1,day:r,dayInWeek:o(),date:new Date(h,n,r)}))]}monthHeaderSelectChange(e){let a=new Date(e.detail),t=e.target;this.updateFocusableDate(a),e.stopPropagation(),this.calciteInternalDatePickerMonthChange.emit({date:a,position:t.position})}updateFocusableDate(e){!this.selectedDate||!this.range?this.focusedDate=this.getFirstValidDateOfMonth(e):this.selectedDate&&this.range&&(!w(this.startDate,e)||!w(this.endDate,e))&&(this.focusedDate=this.getFirstValidDateOfMonth(e))}getFirstValidDateOfMonth(e){return e.getDate()===1?e:F(e,this.min,this.max)}render(){let e=this.activeDate.getMonth(),a=this.activeDate.getFullYear(),t=this.localeData.weekStart%7,{abbreviated:s,short:i,narrow:n}=this.localeData.days,c=this.scale==="s"?n||i||s:i||s||n,o=[...c.slice(t,7),...c.slice(0,t)],h=this.getCurrentMonthDays(e,a),g=this.getPreviousMonthDays(e,a,t),r=this.getNextMonthDays(e,a,t),D=h.length+g.length+r.length;if(D<P){let Y=r.length?r[r.length-1]:0;for(let k=1;k<=P-D;k++)r.push(Y+k)}let m=e+1,$=this.getPreviousMonthDays(m,a,t),E=this.getCurrentMonthDays(m,a),z=this.getNextMonthDays(m,a,t),O=this.getDays(g,h,r),B=this.getDays($,E,z,"end");return f`<div class=${u({[d.calendarContainer]:!0})} role=grid>${this.renderCalendar(o,O)}${this.range&&this.renderCalendar(o,B,!0)||""}</div>`}renderDateDay({active:e,currentMonth:a,currentDay:t,date:s,day:i,dayInWeek:n,ref:c},o){let h=b(s,this.min,this.max);return I(o,f`<div class=${u({[d.dayContainer]:!0})} role=gridcell><calcite-date-picker-day .active=${e} class=${u({[d.currentDay]:t,[d.insideRangeHover]:this.isHoverInRange(),[d.outsideRangeHover]:!this.isHoverInRange(),[d.noncurrent]:this.range&&!a})} .currentMonth=${a} .dateTimeFormat=${this.dateTimeFormat} .day=${i} .disabled=${!h} .endOfRange=${this.isEndOfRange(s)} .highlighted=${this.betweenSelectedRange(s)} =${this.dayHover} =${this.daySelect} .range=${!!this.startDate&&!!this.endDate&&!l(this.startDate,this.endDate)} .rangeEdge=${n===0?"start":n===6?"end":void 0} .rangeHover=${h&&this.isRangeHover(s)} .scale=${this.scale} .selected=${this.isSelected(s)} .startOfRange=${this.isStartOfRange(s)} .value=${s} ${H(g=>{c&&e&&this.activeFocus&&g?.setFocus()})}></calcite-date-picker-day></div>`)}renderCalendar(e,a,t=!1){return f`<div class=${u({[d.calendar]:!0,[d.calendarStart]:!t})}><calcite-date-picker-month-header .activeDate=${t?C(this.activeDate):this.activeDate} data-test-calendar=${t?"end":"start"} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} =${this.monthHeaderSelectChange} .position=${t?"end":this.range?"start":null} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(e,a,t)}</div>`}renderMonthCalendar(e,a,t=!1){return f`<div class=${u({[d.month]:!0})} =${this.keyDownHandler}><div class=${u({[d.weekHeaderContainer]:!0})} role=row>${e.map(i=>f`<span class=${u({[d.weekHeader]:!0})} role=columnheader>${i}</span>`)}</div><div class=${u({[d.weekDays]:!0})} role=row>${a.map((i,n)=>this.renderDateDay(i,t?50+n:n))}</div></div>`}};A("calcite-date-picker-month",S);export{S as DatePickerMonth};