@tabworthy/components 0.3.2 → 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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tabworthy-components.cjs.js +1 -1
- package/dist/cjs/tabworthy-dates-calendar_2.cjs.entry.js +21 -13
- package/dist/cjs/tabworthy-dates.cjs.entry.js +114 -96
- package/dist/cjs/tabworthy-times-picker.cjs.entry.js +8 -6
- package/dist/cjs/tabworthy-times.cjs.entry.js +10 -4
- package/dist/collection/components/tabworthy-dates/tabworthy-dates.js +115 -99
- package/dist/collection/components/tabworthy-dates-calendar/tabworthy-dates-calendar.js +20 -12
- package/dist/collection/components/tabworthy-modal/tabworthy-dates-modal.js +1 -1
- package/dist/collection/components/tabworthy-times/tabworthy-times.js +14 -8
- package/dist/collection/components/tabworthy-times-picker/tabworthy-times-picker.js +8 -6
- package/dist/components/tabworthy-dates-calendar2.js +1 -1
- package/dist/components/tabworthy-dates-modal2.js +1 -1
- package/dist/components/tabworthy-dates.js +1 -1
- package/dist/components/tabworthy-times-picker2.js +1 -1
- package/dist/components/tabworthy-times.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tabworthy-components.js +1 -1
- package/dist/esm/tabworthy-dates-calendar_2.entry.js +21 -13
- package/dist/esm/tabworthy-dates.entry.js +114 -96
- package/dist/esm/tabworthy-times-picker.entry.js +8 -6
- package/dist/esm/tabworthy-times.entry.js +10 -4
- package/dist/shared/utils/chrono-parser/chrono-parser.js +3 -1
- package/dist/tabworthy-components/{p-b4c87db8.entry.js → p-1072baac.entry.js} +1 -1
- package/dist/tabworthy-components/{p-3ce9a767.entry.js → p-841f3e8f.entry.js} +1 -1
- package/dist/tabworthy-components/p-9aa97b54.entry.js +1 -0
- package/dist/tabworthy-components/{p-ebbb4c46.entry.js → p-cedac657.entry.js} +1 -1
- package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
- package/dist/types/components/tabworthy-dates/tabworthy-dates.d.ts +4 -1
- package/dist/types/components/tabworthy-times/tabworthy-times.d.ts +2 -1
- package/dist/types/components.d.ts +16 -12
- package/package.json +1 -1
- package/dist/tabworthy-components/p-28acdfa7.entry.js +0 -1
|
@@ -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.
|
|
55
|
+
this.inputShouldFormat = true;
|
|
56
56
|
// Show or hide the keyboard hints
|
|
57
57
|
this.showKeyboardHint = false;
|
|
58
58
|
// Function to disable individual dates
|
|
@@ -123,99 +123,112 @@ export class TabworthyDates {
|
|
|
123
123
|
var _a;
|
|
124
124
|
(_a = this.changeYear) === null || _a === void 0 ? void 0 : _a.emit(yearDetail);
|
|
125
125
|
};
|
|
126
|
-
this.
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
this.pickerRef.value = null;
|
|
133
|
-
}
|
|
134
|
-
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;
|
|
135
132
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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)) {
|
|
150
177
|
this.errorState = true;
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
maxDate: ""
|
|
157
|
-
}[parsedRange.reason];
|
|
158
|
-
}
|
|
178
|
+
this.errorMessage = this.datesLabels.disabledDateError;
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
this.updateValue(parsedDate.value);
|
|
182
|
+
this.formatInput(true, false);
|
|
159
183
|
}
|
|
160
184
|
}
|
|
161
|
-
else {
|
|
162
|
-
this.errorState =
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
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);
|
|
169
195
|
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
});
|
|
176
|
-
if (parsedDate && parsedDate.value instanceof Date) {
|
|
177
|
-
if (this.disableDate(parsedDate.value)) {
|
|
178
|
-
this.errorState = true;
|
|
179
|
-
this.errorMessage = this.datesLabels.disabledDateError;
|
|
180
|
-
}
|
|
181
|
-
else {
|
|
182
|
-
this.updateValue(parsedDate.value);
|
|
183
|
-
this.formatInput(true, false);
|
|
184
|
-
}
|
|
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);
|
|
185
201
|
}
|
|
186
|
-
|
|
187
|
-
this.
|
|
188
|
-
this.
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
minDate = this.minDate
|
|
199
|
-
? removeTimezoneOffset(new Date(this.minDate))
|
|
200
|
-
: undefined;
|
|
201
|
-
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
202
|
-
}
|
|
203
|
-
if (!!parsedDate.reason) {
|
|
204
|
-
this.errorMessage = parsedDate.reason;
|
|
205
|
-
this.errorMessage = {
|
|
206
|
-
// TODO: Add locale date formatting to these messages
|
|
207
|
-
minDate: minDate
|
|
208
|
-
? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
|
|
209
|
-
: "",
|
|
210
|
-
maxDate: maxDate
|
|
211
|
-
? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
|
|
212
|
-
: "",
|
|
213
|
-
invalid: this.datesLabels.invalidDateError
|
|
214
|
-
}[parsedDate.reason];
|
|
215
|
-
}
|
|
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];
|
|
216
214
|
}
|
|
217
215
|
}
|
|
218
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
|
+
};
|
|
226
|
+
}
|
|
227
|
+
shouldInputFormat() {
|
|
228
|
+
if (typeof this.inputShouldFormat === "string") {
|
|
229
|
+
return this.inputShouldFormat === "true";
|
|
230
|
+
}
|
|
231
|
+
return !!this.inputShouldFormat;
|
|
219
232
|
}
|
|
220
233
|
componentDidLoad() {
|
|
221
234
|
this.syncFromValueProp();
|
|
@@ -267,7 +280,7 @@ export class TabworthyDates {
|
|
|
267
280
|
this.announceDateChange(this.internalValue);
|
|
268
281
|
}
|
|
269
282
|
formatInput(enabled, useInputValue = true) {
|
|
270
|
-
if (this.
|
|
283
|
+
if (this.shouldInputFormat() === false || enabled === false) {
|
|
271
284
|
if (this.internalValue) {
|
|
272
285
|
if (this.internalValue.length === 0)
|
|
273
286
|
return;
|
|
@@ -278,7 +291,7 @@ export class TabworthyDates {
|
|
|
278
291
|
return;
|
|
279
292
|
}
|
|
280
293
|
if (this.internalValue &&
|
|
281
|
-
this.
|
|
294
|
+
this.shouldInputFormat() === true &&
|
|
282
295
|
this.errorState === false) {
|
|
283
296
|
if (Array.isArray(this.internalValue)) {
|
|
284
297
|
if (this.internalValue.length === 0)
|
|
@@ -320,7 +333,8 @@ export class TabworthyDates {
|
|
|
320
333
|
if (this.isRangeValue(newValue)) {
|
|
321
334
|
if (newValue.length === 2)
|
|
322
335
|
(_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
323
|
-
|
|
336
|
+
// Convert ISO dates to specified format
|
|
337
|
+
this.internalValue = newValue.map((date) => moment(date).format(this.format));
|
|
324
338
|
this.errorState = false;
|
|
325
339
|
if (document.activeElement !== this.inputRef) {
|
|
326
340
|
this.formatInput(true, false);
|
|
@@ -329,8 +343,10 @@ export class TabworthyDates {
|
|
|
329
343
|
}
|
|
330
344
|
else {
|
|
331
345
|
(_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.close();
|
|
332
|
-
|
|
333
|
-
|
|
346
|
+
// Convert ISO date to specified format
|
|
347
|
+
const formattedDate = moment(newValue).format(this.format);
|
|
348
|
+
this.inputRef.value = formattedDate;
|
|
349
|
+
this.internalValue = formattedDate;
|
|
334
350
|
this.errorState = false;
|
|
335
351
|
if (document.activeElement !== this.inputRef) {
|
|
336
352
|
this.formatInput(true, false);
|
|
@@ -400,12 +416,12 @@ export class TabworthyDates {
|
|
|
400
416
|
}
|
|
401
417
|
// update text input (useInputValue=false so it formats from internalValue, not from input's current text)
|
|
402
418
|
if (this.inputRef) {
|
|
403
|
-
this.formatInput(!!this.
|
|
419
|
+
this.formatInput(!!this.shouldInputFormat(), false);
|
|
404
420
|
}
|
|
405
421
|
}
|
|
406
422
|
render() {
|
|
407
423
|
var _a;
|
|
408
|
-
return (h(Host, { key: '
|
|
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: () => {
|
|
409
425
|
if (!this.pickerRef)
|
|
410
426
|
return;
|
|
411
427
|
this.pickerRef.modalIsOpen = true;
|
|
@@ -413,11 +429,11 @@ export class TabworthyDates {
|
|
|
413
429
|
if (!this.pickerRef)
|
|
414
430
|
return;
|
|
415
431
|
this.pickerRef.modalIsOpen = false;
|
|
416
|
-
}, inline: this.inline }, h("tabworthy-dates-calendar", { key: '
|
|
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 &&
|
|
417
433
|
((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
418
|
-
this.chronoSupportedLocale && (h("div", { key: '
|
|
434
|
+
this.chronoSupportedLocale && (h("div", { key: '9ac2426141cfcebc38db079a90b99fe46cb76267', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
|
|
419
435
|
return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
|
|
420
|
-
}))), this.errorState && (h("div", { key: '
|
|
436
|
+
}))), this.errorState && (h("div", { key: 'e9043f07596f0dea2092593bb2a3966e33a04a78', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
421
437
|
}
|
|
422
438
|
static get is() { return "tabworthy-dates"; }
|
|
423
439
|
static get encapsulation() { return "scoped"; }
|
|
@@ -875,12 +891,12 @@ export class TabworthyDates {
|
|
|
875
891
|
"attribute": "show-today-button",
|
|
876
892
|
"defaultValue": "true"
|
|
877
893
|
},
|
|
878
|
-
"
|
|
879
|
-
"type": "
|
|
894
|
+
"inputShouldFormat": {
|
|
895
|
+
"type": "any",
|
|
880
896
|
"mutable": false,
|
|
881
897
|
"complexType": {
|
|
882
|
-
"original": "boolean",
|
|
883
|
-
"resolved": "boolean",
|
|
898
|
+
"original": "| boolean\n | string",
|
|
899
|
+
"resolved": "boolean | string",
|
|
884
900
|
"references": {}
|
|
885
901
|
},
|
|
886
902
|
"required": false,
|
|
@@ -231,8 +231,9 @@ export class InclusiveDatesCalendar {
|
|
|
231
231
|
}
|
|
232
232
|
focusDate(date) {
|
|
233
233
|
var _a;
|
|
234
|
-
date &&
|
|
235
|
-
|
|
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 ||
|
|
294
|
-
|
|
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: '
|
|
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: '
|
|
313
|
+
} }, h("div", { key: 'd45b18e90cabf14175eacf2b86ffc4ccb261e6e1', class: {
|
|
307
314
|
[this.getClassName()]: true,
|
|
308
|
-
[`${this.getClassName()}--disabled`]: this.disabled
|
|
309
|
-
} }, h("div", { key: '
|
|
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: '
|
|
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) &&
|
|
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: '
|
|
378
|
-
!window.matchMedia("(pointer: coarse)").matches && (h("button", { key: '
|
|
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"; }
|
|
@@ -49,7 +49,7 @@ export class InclusiveDatesModal {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: '773d9edf7cf6598394c1210a1fab91af0bcb951e', showing: this.showing, ref: (r) => r && (this.el = r) }, !this.inline && this.showing && (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 }, h("focus-trap", { key: 'c1355fe48117067d62ede321afd1f90bf9bf4c22' }, h("div", { key: 'fbd3ec5e0e7069574f1dbd6c38b40e409b837045', part: "content" }, h("slot", { key: 'bad04015cc3945efbb68a52de623ee1f4b584868' }))))), this.inline && (h("div", { key: 'b0577b12dd1bec091de967ccd0ac297451576ad8', part: "content" }, h("slot", { key: '5457a9bd5d08feac90adb2ee061d60fb5fb94657' })))));
|
|
53
53
|
}
|
|
54
54
|
static get is() { return "tabworthy-dates-modal"; }
|
|
55
55
|
static get encapsulation() { return "shadow"; }
|
|
@@ -104,7 +104,7 @@ export class InclusiveTimes {
|
|
|
104
104
|
// Can be used for month change tracking
|
|
105
105
|
};
|
|
106
106
|
this.handleInputBlur = () => {
|
|
107
|
-
if (this.
|
|
107
|
+
if (this.shouldInputFormat()) {
|
|
108
108
|
this.formatInput();
|
|
109
109
|
}
|
|
110
110
|
};
|
|
@@ -119,6 +119,12 @@ export class InclusiveTimes {
|
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
121
|
}
|
|
122
|
+
shouldInputFormat() {
|
|
123
|
+
if (typeof this.inputShouldFormat === "string") {
|
|
124
|
+
return this.inputShouldFormat === "true";
|
|
125
|
+
}
|
|
126
|
+
return !!this.inputShouldFormat;
|
|
127
|
+
}
|
|
122
128
|
watchValue(_newValue) {
|
|
123
129
|
this.syncFromValueProp();
|
|
124
130
|
}
|
|
@@ -180,7 +186,7 @@ export class InclusiveTimes {
|
|
|
180
186
|
this.selectDateTime.emit(formatted);
|
|
181
187
|
}
|
|
182
188
|
this.errorState = false;
|
|
183
|
-
if (this.
|
|
189
|
+
if (this.shouldInputFormat()) {
|
|
184
190
|
this.formatInput();
|
|
185
191
|
}
|
|
186
192
|
}
|
|
@@ -214,7 +220,7 @@ export class InclusiveTimes {
|
|
|
214
220
|
}
|
|
215
221
|
render() {
|
|
216
222
|
var _a;
|
|
217
|
-
return (h(Host, { key: '
|
|
223
|
+
return (h(Host, { key: '4c2b4df711aef3ecab43e101650d8af27088813b', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: 'bd4a9fcbfb146dac1bf856cfc3f5b5e250714f9c', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '845800995b3d9b88f6f0a0d02486de2821fdaaef', class: this.getClassName("input-container") }, 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 && (h("button", { key: '02d49c8b78edfbdd3cbbb6a738323d4de10ac46d', 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: '6e03950ffd59ce6d7391e878479359d5d8ecf665', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
|
|
218
224
|
if (this.pickerRef) {
|
|
219
225
|
this.pickerRef.modalIsOpen = true;
|
|
220
226
|
}
|
|
@@ -222,7 +228,7 @@ export class InclusiveTimes {
|
|
|
222
228
|
if (this.pickerRef) {
|
|
223
229
|
this.pickerRef.modalIsOpen = false;
|
|
224
230
|
}
|
|
225
|
-
}, inline: this.inline }, h("div", { key: '
|
|
231
|
+
}, inline: this.inline }, h("div", { key: '8e29281638aaa80d71220ad08dab482bf5a3c1e4', class: this.getClassName("picker-container") }, 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 }, h("div", { key: '4d2da22f4da3460a9626c886b61e22eb66c0a23f', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: '2d9a9a8ce12e0659f4f1c82f1f8d64d829fc183b', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: 'df2cdfcd866f26108032c75a3f8c2f55ba5c9b10', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
226
232
|
}
|
|
227
233
|
static get is() { return "tabworthy-times"; }
|
|
228
234
|
static get encapsulation() { return "scoped"; }
|
|
@@ -735,15 +741,15 @@ export class InclusiveTimes {
|
|
|
735
741
|
"defaultValue": "\"YYYY-MM-DDTHH:mm:ss\""
|
|
736
742
|
},
|
|
737
743
|
"inputShouldFormat": {
|
|
738
|
-
"type": "
|
|
744
|
+
"type": "any",
|
|
739
745
|
"mutable": false,
|
|
740
746
|
"complexType": {
|
|
741
|
-
"original": "boolean",
|
|
742
|
-
"resolved": "boolean",
|
|
747
|
+
"original": "| boolean\n | string",
|
|
748
|
+
"resolved": "boolean | string",
|
|
743
749
|
"references": {}
|
|
744
750
|
},
|
|
745
751
|
"required": false,
|
|
746
|
-
"optional":
|
|
752
|
+
"optional": true,
|
|
747
753
|
"docs": {
|
|
748
754
|
"tags": [],
|
|
749
755
|
"text": ""
|
|
@@ -87,7 +87,8 @@ export class InclusiveTimesPicker {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
else {
|
|
90
|
-
this.internalHours =
|
|
90
|
+
this.internalHours =
|
|
91
|
+
this.internalHours === 0 ? 23 : this.internalHours - 1;
|
|
91
92
|
}
|
|
92
93
|
this.emitTimeChange();
|
|
93
94
|
};
|
|
@@ -96,7 +97,8 @@ export class InclusiveTimesPicker {
|
|
|
96
97
|
this.emitTimeChange();
|
|
97
98
|
};
|
|
98
99
|
this.handleMinuteDecrement = () => {
|
|
99
|
-
this.internalMinutes =
|
|
100
|
+
this.internalMinutes =
|
|
101
|
+
this.internalMinutes === 0 ? 59 : this.internalMinutes - 1;
|
|
100
102
|
this.emitTimeChange();
|
|
101
103
|
};
|
|
102
104
|
}
|
|
@@ -148,16 +150,16 @@ export class InclusiveTimesPicker {
|
|
|
148
150
|
const displayHours = this.getDisplayHours();
|
|
149
151
|
const maxHours = this.use12HourFormat ? 12 : 23;
|
|
150
152
|
const minHours = this.use12HourFormat ? 1 : 0;
|
|
151
|
-
return (h(Host, { key: '
|
|
153
|
+
return (h(Host, { key: '22eb745a93c68e4e4f78c11d2941681897aa73ef', class: this.elementClassName, "aria-label": this.labels.timePicker }, h("div", { key: 'ccb05b5d5793442b63aa4c25d5120db8b60bedf3', class: `${this.elementClassName}__container` }, h("div", { key: '3fc4ede2d685e43edcfefe8c88de19f705e94478', class: `${this.elementClassName}__field` }, h("label", { key: 'fb04e846fc9807155c4390e92722850cdaa4bba2', htmlFor: `${this.elementClassName}-hours`, class: {
|
|
152
154
|
[`${this.elementClassName}__label`]: true,
|
|
153
155
|
[`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
|
|
154
|
-
} }, this.labels.hours), h("div", { key: '
|
|
156
|
+
} }, this.labels.hours), h("div", { key: 'd5ed4a06ea4ce2eaaefda2fa316a4789aa4a210a', class: `${this.elementClassName}__control` }, 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 }, 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" }, h("polyline", { key: '58519a5d7a8cddfe2273f5c8beec3eab7307b43c', points: "18 15 12 9 6 15" }))), 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 }), 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 }, 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" }, h("polyline", { key: '99aab5a584aed4d8fc1b30dcada0c76e42ba6ac7', points: "6 9 12 15 18 9" }))))), h("div", { key: 'a8958b60136f6220bbd944beaa6cf73c7660e3fb', class: `${this.elementClassName}__separator` }, ":"), h("div", { key: '72b46b517876dc8bc3490afef1860514b46efc46', class: `${this.elementClassName}__field` }, h("label", { key: 'e09788653c3873e97e1922fcda3076878f9b1ca7', htmlFor: `${this.elementClassName}-minutes`, class: {
|
|
155
157
|
[`${this.elementClassName}__label`]: true,
|
|
156
158
|
[`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
|
|
157
|
-
} }, this.labels.minutes), h("div", { key: '
|
|
159
|
+
} }, this.labels.minutes), h("div", { key: '7bf9642b58249014b2ad802c3fe30f67e5354f4d', class: `${this.elementClassName}__control` }, 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 }, 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" }, h("polyline", { key: '68dfdfc6cd2bd1f8f916dbf60155eb2cc4a8328d', points: "18 15 12 9 6 15" }))), 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 }), 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 }, 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" }, h("polyline", { key: '92eb0d63e7be970b2207cc0c47964eef48005baf', points: "6 9 12 15 18 9" }))))), this.use12HourFormat && (h("div", { key: '8a3235abb0bf0764993271ff4969ca6aaac83bd7', class: `${this.elementClassName}__period` }, h("button", { key: 'd8f0679faadf7f0cf04e2f57bed4e9c202d0a056', type: "button", class: {
|
|
158
160
|
[`${this.elementClassName}__period-button`]: true,
|
|
159
161
|
[`${this.elementClassName}__period-button--active`]: this.period === "AM"
|
|
160
|
-
}, onClick: () => this.handlePeriodChange("AM"), disabled: this.disabled, "aria-label": this.labels.am, "aria-pressed": this.period === "AM" }, this.labels.am), h("button", { key: '
|
|
162
|
+
}, onClick: () => this.handlePeriodChange("AM"), disabled: this.disabled, "aria-label": this.labels.am, "aria-pressed": this.period === "AM" }, this.labels.am), h("button", { key: '393802044645d205a71ae593227df550adce2970', type: "button", class: {
|
|
161
163
|
[`${this.elementClassName}__period-button`]: true,
|
|
162
164
|
[`${this.elementClassName}__period-button--active`]: this.period === "PM"
|
|
163
165
|
}, onClick: () => this.handlePeriodChange("PM"), disabled: this.disabled, "aria-label": this.labels.pm, "aria-pressed": this.period === "PM" }, this.labels.pm))))));
|