@tabworthy/components 0.3.1 → 0.3.3

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["tabworthy-times-picker.cjs",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2.cjs",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times.cjs",[[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],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates.cjs",[[2,"tabworthy-dates",{"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"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
+  return index.bootstrapLazy([["tabworthy-times-picker.cjs",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2.cjs",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times.cjs",[[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":[4,"input-should-format"],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates.cjs",[[2,"tabworthy-dates",{"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"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/tabworthy-components.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["tabworthy-times-picker.cjs",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2.cjs",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times.cjs",[[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],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates.cjs",[[2,"tabworthy-dates",{"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"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
+  return index.bootstrapLazy([["tabworthy-times-picker.cjs",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2.cjs",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times.cjs",[[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":[4,"input-should-format"],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates.cjs",[[2,"tabworthy-dates",{"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"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -10547,7 +10547,8 @@ const TabworthyDates = class {
         this.handleCalendarButtonClick = async () => {
             var _a, _b, _c, _d, _e;
             await customElements.whenDefined("tabworthy-dates-modal");
-            this.calendarButtonRef && await ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.setTriggerElement(this.calendarButtonRef));
+            this.calendarButtonRef &&
+                (await ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.setTriggerElement(this.calendarButtonRef)));
             if ((await ((_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.getState())) === false)
                 await ((_c = this.modalRef) === null || _c === void 0 ? void 0 : _c.open());
             else if ((await ((_d = this.modalRef) === null || _d === void 0 ? void 0 : _d.getState())) === true)
@@ -10593,99 +10594,106 @@ const TabworthyDates = class {
             var _a;
             (_a = this.changeYear) === null || _a === void 0 ? void 0 : _a.emit(yearDetail);
         };
-        this.handleChange = async (event) => {
-            if (this.range) {
-                this.errorState = false;
-                if (event.target.value.length === 0) {
-                    this.internalValue = "";
-                    if (this.pickerRef) {
-                        this.pickerRef.value = null;
-                    }
-                    return this.selectDate.emit(this.internalValue);
+        this.handleRangeChange = async (value) => {
+            this.errorState = false;
+            if (value.length === 0) {
+                this.internalValue = "";
+                if (this.pickerRef) {
+                    this.pickerRef.value = null;
                 }
-                const parsedRange = await chronoParseRange(event.target.value, {
-                    locale: this.locale.slice(0, 2),
-                    minDate: this.minDate,
-                    maxDate: this.maxDate,
-                    referenceDate: utils.removeTimezoneOffset(new Date(this.referenceDate))
-                });
-                const newValue = [];
-                if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.start instanceof Date)
-                    newValue.push(parsedRange.value.start);
-                if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.end instanceof Date)
-                    newValue.push(parsedRange.value.end);
-                this.updateValue(newValue);
-                this.formatInput(true, false);
-                if (newValue.length === 0) {
+                return this.selectDate.emit(this.internalValue);
+            }
+            const parsedRange = await chronoParseRange(value, {
+                locale: this.locale.slice(0, 2),
+                minDate: this.minDate,
+                maxDate: this.maxDate,
+                referenceDate: utils.removeTimezoneOffset(new Date(this.referenceDate))
+            });
+            const newValue = [];
+            if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.start instanceof Date)
+                newValue.push(parsedRange.value.start);
+            if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.end instanceof Date)
+                newValue.push(parsedRange.value.end);
+            this.updateValue(newValue);
+            this.formatInput(true, false);
+            if (newValue.length === 0) {
+                this.errorState = true;
+                if (!!(parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.reason)) {
+                    this.errorMessage = {
+                        invalid: this.datesLabels.invalidDateError,
+                        rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
+                        minDate: "",
+                        maxDate: ""
+                    }[parsedRange.reason];
+                }
+            }
+        };
+        this.handleSingleDateChange = async (value) => {
+            this.errorState = false;
+            if (value.length === 0) {
+                this.internalValue = "";
+                if (this.pickerRef) {
+                    this.pickerRef.value = null;
+                }
+                return this.selectDate.emit(this.internalValue);
+            }
+            const parsedDate = await chronoParseDate(value, {
+                locale: this.locale.slice(0, 2),
+                minDate: this.minDate,
+                maxDate: this.maxDate,
+                referenceDate: utils.removeTimezoneOffset(new Date(this.referenceDate))
+            });
+            if (parsedDate && parsedDate.value instanceof Date) {
+                if (this.disableDate(parsedDate.value)) {
                     this.errorState = true;
-                    if (!!(parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.reason)) {
-                        this.errorMessage = {
-                            invalid: this.datesLabels.invalidDateError,
-                            rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
-                            minDate: '',
-                            maxDate: '',
-                        }[parsedRange.reason];
-                    }
+                    this.errorMessage = this.datesLabels.disabledDateError;
+                }
+                else {
+                    this.updateValue(parsedDate.value);
+                    this.formatInput(true, false);
                 }
             }
-            else {
-                this.errorState = false;
-                if (event.target.value.length === 0) {
-                    this.internalValue = "";
-                    if (this.pickerRef) {
-                        this.pickerRef.value = null;
-                    }
-                    return this.selectDate.emit(this.internalValue);
+            else if (parsedDate) {
+                this.errorState = true;
+                this.internalValue = null;
+                let maxDate = undefined;
+                let minDate = undefined;
+                if (this.maxDate) {
+                    maxDate = this.maxDate
+                        ? utils.removeTimezoneOffset(new Date(this.maxDate))
+                        : undefined;
+                    maxDate === null || maxDate === void 0 ? void 0 : maxDate.setDate(maxDate.getDate() + 1);
                 }
-                const parsedDate = await chronoParseDate(event.target.value, {
-                    locale: this.locale.slice(0, 2),
-                    minDate: this.minDate,
-                    maxDate: this.maxDate,
-                    referenceDate: utils.removeTimezoneOffset(new Date(this.referenceDate))
-                });
-                if (parsedDate && parsedDate.value instanceof Date) {
-                    if (this.disableDate(parsedDate.value)) {
-                        this.errorState = true;
-                        this.errorMessage = this.datesLabels.disabledDateError;
-                    }
-                    else {
-                        this.updateValue(parsedDate.value);
-                        this.formatInput(true, false);
-                    }
+                if (this.minDate) {
+                    minDate = this.minDate
+                        ? utils.removeTimezoneOffset(new Date(this.minDate))
+                        : undefined;
+                    minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
                 }
-                else if (parsedDate) {
-                    this.errorState = true;
-                    this.internalValue = null;
-                    let maxDate = undefined;
-                    let minDate = undefined;
-                    if (this.maxDate) {
-                        maxDate = this.maxDate
-                            ? utils.removeTimezoneOffset(new Date(this.maxDate))
-                            : undefined;
-                        maxDate === null || maxDate === void 0 ? void 0 : maxDate.setDate(maxDate.getDate() + 1);
-                    }
-                    if (this.minDate) {
-                        minDate = this.minDate
-                            ? utils.removeTimezoneOffset(new Date(this.minDate))
-                            : undefined;
-                        minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
-                    }
-                    if (!!parsedDate.reason) {
-                        this.errorMessage = parsedDate.reason;
-                        this.errorMessage = {
-                            // TODO: Add locale date formatting to these messages
-                            minDate: minDate
-                                ? `${this.datesLabels.minDateError} ${utils.getISODateString(minDate)}`
-                                : "",
-                            maxDate: maxDate
-                                ? `${this.datesLabels.maxDateError} ${utils.getISODateString(maxDate)}`
-                                : "",
-                            invalid: this.datesLabels.invalidDateError
-                        }[parsedDate.reason];
-                    }
+                if (!!parsedDate.reason) {
+                    this.errorMessage = parsedDate.reason;
+                    this.errorMessage = {
+                        // TODO: Add locale date formatting to these messages
+                        minDate: minDate
+                            ? `${this.datesLabels.minDateError} ${utils.getISODateString(minDate)}`
+                            : "",
+                        maxDate: maxDate
+                            ? `${this.datesLabels.maxDateError} ${utils.getISODateString(maxDate)}`
+                            : "",
+                        invalid: this.datesLabels.invalidDateError
+                    }[parsedDate.reason];
                 }
             }
         };
+        this.handleChange = async (event) => {
+            const value = event.target.value;
+            if (this.range) {
+                await this.handleRangeChange(value);
+            }
+            else {
+                await this.handleSingleDateChange(value);
+            }
+        };
     }
     componentDidLoad() {
         this.syncFromValueProp();
@@ -10790,7 +10798,8 @@ const TabworthyDates = class {
         if (this.isRangeValue(newValue)) {
             if (newValue.length === 2)
                 (_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.close();
-            this.internalValue = newValue;
+            // Convert ISO dates to specified format
+            this.internalValue = newValue.map((date) => moment.hooks(date).format(this.format));
             this.errorState = false;
             if (document.activeElement !== this.inputRef) {
                 this.formatInput(true, false);
@@ -10799,8 +10808,10 @@ const TabworthyDates = class {
         }
         else {
             (_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.close();
-            this.inputRef.value = newValue;
-            this.internalValue = newValue;
+            // Convert ISO date to specified format
+            const formattedDate = moment.hooks(newValue).format(this.format);
+            this.inputRef.value = formattedDate;
+            this.internalValue = formattedDate;
             this.errorState = false;
             if (document.activeElement !== this.inputRef) {
                 this.formatInput(true, false);
@@ -10870,12 +10881,12 @@ const TabworthyDates = class {
         }
         // update text input (useInputValue=false so it formats from internalValue, not from input's current text)
         if (this.inputRef) {
-            this.formatInput(true, false);
+            this.formatInput(!!this.formatInputOnAccept, false);
         }
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '387a0514db30efb043e294c44dc0c6233ab9315a' }, index$1.h("label", { key: '6cc8ef1337dc74cf0c2138457c82c4c61dcc63d1', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), index$1.h("br", { key: 'b4429fef1d80e792e8ab0580d683b42ca924d0d8' }), index$1.h("div", { key: 'ecf6c67ac4e65b41768a593d7c5d4ee330fda3f3', class: this.getClassName("input-container") }, index$1.h("input", { key: '6eea6c4e22af4bba65d4358c9b560f2a271b0a23', disabled: this.disabledState, 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 && (index$1.h("button", { key: 'f3bf0a8ece36a1abc36f3462dfe44ca951ec510f', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (index$1.h("span", { innerHTML: this.calendarButtonContent })) : (this.datesLabels.openCalendar)))), index$1.h("tabworthy-dates-modal", { key: '2b6e45c861606661810ce4026487d90fb7bf0c5f', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
+        return (index$1.h(index$1.Host, { key: 'd319da990a03fea708c0ab347aec215baae3cdf9' }, index$1.h("label", { key: '5a050660fa3a264b67c1744d802759c90b973337', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), index$1.h("br", { key: 'ecd9e1bffa8a30f7f4eabbc8a7e51a6ee9fc22ca' }), index$1.h("div", { key: '6507ab0f2980e66e72e78b90c00ff43c3ad771ef', class: this.getClassName("input-container") }, index$1.h("input", { key: 'f849383904aa92c34008c0c702b8eec19276cc81', disabled: this.disabledState, 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 && (index$1.h("button", { key: '610862237f6f6bbd6690952b050ef684ed00da94', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (index$1.h("span", { innerHTML: this.calendarButtonContent })) : (this.datesLabels.openCalendar)))), index$1.h("tabworthy-dates-modal", { key: 'b3f242501f41e78aa6772d451c4ffd8123cf4228', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
                 if (!this.pickerRef)
                     return;
                 this.pickerRef.modalIsOpen = true;
@@ -10883,13 +10894,11 @@ const TabworthyDates = class {
                 if (!this.pickerRef)
                     return;
                 this.pickerRef.modalIsOpen = false;
-            }, inline: this.inline }, index$1.h("tabworthy-dates-calendar", { key: 'b25c45f9b819509c98afafd21835c00f9188c9e0', 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 }, index$1.h("tabworthy-dates-calendar", { key: '3ea03076e55d69fae6f9a02f0b32b21322afcd78', 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 && (index$1.h("div", { key: 'ea05f20cff3cbaff23adb64992b65b0b9760d3c5', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
+            this.chronoSupportedLocale && (index$1.h("div", { key: '0e0e718a43bbe2f2af69af45af01f8f75f4fe362', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
             return (index$1.h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
-        }))), this.errorState && (index$1.h("div", { key: 'a472eceba69c53cbcadcd358672b7eca12b105bf', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+        }))), this.errorState && (index$1.h("div", { key: 'b51d6a07a017bdb7af09098e848c7184944a4631', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tabworthy-times.cjs.entry.js

@@ -61,6 +61,8 @@ const InclusiveTimes = class {
         this.firstDayOfWeek = 1;
         // Format for the value prop (input/output format). Defaults to ISO 8601 format.
         this.format = "YYYY-MM-DDTHH:mm:ss";
+        // If true, format input on blur/accept (like dates)
+        this.inputShouldFormat = true;
         this.selectedHours = 12;
         this.selectedMinutes = 0;
         this.errorState = this.hasError;
@@ -109,7 +111,9 @@ const InclusiveTimes = class {
             // Can be used for month change tracking
         };
         this.handleInputBlur = () => {
-            this.formatInput();
+            if (this.inputShouldFormat) {
+                this.formatInput();
+            }
         };
         this.handleInputChange = (event) => {
             const value = event.target.value;
@@ -183,7 +187,9 @@ const InclusiveTimes = class {
             this.selectDateTime.emit(formatted);
         }
         this.errorState = false;
-        this.formatInput();
+        if (this.inputShouldFormat) {
+            this.formatInput();
+        }
     }
     formatInput() {
         if (!this.internalValue)
@@ -215,7 +221,7 @@ const InclusiveTimes = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'e922c649f8ed2bf03711fe99ae73bca550c9d8ef', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, index.h("label", { key: '6b8c053bcb4d232c52e0b95da141e4a433f2bc16', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), index.h("div", { key: '1950259cf662cedae9b8f0fed6a61f095d3a4424', class: this.getClassName("input-container") }, index.h("input", { key: '1c6bfced55bd60706eadf6304eb7204c89bda8d6', id: `${this.id}-input`, ref: (r) => (this.inputRef = r), type: "text", class: this.getClassName("input"), placeholder: this.placeholder, disabled: this.disabledState, value: (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.toString(), onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (index.h("button", { key: '60b202b017d7ffe5de182908c809a24eba4f8e56', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (index.h("span", { innerHTML: this.calendarButtonContent })) : (this.timesLabels.openCalendar)))), index.h("tabworthy-dates-modal", { key: '83716e92fd3711c65b23f007bba209bcc60a4d7d', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
+        return (index.h(index.Host, { key: 'e9ef24f7b4e7797607f4e46c3c7da892e276160c', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, index.h("label", { key: '9fbc1b57f9466e2e76dc46c6fd498e525d1cc1ee', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), index.h("div", { key: '2958a036e04b53761451adec9986c0305b9425af', class: this.getClassName("input-container") }, index.h("input", { key: 'bee806dc1c5630c3032fd07eadbb0100ccfea89b', id: `${this.id}-input`, ref: (r) => (this.inputRef = r), type: "text", class: this.getClassName("input"), placeholder: this.placeholder, disabled: this.disabledState, value: (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.toString(), onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (index.h("button", { key: 'c8e490c2c004d2ad096848fcc83389524c767819', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (index.h("span", { innerHTML: this.calendarButtonContent })) : (this.timesLabels.openCalendar)))), index.h("tabworthy-dates-modal", { key: '1620370de6b83f1d8de49fc0c44702d2a4495c62', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
                 if (this.pickerRef) {
                     this.pickerRef.modalIsOpen = true;
                 }
@@ -223,7 +229,7 @@ const InclusiveTimes = class {
                 if (this.pickerRef) {
                     this.pickerRef.modalIsOpen = false;
                 }
-            }, inline: this.inline }, index.h("div", { key: '3972712165cdc3069498d5683ca7b8b25041e44d', class: this.getClassName("picker-container") }, index.h("tabworthy-dates-calendar", { key: 'e6472861402e4926227657fb68f57d8671452260', 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, 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, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline }, index.h("div", { key: 'e9f7b9baa9544ae651b4b6b73094a215cabcc796', slot: "after-calendar", class: this.getClassName("time-section") }, index.h("tabworthy-times-picker", { key: 'b4c2f14b9311d1e3c186825785d6f64580f2896c', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (index.h("div", { key: '684dce5fc46c53feea28b19eca46746d7538aa3f', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+            }, inline: this.inline }, index.h("div", { key: '9521fd9f0fbdd6b1b6114fafbe6d623537fb1420', class: this.getClassName("picker-container") }, index.h("tabworthy-dates-calendar", { key: 'da204266d8c440961fffdbf58aa10cd1e5630357', 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, 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, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline }, index.h("div", { key: 'b82af457943cdcae6f098688f7c90bda0aeed427', slot: "after-calendar", class: this.getClassName("time-section") }, index.h("tabworthy-times-picker", { key: '6800ae768ecb4796105f9d1981cc8315732a1335', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (index.h("div", { key: '648df2b385853946f5b2ae5f2f453fc8a25c1069', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {