@tabworthy/components 0.3.3 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tabworthy-components.cjs.js +1 -1
  3. package/dist/cjs/tabworthy-dates-calendar_2.cjs.entry.js +21 -13
  4. package/dist/cjs/tabworthy-dates.cjs.entry.js +17 -9
  5. package/dist/cjs/tabworthy-times-picker.cjs.entry.js +8 -6
  6. package/dist/cjs/tabworthy-times.cjs.entry.js +10 -4
  7. package/dist/collection/components/tabworthy-dates/tabworthy-dates.js +18 -12
  8. package/dist/collection/components/tabworthy-dates-calendar/tabworthy-dates-calendar.js +20 -12
  9. package/dist/collection/components/tabworthy-modal/tabworthy-dates-modal.js +1 -1
  10. package/dist/collection/components/tabworthy-times/tabworthy-times.js +14 -8
  11. package/dist/collection/components/tabworthy-times-picker/tabworthy-times-picker.js +8 -6
  12. package/dist/components/tabworthy-dates-calendar2.js +1 -1
  13. package/dist/components/tabworthy-dates-modal2.js +1 -1
  14. package/dist/components/tabworthy-dates.js +1 -1
  15. package/dist/components/tabworthy-times-picker2.js +1 -1
  16. package/dist/components/tabworthy-times.js +1 -1
  17. package/dist/esm/loader.js +1 -1
  18. package/dist/esm/tabworthy-components.js +1 -1
  19. package/dist/esm/tabworthy-dates-calendar_2.entry.js +21 -13
  20. package/dist/esm/tabworthy-dates.entry.js +17 -9
  21. package/dist/esm/tabworthy-times-picker.entry.js +8 -6
  22. package/dist/esm/tabworthy-times.entry.js +10 -4
  23. package/dist/shared/utils/chrono-parser/chrono-parser.js +3 -1
  24. package/dist/tabworthy-components/{p-46b71504.entry.js → p-1072baac.entry.js} +1 -1
  25. package/dist/tabworthy-components/{p-3ce9a767.entry.js → p-841f3e8f.entry.js} +1 -1
  26. package/dist/tabworthy-components/p-9aa97b54.entry.js +1 -0
  27. package/dist/tabworthy-components/{p-ebbb4c46.entry.js → p-cedac657.entry.js} +1 -1
  28. package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
  29. package/dist/types/components/tabworthy-dates/tabworthy-dates.d.ts +2 -1
  30. package/dist/types/components/tabworthy-times/tabworthy-times.d.ts +2 -1
  31. package/dist/types/components.d.ts +16 -12
  32. package/package.json +1 -1
  33. package/dist/tabworthy-components/p-28acdfa7.entry.js +0 -1
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
6
6
  const defineCustomElements = async (win, options) => {
7
7
  if (typeof window === 'undefined') return undefined;
8
8
  await appGlobals.globalScripts();
9
- 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);
9
+ 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":[8,"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"],"inputShouldFormat":[8,"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);
10
10
  };
11
11
 
12
12
  exports.setNonce = index.setNonce;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- 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);
22
+ 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":[8,"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"],"inputShouldFormat":[8,"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);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -239,8 +239,9 @@ const InclusiveDatesCalendar = class {
239
239
  }
240
240
  focusDate(date) {
241
241
  var _a;
242
- date && ((_a = this.el
243
- .querySelector(`[data-date="${utils.getISODateString(date)}"]`)) === null || _a === void 0 ? void 0 : _a.focus());
242
+ date &&
243
+ ((_a = this.el
244
+ .querySelector(`[data-date="${utils.getISODateString(date)}"]`)) === null || _a === void 0 ? void 0 : _a.focus());
244
245
  }
