@tabworthy/components 0.6.1 → 0.7.1

package/dist/components/tabworthy-times.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as a,transformTag as h}from"@stencil/core/internal/client";import{h as r}from"./moment.js";import{g as o,r as n,d}from"./tabworthy-dates-calendar2.js";import{d as l}from"./tabworthy-dates-modal2.js";import{d as c}from"./tabworthy-times-picker2.js";const b={selected:"selected",openCalendar:"Open date and time picker",calendar:"date and time picker",invalidDateError:"We could not find a matching date",minDateError:"Please fill in a date after ",maxDateError:"Please fill in a date before ",rangeOutOfBoundsError:"Please enter a valid range of dates",disabledDateError:"Please choose an available date",to:"to",startDate:"Start date",timeLabel:"Time"},m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.selectDateTime=e(this,"selectDateTime",7),this.changeYear=e(this,"changeYear",7),this.componentReady=e(this,"componentReady",7),this.range=!1,this.label="Choose a date and time",this.placeholder="",this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.disabled=!1,this.startDate=o(new Date),this.referenceDate=o(new Date),this.use12HourFormat=!0,this.timesLabels=b,this.inline=!1,this.hasError=!1,this.showYearStepper=!1,this.showMonthStepper=!0,this.showClearButton=!0,this.showTodayButton=!0,this.disableDate=()=>!1,this.elementClassName="tabworthy-times",this.firstDayOfWeek=1,this.format="YYYY-MM-DDTHH:mm:ss",this.inputShouldFormat=!0,this.disableFreeformInput=!1,this.selectedHours=12,this.selectedMinutes=0,this.errorState=this.hasError,this.disabledState=this.disabled,this.errorMessage="",this.handlePickerSelection=async t=>{const s=t.split(",");if(this.range&&2===s.length){const t=n(new Date(s[0])),e=n(new Date(s[1]));this.updateValue([t,e]),this.pickerRef&&(this.pickerRef.value=[t,e])}else{const t=n(new Date(s[0]));this.updateValue(t),this.pickerRef&&(this.pickerRef.value=t)}},this.handleTimeChange=t=>{this.selectedHours=t.detail.hours,this.selectedMinutes=t.detail.minutes,this.selectedDate&&this.updateValue(this.selectedDate)},this.handleCalendarButtonClick=async()=>{this.modalRef&&(await this.modalRef.setTriggerElement(this.calendarButtonRef),await this.modalRef.open())},this.handleYearChange=t=>{this.changeYear&&this.changeYear.emit(t)},this.handleChangedMonths=()=>{},this.handleInputBlur=()=>{this.shouldInputFormat()&&this.formatInput()},this.handleInputChange=t=>{const s=r(t.target.value);s.isValid()&&(this.selectedHours=s.hours(),this.selectedMinutes=s.minutes(),this.updateValue(s.toDate()))}}shouldInputFormat(){return"string"==typeof this.inputShouldFormat?"true"===this.inputShouldFormat:!!this.inputShouldFormat}watchValue(t){this.syncFromValueProp()}watchDisabled(t){this.disabledState=t}watchHasError(t){this.errorState=t}componentDidLoad(){this.syncFromValueProp(),this.componentReady.emit(),this.id||console.error('tabworthy-times: The "id" prop is required for accessibility')}syncFromValueProp(){if(this.value){this.internalValue=this.value;const t=Array.isArray(this.value)?this.value[0]:this.value;if(t){const s=r(t,this.format);s.isValid()&&(this.selectedDate=s.toDate(),this.selectedHours=s.hours(),this.selectedMinutes=s.minutes())}}else this.internalValue=null}updateValue(t){if(Array.isArray(t)){const s=t.map((t=>{const s=r(t);return s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0),s.format(this.format)}));this.internalValue=s,this.value=s,this.selectDateTime.emit(s)}else{const s=r(t);s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0);const e=s.format(this.format);this.internalValue=e,this.value=e,this.selectedDate=t,this.selectDateTime.emit(e)}this.errorState=!1,this.shouldInputFormat()&&this.formatInput()}formatInput(){if(this.internalValue)if(Array.isArray(this.internalValue)){const t=this.internalValue.map((t=>r(t,this.format).format("lll"))).join(` ${this.timesLabels.to} `);this.inputRef.value=t}else this.inputRef.value=r(this.internalValue,this.format).format("lll")}getClassName(t){return`${this.elementClassName}__${t}`}async clearValue(){this.internalValue=null,this.value=void 0,this.selectedDate=void 0,this.inputRef.value="",this.pickerRef&&(this.pickerRef.value=null),this.selectDateTime.emit(void 0)}render(){var t;return i(a,{key:"f5ad31075413f2d2c14751265fdaa2845f695baa",class:this.elementClassName,"has-error":this.errorState,disabled:this.disabledState},i("label",{key:"84e8799efa652f93e6ca56ce5696729441e61319",htmlFor:this.id+"-input",class:this.getClassName("label")},this.label),i("div",{key:"cc3dc9198dbd90a2405938810aebc564b08c2ac3",class:this.getClassName("input-container")},i("input",{key:"1b63faf6d946fa9bad5198d967eb12fd12dbb02d",id:this.id+"-input",ref:t=>this.inputRef=t,type:"text",class:this.getClassName("input"),placeholder:this.placeholder,disabled:this.disabledState||this.disableFreeformInput,value:null===(t=this.internalValue)||void 0===t?void 0:""+t,onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-describedby":this.errorState?this.id+"-error":void 0,"aria-invalid":this.errorState}),!this.inline&&i("button",{key:"a9f580d5d5c46334492b9bfef2dcd80d6808e77c",type:"button",ref:t=>this.calendarButtonRef=t,onClick:this.handleCalendarButtonClick,class:this.getClassName("calendar-button"),disabled:this.disabledState},this.calendarButtonContent?i("span",{innerHTML:this.calendarButtonContent}):this.timesLabels.openCalendar)),i("tabworthy-dates-modal",{key:"7fc50538aa0f972999867a6f7175d87bb86ef0d1",label:this.timesLabels.calendar,ref:t=>this.modalRef=t,onOpened:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!0)},onClosed:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!1)},inline:this.inline},i("div",{key:"014187e74184b02318dea891a36c7c0d4888f4db",class:this.getClassName("picker-container")},i("tabworthy-dates-calendar",{key:"8b35d3640cd1e7c1a30a92c090a41945c807f51f",range:this.range,locale:this.locale,onSelectDate:t=>this.handlePickerSelection(t.detail),onChangeMonth:t=>this.handleChangedMonths(t.detail),onChangeYear:t=>this.handleYearChange(t.detail),labels:this.datesCalendarLabels,ref:t=>this.pickerRef=t,startDate:this.startDate,firstDayOfWeek:this.firstDayOfWeek,showHiddenTitle:!0,disabled:this.disabledState,showMonthStepper:this.showMonthStepper,showYearStepper:this.showYearStepper,showClearButton:this.showClearButton,showTodayButton:this.showTodayButton,disableDate:this.disableDate,minDate:this.minDate,maxDate:this.maxDate,inline:this.inline},i("div",{key:"e7802bd55d717def48fd4ff0093c41bfdd3a9d37",slot:"after-calendar",class:this.getClassName("time-section")},i("tabworthy-times-picker",{key:"4c8e49f3fb82f3b8e9c914fe060b80a5aa76bafe",hours:this.selectedHours,minutes:this.selectedMinutes,use12HourFormat:this.use12HourFormat,disabled:this.disabledState,onTimeChanged:this.handleTimeChange}))))),this.errorState&&i("div",{key:"f83e3028c666e16b065da2c1f1d92c5f157acd16",class:this.getClassName("input-error"),id:this.id?this.id+"-error":void 0,role:"status"},this.errorMessage))}get el(){return this}static get watchers(){return{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}}},[2,"tabworthy-times",{id:[513],value:[1025],range:[4],label:[1],placeholder:[1],locale:[1],disabled:[4],minDate:[1,"min-date"],maxDate:[1,"max-date"],startDate:[1,"start-date"],referenceDate:[1,"reference-date"],use12HourFormat:[4,"use-1-2-hour-format"],timesLabels:[16],datesCalendarLabels:[16],inline:[4],hasError:[1028,"has-error"],showYearStepper:[4,"show-year-stepper"],showMonthStepper:[4,"show-month-stepper"],showClearButton:[4,"show-clear-button"],showTodayButton:[4,"show-today-button"],calendarButtonContent:[1,"calendar-button-content"],disableDate:[16],elementClassName:[1,"element-class-name"],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inputShouldFormat:[8,"input-should-format"],disableFreeformInput:[4,"disable-freeform-input"],internalValue:[32],selectedDate:[32],selectedHours:[32],selectedMinutes:[32],errorState:[32],disabledState:[32],clearValue:[64]},void 0,{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}]),u=m,f=function(){"undefined"!=typeof customElements&&["tabworthy-times","tabworthy-dates-calendar","tabworthy-dates-modal","tabworthy-times-picker"].forEach((t=>{switch(t){case"tabworthy-times":customElements.get(h(t))||customElements.define(h(t),m);break;case"tabworthy-dates-calendar":customElements.get(h(t))||d();break;case"tabworthy-dates-modal":customElements.get(h(t))||l();break;case"tabworthy-times-picker":customElements.get(h(t))||c()}}))};export{u as TabworthyTimes,f as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as a,transformTag as h}from"@stencil/core/internal/client";import{h as r}from"./moment.js";import{g as o,r as n,c as d}from"./tabworthy-dates-calendar2.js";import{d as l}from"./tabworthy-dates-modal2.js";import{d as c}from"./tabworthy-times-picker2.js";const b={selected:"selected",openCalendar:"Open date and time picker",calendar:"date and time picker",invalidDateError:"We could not find a matching date",minDateError:"Please fill in a date after ",maxDateError:"Please fill in a date before ",rangeOutOfBoundsError:"Please enter a valid range of dates",disabledDateError:"Please choose an available date",to:"to",startDate:"Start date",timeLabel:"Time"},m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.selectDateTime=e(this,"selectDateTime",7),this.changeYear=e(this,"changeYear",7),this.componentReady=e(this,"componentReady",7),this.range=!1,this.label="Choose a date and time",this.placeholder="",this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.disabled=!1,this.startDate=o(new Date),this.referenceDate=o(new Date),this.use12HourFormat=!0,this.timesLabels=b,this.inline=!1,this.hasError=!1,this.showYearStepper=!1,this.showMonthStepper=!0,this.showClearButton=!0,this.showTodayButton=!0,this.disableDate=()=>!1,this.elementClassName="tabworthy-times",this.firstDayOfWeek=1,this.format="YYYY-MM-DDTHH:mm:ss",this.inputShouldFormat=!0,this.disableFreeformInput=!1,this.selectedHours=12,this.selectedMinutes=0,this.errorState=this.hasError,this.disabledState=this.disabled,this.errorMessage="",this.handlePickerSelection=async t=>{const s=t.split(",");if(this.range&&2===s.length){const t=n(new Date(s[0])),e=n(new Date(s[1]));this.updateValue([t,e]),this.pickerRef&&(this.pickerRef.value=[t,e])}else{const t=n(new Date(s[0]));this.updateValue(t),this.pickerRef&&(this.pickerRef.value=t)}},this.handleTimeChange=t=>{this.selectedHours=t.detail.hours,this.selectedMinutes=t.detail.minutes,this.selectedDate&&this.updateValue(this.selectedDate)},this.handleCalendarButtonClick=async()=>{this.modalRef&&(await this.modalRef.setTriggerElement(this.calendarButtonRef),await this.modalRef.open())},this.handleYearChange=t=>{this.changeYear&&this.changeYear.emit(t)},this.handleChangedMonths=()=>{},this.handleInputBlur=()=>{this.shouldInputFormat()&&this.formatInput()},this.handleInputChange=t=>{const s=r(t.target.value);s.isValid()&&(this.selectedHours=s.hours(),this.selectedMinutes=s.minutes(),this.updateValue(s.toDate()))}}shouldInputFormat(){return"string"==typeof this.inputShouldFormat?"true"===this.inputShouldFormat:!!this.inputShouldFormat}watchValue(t){this.syncFromValueProp()}watchDisabled(t){this.disabledState=t}watchHasError(t){this.errorState=t}componentDidLoad(){this.syncFromValueProp(),this.componentReady.emit(),this.id||console.error('tabworthy-times: The "id" prop is required for accessibility')}syncFromValueProp(){if(this.value){this.internalValue=this.value;const t=Array.isArray(this.value)?this.value[0]:this.value;if(t){const s=r(t,this.format);s.isValid()&&(this.selectedDate=s.toDate(),this.selectedHours=s.hours(),this.selectedMinutes=s.minutes())}}else this.internalValue=null}updateValue(t){if(Array.isArray(t)){const s=t.map((t=>{const s=r(t);return s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0),s.format(this.format)}));this.internalValue=s,this.value=s,this.selectDateTime.emit(s)}else{const s=r(t);s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0);const e=s.format(this.format);this.internalValue=e,this.value=e,this.selectedDate=t,this.selectDateTime.emit(e)}this.errorState=!1,this.shouldInputFormat()&&this.formatInput()}formatInput(){if(this.internalValue)if(Array.isArray(this.internalValue)){const t=this.internalValue.map((t=>r(t,this.format).format("lll"))).join(` ${this.timesLabels.to} `);this.inputRef.value=t}else this.inputRef.value=r(this.internalValue,this.format).format("lll")}getClassName(t){return`${this.elementClassName}__${t}`}async clearValue(){this.internalValue=null,this.value=void 0,this.selectedDate=void 0,this.inputRef.value="",this.pickerRef&&(this.pickerRef.value=null),this.selectDateTime.emit(void 0)}render(){var t;return i(a,{key:"f5ad31075413f2d2c14751265fdaa2845f695baa",class:this.elementClassName,"has-error":this.errorState,disabled:this.disabledState},i("label",{key:"84e8799efa652f93e6ca56ce5696729441e61319",htmlFor:this.id+"-input",class:this.getClassName("label")},this.label),i("div",{key:"cc3dc9198dbd90a2405938810aebc564b08c2ac3",class:this.getClassName("input-container")},i("input",{key:"1b63faf6d946fa9bad5198d967eb12fd12dbb02d",id:this.id+"-input",ref:t=>this.inputRef=t,type:"text",class:this.getClassName("input"),placeholder:this.placeholder,disabled:this.disabledState||this.disableFreeformInput,value:null===(t=this.internalValue)||void 0===t?void 0:""+t,onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-describedby":this.errorState?this.id+"-error":void 0,"aria-invalid":this.errorState}),!this.inline&&i("button",{key:"a9f580d5d5c46334492b9bfef2dcd80d6808e77c",type:"button",ref:t=>this.calendarButtonRef=t,onClick:this.handleCalendarButtonClick,class:this.getClassName("calendar-button"),disabled:this.disabledState},this.calendarButtonContent?i("span",{innerHTML:this.calendarButtonContent}):this.timesLabels.openCalendar)),i("tabworthy-dates-modal",{key:"7fc50538aa0f972999867a6f7175d87bb86ef0d1",label:this.timesLabels.calendar,ref:t=>this.modalRef=t,onOpened:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!0)},onClosed:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!1)},inline:this.inline},i("div",{key:"014187e74184b02318dea891a36c7c0d4888f4db",class:this.getClassName("picker-container")},i("tabworthy-dates-calendar",{key:"8b35d3640cd1e7c1a30a92c090a41945c807f51f",range:this.range,locale:this.locale,onSelectDate:t=>this.handlePickerSelection(t.detail),onChangeMonth:t=>this.handleChangedMonths(t.detail),onChangeYear:t=>this.handleYearChange(t.detail),labels:this.datesCalendarLabels,ref:t=>this.pickerRef=t,startDate:this.startDate,firstDayOfWeek:this.firstDayOfWeek,showHiddenTitle:!0,disabled:this.disabledState,showMonthStepper:this.showMonthStepper,showYearStepper:this.showYearStepper,showClearButton:this.showClearButton,showTodayButton:this.showTodayButton,disableDate:this.disableDate,minDate:this.minDate,maxDate:this.maxDate,inline:this.inline},i("div",{key:"e7802bd55d717def48fd4ff0093c41bfdd3a9d37",slot:"after-calendar",class:this.getClassName("time-section")},i("tabworthy-times-picker",{key:"4c8e49f3fb82f3b8e9c914fe060b80a5aa76bafe",hours:this.selectedHours,minutes:this.selectedMinutes,use12HourFormat:this.use12HourFormat,disabled:this.disabledState,onTimeChanged:this.handleTimeChange}))))),this.errorState&&i("div",{key:"f83e3028c666e16b065da2c1f1d92c5f157acd16",class:this.getClassName("input-error"),id:this.id?this.id+"-error":void 0,role:"status"},this.errorMessage))}get el(){return this}static get watchers(){return{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}}},[2,"tabworthy-times",{id:[513],value:[1025],range:[4],label:[1],placeholder:[1],locale:[1],disabled:[4],minDate:[1,"min-date"],maxDate:[1,"max-date"],startDate:[1,"start-date"],referenceDate:[1,"reference-date"],use12HourFormat:[4,"use-1-2-hour-format"],timesLabels:[16],datesCalendarLabels:[16],inline:[4],hasError:[1028,"has-error"],showYearStepper:[4,"show-year-stepper"],showMonthStepper:[4,"show-month-stepper"],showClearButton:[4,"show-clear-button"],showTodayButton:[4,"show-today-button"],calendarButtonContent:[1,"calendar-button-content"],disableDate:[16],elementClassName:[1,"element-class-name"],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inputShouldFormat:[8,"input-should-format"],disableFreeformInput:[4,"disable-freeform-input"],internalValue:[32],selectedDate:[32],selectedHours:[32],selectedMinutes:[32],errorState:[32],disabledState:[32],clearValue:[64]},void 0,{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}]),u=m,f=function(){"undefined"!=typeof customElements&&["tabworthy-times","tabworthy-dates-calendar","tabworthy-dates-modal","tabworthy-times-picker"].forEach((t=>{switch(t){case"tabworthy-times":customElements.get(h(t))||customElements.define(h(t),m);break;case"tabworthy-dates-calendar":customElements.get(h(t))||d();break;case"tabworthy-dates-modal":customElements.get(h(t))||l();break;case"tabworthy-times-picker":customElements.get(h(t))||c()}}))};export{u as TabworthyTimes,f as defineCustomElement}

