@tabworthy/components 0.3.3 → 0.5.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 +19 -13
- package/dist/cjs/tabworthy-times-picker.cjs.entry.js +8 -6
- package/dist/cjs/tabworthy-times.cjs.entry.js +11 -4
- package/dist/collection/components/tabworthy-dates/tabworthy-dates.js +40 -16
- 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 +33 -6
- 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 +19 -13
- package/dist/esm/tabworthy-times-picker.entry.js +8 -6
- package/dist/esm/tabworthy-times.entry.js +11 -4
- package/dist/shared/utils/chrono-parser/chrono-parser.js +3 -1
- package/dist/tabworthy-components/{p-3ce9a767.entry.js → p-841f3e8f.entry.js} +1 -1
- package/dist/tabworthy-components/p-ce2c8dc0.entry.js +1 -0
- package/dist/tabworthy-components/{p-ebbb4c46.entry.js → p-cedac657.entry.js} +1 -1
- package/dist/tabworthy-components/{p-46b71504.entry.js → p-ec699892.entry.js} +1 -1
- package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
- package/dist/themes/dark.css +1 -1
- package/dist/themes/light.css +1 -1
- package/dist/types/components/tabworthy-dates/tabworthy-dates.d.ts +3 -1
- package/dist/types/components/tabworthy-times/tabworthy-times.d.ts +3 -1
- package/dist/types/components.d.ts +34 -12
- package/package.json +1 -1
- package/dist/tabworthy-components/p-28acdfa7.entry.js +0 -1
|
@@ -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"; }
|
|
@@ -56,6 +56,7 @@ export class InclusiveTimes {
|
|
|
56
56
|
this.format = "YYYY-MM-DDTHH:mm:ss";
|
|
57
57
|
// If true, format input on blur/accept (like dates)
|
|
58
58
|
this.inputShouldFormat = true;
|
|
59
|
+
this.disableFreeformInput = false;
|
|
59
60
|
this.selectedHours = 12;
|
|
60
61
|
this.selectedMinutes = 0;
|
|
61
62
|
this.errorState = this.hasError;
|
|
@@ -104,7 +105,7 @@ export class InclusiveTimes {
|
|
|
104
105
|
// Can be used for month change tracking
|
|
105
106
|
};
|
|
106
107
|
this.handleInputBlur = () => {
|
|
107
|
-
if (this.
|
|
108
|
+
if (this.shouldInputFormat()) {
|
|
108
109
|
this.formatInput();
|
|
109
110
|
}
|
|
110
111
|
};
|
|
@@ -119,6 +120,12 @@ export class InclusiveTimes {
|
|
|
119
120
|
}
|
|
120
121
|
};
|
|
121
122
|
}
|
|
123
|
+
shouldInputFormat() {
|
|
124
|
+
if (typeof this.inputShouldFormat === "string") {
|
|
125
|
+
return this.inputShouldFormat === "true";
|
|
126
|
+
}
|
|
127
|
+
return !!this.inputShouldFormat;
|
|
128
|
+
}
|
|
122
129
|
watchValue(_newValue) {
|
|
123
130
|
this.syncFromValueProp();
|
|
124
131
|
}
|
|
@@ -180,7 +187,7 @@ export class InclusiveTimes {
|
|
|
180
187
|
this.selectDateTime.emit(formatted);
|
|
181
188
|
}
|
|
182
189
|
this.errorState = false;
|
|
183
|
-
if (this.
|
|
190
|
+
if (this.shouldInputFormat()) {
|
|
184
191
|
this.formatInput();
|
|
185
192
|
}
|
|
186
193
|
}
|
|
@@ -214,7 +221,7 @@ export class InclusiveTimes {
|
|
|
214
221
|
}
|
|
215
222
|
render() {
|
|
216
223
|
var _a;
|
|
217
|
-
return (h(Host, { key: '
|
|
224
|
+
return (h(Host, { key: 'f5ad31075413f2d2c14751265fdaa2845f695baa', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: '84e8799efa652f93e6ca56ce5696729441e61319', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: 'cc3dc9198dbd90a2405938810aebc564b08c2ac3', class: this.getClassName("input-container") }, h("input", { key: '1b63faf6d946fa9bad5198d967eb12fd12dbb02d', id: `${this.id}-input`, ref: (r) => (this.inputRef = r), type: "text", class: this.getClassName("input"), placeholder: this.placeholder, disabled: this.disabledState || this.disableFreeformInput, 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: 'a9f580d5d5c46334492b9bfef2dcd80d6808e77c', 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: '7fc50538aa0f972999867a6f7175d87bb86ef0d1', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
|
|
218
225
|
if (this.pickerRef) {
|
|
219
226
|
this.pickerRef.modalIsOpen = true;
|
|
220
227
|
}
|
|
@@ -222,7 +229,7 @@ export class InclusiveTimes {
|
|
|
222
229
|
if (this.pickerRef) {
|
|
223
230
|
this.pickerRef.modalIsOpen = false;
|
|
224
231
|
}
|
|
225
|
-
}, inline: this.inline }, h("div", { key: '
|
|
232
|
+
}, inline: this.inline }, h("div", { key: '014187e74184b02318dea891a36c7c0d4888f4db', class: this.getClassName("picker-container") }, h("tabworthy-dates-calendar", { key: '8b35d3640cd1e7c1a30a92c090a41945c807f51f', 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: 'e7802bd55d717def48fd4ff0093c41bfdd3a9d37', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: '4c8e49f3fb82f3b8e9c914fe060b80a5aa76bafe', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: 'f83e3028c666e16b065da2c1f1d92c5f157acd16', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
226
233
|
}
|
|
227
234
|
static get is() { return "tabworthy-times"; }
|
|
228
235
|
static get encapsulation() { return "scoped"; }
|
|
@@ -735,6 +742,26 @@ export class InclusiveTimes {
|
|
|
735
742
|
"defaultValue": "\"YYYY-MM-DDTHH:mm:ss\""
|
|
736
743
|
},
|
|
737
744
|
"inputShouldFormat": {
|
|
745
|
+
"type": "any",
|
|
746
|
+
"mutable": false,
|
|
747
|
+
"complexType": {
|
|
748
|
+
"original": "| boolean\n | string",
|
|
749
|
+
"resolved": "boolean | string",
|
|
750
|
+
"references": {}
|
|
751
|
+
},
|
|
752
|
+
"required": false,
|
|
753
|
+
"optional": true,
|
|
754
|
+
"docs": {
|
|
755
|
+
"tags": [],
|
|
756
|
+
"text": ""
|
|
757
|
+
},
|
|
758
|
+
"getter": false,
|
|
759
|
+
"setter": false,
|
|
760
|
+
"reflect": false,
|
|
761
|
+
"attribute": "input-should-format",
|
|
762
|
+
"defaultValue": "true"
|
|
763
|
+
},
|
|
764
|
+
"disableFreeformInput": {
|
|
738
765
|
"type": "boolean",
|
|
739
766
|
"mutable": false,
|
|
740
767
|
"complexType": {
|
|
@@ -751,8 +778,8 @@ export class InclusiveTimes {
|
|
|
751
778
|
"getter": false,
|
|
752
779
|
"setter": false,
|
|
753
780
|
"reflect": false,
|
|
754
|
-
"attribute": "
|
|
755
|
-
"defaultValue": "
|
|
781
|
+
"attribute": "disable-freeform-input",
|
|
782
|
+
"defaultValue": "false"
|
|
756
783
|
}
|
|
757
784
|
};
|
|
758
785
|
}
|
|
@@ -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))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as a,transformTag as n}from"@stencil/core/internal/client";function h(t,e){const i=new Date(t);return i.setDate(i.getDate()+e),i}function o(t){return k(new Date(`${w(t)}-${String(c(t)).padStart(2,"0")}-01`))}function r(t){return function(t){if(t instanceof Date)return`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`}(t)}function d(t){const e=o(t);return e.setMonth(e.getMonth()+1),e.setDate(e.getDate()-1),e}function c(t){return t.getMonth()+1}function l(t){return h(t,1)}function u(t){const e=new Date(t);return e.setMonth(e.getMonth()+1),e}function b(t){const e=new Date(t);return e.setFullYear(e.getFullYear()+1),e}function f(t){return m(t,1)}function v(t){const e=new Date(t);return e.setMonth(e.getMonth()-1),e}function y(t){const e=new Date(t);return e.setFullYear(e.getFullYear()-1),e}function w(t){return t.getFullYear()}function p(t,e){return!(!t||!e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}function k(t){const e=new Date(t);return e.setMinutes(e.getMinutes()+e.getTimezoneOffset()),e}function m(t,e){const i=new Date(t);return i.setDate(i.getDate()-e),i}function D(t,e){if(e){const i=k(new Date(e));return t>=i||p(i,t)}return!0}function g(t,e){if(e){const i=k(new Date(e));return t<=i||p(t,i)}return!0}function C(t,e,i){return D(t,e)&&g(t,i)}function $(t,e,i,s){const a=new Date(e,t,1);a.setDate(a.getDate()-1);const n=new Date(e,t+1,0);return n.setDate(a.getDate()+1),!C(a,i,s)&&!C(n,i,s)}function x(t){if(null==t.match(/^\d{4}-\d{2}-\d{2}$/))return!1;var e=new Date(t);return!isNaN(e.getTime())}function B(t){var e=t.match(/\d{4}-\d{2}-\d{2}/g);return null==e?void 0:e.slice(0,2)}const S={clearButton:"Clear value",monthSelect:"Select month",nextMonthButton:"Next month",nextYearButton:"Next year",picker:"Choose date",previousMonthButton:"Previous month",previousYearButton:"Previous year",todayButton:"Show today",yearSelect:"Select year",keyboardHint:"Keyboard commands",selected:"Selected date",chooseAsStartDate:"choose as start date",chooseAsEndDate:"choose as end date"},M=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.selectDate=i(this,"selectDate",7),this.changeMonth=i(this,"changeMonth",7),this.changeYear=i(this,"changeYear",7),this.disabled=!1,this.modalIsOpen=!1,this.disableDate=()=>!1,this.elementClassName="tabworthy-dates-calendar",this.firstDayOfWeek=0,this.range=!1,this.labels=S,this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.inline=!1,this.showClearButton=!1,this.showMonthStepper=!0,this.showTodayButton=!0,this.showYearStepper=!1,this.showKeyboardHint=!1,this.showHiddenTitle=!0,this.startDate=r(new Date),this.init=()=>{this.currentDate=this.startDate?k(new Date(this.startDate)):new Date,this.updateWeekdays()},this.nextMonth=()=>{this.updateCurrentDate(u(this.currentDate))},this.nextYear=()=>{this.updateCurrentDate(b(this.currentDate))},this.previousMonth=()=>{this.updateCurrentDate(v(this.currentDate))},this.previousYear=()=>{this.updateCurrentDate(y(this.currentDate))},this.showToday=()=>{this.updateCurrentDate(new Date,!0)},this.clear=()=>{var t;this.value=void 0,null===(t=this.selectDate)||void 0===t||t.emit(void 0)},this.onClick=t=>{if(this.disabled)return;const e=t.target.closest("[data-date]");if(!Boolean(e))return;const i=k(new Date(e.dataset.date));this.updateCurrentDate(i),this.onSelectDate(i)},this.onMonthSelect=t=>{const e=+t.target.value-1,i=new Date(this.currentDate);C(i,this.minDate,this.maxDate)&&(i.setMonth(e),this.updateCurrentDate(i))},this.onYearSelect=t=>{var e;const i=+t.target.value,s=new Date(this.currentDate);C(s,this.minDate,this.maxDate)&&(s.setFullYear(i),null===(e=this.changeYear)||void 0===e||e.emit({year:i}),this.updateCurrentDate(s))},this.onKeyDown=t=>{this.disabled||("ArrowLeft"===t.code?(t.preventDefault(),this.updateCurrentDate(f(this.currentDate),!0)):"ArrowRight"===t.code?(t.preventDefault(),this.updateCurrentDate(l(this.currentDate),!0)):"ArrowUp"===t.code?(t.preventDefault(),this.updateCurrentDate(m(this.currentDate,7),!0)):"ArrowDown"===t.code?(t.preventDefault(),this.updateCurrentDate(h(this.currentDate,7),!0)):"PageUp"===t.code?(t.preventDefault(),this.updateCurrentDate(t.shiftKey?y(this.currentDate):v(this.currentDate),!0)):"PageDown"===t.code?(t.preventDefault(),this.updateCurrentDate(t.shiftKey?b(this.currentDate):u(this.currentDate),!0)):"Home"===t.code?(t.preventDefault(),this.updateCurrentDate(o(this.currentDate),!0)):"End"===t.code?(t.preventDefault(),this.updateCurrentDate(d(this.currentDate),!0)):"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),this.onSelectDate(this.currentDate)))},this.onMouseEnter=t=>{var e;if(this.disabled)return;const i=k(new Date(null===(e=t.target.closest("td"))||void 0===e?void 0:e.dataset.date));this.hoveredDate=i},this.onMouseLeave=()=>{this.hoveredDate=void 0}}componentWillLoad(){this.init()}watchModalIsOpen(){!0===this.modalIsOpen&&(this.moveFocusOnModalOpen=!0)}watchFirstDayOfWeek(){this.updateWeekdays()}watchLocale(){Boolean(this.locale)||(this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US"),this.updateWeekdays()}watchRange(){var t;this.value=void 0,null===(t=this.selectDate)||void 0===t||t.emit(void 0)}watchStartDate(){this.currentDate=this.startDate?k(new Date(this.startDate)):new Date}watchValue(){Boolean(this.value)&&(Array.isArray(this.value)&&this.value.length>=1?this.currentDate=this.value[0]:this.value instanceof Date&&(this.currentDate=this.value))}componentDidRender(){this.moveFocusAfterMonthChanged&&(this.focusDate(this.currentDate),this.moveFocusAfterMonthChanged=!1),this.moveFocusOnModalOpen&&setTimeout((()=>{this.focusDate(this.currentDate),this.moveFocusOnModalOpen=!1}),100)}updateWeekdays(){var t,e;this.weekdays=(t=this.firstDayOfWeek,e=this.locale,new Array(7).fill(void 0).map(((e,i)=>(t+i)%7+1)).map((t=>{const i=new Date(2006,0,t);return[Intl.DateTimeFormat(e,{weekday:"short"}).format(i),Intl.DateTimeFormat(e,{weekday:"long"}).format(i)]})))}getClassName(t){return Boolean(t)?`${this.elementClassName}__${t}`:this.elementClassName}getCalendarRows(){const t=function(t,e,i){const s=[],a=o(t),n=0===a.getDay()?7:a.getDay(),h=d(t),r=0===h.getDay()?7:h.getDay(),c=1===i?7:i-1,u=[],b=[];{let t=(7-i+n)%7,e=f(a);for(;t>0;)u.push(e),e=f(e),t-=1;u.reverse();let s=(7-r+c)%7,o=l(h);for(;s>0;)b.push(o),o=l(o),s-=1}let v=a;for(;v.getMonth()===t.getMonth();)s.push(v),v=l(v);return[...u,...s,...b]}(this.currentDate,0,0===this.firstDayOfWeek?7:this.firstDayOfWeek),e=[];for(let i=0;i<t.length;i+=7){const s=t.slice(i,i+7);e.push(s)}return e}getTitle(){if(Boolean(this.currentDate))return Intl.DateTimeFormat(this.locale,{month:"long",year:"numeric"}).format(this.currentDate)}focusDate(t){var e;t&&(null===(e=this.el.querySelector(`[data-date="${r(t)}"]`))||void 0===e||e.focus())}updateCurrentDate(t,e){var i,s;const a=t.getMonth(),n=t.getFullYear();D(t,this.minDate)||(t=new Date(this.minDate)),g(t,this.maxDate)||(t=new Date(this.maxDate)),(a!==(null===(i=this.currentDate)||void 0===i?void 0:i.getMonth())||n!==this.currentDate.getFullYear())&&(null===(s=this.changeMonth)||void 0===s||s.emit({month:c(t),year:w(t)}),e&&(this.moveFocusAfterMonthChanged=!0)),this.currentDate=t,e&&this.focusDate(this.currentDate)}onSelectDate(t){var e,i,s,a;if(!this.disableDate(t)&&C(t,this.minDate,this.maxDate))if(this.isRangeValue(this.value)){const s=void 0===(null===(e=this.value)||void 0===e?void 0:e[0])||2===this.value.length?[t]:[this.value[0],t];2===s.length&&s[0]>s[1]&&s.reverse();const a=void 0===s[1]?[r(s[0])]:[r(s[0]),r(s[1])];this.value=s,null===(i=this.selectDate)||void 0===i||i.emit(a)}else{if((null===(s=this.value)||void 0===s?void 0:s.getTime())===t.getTime())return;this.value=t,null===(a=this.selectDate)||void 0===a||a.emit(r(t))}}isRangeValue(t){return!!this.range}render(){var t;const e=this.showTodayButton||this.showClearButton||this.showKeyboardHint,i={year:{prev:this.disabled||!!this.minDate&&new Date(this.minDate).getFullYear()>y(this.currentDate).getFullYear(),next:this.disabled||!!this.maxDate&&new Date(this.maxDate).getFullYear()<b(this.currentDate).getFullYear()},month:{prev:this.disabled||$(v(this.currentDate).getMonth(),v(this.currentDate).getFullYear(),this.minDate,this.maxDate),next:this.disabled||$(u(this.currentDate).getMonth(),u(this.currentDate).getFullYear(),this.minDate,this.maxDate)}};return s(a,{key:"79018439c3f99dc228ac0d429763d1e86fe9bb03"},s("div",{key:"8863cf5d0de75a1f358723440f11b70128d7c739",class:{[`${this.getClassName()}-wrapper`]:!0,[`${this.getClassName()}-wrapper--inline`]:this.inline}},s("div",{key:"b47630e94a50c0bb74da62f1d9e9931ed06e15ab",class:{[this.getClassName()]:!0,[`${this.getClassName()}--disabled`]:this.disabled}},s("div",{key:"594429a8b241c0024edde2e4adb211935e3579fd",class:this.getClassName("header")},this.showHiddenTitle&&s("span",{key:"3258ebc3b0a325f0f21af5126fa31c5cb0197ebb","aria-atomic":"true","aria-live":"polite",class:"visually-hidden"},this.getTitle()),this.showYearStepper&&s("button",{key:"0f7d853b969a89b76b5794d9b8c5e03f7ece778b","aria-label":this.labels.previousYearButton,class:this.getClassName("previous-year-button"),"aria-disabled":i.year.prev,innerHTML:this.previousYearButtonContent||void 0,onClick:this.previousYear,type:"button"},s("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"},s("polyline",{key:"0fd84be75c074c61a0d839694e5e1b8e7efa480e",points:"11 17 6 12 11 7"}),s("polyline",{key:"4b1c8d3e29718cabc669d9194af749ffc2cac7aa",points:"18 17 13 12 18 7"}))),this.showMonthStepper&&s("button",{key:"27402a2f431d68487775e4fbe548804755c569cc","aria-label":this.labels.previousMonthButton,class:this.getClassName("previous-month-button"),"aria-disabled":i.month.prev,innerHTML:this.previousMonthButtonContent||void 0,onClick:this.previousMonth,type:"button"},s("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"},s("polyline",{key:"37241e518f64e1a7aba4153d0222649e62671ed4",points:"15 18 9 12 15 6"}))),s("span",{key:"3e87bb8129d4d7b1db718ee87f5164dec158fb1a",class:this.getClassName("current-month")},s("select",{key:"ae6c5128f2dc9ec17bd4d4c0090df4a62743b09c","aria-label":this.labels.monthSelect,class:this.getClassName("month-select"),"aria-disabled":this.disabled,name:"month",onChange:this.onMonthSelect},(n=this.locale,new Array(12).fill(void 0).map(((t,e)=>{const i=k(new Date(`2006-${String(e+1).padStart(2,"0")}-01`));return Intl.DateTimeFormat(n,{month:"long"}).format(i)}))).map(((t,e)=>s("option",{key:t,selected:this.currentDate.getMonth()===e,value:e+1,disabled:$(e,this.currentDate.getFullYear(),this.minDate,this.maxDate)},t)))),s("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&&s("button",{key:"eaa9e5e613835a9108f17991ba4743020cfa3146","aria-label":this.labels.nextMonthButton,class:this.getClassName("next-month-button"),"aria-disabled":i.month.next,innerHTML:this.nextMonthButtonContent||void 0,onClick:this.nextMonth,type:"button"},s("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"},s("polyline",{key:"a6cc05a5b83eb6f162654782466a43bd98ada883",points:"9 18 15 12 9 6"}))),this.showYearStepper&&s("button",{key:"6a8556ddc516e5c9a06fd9d71cfa939de48e9bbe","aria-label":this.labels.nextYearButton,class:this.getClassName("next-year-button"),"aria-disabled":i.year.next,innerHTML:this.nextYearButtonContent||void 0,onClick:this.nextYear,type:"button"},s("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"},s("polyline",{key:"bdf9cf173de2dc96beaf2bc615aea901899e5907",points:"13 17 18 12 13 7"}),s("polyline",{key:"638e86d7b823782b2331c2569531def9f267dce9",points:"6 17 11 12 6 7"})))),s("div",{key:"8fbe9e86646e09853205865351f3aa298877c43a",class:this.getClassName("body")},s("table",{key:"bf374b391788b26485362a368a10c009b42a9d84",class:this.getClassName("calendar"),onKeyDown:this.onKeyDown,role:"grid","aria-label":this.getTitle()},s("thead",{key:"7cb065ee0fa4bd944c79a130b107d59e8e622b89",class:this.getClassName("calendar-header")},s("tr",{key:"30b196641286a6f9adb3d37167172858a34f2933",class:this.getClassName("weekday-row")},null===(t=this.weekdays)||void 0===t?void 0:t.map((t=>s("th",{role:"columnheader",abbr:t[1],class:this.getClassName("weekday"),key:t[0],scope:"col"},s("span",{"aria-hidden":"true"},t[0]),s("span",{class:"visually-hidden"},t[1])))))),s("tbody",{key:"922edf01c35e7512654d8661348301d275c67647"},this.getCalendarRows().map((t=>{const e=`row-${t[0].getMonth()}-${t[0].getDate()}`;return s("tr",{class:this.getClassName("calendar-row"),key:e},t.map((t=>{var e,i,a;const n=p(t,this.currentDate),h=t.getMonth()!==(null===(e=this.currentDate)||void 0===e?void 0:e.getMonth()),o=Array.isArray(this.value)?p(t,this.value[0])||this.value[1]&&C(t,r(this.value[0]),r(this.value[1])):p(t,this.value),d=this.disableDate(t)||!C(t,this.minDate,this.maxDate),c=!!this.isRangeValue(this.value)&&(u={from:null===(i=this.value)||void 0===i?void 0:i[0],to:(null===(a=this.value)||void 0===a?void 0:a[1])||this.hoveredDate||this.currentDate},!!((l=t)&&u&&u.from&&u.to)&&l>=(u.from<u.to?u.from:u.to)&&l<=(u.from<u.to?u.to:u.from)&&!d);var l,u;const b=p(t,new Date),f=`cell-${t.getMonth()}-${t.getDate()}`,v={[this.getClassName("date")]:!0,[this.getClassName("date--current")]:n,[this.getClassName("date--disabled")]:d,[this.getClassName("date--overflowing")]:h,[this.getClassName("date--today")]:b,[this.getClassName("date--selected")]:o,[this.getClassName("date--in-range")]:c},y=o?"strong":b?"em":"span";return s("td",{"aria-disabled":String(d),"aria-selected":o?"true":void 0,class:v,"data-date":r(t),key:f,onClick:this.onClick,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave,role:"gridcell",tabIndex:p(t,this.currentDate)&&!this.disabled?0:-1},s(y,{"aria-hidden":"true"},t.getDate()),s("span",{class:"visually-hidden"},(()=>{if(this.range){let e=this.value?"":`, ${this.labels.chooseAsStartDate}.`;return Array.isArray(this.value)&&(e={1:`, ${this.labels.chooseAsEndDate}.`,2:`, ${this.labels.chooseAsStartDate}.`}[this.value.length]),`${o?`${this.labels.selected}, `:""}${Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(t)}${e}`}return`${o?`${this.labels.selected}, `:""}${Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(t)}`})()))})))}))))),e&&s("div",{key:"0a189fdb44b39bddc7a26c7bd3e4a889307fee39",class:this.getClassName("footer")},s("div",{key:"fbdf81d3a93afa19cdedba1423d2c64ab4e1fbcb",class:this.getClassName("footer-buttons")},this.showTodayButton&&s("button",{key:"4faad216c53bda804e8b660d758e30e0bf538940",class:this.getClassName("today-button"),disabled:this.disabled,innerHTML:this.todayButtonContent||void 0,onClick:this.showToday,type:"button"},this.labels.todayButton),this.showClearButton&&s("button",{key:"84ad553438da2c701c0ec75328eac36d01b3daa3",class:this.getClassName("clear-button"),disabled:this.disabled,innerHTML:this.clearButtonContent||void 0,onClick:this.clear,type:"button"},this.labels.clearButton)),this.showKeyboardHint&&!window.matchMedia("(pointer: coarse)").matches&&s("button",{key:"f63c1d1c802173072424a098ab52fffe35df7f56",type:"button",onClick:()=>alert("Todo: Add Keyboard helper!"),class:this.getClassName("keyboard-hint")},s("svg",{key:"790b14010416be81d39a52549a5677116e436a63",xmlns:"http://www.w3.org/2000/svg",height:"1em",width:"1em",viewBox:"0 0 48 48",fill:"currentColor"},s("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))),s("slot",{key:"1b6c88f7c9e4e6fa7109b99ef774af1ee8de24ea",name:"after-calendar"})));var n}get el(){return this}static get watchers(){return{modalIsOpen:[{watchModalIsOpen:0}],firstDayOfWeek:[{watchFirstDayOfWeek:0}],locale:[{watchLocale:0}],range:[{watchRange:0}],startDate:[{watchStartDate:0}],value:[{watchValue:0}]}}static get style(){return".visually-hidden.sc-tabworthy-dates-calendar{position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}"}},[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]},void 0,{modalIsOpen:[{watchModalIsOpen:0}],firstDayOfWeek:[{watchFirstDayOfWeek:0}],locale:[{watchLocale:0}],range:[{watchRange:0}],startDate:[{watchStartDate:0}],value:[{watchValue:0}]}]);function I(){"undefined"!=typeof customElements&&["tabworthy-dates-calendar"].forEach((t=>{"tabworthy-dates-calendar"===t&&(customElements.get(n(t))||customElements.define(n(t),M))}))}export{M as I,C as a,D as b,g as c,I as d,B as e,r as g,x as i,k as r}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as a,transformTag as n}from"@stencil/core/internal/client";function h(t,e){const i=new Date(t);return i.setDate(i.getDate()+e),i}function o(t){return k(new Date(`${w(t)}-${String(c(t)).padStart(2,"0")}-01`))}function r(t){return function(t){if(t instanceof Date)return`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`}(t)}function d(t){const e=o(t);return e.setMonth(e.getMonth()+1),e.setDate(e.getDate()-1),e}function c(t){return t.getMonth()+1}function l(t){return h(t,1)}function u(t){const e=new Date(t);return e.setMonth(e.getMonth()+1),e}function b(t){const e=new Date(t);return e.setFullYear(e.getFullYear()+1),e}function f(t){return m(t,1)}function v(t){const e=new Date(t);return e.setMonth(e.getMonth()-1),e}function y(t){const e=new Date(t);return e.setFullYear(e.getFullYear()-1),e}function w(t){return t.getFullYear()}function p(t,e){return!(!t||!e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}function k(t){const e=new Date(t);return e.setMinutes(e.getMinutes()+e.getTimezoneOffset()),e}function m(t,e){const i=new Date(t);return i.setDate(i.getDate()-e),i}function D(t,e){if(e){const i=k(new Date(e));return t>=i||p(i,t)}return!0}function g(t,e){if(e){const i=k(new Date(e));return t<=i||p(t,i)}return!0}function C(t,e,i){return D(t,e)&&g(t,i)}function $(t,e,i,s){const a=new Date(e,t,1);a.setDate(a.getDate()-1);const n=new Date(e,t+1,0);return n.setDate(a.getDate()+1),!C(a,i,s)&&!C(n,i,s)}function x(t){if(null==t.match(/^\d{4}-\d{2}-\d{2}$/))return!1;var e=new Date(t);return!isNaN(e.getTime())}function B(t){var e=t.match(/\d{4}-\d{2}-\d{2}/g);return null==e?void 0:e.slice(0,2)}const S={clearButton:"Clear value",monthSelect:"Select month",nextMonthButton:"Next month",nextYearButton:"Next year",picker:"Choose date",previousMonthButton:"Previous month",previousYearButton:"Previous year",todayButton:"Show today",yearSelect:"Select year",keyboardHint:"Keyboard commands",selected:"Selected date",chooseAsStartDate:"choose as start date",chooseAsEndDate:"choose as end date"},M=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.selectDate=i(this,"selectDate",7),this.changeMonth=i(this,"changeMonth",7),this.changeYear=i(this,"changeYear",7),this.disabled=!1,this.modalIsOpen=!1,this.disableDate=()=>!1,this.elementClassName="tabworthy-dates-calendar",this.firstDayOfWeek=0,this.range=!1,this.labels=S,this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.inline=!1,this.showClearButton=!1,this.showMonthStepper=!0,this.showTodayButton=!0,this.showYearStepper=!1,this.showKeyboardHint=!1,this.showHiddenTitle=!0,this.startDate=r(new Date),this.init=()=>{this.currentDate=this.startDate?k(new Date(this.startDate)):new Date,this.updateWeekdays()},this.nextMonth=()=>{this.updateCurrentDate(u(this.currentDate))},this.nextYear=()=>{this.updateCurrentDate(b(this.currentDate))},this.previousMonth=()=>{this.updateCurrentDate(v(this.currentDate))},this.previousYear=()=>{this.updateCurrentDate(y(this.currentDate))},this.showToday=()=>{this.updateCurrentDate(new Date,!0)},this.clear=()=>{var t;this.value=void 0,null===(t=this.selectDate)||void 0===t||t.emit(void 0)},this.onClick=t=>{if(this.disabled)return;const e=t.target.closest("[data-date]");if(!Boolean(e))return;const i=k(new Date(e.dataset.date));this.updateCurrentDate(i),this.onSelectDate(i)},this.onMonthSelect=t=>{const e=+t.target.value-1,i=new Date(this.currentDate);C(i,this.minDate,this.maxDate)&&(i.setMonth(e),this.updateCurrentDate(i))},this.onYearSelect=t=>{var e;const i=+t.target.value,s=new Date(this.currentDate);C(s,this.minDate,this.maxDate)&&(s.setFullYear(i),null===(e=this.changeYear)||void 0===e||e.emit({year:i}),this.updateCurrentDate(s))},this.onKeyDown=t=>{this.disabled||("ArrowLeft"===t.code?(t.preventDefault(),this.updateCurrentDate(f(this.currentDate),!0)):"ArrowRight"===t.code?(t.preventDefault(),this.updateCurrentDate(l(this.currentDate),!0)):"ArrowUp"===t.code?(t.preventDefault(),this.updateCurrentDate(m(this.currentDate,7),!0)):"ArrowDown"===t.code?(t.preventDefault(),this.updateCurrentDate(h(this.currentDate,7),!0)):"PageUp"===t.code?(t.preventDefault(),this.updateCurrentDate(t.shiftKey?y(this.currentDate):v(this.currentDate),!0)):"PageDown"===t.code?(t.preventDefault(),this.updateCurrentDate(t.shiftKey?b(this.currentDate):u(this.currentDate),!0)):"Home"===t.code?(t.preventDefault(),this.updateCurrentDate(o(this.currentDate),!0)):"End"===t.code?(t.preventDefault(),this.updateCurrentDate(d(this.currentDate),!0)):"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),this.onSelectDate(this.currentDate)))},this.onMouseEnter=t=>{var e;if(this.disabled)return;const i=k(new Date(null===(e=t.target.closest("td"))||void 0===e?void 0:e.dataset.date));this.hoveredDate=i},this.onMouseLeave=()=>{this.hoveredDate=void 0}}componentWillLoad(){this.init()}watchModalIsOpen(){!0===this.modalIsOpen&&(this.moveFocusOnModalOpen=!0)}watchFirstDayOfWeek(){this.updateWeekdays()}watchLocale(){Boolean(this.locale)||(this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US"),this.updateWeekdays()}watchRange(){var t;this.value=void 0,null===(t=this.selectDate)||void 0===t||t.emit(void 0)}watchStartDate(){this.currentDate=this.startDate?k(new Date(this.startDate)):new Date}watchValue(){Boolean(this.value)&&(Array.isArray(this.value)&&this.value.length>=1?this.currentDate=this.value[0]:this.value instanceof Date&&(this.currentDate=this.value))}componentDidRender(){this.moveFocusAfterMonthChanged&&(this.focusDate(this.currentDate),this.moveFocusAfterMonthChanged=!1),this.moveFocusOnModalOpen&&setTimeout((()=>{this.focusDate(this.currentDate),this.moveFocusOnModalOpen=!1}),100)}updateWeekdays(){var t,e;this.weekdays=(t=this.firstDayOfWeek,e=this.locale,new Array(7).fill(void 0).map(((e,i)=>(t+i)%7+1)).map((t=>{const i=new Date(2006,0,t);return[Intl.DateTimeFormat(e,{weekday:"short"}).format(i),Intl.DateTimeFormat(e,{weekday:"long"}).format(i)]})))}getClassName(t){return Boolean(t)?`${this.elementClassName}__${t}`:this.elementClassName}getCalendarRows(){const t=function(t,e,i){const s=[],a=o(t),n=0===a.getDay()?7:a.getDay(),h=d(t),r=0===h.getDay()?7:h.getDay(),c=1===i?7:i-1,u=[],b=[];{let t=(7-i+n)%7,e=f(a);for(;t>0;)u.push(e),e=f(e),t-=1;u.reverse();let s=(7-r+c)%7,o=l(h);for(;s>0;)b.push(o),o=l(o),s-=1}let v=a;for(;v.getMonth()===t.getMonth();)s.push(v),v=l(v);return[...u,...s,...b]}(this.currentDate,0,0===this.firstDayOfWeek?7:this.firstDayOfWeek),e=[];for(let i=0;i<t.length;i+=7){const s=t.slice(i,i+7);e.push(s)}return e}getTitle(){if(Boolean(this.currentDate))return Intl.DateTimeFormat(this.locale,{month:"long",year:"numeric"}).format(this.currentDate)}focusDate(t){var e;t&&(null===(e=this.el.querySelector(`[data-date="${r(t)}"]`))||void 0===e||e.focus())}updateCurrentDate(t,e){var i,s;const a=t.getMonth(),n=t.getFullYear();D(t,this.minDate)||(t=new Date(this.minDate)),g(t,this.maxDate)||(t=new Date(this.maxDate)),(a!==(null===(i=this.currentDate)||void 0===i?void 0:i.getMonth())||n!==this.currentDate.getFullYear())&&(null===(s=this.changeMonth)||void 0===s||s.emit({month:c(t),year:w(t)}),e&&(this.moveFocusAfterMonthChanged=!0)),this.currentDate=t,e&&this.focusDate(this.currentDate)}onSelectDate(t){var e,i,s,a;if(!this.disableDate(t)&&C(t,this.minDate,this.maxDate))if(this.isRangeValue(this.value)){const s=void 0===(null===(e=this.value)||void 0===e?void 0:e[0])||2===this.value.length?[t]:[this.value[0],t];2===s.length&&s[0]>s[1]&&s.reverse();const a=void 0===s[1]?[r(s[0])]:[r(s[0]),r(s[1])];this.value=s,null===(i=this.selectDate)||void 0===i||i.emit(a)}else{if((null===(s=this.value)||void 0===s?void 0:s.getTime())===t.getTime())return;this.value=t,null===(a=this.selectDate)||void 0===a||a.emit(r(t))}}isRangeValue(t){return!!this.range}render(){var t;const e=this.showTodayButton||this.showClearButton||this.showKeyboardHint,i={year:{prev:this.disabled||!!this.minDate&&new Date(this.minDate).getFullYear()>y(this.currentDate).getFullYear(),next:this.disabled||!!this.maxDate&&new Date(this.maxDate).getFullYear()<b(this.currentDate).getFullYear()},month:{prev:this.disabled||$(v(this.currentDate).getMonth(),v(this.currentDate).getFullYear(),this.minDate,this.maxDate),next:this.disabled||$(u(this.currentDate).getMonth(),u(this.currentDate).getFullYear(),this.minDate,this.maxDate)}};return s(a,{key:"537927e765bb4b5e3b0fda109fca55278f16e980"},s("div",{key:"a46f37e038fb6d615785e2d7b871269ea9a6784d",class:{[`${this.getClassName()}-wrapper`]:!0,[`${this.getClassName()}-wrapper--inline`]:this.inline}},s("div",{key:"d45b18e90cabf14175eacf2b86ffc4ccb261e6e1",class:{[this.getClassName()]:!0,[`${this.getClassName()}--disabled`]:this.disabled}},s("div",{key:"2ae05963eec49c2202d045d0b1076358ce7024c9",class:this.getClassName("header")},this.showHiddenTitle&&s("span",{key:"c0590d1799610f4f2bcc566f58ea4496c4a04ce2","aria-atomic":"true","aria-live":"polite",class:"visually-hidden"},this.getTitle()),this.showYearStepper&&s("button",{key:"55facf0c12e4529de9f6154e7ed171a36c3f9374","aria-label":this.labels.previousYearButton,class:this.getClassName("previous-year-button"),"aria-disabled":i.year.prev,innerHTML:this.previousYearButtonContent||void 0,onClick:this.previousYear,type:"button"},s("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"},s("polyline",{key:"22edd595edf1ce12ecfafc0c9e9074eb4b57a8f1",points:"11 17 6 12 11 7"}),s("polyline",{key:"1eddb5fb1d11e2bb51dde46a7e24835a3444552d",points:"18 17 13 12 18 7"}))),this.showMonthStepper&&s("button",{key:"cd338dd018484e40fbc1526c54b4bef0007db39f","aria-label":this.labels.previousMonthButton,class:this.getClassName("previous-month-button"),"aria-disabled":i.month.prev,innerHTML:this.previousMonthButtonContent||void 0,onClick:this.previousMonth,type:"button"},s("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"},s("polyline",{key:"7d6da26c8abf2193dd0596053dcf6eaf1d0022e0",points:"15 18 9 12 15 6"}))),s("span",{key:"bb77047688ea6f766fb66700e1e824b21e835c21",class:this.getClassName("current-month")},s("select",{key:"57ff448ad512c487382bcba5208eae221d712a14","aria-label":this.labels.monthSelect,class:this.getClassName("month-select"),"aria-disabled":this.disabled,name:"month",onChange:this.onMonthSelect},(n=this.locale,new Array(12).fill(void 0).map(((t,e)=>{const i=k(new Date(`2006-${String(e+1).padStart(2,"0")}-01`));return Intl.DateTimeFormat(n,{month:"long"}).format(i)}))).map(((t,e)=>s("option",{key:t,selected:this.currentDate.getMonth()===e,value:e+1,disabled:$(e,this.currentDate.getFullYear(),this.minDate,this.maxDate)},t)))),s("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&&s("button",{key:"7ac8e4ad643f4da536142cdca8104ecc4f5e739f","aria-label":this.labels.nextMonthButton,class:this.getClassName("next-month-button"),"aria-disabled":i.month.next,innerHTML:this.nextMonthButtonContent||void 0,onClick:this.nextMonth,type:"button"},s("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"},s("polyline",{key:"c611342212d7ec1441f4d395b65fa1bee50f8701",points:"9 18 15 12 9 6"}))),this.showYearStepper&&s("button",{key:"0123d1421e2af85b7cfaa524d3df545493112856","aria-label":this.labels.nextYearButton,class:this.getClassName("next-year-button"),"aria-disabled":i.year.next,innerHTML:this.nextYearButtonContent||void 0,onClick:this.nextYear,type:"button"},s("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"},s("polyline",{key:"da2a0780d240ccf266aacc538f1e90db5b758c34",points:"13 17 18 12 13 7"}),s("polyline",{key:"5299b9a1211e860300c62d32338ce49d129d3cce",points:"6 17 11 12 6 7"})))),s("div",{key:"6c3aa5ab44b987b12425f3e205c62706b52b957a",class:this.getClassName("body")},s("table",{key:"ff27e4773d83c96657c99314bebed5786ccde4c6",class:this.getClassName("calendar"),onKeyDown:this.onKeyDown,role:"grid","aria-label":this.getTitle()},s("thead",{key:"8a20159ac1fc8e86273ef9b4652514df1eedf049",class:this.getClassName("calendar-header")},s("tr",{key:"d8e330c6149c3e49e387ac2084f985e14aad5e2e",class:this.getClassName("weekday-row")},null===(t=this.weekdays)||void 0===t?void 0:t.map((t=>s("th",{role:"columnheader",abbr:t[1],class:this.getClassName("weekday"),key:t[0],scope:"col"},s("span",{"aria-hidden":"true"},t[0]),s("span",{class:"visually-hidden"},t[1])))))),s("tbody",{key:"659aa92ae94aa8904289be27821be2ec1b1e469c"},this.getCalendarRows().map((t=>{const e=`row-${t[0].getMonth()}-${t[0].getDate()}`;return s("tr",{class:this.getClassName("calendar-row"),key:e},t.map((t=>{var e,i,a;const n=p(t,this.currentDate),h=t.getMonth()!==(null===(e=this.currentDate)||void 0===e?void 0:e.getMonth()),o=Array.isArray(this.value)?p(t,this.value[0])||this.value[1]&&C(t,r(this.value[0]),r(this.value[1])):p(t,this.value),d=this.disableDate(t)||!C(t,this.minDate,this.maxDate),c=!!this.isRangeValue(this.value)&&(u={from:null===(i=this.value)||void 0===i?void 0:i[0],to:(null===(a=this.value)||void 0===a?void 0:a[1])||this.hoveredDate||this.currentDate},!!((l=t)&&u&&u.from&&u.to)&&l>=(u.from<u.to?u.from:u.to)&&l<=(u.from<u.to?u.to:u.from)&&!d);var l,u;const b=p(t,new Date),f=`cell-${t.getMonth()}-${t.getDate()}`,v={[this.getClassName("date")]:!0,[this.getClassName("date--current")]:n,[this.getClassName("date--disabled")]:d,[this.getClassName("date--overflowing")]:h,[this.getClassName("date--today")]:b,[this.getClassName("date--selected")]:o,[this.getClassName("date--in-range")]:c},y=o?"strong":b?"em":"span";return s("td",{"aria-disabled":String(d),"aria-selected":o?"true":void 0,class:v,"data-date":r(t),key:f,onClick:this.onClick,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave,role:"gridcell",tabIndex:p(t,this.currentDate)&&!this.disabled?0:-1},s(y,{"aria-hidden":"true"},t.getDate()),s("span",{class:"visually-hidden"},(()=>{if(this.range){let e=this.value?"":`, ${this.labels.chooseAsStartDate}.`;return Array.isArray(this.value)&&(e={1:`, ${this.labels.chooseAsEndDate}.`,2:`, ${this.labels.chooseAsStartDate}.`}[this.value.length]),`${o?`${this.labels.selected}, `:""}${Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(t)}${e}`}return`${o?`${this.labels.selected}, `:""}${Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(t)}`})()))})))}))))),e&&s("div",{key:"142e1eb18019ede50c8e7da056ff365a10478849",class:this.getClassName("footer")},s("div",{key:"2d6b06ed8a2fddadb107521730c71b97ce0c0a05",class:this.getClassName("footer-buttons")},this.showTodayButton&&s("button",{key:"516d186b77c0d9229b6d96cfa6f07067fbd83d15",class:this.getClassName("today-button"),disabled:this.disabled,innerHTML:this.todayButtonContent||void 0,onClick:this.showToday,type:"button"},this.labels.todayButton),this.showClearButton&&s("button",{key:"30a0c6b46efe755b96fef443e6f52de8e558e43a",class:this.getClassName("clear-button"),disabled:this.disabled,innerHTML:this.clearButtonContent||void 0,onClick:this.clear,type:"button"},this.labels.clearButton)),this.showKeyboardHint&&!window.matchMedia("(pointer: coarse)").matches&&s("button",{key:"f0a1d1a382ca37b3810888aa1244a090f9b94e93",type:"button",onClick:()=>alert("Todo: Add Keyboard helper!"),class:this.getClassName("keyboard-hint")},s("svg",{key:"fa193bf2bafc73e3db2720e87fecbc25ab6b5a7c",xmlns:"http://www.w3.org/2000/svg",height:"1em",width:"1em",viewBox:"0 0 48 48",fill:"currentColor"},s("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))),s("slot",{key:"11c329aa5161b2720b1e9246fa1f2883f92c6783",name:"after-calendar"})));var n}get el(){return this}static get watchers(){return{modalIsOpen:[{watchModalIsOpen:0}],firstDayOfWeek:[{watchFirstDayOfWeek:0}],locale:[{watchLocale:0}],range:[{watchRange:0}],startDate:[{watchStartDate:0}],value:[{watchValue:0}]}}static get style(){return".visually-hidden.sc-tabworthy-dates-calendar{position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}"}},[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]},void 0,{modalIsOpen:[{watchModalIsOpen:0}],firstDayOfWeek:[{watchFirstDayOfWeek:0}],locale:[{watchLocale:0}],range:[{watchRange:0}],startDate:[{watchStartDate:0}],value:[{watchValue:0}]}]);function I(){"undefined"!=typeof customElements&&["tabworthy-dates-calendar"].forEach((t=>{"tabworthy-dates-calendar"===t&&(customElements.get(n(t))||customElements.define(n(t),M))}))}export{M as I,C as a,D as b,g as c,I as d,B as e,r as g,x as i,k as r}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";function o(t,e,i,n=20,s=0){let a=[];if(s>=n)return a;const r=t=>{const a=t.assignedNodes().filter((t=>1===t.nodeType));return a.length>0?o(a[0].parentElement,e,i,n,s+1):[]},
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";function o(t,e,i,n=20,s=0){let a=[];if(s>=n)return a;const r=t=>{const a=t.assignedNodes().filter((t=>1===t.nodeType));return a.length>0?o(a[0].parentElement,e,i,n,s+1):[]},h=Array.from(t.children||[]);for(const t of h)e(t)||(i(t)&&a.push(t),null!=t.shadowRoot?a.push(...o(t.shadowRoot,e,i,n,s+1)):"SLOT"===t.tagName?a.push(...r(t)):a.push(...o(t,e,i,n,s+1)));return a}function r(t){return t.hasAttribute("hidden")||t.hasAttribute("aria-hidden")&&"false"!==t.getAttribute("aria-hidden")||"none"===t.style.display||"0"===t.style.opacity||"hidden"===t.style.visibility||"collapse"===t.style.visibility}function h(t){return"-1"!==t.getAttribute("tabindex")&&!r(t)&&!function(t){return t.hasAttribute("disabled")||t.hasAttribute("aria-disabled")&&"false"!==t.getAttribute("aria-disabled")}(t)&&(t.hasAttribute("tabindex")||(t instanceof HTMLAnchorElement||t instanceof HTMLAreaElement)&&t.hasAttribute("href")||t instanceof HTMLButtonElement||t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||t instanceof HTMLIFrameElement)}const c=new Map,d=document.createElement("template");d.innerHTML='\n\t<div id="start"></div>\n\t<div id="backup"></div>\n\t<slot></slot>\n\t<div id="end"></div>\n';class u extends HTMLElement{constructor(){super(),this.debounceId=Math.random().toString(),this._focused=!1;const t=this.attachShadow({mode:"open"});t.appendChild(d.content.cloneNode(!0)),this.$backup=t.querySelector("#backup"),this.$start=t.querySelector("#start"),this.$end=t.querySelector("#end"),this.focusLastElement=this.focusLastElement.bind(this),this.focusFirstElement=this.focusFirstElement.bind(this),this.onFocusIn=this.onFocusIn.bind(this),this.onFocusOut=this.onFocusOut.bind(this)}static get observedAttributes(){return["inactive"]}get inactive(){return this.hasAttribute("inactive")}set inactive(t){t?this.setAttribute("inactive",""):this.removeAttribute("inactive")}get focused(){return this._focused}connectedCallback(){this.$start.addEventListener("focus",this.focusLastElement),this.$end.addEventListener("focus",this.focusFirstElement),this.addEventListener("focusin",this.onFocusIn),this.addEventListener("focusout",this.onFocusOut),this.render()}disconnectedCallback(){this.$start.removeEventListener("focus",this.focusLastElement),this.$end.removeEventListener("focus",this.focusFirstElement),this.removeEventListener("focusin",this.onFocusIn),this.removeEventListener("focusout",this.onFocusOut)}attributeChangedCallback(){this.render()}focusFirstElement(){this.trapFocus()}focusLastElement(){this.trapFocus(!0)}getFocusableElements(){return o(this,r,h)}trapFocus(t){if(this.inactive)return;let e=this.getFocusableElements();e.length>0?(t?e[e.length-1].focus():e[0].focus(),this.$backup.setAttribute("tabindex","-1")):(this.$backup.setAttribute("tabindex","0"),this.$backup.focus())}onFocusIn(){this.updateFocused(!0)}onFocusOut(){this.updateFocused(!1)}updateFocused(t){!function(t,e,i){const n=c.get(i);null!=n&&window.clearTimeout(n),c.set(i,window.setTimeout((()=>{t(),c.delete(i)}),0))}((()=>{this.focused!==t&&(this._focused=t,this.render())}),0,this.debounceId)}render(){this.$start.setAttribute("tabindex",!this.focused||this.inactive?"-1":"0"),this.$end.setAttribute("tabindex",!this.focused||this.inactive?"-1":"0"),this.focused?this.setAttribute("focused",""):this.removeAttribute("focused")}}window.customElements.define("focus-trap",u);var l=new WeakMap,f=new WeakMap,b={},p=0,m=function(t){return t&&(t.host||m(t.parentNode))},v=function(t,e,i){void 0===i&&(i="data-aria-hidden");var n=Array.from(Array.isArray(t)?t:[t]),s=function(t){return"undefined"==typeof document?null:(Array.isArray(t)?t[0]:t).ownerDocument.body}(t);return s?(n.push.apply(n,Array.from(s.querySelectorAll("[aria-live]"))),function(t,e,i,n){var s=function(t,e){return e.map((function(e){if(t.contains(e))return e;var i=m(e);return i&&t.contains(i)?i:(console.error("aria-hidden",e,"in not contained inside",t,". Doing nothing"),null)})).filter((function(t){return Boolean(t)}))}(e,Array.isArray(t)?t:[t]);b[i]||(b[i]=new WeakMap);var a=b[i],o=[],r=new Set,h=new Set(s),c=function(t){t&&!r.has(t)&&(r.add(t),c(t.parentNode))};s.forEach(c);var d=function(t){t&&!h.has(t)&&Array.prototype.forEach.call(t.children,(function(t){if(r.has(t))d(t);else{var e=t.getAttribute(n),s=null!==e&&"false"!==e,h=(l.get(t)||0)+1,c=(a.get(t)||0)+1;l.set(t,h),a.set(t,c),o.push(t),1===h&&s&&f.set(t,!0),1===c&&t.setAttribute(i,"true"),s||t.setAttribute(n,"true")}}))};return d(e),r.clear(),p++,function(){o.forEach((function(t){var e=l.get(t)-1,s=a.get(t)-1;l.set(t,e),a.set(t,s),e||(f.has(t)||t.removeAttribute(n),f.delete(t)),s||t.removeAttribute(i)})),--p||(l=new WeakMap,l=new WeakMap,f=new WeakMap,b={})}}(n,s,i,"aria-hidden")):function(){return null}};const y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.opened=i(this,"opened",7),this.closed=i(this,"closed",7),this.inline=!1,this.closing=!1,this.showing=this.inline||!1,this.onKeyDown=t=>{"Escape"===t.code&&this.close()}}async open(){this.inline||(this.showing=!0,this.undo=v(this.el),this.opened.emit(void 0))}async close(){this.inline||(this.showing=!1,this.closed.emit(void 0),this.undo(),this.triggerElement&&this.triggerElement.focus())}async getState(){return this.showing}async setTriggerElement(t){this.triggerElement=t}handleClick(t){this.showing&&!this.el.contains(t.target)&&this.close()}render(){return n(s,{key:"773d9edf7cf6598394c1210a1fab91af0bcb951e",showing:this.showing,ref:t=>t&&(this.el=t)},!this.inline&&this.showing&&n("div",{key:"c456932007f7ea9a9c3727d9d08fd8fbea5b8670",part:"body",onKeyDown:this.onKeyDown,role:"dialog",tabindex:-1,"aria-hidden":!this.showing,"aria-label":this.label,"aria-modal":this.showing},n("focus-trap",{key:"c1355fe48117067d62ede321afd1f90bf9bf4c22"},n("div",{key:"fbd3ec5e0e7069574f1dbd6c38b40e409b837045",part:"content"},n("slot",{key:"bad04015cc3945efbb68a52de623ee1f4b584868"})))),this.inline&&n("div",{key:"b0577b12dd1bec091de967ccd0ac297451576ad8",part:"content"},n("slot",{key:"5457a9bd5d08feac90adb2ee061d60fb5fb94657"})))}static get style(){return":host::part(body){position:absolute;width:-moz-fit-content;width:fit-content;z-index:1200;margin-top:0.5rem}:host::part(backdrop){}:host::part(content){}"}},[257,"tabworthy-dates-modal",{label:[1],inline:[4],closing:[32],showing:[32],open:[64],close:[64],getState:[64],setTriggerElement:[64]},[[10,"click","handleClick"]]]);function w(){"undefined"!=typeof customElements&&["tabworthy-dates-modal"].forEach((t=>{"tabworthy-dates-modal"===t&&(customElements.get(a(t))||customElements.define(a(t),y))}))}export{y as I,w as d}
|