245
246
  updateCurrentDate(date, moveFocus) {
246
247
  var _a, _b;
@@ -298,8 +299,14 @@ const InclusiveDatesCalendar = class {
298
299
  const showFooter = this.showTodayButton || this.showClearButton || this.showKeyboardHint;
299
300
  const disabled = {
300
301
  year: {
301
- prev: this.disabled || (!!this.minDate && new Date(this.minDate).getFullYear() > utils.getPreviousYear(this.currentDate).getFullYear()),
302
- next: this.disabled || (!!this.maxDate && new Date(this.maxDate).getFullYear() < utils.getNextYear(this.currentDate).getFullYear())
302
+ prev: this.disabled ||
303
+ (!!this.minDate &&
304
+ new Date(this.minDate).getFullYear() >
305
+ utils.getPreviousYear(this.currentDate).getFullYear()),
306
+ next: this.disabled ||
307
+ (!!this.maxDate &&
308
+ new Date(this.maxDate).getFullYear() <
309
+ utils.getNextYear(this.currentDate).getFullYear())
303
310
  },
304
311
  month: {
305
312
  prev: this.disabled ||
@@ -308,15 +315,15 @@ const InclusiveDatesCalendar = class {
308
315
  utils.monthIsDisabled(utils.getNextMonth(this.currentDate).getMonth(), utils.getNextMonth(this.currentDate).getFullYear(), this.minDate, this.maxDate)
309
316
  }
310
317
  };
311
- return (index.h(index.Host, { key: '79018439c3f99dc228ac0d429763d1e86fe9bb03' }, index.h("div", { key: '8863cf5d0de75a1f358723440f11b70128d7c739', class: {
318
+ return (index.h(index.Host, { key: '537927e765bb4b5e3b0fda109fca55278f16e980' }, index.h("div", { key: 'a46f37e038fb6d615785e2d7b871269ea9a6784d', class: {
312
319
  [`${this.getClassName()}-wrapper`]: true,
313
320
  [`${this.getClassName()}-wrapper--inline`]: this.inline
314
- } }, index.h("div", { key: 'b47630e94a50c0bb74da62f1d9e9931ed06e15ab', class: {
321
+ } }, index.h("div", { key: 'd45b18e90cabf14175eacf2b86ffc4ccb261e6e1', class: {
315
322
  [this.getClassName()]: true,
316
- [`${this.getClassName()}--disabled`]: this.disabled,
317
- } }, index.h("div", { key: '594429a8b241c0024edde2e4adb211935e3579fd', class: this.getClassName("header") }, this.showHiddenTitle && (index.h("span", { key: '3258ebc3b0a325f0f21af5126fa31c5cb0197ebb', "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle())), this.showYearStepper && (index.h("button", { key: '0f7d853b969a89b76b5794d9b8c5e03f7ece778b', "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), "aria-disabled": disabled.year.prev, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { key: '1d4da9d54e875a85e22beae6f608de9ec0495a03', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '0fd84be75c074c61a0d839694e5e1b8e7efa480e', points: "11 17 6 12 11 7" }), index.h("polyline", { key: '4b1c8d3e29718cabc669d9194af749ffc2cac7aa', points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { key: '27402a2f431d68487775e4fbe548804755c569cc', "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), "aria-disabled": disabled.month.prev, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { key: 'b503e9f1d393c1a245da483b25edb14f473aac7d', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '37241e518f64e1a7aba4153d0222649e62671ed4', points: "15 18 9 12 15 6" })))), index.h("span", { key: '3e87bb8129d4d7b1db718ee87f5164dec158fb1a', class: this.getClassName("current-month") }, index.h("select", { key: 'ae6c5128f2dc9ec17bd4d4c0090df4a62743b09c', "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), "aria-disabled": this.disabled, name: "month", onChange: this.onMonthSelect }, utils.getMonths(this.locale).map((month, index$1) => {
323
+ [`${this.getClassName()}--disabled`]: this.disabled
324
+ } }, index.h("div", { key: '2ae05963eec49c2202d045d0b1076358ce7024c9', class: this.getClassName("header") }, this.showHiddenTitle && (index.h("span", { key: 'c0590d1799610f4f2bcc566f58ea4496c4a04ce2', "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle())), this.showYearStepper && (index.h("button", { key: '55facf0c12e4529de9f6154e7ed171a36c3f9374', "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), "aria-disabled": disabled.year.prev, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { key: '28be8dd1f26ee0975ee715ac057ea67a4f8cf55e', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '22edd595edf1ce12ecfafc0c9e9074eb4b57a8f1', points: "11 17 6 12 11 7" }), index.h("polyline", { key: '1eddb5fb1d11e2bb51dde46a7e24835a3444552d', points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { key: 'cd338dd018484e40fbc1526c54b4bef0007db39f', "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), "aria-disabled": disabled.month.prev, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { key: '2c8b84702e3276f3d93acff76e87fdbb8453d0bd', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '7d6da26c8abf2193dd0596053dcf6eaf1d0022e0', points: "15 18 9 12 15 6" })))), index.h("span", { key: 'bb77047688ea6f766fb66700e1e824b21e835c21', class: this.getClassName("current-month") }, index.h("select", { key: '57ff448ad512c487382bcba5208eae221d712a14', "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), "aria-disabled": this.disabled, name: "month", onChange: this.onMonthSelect }, utils.getMonths(this.locale).map((month, index$1) => {
318
325
  return (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1, disabled: utils.monthIsDisabled(index$1, this.currentDate.getFullYear(), this.minDate, this.maxDate) }, month));
319
- })), index.h("input", { key: '733a5e0025571c54fc27616c200bfbf07de436cc', "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), "aria-disabled": this.disabled, max: this.maxDate ? this.maxDate.slice(0, 4) : 9999, min: this.minDate ? this.minDate.slice(0, 4) : 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { key: 'eaa9e5e613835a9108f17991ba4743020cfa3146', "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), "aria-disabled": disabled.month.next, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { key: '5729113b90336e0e8d2ade0a24952d186e12867c', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: 'a6cc05a5b83eb6f162654782466a43bd98ada883', points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { key: '6a8556ddc516e5c9a06fd9d71cfa939de48e9bbe', "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), "aria-disabled": disabled.year.next, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { key: '17e51e43e8a378fb73e1d51c8a75bb8e890af433', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: 'bdf9cf173de2dc96beaf2bc615aea901899e5907', points: "13 17 18 12 13 7" }), index.h("polyline", { key: '638e86d7b823782b2331c2569531def9f267dce9', points: "6 17 11 12 6 7" }))))), index.h("div", { key: '8fbe9e86646e09853205865351f3aa298877c43a', class: this.getClassName("body") }, index.h("table", { key: 'bf374b391788b26485362a368a10c009b42a9d84', class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid", "aria-label": this.getTitle() }, index.h("thead", { key: '7cb065ee0fa4bd944c79a130b107d59e8e622b89', class: this.getClassName("calendar-header") }, index.h("tr", { key: '30b196641286a6f9adb3d37167172858a34f2933', class: this.getClassName("weekday-row") }, (_a = this.weekdays) === null || _a === void 0 ? void 0 : _a.map((weekday) => (index.h("th", { role: "columnheader", abbr: weekday[1], class: this.getClassName("weekday"), key: weekday[0], scope: "col" }, index.h("span", { "aria-hidden": "true" }, weekday[0]), index.h("span", { class: "visually-hidden" }, weekday[1])))))), index.h("tbody", { key: '922edf01c35e7512654d8661348301d275c67647' }, this.getCalendarRows().map((calendarRow) => {
326
+ })), index.h("input", { key: 'cb894dcf8007f4aa4e166b08602c35143b9c582d', "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), "aria-disabled": this.disabled, max: this.maxDate ? this.maxDate.slice(0, 4) : 9999, min: this.minDate ? this.minDate.slice(0, 4) : 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { key: '7ac8e4ad643f4da536142cdca8104ecc4f5e739f', "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), "aria-disabled": disabled.month.next, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { key: 'ac31e4bb473fb0fb18d16c67b24601313d60104b', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: 'c611342212d7ec1441f4d395b65fa1bee50f8701', points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { key: '0123d1421e2af85b7cfaa524d3df545493112856', "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), "aria-disabled": disabled.year.next, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { key: '38a75dcba7d4aa040da52d3a9c10792e0f48eeea', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: 'da2a0780d240ccf266aacc538f1e90db5b758c34', points: "13 17 18 12 13 7" }), index.h("polyline", { key: '5299b9a1211e860300c62d32338ce49d129d3cce', points: "6 17 11 12 6 7" }))))), index.h("div", { key: '6c3aa5ab44b987b12425f3e205c62706b52b957a', class: this.getClassName("body") }, index.h("table", { key: 'ff27e4773d83c96657c99314bebed5786ccde4c6', class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid", "aria-label": this.getTitle() }, index.h("thead", { key: '8a20159ac1fc8e86273ef9b4652514df1eedf049', class: this.getClassName("calendar-header") }, index.h("tr", { key: 'd8e330c6149c3e49e387ac2084f985e14aad5e2e', class: this.getClassName("weekday-row") }, (_a = this.weekdays) === null || _a === void 0 ? void 0 : _a.map((weekday) => (index.h("th", { role: "columnheader", abbr: weekday[1], class: this.getClassName("weekday"), key: weekday[0], scope: "col" }, index.h("span", { "aria-hidden": "true" }, weekday[0]), index.h("span", { class: "visually-hidden" }, weekday[1])))))), index.h("tbody", { key: '659aa92ae94aa8904289be27821be2ec1b1e469c' }, this.getCalendarRows().map((calendarRow) => {
320
327
  const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
321
328
  return (index.h("tr", { class: this.getClassName("calendar-row"), key: rowKey }, calendarRow.map((day) => {
322
329
  var _a, _b, _c;
@@ -378,12 +385,13 @@ const InclusiveDatesCalendar = class {
378
385
  : isToday
379
386
  ? "em"
380
387
  : "span";
381
- return (index.h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? "true" : undefined, class: className, "data-date": utils.getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: utils.isSameDay(day, this.currentDate) && !this.disabled
388
+ return (index.h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? "true" : undefined, class: className, "data-date": utils.getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: utils.isSameDay(day, this.currentDate) &&
389
+ !this.disabled
382
390
  ? 0
383
391
  : -1 }, index.h(Tag, { "aria-hidden": "true" }, day.getDate()), index.h("span", { class: "visually-hidden" }, getScreenReaderText())));
384
392
  })));
385
- })))), showFooter && (index.h("div", { key: '0a189fdb44b39bddc7a26c7bd3e4a889307fee39', class: this.getClassName("footer") }, index.h("div", { key: 'fbdf81d3a93afa19cdedba1423d2c64ab4e1fbcb', class: this.getClassName("footer-buttons") }, this.showTodayButton && (index.h("button", { key: '4faad216c53bda804e8b660d758e30e0bf538940', class: this.getClassName("today-button"), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (index.h("button", { key: '84ad553438da2c701c0ec75328eac36d01b3daa3', class: this.getClassName("clear-button"), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton))), this.showKeyboardHint &&
386
- !window.matchMedia("(pointer: coarse)").matches && (index.h("button", { key: 'f63c1d1c802173072424a098ab52fffe35df7f56', type: "button", onClick: () => alert("Todo: Add Keyboard helper!"), class: this.getClassName("keyboard-hint") }, index.h("svg", { key: '790b14010416be81d39a52549a5677116e436a63', xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 48 48", fill: "currentColor" }, index.h("path", { key: '83a801f97bf0a2fbd33f728cd00c5dfab75eb213', d: "M7 38q-1.2 0-2.1-.925Q4 36.15 4 35V13q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.15-.9 2.075Q42.2 38 41 38Zm0-3h34V13H7v22Zm8-3.25h18v-3H15Zm-4.85-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm-24.7-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3ZM7 35V13v22Z" })), this.labels.keyboardHint))))), index.h("slot", { key: '1b6c88f7c9e4e6fa7109b99ef774af1ee8de24ea', name: "after-calendar" }))));
393
+ })))), showFooter && (index.h("div", { key: '142e1eb18019ede50c8e7da056ff365a10478849', class: this.getClassName("footer") }, index.h("div", { key: '2d6b06ed8a2fddadb107521730c71b97ce0c0a05', class: this.getClassName("footer-buttons") }, this.showTodayButton && (index.h("button", { key: '516d186b77c0d9229b6d96cfa6f07067fbd83d15', class: this.getClassName("today-button"), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (index.h("button", { key: '30a0c6b46efe755b96fef443e6f52de8e558e43a', class: this.getClassName("clear-button"), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton))), this.showKeyboardHint &&
394
+ !window.matchMedia("(pointer: coarse)").matches && (index.h("button", { key: 'f0a1d1a382ca37b3810888aa1244a090f9b94e93', type: "button", onClick: () => alert("Todo: Add Keyboard helper!"), class: this.getClassName("keyboard-hint") }, index.h("svg", { key: 'fa193bf2bafc73e3db2720e87fecbc25ab6b5a7c', xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 48 48", fill: "currentColor" }, index.h("path", { key: 'a3fba5ad5c0e5faf74b49d81bc57ee3e98596df5', d: "M7 38q-1.2 0-2.1-.925Q4 36.15 4 35V13q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.15-.9 2.075Q42.2 38 41 38Zm0-3h34V13H7v22Zm8-3.25h18v-3H15Zm-4.85-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm-24.7-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3ZM7 35V13v22Z" })), this.labels.keyboardHint))))), index.h("slot", { key: '11c329aa5161b2720b1e9246fa1f2883f92c6783', name: "after-calendar" }))));
387
395
  }
388
396
  get el() { return index.getElement(this); }
389
397
  static get watchers() { return {
@@ -875,7 +883,7 @@ const InclusiveDatesModal = class {
875
883
  }
876
884
  }
877
885
  render() {
878
- return (index.h(index.Host, { key: 'dd44f82a23c471268369362e7f0899d197b6686a', showing: this.showing, ref: (r) => r && (this.el = r) }, !this.inline && this.showing && (index.h("div", { key: '6c5d845e75737c366defff2434f51ca345a172f3', part: "body", onKeyDown: this.onKeyDown, role: "dialog", tabindex: -1, "aria-hidden": !this.showing, "aria-label": this.label, "aria-modal": this.showing }, index.h("focus-trap", { key: '56beecf073b790849d2761b3ac135641612744e1' }, index.h("div", { key: '85aca24946135337732f404ac164553f4374c9ec', part: "content" }, index.h("slot", { key: 'cb7b7c57ed1012256e3e045f64b40ce8c5d8dd8b' }))))), this.inline && (index.h("div", { key: '0a6d50757d0c77f1cc781dfe7676a4b3f8e74c22', part: "content" }, index.h("slot", { key: '17e71b147f00061c3f3f4deb3b66abb465714f8a' })))));
886
+ return (index.h(index.Host, { key: '773d9edf7cf6598394c1210a1fab91af0bcb951e', showing: this.showing, ref: (r) => r && (this.el = r) }, !this.inline && this.showing && (index.h("div", { key: 'c456932007f7ea9a9c3727d9d08fd8fbea5b8670', part: "body", onKeyDown: this.onKeyDown, role: "dialog", tabindex: -1, "aria-hidden": !this.showing, "aria-label": this.label, "aria-modal": this.showing }, index.h("focus-trap", { key: 'c1355fe48117067d62ede321afd1f90bf9bf4c22' }, index.h("div", { key: 'fbd3ec5e0e7069574f1dbd6c38b40e409b837045', part: "content" }, index.h("slot", { key: 'bad04015cc3945efbb68a52de623ee1f4b584868' }))))), this.inline && (index.h("div", { key: 'b0577b12dd1bec091de967ccd0ac297451576ad8', part: "content" }, index.h("slot", { key: '5457a9bd5d08feac90adb2ee061d60fb5fb94657' })))));
879
887
  }
880
888
  };
881
889
  InclusiveDatesModal.style = tabworthyDatesModalCss();
@@ -10449,7 +10449,9 @@ const chronoParseRange = async (dateString, options) => {
10449
10449
  parsedRange[0].end &&
10450
10450
  parsedRange[0].end.date() instanceof Date)
10451
10451
  endDate = parsedRange[0].end.date();
10452
- const returnValue = { value: { start: null, end: null } };
10452
+ const returnValue = {
10453
+ value: { start: null, end: null }
10454
+ };
10453
10455
  // TODO: fix this
10454
10456
  // @ts-ignore
10455
10457
  if (startDate instanceof Date || endDate instanceof Date) {
@@ -10523,7 +10525,7 @@ const TabworthyDates = class {
10523
10525
  // Show or hide the today button
10524
10526
  this.showTodayButton = true;
10525
10527
  // Enable or disable input field formatting for accepted dates (eg. "Tuesday May 2, 2021" instead of "2021-05-02")
10526
- this.formatInputOnAccept = true;
10528
+ this.inputShouldFormat = true;
10527
10529
  // Show or hide the keyboard hints
10528
10530
  this.showKeyboardHint = false;
10529
10531
  // Function to disable individual dates
@@ -10695,6 +10697,12 @@ const TabworthyDates = class {
10695
10697
  }
10696
10698
  };
10697
10699
  }
10700
+ shouldInputFormat() {
10701
+ if (typeof this.inputShouldFormat === "string") {
10702
+ return this.inputShouldFormat === "true";
10703
+ }
10704
+ return !!this.inputShouldFormat;
10705
+ }
10698
10706
  componentDidLoad() {
10699
10707
  this.syncFromValueProp();
10700
10708
  this.componentReady.emit();
@@ -10745,7 +10753,7 @@ const TabworthyDates = class {
10745
10753
  this.announceDateChange(this.internalValue);
10746
10754
  }
10747
10755
  formatInput(enabled, useInputValue = true) {
10748
- if (this.formatInputOnAccept === false || enabled === false) {
10756
+ if (this.shouldInputFormat() === false || enabled === false) {
10749
10757
  if (this.internalValue) {
10750
10758
  if (this.internalValue.length === 0)
10751
10759
  return;
@@ -10756,7 +10764,7 @@ const TabworthyDates = class {
10756
10764
  return;
10757
10765
  }
10758
10766
  if (this.internalValue &&
10759
- this.formatInputOnAccept === true &&
10767
+ this.shouldInputFormat() === true &&
10760
10768
  this.errorState === false) {
10761
10769
  if (Array.isArray(this.internalValue)) {
10762
10770
  if (this.internalValue.length === 0)
@@ -10881,12 +10889,12 @@ const TabworthyDates = class {
10881
10889
  }
10882
10890
  // update text input (useInputValue=false so it formats from internalValue, not from input's current text)
10883
10891
  if (this.inputRef) {
10884
- this.formatInput(!!this.formatInputOnAccept, false);
10892
+ this.formatInput(!!this.shouldInputFormat(), false);
10885
10893
  }
10886
10894
  }
10887
10895
  render() {
10888
10896
  var _a;
10889
- 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: () => {
10897
+ return (index$1.h(index$1.Host, { key: 'af18409cc70d00e832941ec2cb0ba6e8de54b4bc' }, index$1.h("label", { key: '776ac232cd674198f307511edacfc25ee7ea073b', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), index$1.h("br", { key: '012a806feffe904a5e492c79822575b10e02c47c' }), index$1.h("div", { key: '194798eb7f62c065f757dfdb4a4f4087a6321d33', class: this.getClassName("input-container") }, index$1.h("input", { key: '89fb2f8b6e669c126ca1b905f054af360880010f', 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: 'fd20cc4fa19942211058ec32df5c40ab1076f3e4', 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: 'ed649175c4b0b9f2fd84fc9ca90657a8fa202dd8', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
10890
10898
  if (!this.pickerRef)
10891
10899
  return;
10892
10900
  this.pickerRef.modalIsOpen = true;
@@ -10894,11 +10902,11 @@ const TabworthyDates = class {
10894
10902
  if (!this.pickerRef)
10895
10903
  return;
10896
10904
  this.pickerRef.modalIsOpen = false;
10897
- }, 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 &&
10905
+ }, inline: this.inline }, index$1.h("tabworthy-dates-calendar", { key: '7f77e44188b8521ad0f8c7a5c4cd91ac8f72d58c', 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 &&
10898
10906
  ((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
10899
- this.chronoSupportedLocale && (index$1.h("div", { key: '0e0e718a43bbe2f2af69af45af01f8f75f4fe362', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
10907
+ this.chronoSupportedLocale && (index$1.h("div", { key: '9ac2426141cfcebc38db079a90b99fe46cb76267', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
10900
10908
  return (index$1.h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
10901
- }))), this.errorState && (index$1.h("div", { key: 'b51d6a07a017bdb7af09098e848c7184944a4631', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
10909
+ }))), this.errorState && (index$1.h("div", { key: 'e9043f07596f0dea2092593bb2a3966e33a04a78', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
10902
10910
  }
10903
10911
  get el() { return index$1.getElement(this); }
10904
10912
  static get watchers() { return {
@@ -92,7 +92,8 @@ const InclusiveTimesPicker = class {
92
92
  }
93
93
  }
94
94
  else {
95
- this.internalHours = this.internalHours === 0 ? 23 : this.internalHours - 1;
95
+ this.internalHours =
96
+ this.internalHours === 0 ? 23 : this.internalHours - 1;
96
97
  }
97
98
  this.emitTimeChange();
98
99
  };
@@ -101,7 +102,8 @@ const InclusiveTimesPicker = class {
101
102
  this.emitTimeChange();
102
103
  };
103
104
  this.handleMinuteDecrement = () => {
104
- this.internalMinutes = this.internalMinutes === 0 ? 59 : this.internalMinutes - 1;
105
+ this.internalMinutes =
106
+ this.internalMinutes === 0 ? 59 : this.internalMinutes - 1;
105
107
  this.emitTimeChange();
106
108
  };
107
109
  }
@@ -153,16 +155,16 @@ const InclusiveTimesPicker = class {
153
155
  const displayHours = this.getDisplayHours();
154
156
  const maxHours = this.use12HourFormat ? 12 : 23;
155
157
  const minHours = this.use12HourFormat ? 1 : 0;
156
- return (index.h(index.Host, { key: '826752ac3b056591e50c55198f01b232e0d914e7', class: this.elementClassName, "aria-label": this.labels.timePicker }, index.h("div", { key: '5e7179bcf1e2e9087f7fb8f62366af4b3432cf9b', class: `${this.elementClassName}__container` }, index.h("div", { key: 'f589fc8f0672b1446e0e3b9e3d2d1a134355975c', class: `${this.elementClassName}__field` }, index.h("label", { key: 'a35e5e1e6e1be6166d2908b200904c4ebf266170', htmlFor: `${this.elementClassName}-hours`, class: {
158
+ return (index.h(index.Host, { key: '22eb745a93c68e4e4f78c11d2941681897aa73ef', class: this.elementClassName, "aria-label": this.labels.timePicker }, index.h("div", { key: 'ccb05b5d5793442b63aa4c25d5120db8b60bedf3', class: `${this.elementClassName}__container` }, index.h("div", { key: '3fc4ede2d685e43edcfefe8c88de19f705e94478', class: `${this.elementClassName}__field` }, index.h("label", { key: 'fb04e846fc9807155c4390e92722850cdaa4bba2', htmlFor: `${this.elementClassName}-hours`, class: {
157
159
  [`${this.elementClassName}__label`]: true,
158
160
  [`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
159
- } }, this.labels.hours), index.h("div", { key: '7c2340bc7b58f47ccb5cf555460665fe99d2bb14', class: `${this.elementClassName}__control` }, index.h("button", { key: 'dd0339ee230032b0ae681b19e7ccad362454e70d', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleHourIncrement, disabled: this.disabled, "aria-label": this.labels.incrementHours }, index.h("svg", { key: 'f976e2e85f45795317a8e6f8b97f56d787075b30', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: 'd92fe17241918aa191b3bf8c1cf67d0783d6904c', points: "18 15 12 9 6 15" }))), index.h("input", { key: '12c6de6d83c13e437f1ec0f6e6a552c9806eee7e', id: `${this.elementClassName}-hours`, type: "number", class: `${this.elementClassName}__input`, value: this.padZero(displayHours), min: minHours, max: maxHours, onInput: this.handleHourChange, disabled: this.disabled, "aria-label": this.labels.hours }), index.h("button", { key: '9a3fe68583a1a92c1cb9ce82d8c79d435cc364c6', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleHourDecrement, disabled: this.disabled, "aria-label": this.labels.decrementHours }, index.h("svg", { key: 'c52dd2da808714a53da185d830609a83165d0435', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: '759299e487f09e8047643aed7bf5c27687ba0114', points: "6 9 12 15 18 9" }))))), index.h("div", { key: '9839abd75a1d2fbbfd085b5090586e5b90e43582', class: `${this.elementClassName}__separator` }, ":"), index.h("div", { key: '40a7656ee0e1fdde1287fad6200b415361e9d8a7', class: `${this.elementClassName}__field` }, index.h("label", { key: '12924e2ce017f31969cdd17efc61c5bc2c7299e1', htmlFor: `${this.elementClassName}-minutes`, class: {
161
+ } }, this.labels.hours), index.h("div", { key: 'd5ed4a06ea4ce2eaaefda2fa316a4789aa4a210a', class: `${this.elementClassName}__control` }, index.h("button", { key: '193c89e3b50934225c05f3241546bc3e7063b1b8', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleHourIncrement, disabled: this.disabled, "aria-label": this.labels.incrementHours }, index.h("svg", { key: 'f6cefeb18839bce2b644d92608f802bc001377b3', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: '58519a5d7a8cddfe2273f5c8beec3eab7307b43c', points: "18 15 12 9 6 15" }))), index.h("input", { key: '187ace01f2d83ad59766159d6509e30100b7f812', id: `${this.elementClassName}-hours`, type: "number", class: `${this.elementClassName}__input`, value: this.padZero(displayHours), min: minHours, max: maxHours, onInput: this.handleHourChange, disabled: this.disabled, "aria-label": this.labels.hours }), index.h("button", { key: '3bbe5b73ac8a85c165f0332d3c70d30aede096e6', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleHourDecrement, disabled: this.disabled, "aria-label": this.labels.decrementHours }, index.h("svg", { key: 'fd7c431618e09d4326c95398f83f22ea2258695e', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: '99aab5a584aed4d8fc1b30dcada0c76e42ba6ac7', points: "6 9 12 15 18 9" }))))), index.h("div", { key: 'a8958b60136f6220bbd944beaa6cf73c7660e3fb', class: `${this.elementClassName}__separator` }, ":"), index.h("div", { key: '72b46b517876dc8bc3490afef1860514b46efc46', class: `${this.elementClassName}__field` }, index.h("label", { key: 'e09788653c3873e97e1922fcda3076878f9b1ca7', htmlFor: `${this.elementClassName}-minutes`, class: {
160
162
  [`${this.elementClassName}__label`]: true,
161
163
  [`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
162
- } }, this.labels.minutes), index.h("div", { key: '71ce2e345a98345b591e92803ad25fe10ae52ac1', class: `${this.elementClassName}__control` }, index.h("button", { key: 'ec85968d4d7b43fb348cbc9577f6329bc510b88b', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleMinuteIncrement, disabled: this.disabled, "aria-label": this.labels.incrementMinutes }, index.h("svg", { key: '459a04638058154613fc642ac6ec3c884b2eb3ed', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: '88747079b0a8cdc6f2d9bea21ec5b74dd334c889', points: "18 15 12 9 6 15" }))), index.h("input", { key: 'ccd14478435689bad16be5b3038c37fff7e55506', id: `${this.elementClassName}-minutes`, type: "number", class: `${this.elementClassName}__input`, value: this.padZero(this.internalMinutes), min: 0, max: 59, onInput: this.handleMinuteChange, disabled: this.disabled, "aria-label": this.labels.minutes }), index.h("button", { key: 'b645e0a9c10cf35e9b6ebfe6660f9e4770edabe7', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleMinuteDecrement, disabled: this.disabled, "aria-label": this.labels.decrementMinutes }, index.h("svg", { key: 'e1fbeb018b7d3898af319f227d2f3257a281b141', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: '9fa1f35020d93eea906247c0eca79c6978e75c81', points: "6 9 12 15 18 9" }))))), this.use12HourFormat && (index.h("div", { key: '80f5d6355c5627d98e25a3d945f3224d217d350b', class: `${this.elementClassName}__period` }, index.h("button", { key: '7fdbfe17b0b1d50a707aeb927847626d2e4b277a', type: "button", class: {
164
+ } }, this.labels.minutes), index.h("div", { key: '7bf9642b58249014b2ad802c3fe30f67e5354f4d', class: `${this.elementClassName}__control` }, index.h("button", { key: '71c889d966bceb4aa9e7b6f78c57e968b207ddda', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleMinuteIncrement, disabled: this.disabled, "aria-label": this.labels.incrementMinutes }, index.h("svg", { key: '3aad10f2b79e5e819277d4566ab7d336449162f9', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: '68dfdfc6cd2bd1f8f916dbf60155eb2cc4a8328d', points: "18 15 12 9 6 15" }))), index.h("input", { key: '15eb767d9318c6d3e7aa0075bf9c3362adf75dd3', id: `${this.elementClassName}-minutes`, type: "number", class: `${this.elementClassName}__input`, value: this.padZero(this.internalMinutes), min: 0, max: 59, onInput: this.handleMinuteChange, disabled: this.disabled, "aria-label": this.labels.minutes }), index.h("button", { key: '5c808f40c040e8ff3e4632738f58e9941e69ec03', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleMinuteDecrement, disabled: this.disabled, "aria-label": this.labels.decrementMinutes }, index.h("svg", { key: 'bad9dba94e622c208cb26823963664ff77fc7799', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, index.h("polyline", { key: '92eb0d63e7be970b2207cc0c47964eef48005baf', points: "6 9 12 15 18 9" }))))), this.use12HourFormat && (index.h("div", { key: '8a3235abb0bf0764993271ff4969ca6aaac83bd7', class: `${this.elementClassName}__period` }, index.h("button", { key: 'd8f0679faadf7f0cf04e2f57bed4e9c202d0a056', type: "button", class: {
163
165
  [`${this.elementClassName}__period-button`]: true,
164
166
  [`${this.elementClassName}__period-button--active`]: this.period === "AM"
165
- }, onClick: () => this.handlePeriodChange("AM"), disabled: this.disabled, "aria-label": this.labels.am, "aria-pressed": this.period === "AM" }, this.labels.am), index.h("button", { key: '5817fb8c5a5901077320472b9535700d3e980c3c', type: "button", class: {
167
+ }, onClick: () => this.handlePeriodChange("AM"), disabled: this.disabled, "aria-label": this.labels.am, "aria-pressed": this.period === "AM" }, this.labels.am), index.h("button", { key: '393802044645d205a71ae593227df550adce2970', type: "button", class: {
166
168
  [`${this.elementClassName}__period-button`]: true,
167
169
  [`${this.elementClassName}__period-button--active`]: this.period === "PM"
168
170
  }, onClick: () => this.handlePeriodChange("PM"), disabled: this.disabled, "aria-label": this.labels.pm, "aria-pressed": this.period === "PM" }, this.labels.pm))))));
@@ -111,7 +111,7 @@ const InclusiveTimes = class {
111
111
  // Can be used for month change tracking
112
112
  };
113
113
  this.handleInputBlur = () => {
114
- if (this.inputShouldFormat) {
114
+ if (this.shouldInputFormat()) {
115
115
  this.formatInput();
116
116
  }
117
117
  };
@@ -126,6 +126,12 @@ const InclusiveTimes = class {
126
126
  }
127
127
  };
128
128
  }
129
+ shouldInputFormat() {
130
+ if (typeof this.inputShouldFormat === "string") {
131
+ return this.inputShouldFormat === "true";
132
+ }
133
+ return !!this.inputShouldFormat;
134
+ }
129
135
  watchValue(_newValue) {
130
136
  this.syncFromValueProp();
131
137
  }
@@ -187,7 +193,7 @@ const InclusiveTimes = class {
187
193
  this.selectDateTime.emit(formatted);
188
194
  }
189
195
  this.errorState = false;
190
- if (this.inputShouldFormat) {
196
+ if (this.shouldInputFormat()) {
191
197
  this.formatInput();
192
198
  }
193
199
  }
@@ -221,7 +227,7 @@ const InclusiveTimes = class {
221
227
  }
222
228
  render() {
223
229
  var _a;
224
- 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: () => {
230
+ return (index.h(index.Host, { key: '4c2b4df711aef3ecab43e101650d8af27088813b', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, index.h("label", { key: 'bd4a9fcbfb146dac1bf856cfc3f5b5e250714f9c', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), index.h("div", { key: '845800995b3d9b88f6f0a0d02486de2821fdaaef', class: this.getClassName("input-container") }, index.h("input", { key: 'bc8033523f88c72205d62068bda4199b666ef674', 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: '02d49c8b78edfbdd3cbbb6a738323d4de10ac46d', 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: '6e03950ffd59ce6d7391e878479359d5d8ecf665', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
225
231
  if (this.pickerRef) {
226
232
  this.pickerRef.modalIsOpen = true;
227
233
  }
@@ -229,7 +235,7 @@ const InclusiveTimes = class {
229
235
  if (this.pickerRef) {
230
236
  this.pickerRef.modalIsOpen = false;
231
237
  }
232
- }, 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))));
238
+ }, inline: this.inline }, index.h("div", { key: '8e29281638aaa80d71220ad08dab482bf5a3c1e4', class: this.getClassName("picker-container") }, index.h("tabworthy-dates-calendar", { key: '5e0129fe76d1de0b760201d462ce446132fc7003', 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: '4d2da22f4da3460a9626c886b61e22eb66c0a23f', slot: "after-calendar", class: this.getClassName("time-section") }, index.h("tabworthy-times-picker", { key: '2d9a9a8ce12e0659f4f1c82f1f8d64d829fc183b', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (index.h("div", { key: 'df2cdfcd866f26108032c75a3f8c2f55ba5c9b10', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
233
239
  }
234
240
  get el() { return index.getElement(this); }
235
241
  static get watchers() { return {
@@ -52,7 +52,7 @@ export class TabworthyDates {
52
52
  // Show or hide the today button
53
53
  this.showTodayButton = true;
54
54
  // Enable or disable input field formatting for accepted dates (eg. "Tuesday May 2, 2021" instead of "2021-05-02")
55
- this.formatInputOnAccept = true;
55
+ this.inputShouldFormat = true;
56
56
  // Show or hide the keyboard hints
57
57
  this.showKeyboardHint = false;
58
58
  // Function to disable individual dates
@@ -224,6 +224,12 @@ export class TabworthyDates {
224
224
  }
225
225
  };
226
226
  }
227
+ shouldInputFormat() {
228
+ if (typeof this.inputShouldFormat === "string") {
229
+ return this.inputShouldFormat === "true";
230
+ }
231
+ return !!this.inputShouldFormat;
232
+ }
227
233
  componentDidLoad() {
228
234
  this.syncFromValueProp();
229
235
  this.componentReady.emit();
@@ -274,7 +280,7 @@ export class TabworthyDates {
274
280
  this.announceDateChange(this.internalValue);
275
281
  }
276
282
  formatInput(enabled, useInputValue = true) {
277
- if (this.formatInputOnAccept === false || enabled === false) {
283
+ if (this.shouldInputFormat() === false || enabled === false) {
278
284
  if (this.internalValue) {
279
285
  if (this.internalValue.length === 0)
280
286
  return;
@@ -285,7 +291,7 @@ export class TabworthyDates {
285
291
  return;
286
292
  }
287
293
  if (this.internalValue &&
288
- this.formatInputOnAccept === true &&
294
+ this.shouldInputFormat() === true &&
289
295
  this.errorState === false) {
290
296
  if (Array.isArray(this.internalValue)) {
291
297
  if (this.internalValue.length === 0)
@@ -410,12 +416,12 @@ export class TabworthyDates {
410
416
  }
411
417
  // update text input (useInputValue=false so it formats from internalValue, not from input's current text)
412
418
  if (this.inputRef) {
413
- this.formatInput(!!this.formatInputOnAccept, false);
419
+ this.formatInput(!!this.shouldInputFormat(), false);
414
420
  }
415
421
  }
416
422
  render() {
417
423
  var _a;
418
- return (h(Host, { key: 'd319da990a03fea708c0ab347aec215baae3cdf9' }, h("label", { key: '5a050660fa3a264b67c1744d802759c90b973337', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: 'ecd9e1bffa8a30f7f4eabbc8a7e51a6ee9fc22ca' }), h("div", { key: '6507ab0f2980e66e72e78b90c00ff43c3ad771ef', class: this.getClassName("input-container") }, 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 && (h("button", { key: '610862237f6f6bbd6690952b050ef684ed00da94', 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: 'b3f242501f41e78aa6772d451c4ffd8123cf4228', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
424
+ return (h(Host, { key: 'af18409cc70d00e832941ec2cb0ba6e8de54b4bc' }, h("label", { key: '776ac232cd674198f307511edacfc25ee7ea073b', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: '012a806feffe904a5e492c79822575b10e02c47c' }), h("div", { key: '194798eb7f62c065f757dfdb4a4f4087a6321d33', class: this.getClassName("input-container") }, h("input", { key: '89fb2f8b6e669c126ca1b905f054af360880010f', 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 && (h("button", { key: 'fd20cc4fa19942211058ec32df5c40ab1076f3e4', 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: 'ed649175c4b0b9f2fd84fc9ca90657a8fa202dd8', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
419
425
  if (!this.pickerRef)
420
426
  return;
421
427
  this.pickerRef.modalIsOpen = true;
@@ -423,11 +429,11 @@ export class TabworthyDates {
423
429
  if (!this.pickerRef)
424
430
  return;
425
431
  this.pickerRef.modalIsOpen = false;
426
- }, inline: this.inline }, 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 &&
432
+ }, inline: this.inline }, h("tabworthy-dates-calendar", { key: '7f77e44188b8521ad0f8c7a5c4cd91ac8f72d58c', 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 &&
427
433
  ((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
428
- this.chronoSupportedLocale && (h("div", { key: '0e0e718a43bbe2f2af69af45af01f8f75f4fe362', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
434
+ this.chronoSupportedLocale && (h("div", { key: '9ac2426141cfcebc38db079a90b99fe46cb76267', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
429
435
  return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
430
- }))), this.errorState && (h("div", { key: 'b51d6a07a017bdb7af09098e848c7184944a4631', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
436
+ }))), this.errorState && (h("div", { key: 'e9043f07596f0dea2092593bb2a3966e33a04a78', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
431
437
  }
432
438
  static get is() { return "tabworthy-dates"; }
433
439
  static get encapsulation() { return "scoped"; }
@@ -885,12 +891,12 @@ export class TabworthyDates {
885
891
  "attribute": "show-today-button",
886
892
  "defaultValue": "true"
887
893
  },
888
- "formatInputOnAccept": {
889
- "type": "boolean",
894
+ "inputShouldFormat": {
895
+ "type": "any",
890
896
  "mutable": false,
891
897
  "complexType": {
892
- "original": "boolean",
893
- "resolved": "boolean",
898
+ "original": "| boolean\n | string",
899
+ "resolved": "boolean | string",
894
900
  "references": {}
895
901
  },
896
902
  "required": false,
@@ -231,8 +231,9 @@ export class InclusiveDatesCalendar {
231
231
  }
232
232
  focusDate(date) {
233
233
  var _a;
234
- date && ((_a = this.el
235
- .querySelector(`[data-date="${getISODateString(date)}"]`)) === null || _a === void 0 ? void 0 : _a.focus());
234
+ date &&
235
+ ((_a = this.el
236
+ .querySelector(`[data-date="${getISODateString(date)}"]`)) === null || _a === void 0 ? void 0 : _a.focus());
236
237
  }
237
238
  updateCurrentDate(date, moveFocus) {
238
239
  var _a, _b;
@@ -290,8 +291,14 @@ export class InclusiveDatesCalendar {
290
291
  const showFooter = this.showTodayButton || this.showClearButton || this.showKeyboardHint;
291
292
  const disabled = {
292
293
  year: {
293
- prev: this.disabled || (!!this.minDate && new Date(this.minDate).getFullYear() > getPreviousYear(this.currentDate).getFullYear()),
294
- next: this.disabled || (!!this.maxDate && new Date(this.maxDate).getFullYear() < getNextYear(this.currentDate).getFullYear())
294
+ prev: this.disabled ||
295
+ (!!this.minDate &&
296
+ new Date(this.minDate).getFullYear() >
297
+ getPreviousYear(this.currentDate).getFullYear()),
298
+ next: this.disabled ||
299
+ (!!this.maxDate &&
300
+ new Date(this.maxDate).getFullYear() <
301
+ getNextYear(this.currentDate).getFullYear())
295
302
  },
296
303
  month: {
297
304
  prev: this.disabled ||
@@ -300,15 +307,15 @@ export class InclusiveDatesCalendar {
300
307
  monthIsDisabled(getNextMonth(this.currentDate).getMonth(), getNextMonth(this.currentDate).getFullYear(), this.minDate, this.maxDate)
301
308
  }
302
309
  };
303
- return (h(Host, { key: '79018439c3f99dc228ac0d429763d1e86fe9bb03' }, h("div", { key: '8863cf5d0de75a1f358723440f11b70128d7c739', class: {
310
+ return (h(Host, { key: '537927e765bb4b5e3b0fda109fca55278f16e980' }, h("div", { key: 'a46f37e038fb6d615785e2d7b871269ea9a6784d', class: {
304
311
  [`${this.getClassName()}-wrapper`]: true,
305
312
  [`${this.getClassName()}-wrapper--inline`]: this.inline
306
- } }, h("div", { key: 'b47630e94a50c0bb74da62f1d9e9931ed06e15ab', class: {
313
+ } }, h("div", { key: 'd45b18e90cabf14175eacf2b86ffc4ccb261e6e1', class: {
307
314
  [this.getClassName()]: true,
308
- [`${this.getClassName()}--disabled`]: this.disabled,
309
- } }, h("div", { key: '594429a8b241c0024edde2e4adb211935e3579fd', class: this.getClassName("header") }, this.showHiddenTitle && (h("span", { key: '3258ebc3b0a325f0f21af5126fa31c5cb0197ebb', "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle())), this.showYearStepper && (h("button", { key: '0f7d853b969a89b76b5794d9b8c5e03f7ece778b', "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), "aria-disabled": disabled.year.prev, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { key: '1d4da9d54e875a85e22beae6f608de9ec0495a03', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: '0fd84be75c074c61a0d839694e5e1b8e7efa480e', points: "11 17 6 12 11 7" }), h("polyline", { key: '4b1c8d3e29718cabc669d9194af749ffc2cac7aa', points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { key: '27402a2f431d68487775e4fbe548804755c569cc', "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), "aria-disabled": disabled.month.prev, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { key: 'b503e9f1d393c1a245da483b25edb14f473aac7d', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: '37241e518f64e1a7aba4153d0222649e62671ed4', points: "15 18 9 12 15 6" })))), h("span", { key: '3e87bb8129d4d7b1db718ee87f5164dec158fb1a', class: this.getClassName("current-month") }, h("select", { key: 'ae6c5128f2dc9ec17bd4d4c0090df4a62743b09c', "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), "aria-disabled": this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => {
315
+ [`${this.getClassName()}--disabled`]: this.disabled
316
+ } }, h("div", { key: '2ae05963eec49c2202d045d0b1076358ce7024c9', class: this.getClassName("header") }, this.showHiddenTitle && (h("span", { key: 'c0590d1799610f4f2bcc566f58ea4496c4a04ce2', "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle())), this.showYearStepper && (h("button", { key: '55facf0c12e4529de9f6154e7ed171a36c3f9374', "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), "aria-disabled": disabled.year.prev, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { key: '28be8dd1f26ee0975ee715ac057ea67a4f8cf55e', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: '22edd595edf1ce12ecfafc0c9e9074eb4b57a8f1', points: "11 17 6 12 11 7" }), h("polyline", { key: '1eddb5fb1d11e2bb51dde46a7e24835a3444552d', points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { key: 'cd338dd018484e40fbc1526c54b4bef0007db39f', "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), "aria-disabled": disabled.month.prev, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { key: '2c8b84702e3276f3d93acff76e87fdbb8453d0bd', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: '7d6da26c8abf2193dd0596053dcf6eaf1d0022e0', points: "15 18 9 12 15 6" })))), h("span", { key: 'bb77047688ea6f766fb66700e1e824b21e835c21', class: this.getClassName("current-month") }, h("select", { key: '57ff448ad512c487382bcba5208eae221d712a14', "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), "aria-disabled": this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => {
310
317
  return (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1, disabled: monthIsDisabled(index, this.currentDate.getFullYear(), this.minDate, this.maxDate) }, month));
311
- })), h("input", { key: '733a5e0025571c54fc27616c200bfbf07de436cc', "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), "aria-disabled": this.disabled, max: this.maxDate ? this.maxDate.slice(0, 4) : 9999, min: this.minDate ? this.minDate.slice(0, 4) : 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { key: 'eaa9e5e613835a9108f17991ba4743020cfa3146', "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), "aria-disabled": disabled.month.next, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { key: '5729113b90336e0e8d2ade0a24952d186e12867c', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: 'a6cc05a5b83eb6f162654782466a43bd98ada883', points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { key: '6a8556ddc516e5c9a06fd9d71cfa939de48e9bbe', "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), "aria-disabled": disabled.year.next, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { key: '17e51e43e8a378fb73e1d51c8a75bb8e890af433', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: 'bdf9cf173de2dc96beaf2bc615aea901899e5907', points: "13 17 18 12 13 7" }), h("polyline", { key: '638e86d7b823782b2331c2569531def9f267dce9', points: "6 17 11 12 6 7" }))))), h("div", { key: '8fbe9e86646e09853205865351f3aa298877c43a', class: this.getClassName("body") }, h("table", { key: 'bf374b391788b26485362a368a10c009b42a9d84', class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid", "aria-label": this.getTitle() }, h("thead", { key: '7cb065ee0fa4bd944c79a130b107d59e8e622b89', class: this.getClassName("calendar-header") }, h("tr", { key: '30b196641286a6f9adb3d37167172858a34f2933', class: this.getClassName("weekday-row") }, (_a = this.weekdays) === null || _a === void 0 ? void 0 : _a.map((weekday) => (h("th", { role: "columnheader", abbr: weekday[1], class: this.getClassName("weekday"), key: weekday[0], scope: "col" }, h("span", { "aria-hidden": "true" }, weekday[0]), h("span", { class: "visually-hidden" }, weekday[1])))))), h("tbody", { key: '922edf01c35e7512654d8661348301d275c67647' }, this.getCalendarRows().map((calendarRow) => {
318
+ })), h("input", { key: 'cb894dcf8007f4aa4e166b08602c35143b9c582d', "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), "aria-disabled": this.disabled, max: this.maxDate ? this.maxDate.slice(0, 4) : 9999, min: this.minDate ? this.minDate.slice(0, 4) : 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { key: '7ac8e4ad643f4da536142cdca8104ecc4f5e739f', "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), "aria-disabled": disabled.month.next, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { key: 'ac31e4bb473fb0fb18d16c67b24601313d60104b', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: 'c611342212d7ec1441f4d395b65fa1bee50f8701', points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { key: '0123d1421e2af85b7cfaa524d3df545493112856', "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), "aria-disabled": disabled.year.next, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { key: '38a75dcba7d4aa040da52d3a9c10792e0f48eeea', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { key: 'da2a0780d240ccf266aacc538f1e90db5b758c34', points: "13 17 18 12 13 7" }), h("polyline", { key: '5299b9a1211e860300c62d32338ce49d129d3cce', points: "6 17 11 12 6 7" }))))), h("div", { key: '6c3aa5ab44b987b12425f3e205c62706b52b957a', class: this.getClassName("body") }, h("table", { key: 'ff27e4773d83c96657c99314bebed5786ccde4c6', class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid", "aria-label": this.getTitle() }, h("thead", { key: '8a20159ac1fc8e86273ef9b4652514df1eedf049', class: this.getClassName("calendar-header") }, h("tr", { key: 'd8e330c6149c3e49e387ac2084f985e14aad5e2e', class: this.getClassName("weekday-row") }, (_a = this.weekdays) === null || _a === void 0 ? void 0 : _a.map((weekday) => (h("th", { role: "columnheader", abbr: weekday[1], class: this.getClassName("weekday"), key: weekday[0], scope: "col" }, h("span", { "aria-hidden": "true" }, weekday[0]), h("span", { class: "visually-hidden" }, weekday[1])))))), h("tbody", { key: '659aa92ae94aa8904289be27821be2ec1b1e469c' }, this.getCalendarRows().map((calendarRow) => {
312
319
  const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
313
320
  return (h("tr", { class: this.getClassName("calendar-row"), key: rowKey }, calendarRow.map((day) => {
314
321
  var _a, _b, _c;
@@ -370,12 +377,13 @@ export class InclusiveDatesCalendar {
370
377
  : isToday
371
378
  ? "em"
372
379
  : "span";
373
- return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? "true" : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
380
+ return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? "true" : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) &&
381
+ !this.disabled
374
382
  ? 0
375
383
  : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, getScreenReaderText())));
376
384
  })));
377
- })))), showFooter && (h("div", { key: '0a189fdb44b39bddc7a26c7bd3e4a889307fee39', class: this.getClassName("footer") }, h("div", { key: 'fbdf81d3a93afa19cdedba1423d2c64ab4e1fbcb', class: this.getClassName("footer-buttons") }, this.showTodayButton && (h("button", { key: '4faad216c53bda804e8b660d758e30e0bf538940', class: this.getClassName("today-button"), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { key: '84ad553438da2c701c0ec75328eac36d01b3daa3', class: this.getClassName("clear-button"), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton))), this.showKeyboardHint &&
378
- !window.matchMedia("(pointer: coarse)").matches && (h("button", { key: 'f63c1d1c802173072424a098ab52fffe35df7f56', type: "button", onClick: () => alert("Todo: Add Keyboard helper!"), class: this.getClassName("keyboard-hint") }, h("svg", { key: '790b14010416be81d39a52549a5677116e436a63', xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 48 48", fill: "currentColor" }, h("path", { key: '83a801f97bf0a2fbd33f728cd00c5dfab75eb213', d: "M7 38q-1.2 0-2.1-.925Q4 36.15 4 35V13q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.15-.9 2.075Q42.2 38 41 38Zm0-3h34V13H7v22Zm8-3.25h18v-3H15Zm-4.85-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm-24.7-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3ZM7 35V13v22Z" })), this.labels.keyboardHint))))), h("slot", { key: '1b6c88f7c9e4e6fa7109b99ef774af1ee8de24ea', name: "after-calendar" }))));
385
+ })))), showFooter && (h("div", { key: '142e1eb18019ede50c8e7da056ff365a10478849', class: this.getClassName("footer") }, h("div", { key: '2d6b06ed8a2fddadb107521730c71b97ce0c0a05', class: this.getClassName("footer-buttons") }, this.showTodayButton && (h("button", { key: '516d186b77c0d9229b6d96cfa6f07067fbd83d15', class: this.getClassName("today-button"), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { key: '30a0c6b46efe755b96fef443e6f52de8e558e43a', class: this.getClassName("clear-button"), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton))), this.showKeyboardHint &&
386
+ !window.matchMedia("(pointer: coarse)").matches && (h("button", { key: 'f0a1d1a382ca37b3810888aa1244a090f9b94e93', type: "button", onClick: () => alert("Todo: Add Keyboard helper!"), class: this.getClassName("keyboard-hint") }, h("svg", { key: 'fa193bf2bafc73e3db2720e87fecbc25ab6b5a7c', xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 48 48", fill: "currentColor" }, h("path", { key: 'a3fba5ad5c0e5faf74b49d81bc57ee3e98596df5', d: "M7 38q-1.2 0-2.1-.925Q4 36.15 4 35V13q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.15-.9 2.075Q42.2 38 41 38Zm0-3h34V13H7v22Zm8-3.25h18v-3H15Zm-4.85-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm-24.7-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3ZM7 35V13v22Z" })), this.labels.keyboardHint))))), h("slot", { key: '11c329aa5161b2720b1e9246fa1f2883f92c6783', name: "after-calendar" }))));
379
387
  }
380
388
  static get is() { return "tabworthy-dates-calendar"; }
381
389
  static get encapsulation() { return "scoped"; }