package/dist/esm/tabworthy-dates.entry.js

@@ -10824,12 +10824,15 @@ const TabworthyDates = class {
         this.selectDate.emit(this.internalValue);
     }
     announceDateChange(newValue) {
+        const newValueInIsoFormat = Array.isArray(newValue)
+            ? newValue.map((date) => hooks(date, this.format).toISOString())
+            : hooks(newValue, this.format).toISOString();
         let content = "";
-        if (Array.isArray(newValue)) {
-            if (newValue.length === 1) {
+        if (Array.isArray(newValueInIsoFormat)) {
+            if (newValueInIsoFormat.length === 1) {
                 content += `${this.datesLabels.startDate} `;
             }
-            newValue.forEach((value, index) => (content += `${index === 1 ? ` ${this.datesLabels.to} ` : ""}${Intl.DateTimeFormat(this.locale, {
+            newValueInIsoFormat.forEach((value, index) => (content += `${index === 1 ? ` ${this.datesLabels.to} ` : ""}${Intl.DateTimeFormat(this.locale, {
                 weekday: "long",
                 day: "numeric",
                 month: "long",
@@ -10842,7 +10845,7 @@ const TabworthyDates = class {
                 day: "numeric",
                 month: "long",
                 year: "numeric"
-            }).format(removeTimezoneOffset(new Date(newValue)));
+            }).format(removeTimezoneOffset(new Date(newValueInIsoFormat)));
         if (content.length === 0)
             return;
         content += ` ${this.datesLabels.selected}`;
@@ -10890,7 +10893,7 @@ const TabworthyDates = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e8042c6411dbded3f86703ee75b43a8e75ddf621' }, h("label", { key: 'ed3a309a7f11a41122badd9549b513ea3f70c491', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: '73391914e5e39af0b054cfcbab02b1d18aca452a' }), h("div", { key: '6b3394842bc2813f918f731745307ea798a483b9', class: this.getClassName("input-container") }, h("input", { key: '8a1f1ac45bbe0050cfc98063d723542a37d86ef5', disabled: this.disabledState || this.disableFreeformInput, id: this.id ? `${this.id}-input` : undefined, type: "text", placeholder: this.placeholder, class: this.getClassName("input"), ref: (r) => (this.inputRef = r), onChange: this.handleChange, onFocus: () => this.formatInput(false), onBlur: () => this.formatInput(true, false), "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: 'bbafef3a62331b26e8d0a0eb9886816d8e819085', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.datesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '68451bf1e8d40dd25f51a370cf745244cf1897eb', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
+        return (h(Host, { key: '6fd878d7a0073344895525a82533925fcd24c372' }, h("label", { key: '550382a2ea99201b465fa9fd9ee90a917c5ff7e6', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: 'fd6fb69543f81bef9a15157b94a25a5fa107ef70' }), h("div", { key: 'fcc9c10276e35f28435829eea17dfed27373f55c', class: this.getClassName("input-container") }, h("input", { key: '24da8c1582dc66f65a0eb6c6ab380b28bbf1c5ca', disabled: this.disabledState || this.disableFreeformInput, id: this.id ? `${this.id}-input` : undefined, type: "text", placeholder: this.placeholder, class: this.getClassName("input"), ref: (r) => (this.inputRef = r), onChange: this.handleChange, onFocus: () => this.formatInput(false), onBlur: () => this.formatInput(true, false), "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: '54cd337b5ddd3ea6aa6ecd59a8fadf2cb5b61026', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.datesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: 'cd8bd92d251d3c2566c9da9f8039ccc2ab74750f', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
                 if (!this.pickerRef)
                     return;
                 this.pickerRef.modalIsOpen = true;
@@ -10898,11 +10901,11 @@ const TabworthyDates = class {
                 if (!this.pickerRef)
                     return;
                 this.pickerRef.modalIsOpen = false;
-            }, inline: this.inline }, h("tabworthy-dates-calendar", { key: '9ba747fc1bbc1481943624634090b7e8a4792d56', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels ? this.datesCalendarLabels : undefined, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showKeyboardHint: this.showKeyboardHint, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline })), this.showQuickButtons &&
+            }, inline: this.inline }, h("tabworthy-dates-calendar", { key: '929272a053e0109e34d4b2d8456064fc14093912', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels ? this.datesCalendarLabels : undefined, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showKeyboardHint: this.showKeyboardHint, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline })), this.showQuickButtons &&
             ((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-            this.chronoSupportedLocale && (h("div", { key: '302a5aca1e85df7ae68bbc416dcc62f406a46868', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
+            this.chronoSupportedLocale && (h("div", { key: 'aead258880c9531e3fb72111f1fd47ebfa35931a', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
             return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
-        }))), this.errorState && (h("div", { key: 'c753c27a93017df169b6d603b1f8fb4e6f601a0d', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+        }))), this.errorState && (h("div", { key: '193fe31b36da600e9f222f2576c3bee2d4e0a427', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {