@tabworthy/components 0.3.1 → 0.3.3

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.
@@ -76,7 +76,8 @@ export class TabworthyDates {
76
76
  this.handleCalendarButtonClick = async () => {
77
77
  var _a, _b, _c, _d, _e;
78
78
  await customElements.whenDefined("tabworthy-dates-modal");
79
- this.calendarButtonRef && await ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.setTriggerElement(this.calendarButtonRef));
79
+ this.calendarButtonRef &&
80
+ (await ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.setTriggerElement(this.calendarButtonRef)));
80
81
  if ((await ((_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.getState())) === false)
81
82
  await ((_c = this.modalRef) === null || _c === void 0 ? void 0 : _c.open());
82
83
  else if ((await ((_d = this.modalRef) === null || _d === void 0 ? void 0 : _d.getState())) === true)
@@ -122,99 +123,106 @@ export class TabworthyDates {
122
123
  var _a;
123
124
  (_a = this.changeYear) === null || _a === void 0 ? void 0 : _a.emit(yearDetail);
124
125
  };
125
- this.handleChange = async (event) => {
126
- if (this.range) {
127
- this.errorState = false;
128
- if (event.target.value.length === 0) {
129
- this.internalValue = "";
130
- if (this.pickerRef) {
131
- this.pickerRef.value = null;
132
- }
133
- return this.selectDate.emit(this.internalValue);
126
+ this.handleRangeChange = async (value) => {
127
+ this.errorState = false;
128
+ if (value.length === 0) {
129
+ this.internalValue = "";
130
+ if (this.pickerRef) {
131
+ this.pickerRef.value = null;
134
132
  }
135
- const parsedRange = await chronoParseRange(event.target.value, {
136
- locale: this.locale.slice(0, 2),
137
- minDate: this.minDate,
138
- maxDate: this.maxDate,
139
- referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
140
- });
141
- const newValue = [];
142
- if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.start instanceof Date)
143
- newValue.push(parsedRange.value.start);
144
- if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.end instanceof Date)
145
- newValue.push(parsedRange.value.end);
146
- this.updateValue(newValue);
147
- this.formatInput(true, false);
148
- if (newValue.length === 0) {
133
+ return this.selectDate.emit(this.internalValue);
134
+ }
135
+ const parsedRange = await chronoParseRange(value, {
136
+ locale: this.locale.slice(0, 2),
137
+ minDate: this.minDate,
138
+ maxDate: this.maxDate,
139
+ referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
140
+ });
141
+ const newValue = [];
142
+ if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.start instanceof Date)
143
+ newValue.push(parsedRange.value.start);
144
+ if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.end instanceof Date)
145
+ newValue.push(parsedRange.value.end);
146
+ this.updateValue(newValue);
147
+ this.formatInput(true, false);
148
+ if (newValue.length === 0) {
149
+ this.errorState = true;
150
+ if (!!(parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.reason)) {
151
+ this.errorMessage = {
152
+ invalid: this.datesLabels.invalidDateError,
153
+ rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
154
+ minDate: "",
155
+ maxDate: ""
156
+ }[parsedRange.reason];
157
+ }
158
+ }
159
+ };
160
+ this.handleSingleDateChange = async (value) => {
161
+ this.errorState = false;
162
+ if (value.length === 0) {
163
+ this.internalValue = "";
164
+ if (this.pickerRef) {
165
+ this.pickerRef.value = null;
166
+ }
167
+ return this.selectDate.emit(this.internalValue);
168
+ }
169
+ const parsedDate = await chronoParseDate(value, {
170
+ locale: this.locale.slice(0, 2),
171
+ minDate: this.minDate,
172
+ maxDate: this.maxDate,
173
+ referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
174
+ });
175
+ if (parsedDate && parsedDate.value instanceof Date) {
176
+ if (this.disableDate(parsedDate.value)) {
149
177
  this.errorState = true;
150
- if (!!(parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.reason)) {
151
- this.errorMessage = {
152
- invalid: this.datesLabels.invalidDateError,
153
- rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
154
- minDate: '',
155
- maxDate: '',
156
- }[parsedRange.reason];
157
- }
178
+ this.errorMessage = this.datesLabels.disabledDateError;
179
+ }
180
+ else {
181
+ this.updateValue(parsedDate.value);
182
+ this.formatInput(true, false);
158
183
  }
159
184
  }
160
- else {
161
- this.errorState = false;
162
- if (event.target.value.length === 0) {
163
- this.internalValue = "";
164
- if (this.pickerRef) {
165
- this.pickerRef.value = null;
166
- }
167
- return this.selectDate.emit(this.internalValue);
185
+ else if (parsedDate) {
186
+ this.errorState = true;
187
+ this.internalValue = null;
188
+ let maxDate = undefined;
189
+ let minDate = undefined;
190
+ if (this.maxDate) {
191
+ maxDate = this.maxDate
192
+ ? removeTimezoneOffset(new Date(this.maxDate))
193
+ : undefined;
194
+ maxDate === null || maxDate === void 0 ? void 0 : maxDate.setDate(maxDate.getDate() + 1);
168
195
  }
169
- const parsedDate = await chronoParseDate(event.target.value, {
170
- locale: this.locale.slice(0, 2),
171
- minDate: this.minDate,
172
- maxDate: this.maxDate,
173
- referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
174
- });
175
- if (parsedDate && parsedDate.value instanceof Date) {
176
- if (this.disableDate(parsedDate.value)) {
177
- this.errorState = true;
178
- this.errorMessage = this.datesLabels.disabledDateError;
179
- }
180
- else {
181
- this.updateValue(parsedDate.value);
182
- this.formatInput(true, false);
183
- }
196
+ if (this.minDate) {
197
+ minDate = this.minDate
198
+ ? removeTimezoneOffset(new Date(this.minDate))
199
+ : undefined;
200
+ minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
184
201
  }
185
- else if (parsedDate) {
186
- this.errorState = true;
187
- this.internalValue = null;
188
- let maxDate = undefined;
189
- let minDate = undefined;
190
- if (this.maxDate) {
191
- maxDate = this.maxDate
192
- ? removeTimezoneOffset(new Date(this.maxDate))
193
- : undefined;
194
- maxDate === null || maxDate === void 0 ? void 0 : maxDate.setDate(maxDate.getDate() + 1);
195
- }
196
- if (this.minDate) {
197
- minDate = this.minDate
198
- ? removeTimezoneOffset(new Date(this.minDate))
199
- : undefined;
200
- minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
201
- }
202
- if (!!parsedDate.reason) {
203
- this.errorMessage = parsedDate.reason;
204
- this.errorMessage = {
205
- // TODO: Add locale date formatting to these messages
206
- minDate: minDate
207
- ? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
208
- : "",
209
- maxDate: maxDate
210
- ? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
211
- : "",
212
- invalid: this.datesLabels.invalidDateError
213
- }[parsedDate.reason];
214
- }
202
+ if (!!parsedDate.reason) {
203
+ this.errorMessage = parsedDate.reason;
204
+ this.errorMessage = {
205
+ // TODO: Add locale date formatting to these messages
206
+ minDate: minDate
207
+ ? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
208
+ : "",
209
+ maxDate: maxDate
210
+ ? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
211
+ : "",
212
+ invalid: this.datesLabels.invalidDateError
213
+ }[parsedDate.reason];
215
214
  }
216
215
  }
217
216
  };
217
+ this.handleChange = async (event) => {
218
+ const value = event.target.value;
219
+ if (this.range) {
220
+ await this.handleRangeChange(value);
221
+ }
222
+ else {
223
+ await this.handleSingleDateChange(value);
224
+ }
225
+ };
218
226
  }
219
227
  componentDidLoad() {
220
228
  this.syncFromValueProp();
@@ -319,7 +327,8 @@ export class TabworthyDates {
319
327
  if (this.isRangeValue(newValue)) {
320
328
  if (newValue.length === 2)
321
329
  (_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.close();
322
- this.internalValue = newValue;
330
+ // Convert ISO dates to specified format
331
+ this.internalValue = newValue.map((date) => moment(date).format(this.format));
323
332
  this.errorState = false;
324
333
  if (document.activeElement !== this.inputRef) {
325
334
  this.formatInput(true, false);
@@ -328,8 +337,10 @@ export class TabworthyDates {
328
337
  }
329
338
  else {
330
339
  (_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.close();
331
- this.inputRef.value = newValue;
332
- this.internalValue = newValue;
340
+ // Convert ISO date to specified format
341
+ const formattedDate = moment(newValue).format(this.format);
342
+ this.inputRef.value = formattedDate;
343
+ this.internalValue = formattedDate;
333
344
  this.errorState = false;
334
345
  if (document.activeElement !== this.inputRef) {
335
346
  this.formatInput(true, false);
@@ -399,12 +410,12 @@ export class TabworthyDates {
399
410
  }
400
411
  // update text input (useInputValue=false so it formats from internalValue, not from input's current text)
401
412
  if (this.inputRef) {
402
- this.formatInput(true, false);
413
+ this.formatInput(!!this.formatInputOnAccept, false);
403
414
  }
404
415
  }
405
416
  render() {
406
417
  var _a;
407
- return (h(Host, { key: '387a0514db30efb043e294c44dc0c6233ab9315a' }, h("label", { key: '6cc8ef1337dc74cf0c2138457c82c4c61dcc63d1', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: 'b4429fef1d80e792e8ab0580d683b42ca924d0d8' }), h("div", { key: 'ecf6c67ac4e65b41768a593d7c5d4ee330fda3f3', class: this.getClassName("input-container") }, 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 && (h("button", { key: 'f3bf0a8ece36a1abc36f3462dfe44ca951ec510f', 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: '2b6e45c861606661810ce4026487d90fb7bf0c5f', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
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: () => {
408
419
  if (!this.pickerRef)
409
420
  return;
410
421
  this.pickerRef.modalIsOpen = true;
@@ -412,13 +423,11 @@ export class TabworthyDates {
412
423
  if (!this.pickerRef)
413
424
  return;
414
425
  this.pickerRef.modalIsOpen = false;
415
- }, inline: this.inline }, 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
416
- ? this.datesCalendarLabels
417
- : 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 &&
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 &&
418
427
  ((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
419
- this.chronoSupportedLocale && (h("div", { key: 'ea05f20cff3cbaff23adb64992b65b0b9760d3c5', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
428
+ this.chronoSupportedLocale && (h("div", { key: '0e0e718a43bbe2f2af69af45af01f8f75f4fe362', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
420
429
  return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
421
- }))), this.errorState && (h("div", { key: 'a472eceba69c53cbcadcd358672b7eca12b105bf', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
430
+ }))), this.errorState && (h("div", { key: 'b51d6a07a017bdb7af09098e848c7184944a4631', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
422
431
  }
423
432
  static get is() { return "tabworthy-dates"; }
424
433
  static get encapsulation() { return "scoped"; }
@@ -54,6 +54,8 @@ export class InclusiveTimes {
54
54
  this.firstDayOfWeek = 1;
55
55
  // Format for the value prop (input/output format). Defaults to ISO 8601 format.
56
56
  this.format = "YYYY-MM-DDTHH:mm:ss";
57
+ // If true, format input on blur/accept (like dates)
58
+ this.inputShouldFormat = true;
57
59
  this.selectedHours = 12;
58
60
  this.selectedMinutes = 0;
59
61
  this.errorState = this.hasError;
@@ -102,7 +104,9 @@ export class InclusiveTimes {
102
104
  // Can be used for month change tracking
103
105
  };
104
106
  this.handleInputBlur = () => {
105
- this.formatInput();
107
+ if (this.inputShouldFormat) {
108
+ this.formatInput();
109
+ }
106
110
  };
107
111
  this.handleInputChange = (event) => {
108
112
  const value = event.target.value;
@@ -176,7 +180,9 @@ export class InclusiveTimes {
176
180
  this.selectDateTime.emit(formatted);
177
181
  }
178
182
  this.errorState = false;
179
- this.formatInput();
183
+ if (this.inputShouldFormat) {
184
+ this.formatInput();
185
+ }
180
186
  }
181
187
  formatInput() {
182
188
  if (!this.internalValue)
@@ -208,7 +214,7 @@ export class InclusiveTimes {
208
214
  }
209
215
  render() {
210
216
  var _a;
211
- return (h(Host, { key: 'e922c649f8ed2bf03711fe99ae73bca550c9d8ef', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: '6b8c053bcb4d232c52e0b95da141e4a433f2bc16', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '1950259cf662cedae9b8f0fed6a61f095d3a4424', class: this.getClassName("input-container") }, 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 && (h("button", { key: '60b202b017d7ffe5de182908c809a24eba4f8e56', 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.timesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '83716e92fd3711c65b23f007bba209bcc60a4d7d', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
217
+ return (h(Host, { key: 'e9ef24f7b4e7797607f4e46c3c7da892e276160c', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: '9fbc1b57f9466e2e76dc46c6fd498e525d1cc1ee', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '2958a036e04b53761451adec9986c0305b9425af', class: this.getClassName("input-container") }, 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 && (h("button", { key: 'c8e490c2c004d2ad096848fcc83389524c767819', 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.timesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '1620370de6b83f1d8de49fc0c44702d2a4495c62', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
212
218
  if (this.pickerRef) {
213
219
  this.pickerRef.modalIsOpen = true;
214
220
  }
@@ -216,7 +222,7 @@ export class InclusiveTimes {
216
222
  if (this.pickerRef) {
217
223
  this.pickerRef.modalIsOpen = false;
218
224
  }
219
- }, inline: this.inline }, h("div", { key: '3972712165cdc3069498d5683ca7b8b25041e44d', class: this.getClassName("picker-container") }, 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 }, h("div", { key: 'e9f7b9baa9544ae651b4b6b73094a215cabcc796', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: 'b4c2f14b9311d1e3c186825785d6f64580f2896c', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: '684dce5fc46c53feea28b19eca46746d7538aa3f', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
225
+ }, inline: this.inline }, h("div", { key: '9521fd9f0fbdd6b1b6114fafbe6d623537fb1420', class: this.getClassName("picker-container") }, 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 }, h("div", { key: 'b82af457943cdcae6f098688f7c90bda0aeed427', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: '6800ae768ecb4796105f9d1981cc8315732a1335', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: '648df2b385853946f5b2ae5f2f453fc8a25c1069', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
220
226
  }
221
227
  static get is() { return "tabworthy-times"; }
222
228
  static get encapsulation() { return "scoped"; }
@@ -727,6 +733,26 @@ export class InclusiveTimes {
727
733
  "reflect": false,
728
734
  "attribute": "format",
729
735
  "defaultValue": "\"YYYY-MM-DDTHH:mm:ss\""
736
+ },
737
+ "inputShouldFormat": {
738
+ "type": "boolean",
739
+ "mutable": false,
740
+ "complexType": {
741
+ "original": "boolean",
742
+ "resolved": "boolean",
743
+ "references": {}
744
+ },
745
+ "required": false,
746
+ "optional": false,
747
+ "docs": {
748
+ "tags": [],
749
+ "text": ""
750
+ },
751
+ "getter": false,
752
+ "setter": false,
753
+ "reflect": false,
754
+ "attribute": "input-should-format",
755
+ "defaultValue": "true"
730
756
  }
731
757
  };
732
758
  }