@govtechsg/sgds-web-component 3.20.0-rc.2 → 3.20.0-rc.4

package/components/Datepicker/index.umd.min.js

@@ -2527,7 +2527,7 @@ class extends Ii{constructor(t){if(super(t),t.type!==Hi&&t.type!==Ei&&t.type!==$
         </div>
         ${this._renderFeedback()}
       </div>
-    `}}wr.styles=[...fr.styles,mr],t([Zi({type:String})],wr.prototype,"minDate",void 0),t([Zi({type:String})],wr.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],wr.prototype,"mode",void 0),t([Bi("input")],wr.prototype,"shadowInput",void 0);var yr,br,xr=re`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;class _r extends(gr(Ms)){constructor(){super(),this.required=!1,this.disabled=!1,this.noValidate=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(t,e,i)=>{if(!t&&!e)return this.value;const a=t=>X(t,Zs[i].fnsPattern);switch(this.mode){case"single":t&&(this.value=a(t));break;case"range":t&&e&&(this.value=`${a(t)} - ${a(e)}`),t&&!e&&(this.value=`${a(t)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setInvalid(t){this.invalid=t,this.datepickerInput&&this.datepickerInput.setInvalid(t)}setValidity(t,e,i){return this._mixinSetValidity(t,e,i)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(t=>t.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const t=new RegExp(this._getDateFormatRegex()),e=this.initialValue.filter(e=>!t.test(e));if(e.length>0)return console.error("Invalid date format in initialValue:",e);{const t=this.initialValue.map(t=>Ds(Jt(t,Zs[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(t)}}else this.displayDate=this.initialDisplayDate;(await this.datepickerInputAsync).setInvalid(this.invalid)}async firstUpdated(t){if(super.firstUpdated(t),this.menuIsOpen){const t=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(t)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(t){if(!this.menuIsOpen)return;const e=Array(4);t.shiftKey&&"Tab"===t.key?(t.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+e.length)%e.length):"Tab"===t.key&&(t.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+e.length)%e.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const t=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[t-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const t=await this.calendar,e=await this.datepickerInputAsync;t.focusOnCalendar(e)}_handleSelectDatesInput(t){this._handleSelectDates(t.detail)}async _handleSelectDates(t){t.sort((t,e)=>t.getTime()-e.getTime()),this.displayDate=t[0],this.focusedDate=t[0],this.selectedDateRange=t;const e=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=e;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(t){await this._handleSelectDates(t.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(t){this.view=t.detail}_handleDateChanged(t){this.displayDate=t.detail}_handleFocusDateChanged(t){this.focusedDate=t.detail}_handleSelectMonth(t){this.displayDate=t.detail}_handleSelectYear(t){this.displayDate=t.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this._mixinShouldSkipSgdsValidation()||(this.invalid=!0,this._manageInternalsBadInput())}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(t=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=t,this.view="days";const e=await this.datepickerInputAsync;e.setInvalid(this.invalid),e.destroyInputMask(),await e.applyInputMask(),this._mixinResetValidity(e),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinShouldSkipSgdsValidation()||(this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue())}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(t){this.value=t.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return Je`
+    `}}wr.styles=[...fr.styles,mr],t([Zi({type:String})],wr.prototype,"minDate",void 0),t([Zi({type:String})],wr.prototype,"maxDate",void 0),t([Zi({type:String,reflect:!0})],wr.prototype,"mode",void 0),t([Bi("input")],wr.prototype,"shadowInput",void 0);var yr,br,xr=re`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;class _r extends(gr(Ms)){constructor(){super(),this.required=!1,this.disabled=!1,this.noValidate=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(t,e,i)=>{if(!t&&!e)return this.value;const a=t=>X(t,Zs[i].fnsPattern);switch(this.mode){case"single":t&&(this.value=a(t));break;case"range":t&&e&&(this.value=`${a(t)} - ${a(e)}`),t&&!e&&(this.value=`${a(t)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setInvalid(t){this.invalid=t,this.datepickerInput&&this.datepickerInput.setInvalid(t)}setValidity(t,e,i){return this._mixinSetValidity(t,e,i)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(t=>t.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const t=new RegExp(this._getDateFormatRegex()),e=this.initialValue.filter(e=>!t.test(e));if(e.length>0)return console.error("Invalid date format in initialValue:",e);{const t=this.initialValue.map(t=>Ds(Jt(t,Zs[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(t)}}else this.displayDate=this.initialDisplayDate;(await this.datepickerInputAsync).setInvalid(this.invalid)}async firstUpdated(t){if(super.firstUpdated(t),this.menuIsOpen){const t=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(t)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(t){if(!this.menuIsOpen)return;const e=Array(4);t.shiftKey&&"Tab"===t.key?(t.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+e.length)%e.length):"Tab"===t.key&&(t.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+e.length)%e.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const t=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[t-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const t=await this.calendar,e=await this.datepickerInputAsync;t.focusOnCalendar(e)}_handleSelectDatesInput(t){this._handleSelectDates(t.detail)}async _handleSelectDates(t){t.sort((t,e)=>t.getTime()-e.getTime()),this.displayDate=t[0],this.focusedDate=t[0],this.selectedDateRange=t;const e=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=e;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(t){await this._handleSelectDates(t.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(t){this.view=t.detail}_handleDateChanged(t){this.displayDate=t.detail}_handleFocusDateChanged(t){this.focusedDate=t.detail}_handleSelectMonth(t){this.displayDate=t.detail}_handleSelectYear(t){this.displayDate=t.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this._mixinShouldSkipSgdsValidation()||(this.invalid=!0,this._manageInternalsBadInput())}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(t=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=t,this.view="days";const e=await this.datepickerInputAsync;e.setInvalid(this.invalid),e.destroyInputMask(),await e.applyInputMask(),this._mixinResetValidity(e),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||(this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1)}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(t){this.value=t.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return Je`
       <div class="datepicker-container m-width-160">
         <sgds-datepicker-input
           .value=${Ri(this.value)}