@tabworthy/components 0.5.0 → 0.5.1
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/{index-C15oswCE.js → index-DlzGiVkc.js} +3 -3
- 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 +12 -12
- package/dist/cjs/tabworthy-dates.cjs.entry.js +4 -4
- package/dist/cjs/tabworthy-times-picker.cjs.entry.js +2 -2
- package/dist/cjs/tabworthy-times.cjs.entry.js +4 -4
- package/dist/collection/components/tabworthy-dates-calendar/tabworthy-dates-calendar.js +9 -9
- package/dist/components/tabworthy-dates-calendar2.js +1 -1
- package/dist/esm/{index-BusoZVTR.js → index-zgp3PkTz.js} +3 -3
- package/dist/esm/loader.js +2 -2
- package/dist/esm/tabworthy-components.js +2 -2
- package/dist/esm/tabworthy-dates-calendar_2.entry.js +12 -12
- package/dist/esm/tabworthy-dates.entry.js +4 -4
- package/dist/esm/tabworthy-times-picker.entry.js +2 -2
- package/dist/esm/tabworthy-times.entry.js +4 -4
- package/dist/tabworthy-components/p-6b1d06a7.entry.js +1 -0
- package/dist/tabworthy-components/p-92257938.entry.js +1 -0
- package/dist/tabworthy-components/p-a261cea6.entry.js +1 -0
- package/dist/tabworthy-components/{p-ec699892.entry.js → p-c49e980d.entry.js} +1 -1
- package/dist/tabworthy-components/p-zgp3PkTz.js +2 -0
- package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/tabworthy-components/p-841f3e8f.entry.js +0 -1
- package/dist/tabworthy-components/p-BusoZVTR.js +0 -2
- package/dist/tabworthy-components/p-ce2c8dc0.entry.js +0 -1
- package/dist/tabworthy-components/p-cedac657.entry.js +0 -1
|
@@ -632,9 +632,9 @@ var createEvent = (ref, name, flags) => {
|
|
|
632
632
|
return {
|
|
633
633
|
emit: (detail) => {
|
|
634
634
|
return emitEvent(elm, name, {
|
|
635
|
-
bubbles:
|
|
636
|
-
composed:
|
|
637
|
-
cancelable:
|
|
635
|
+
bubbles: !!(flags & 4 /* Bubbles */),
|
|
636
|
+
composed: !!(flags & 2 /* Composed */),
|
|
637
|
+
cancelable: !!(flags & 1 /* Cancellable */),
|
|
638
638
|
detail
|
|
639
639
|
});
|
|
640
640
|
}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DlzGiVkc.js');
|
|
4
4
|
var utils = require('./utils-y5Vtky2t.js');
|
|
5
5
|
|
|
6
6
|
const tabworthyDatesCalendarCss = () => `.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%)}`;
|
|
@@ -23,9 +23,9 @@ const defaultLabels = {
|
|
|
23
23
|
const InclusiveDatesCalendar = class {
|
|
24
24
|
constructor(hostRef) {
|
|
25
25
|
index.registerInstance(this, hostRef);
|
|
26
|
-
this.selectDate = index.createEvent(this, "selectDate");
|
|
27
|
-
this.changeMonth = index.createEvent(this, "changeMonth");
|
|
28
|
-
this.changeYear = index.createEvent(this, "changeYear");
|
|
26
|
+
this.selectDate = index.createEvent(this, "selectDate", 3);
|
|
27
|
+
this.changeMonth = index.createEvent(this, "changeMonth", 3);
|
|
28
|
+
this.changeYear = index.createEvent(this, "changeYear", 3);
|
|
29
29
|
this.disabled = false;
|
|
30
30
|
this.modalIsOpen = false;
|
|
31
31
|
this.disableDate = () => false;
|
|
@@ -315,15 +315,15 @@ const InclusiveDatesCalendar = class {
|
|
|
315
315
|
utils.monthIsDisabled(utils.getNextMonth(this.currentDate).getMonth(), utils.getNextMonth(this.currentDate).getFullYear(), this.minDate, this.maxDate)
|
|
316
316
|
}
|
|
317
317
|
};
|
|
318
|
-
return (index.h(index.Host, { key: '
|
|
318
|
+
return (index.h(index.Host, { key: '0ca78d9d8d4d0edd2375f48f23c5d879a2c6fb44' }, index.h("div", { key: '8ba043e2d7c70958ca73253348de57c07424c7f2', class: {
|
|
319
319
|
[`${this.getClassName()}-wrapper`]: true,
|
|
320
320
|
[`${this.getClassName()}-wrapper--inline`]: this.inline
|
|
321
|
-
} }, index.h("div", { key: '
|
|
321
|
+
} }, index.h("div", { key: '2b6d87a26620acd162d6321add8cb52fe9c41e97', class: {
|
|
322
322
|
[this.getClassName()]: true,
|
|
323
323
|
[`${this.getClassName()}--disabled`]: this.disabled
|
|
324
|
-
} }, index.h("div", { key: '
|
|
324
|
+
} }, index.h("div", { key: 'f773d4c95f3ebf4ea79dd5e72385a1f16b6cfe87', class: this.getClassName("header") }, this.showHiddenTitle && (index.h("span", { key: 'c6249db5073485bcf479bcd1d8c9da6a8270757c', "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle())), this.showYearStepper && (index.h("button", { key: 'ecf43dac6e8539598c43f782fb211ff44758d58a', "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), "aria-disabled": disabled.year.prev, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { key: '7986a7b8b7a4a696c6e62bba6677f9801c6d9059', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '3a1474883ab05ef0c0376944cfc4dbfe63aa6434', points: "11 17 6 12 11 7" }), index.h("polyline", { key: 'eb15b38a86f440e5b77723e8551e774af50c4a32', points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { key: 'f3a6e864f855833ae24f6b15930ff85a5939d39e', "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), "aria-disabled": disabled.month.prev, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { key: 'b15bc4eb6009b5872bc0d1253b5ca0e863505956', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '90d0590bdafd7b802e8967366f30411ac65aead1', points: "15 18 9 12 15 6" })))), index.h("span", { key: 'c0a4670b7f7f71706e1b02430f08302d69e7bec4', class: this.getClassName("current-month") }, index.h("select", { key: 'd7b43fcb12387644b74403f52c3e72948d2a460d', "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), "aria-disabled": this.disabled, name: "month", onChange: this.onMonthSelect }, utils.getMonths(this.locale).map((month, index$1) => {
|
|
325
325
|
return (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1, disabled: utils.monthIsDisabled(index$1, this.currentDate.getFullYear(), this.minDate, this.maxDate) }, month));
|
|
326
|
-
})), index.h("input", { key: '
|
|
326
|
+
})), index.h("input", { key: '6123f052aa28fd745ee52a37d817855a31c6a888', "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), "aria-disabled": this.disabled, max: this.maxDate ? this.maxDate.slice(0, 4) : 9999, min: this.minDate ? this.minDate.slice(0, 4) : 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { key: '9a9ded70d8cfb7f61d15edc15873f1c7cc24d352', "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), "aria-disabled": disabled.month.next, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { key: '500969c2fd840a7131c348c4d562f3493dfddd4e', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '9e7fdecb2585366f9dc96fe32f0c83123257bd0a', points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { key: '7ee30553302a226836261fd21dafdfa065f831d8', "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), "aria-disabled": disabled.year.next, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { key: 'd3c6f21d586a2be2ef8f52419fde77c1ad4398ad', fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { key: '19da599079fab7e31a853a7f09e68d12e66c9974', points: "13 17 18 12 13 7" }), index.h("polyline", { key: 'b23802d92bc35c3af659f86ecad9d41320cf3467', points: "6 17 11 12 6 7" }))))), index.h("div", { key: '75b511a738d0d421828c64a88b79cdadeb3e77db', class: this.getClassName("body") }, index.h("table", { key: '7f62f9985c99c4c19cbf320e009fbefbb436f5c2', class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid", "aria-label": this.getTitle() }, index.h("thead", { key: '6d518a1c015ee4f545278e175d9f71456b7cb525', class: this.getClassName("calendar-header") }, index.h("tr", { key: 'd5f289679c98b5ef8f67f8ccbf3999aac68a022c', class: this.getClassName("weekday-row") }, (_a = this.weekdays) === null || _a === void 0 ? void 0 : _a.map((weekday) => (index.h("th", { role: "columnheader", abbr: weekday[1], class: this.getClassName("weekday"), key: weekday[0], scope: "col" }, index.h("span", { "aria-hidden": "true" }, weekday[0]), index.h("span", { class: "visually-hidden" }, weekday[1])))))), index.h("tbody", { key: 'f4cf7ef148106044880c2b6c360e4319a7b31d83' }, this.getCalendarRows().map((calendarRow) => {
|
|
327
327
|
const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
|
|
328
328
|
return (index.h("tr", { class: this.getClassName("calendar-row"), key: rowKey }, calendarRow.map((day) => {
|
|
329
329
|
var _a, _b, _c;
|
|
@@ -390,8 +390,8 @@ const InclusiveDatesCalendar = class {
|
|
|
390
390
|
? 0
|
|
391
391
|
: -1 }, index.h(Tag, { "aria-hidden": "true" }, day.getDate()), index.h("span", { class: "visually-hidden" }, getScreenReaderText())));
|
|
392
392
|
})));
|
|
393
|
-
})))), showFooter && (index.h("div", { key: '
|
|
394
|
-
!window.matchMedia("(pointer: coarse)").matches && (index.h("button", { key: '
|
|
393
|
+
})))), showFooter && (index.h("div", { key: 'a34938c0321570d5a4983cb47822d12335cb5fba', class: this.getClassName("footer") }, index.h("div", { key: '0c52dc84cb734326025e7927f94ab7d9947f89c3', class: this.getClassName("footer-buttons") }, this.showTodayButton && (index.h("button", { key: '11d7621dc4b8ffa33b51bf4312de6f0cedcc94e9', class: this.getClassName("today-button"), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (index.h("button", { key: '2eb6ef128169727ba993a68d270e730b600b130a', class: this.getClassName("clear-button"), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton))), this.showKeyboardHint &&
|
|
394
|
+
!window.matchMedia("(pointer: coarse)").matches && (index.h("button", { key: 'f2f52bf2b5de8d810dab6f3376d5b0923a2abb0c', type: "button", onClick: () => alert("Todo: Add Keyboard helper!"), class: this.getClassName("keyboard-hint") }, index.h("svg", { key: '1d2f5e1323af69c00c185b450a3e4ac2ed5b9f69', xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 48 48", fill: "currentColor" }, index.h("path", { key: 'd3f34347335b0e1f100b5e6346a283678daba519', d: "M7 38q-1.2 0-2.1-.925Q4 36.15 4 35V13q0-1.2.9-2.1.9-.9 2.1-.9h34q1.2 0 2.1.9.9.9.9 2.1v22q0 1.15-.9 2.075Q42.2 38 41 38Zm0-3h34V13H7v22Zm8-3.25h18v-3H15Zm-4.85-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm-24.7-6.25h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3Zm6.2 0h3v-3h-3Zm6.15 0h3v-3h-3ZM7 35V13v22Z" })), this.labels.keyboardHint))))), index.h("slot", { key: 'fa342bcfcd2cf4cb057b33b0cc8231264e97c51c', name: "after-calendar" }))));
|
|
395
395
|
}
|
|
396
396
|
get el() { return index.getElement(this); }
|
|
397
397
|
static get watchers() { return {
|
|
@@ -838,8 +838,8 @@ const tabworthyDatesModalCss = () => `:host::part(body){position:absolute;width:
|
|
|
838
838
|
const InclusiveDatesModal = class {
|
|
839
839
|
constructor(hostRef) {
|
|
840
840
|
index.registerInstance(this, hostRef);
|
|
841
|
-
this.opened = index.createEvent(this, "opened");
|
|
842
|
-
this.closed = index.createEvent(this, "closed");
|
|
841
|
+
this.opened = index.createEvent(this, "opened", 7);
|
|
842
|
+
this.closed = index.createEvent(this, "closed", 7);
|
|
843
843
|
this.inline = false;
|
|
844
844
|
this.closing = false;
|
|
845
845
|
this.showing = this.inline || false;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index$1 = require('./index-
|
|
3
|
+
var index$1 = require('./index-DlzGiVkc.js');
|
|
4
4
|
var moment = require('./moment-CdViwxPQ.js');
|
|
5
5
|
var utils = require('./utils-y5Vtky2t.js');
|
|
6
6
|
|
|
@@ -10487,9 +10487,9 @@ const defaultLabels = {
|
|
|
10487
10487
|
const TabworthyDates = class {
|
|
10488
10488
|
constructor(hostRef) {
|
|
10489
10489
|
index$1.registerInstance(this, hostRef);
|
|
10490
|
-
this.selectDate = index$1.createEvent(this, "selectDate");
|
|
10491
|
-
this.changeYear = index$1.createEvent(this, "changeYear");
|
|
10492
|
-
this.componentReady = index$1.createEvent(this, "componentReady");
|
|
10490
|
+
this.selectDate = index$1.createEvent(this, "selectDate", 7);
|
|
10491
|
+
this.changeYear = index$1.createEvent(this, "changeYear", 7);
|
|
10492
|
+
this.componentReady = index$1.createEvent(this, "componentReady", 7);
|
|
10493
10493
|
// Enable or disable range mode
|
|
10494
10494
|
this.range = false;
|
|
10495
10495
|
// A label for the text field
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DlzGiVkc.js');
|
|
4
4
|
|
|
5
5
|
const defaultLabels = {
|
|
6
6
|
hours: "Hours",
|
|
@@ -16,7 +16,7 @@ const defaultLabels = {
|
|
|
16
16
|
const InclusiveTimesPicker = class {
|
|
17
17
|
constructor(hostRef) {
|
|
18
18
|
index.registerInstance(this, hostRef);
|
|
19
|
-
this.timeChanged = index.createEvent(this, "timeChanged");
|
|
19
|
+
this.timeChanged = index.createEvent(this, "timeChanged", 7);
|
|
20
20
|
// Current time value (24-hour format)
|
|
21
21
|
this.hours = 12;
|
|
22
22
|
this.minutes = 0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DlzGiVkc.js');
|
|
4
4
|
var moment = require('./moment-CdViwxPQ.js');
|
|
5
5
|
var utils = require('./utils-y5Vtky2t.js');
|
|
6
6
|
|
|
@@ -20,9 +20,9 @@ const defaultLabels = {
|
|
|
20
20
|
const InclusiveTimes = class {
|
|
21
21
|
constructor(hostRef) {
|
|
22
22
|
index.registerInstance(this, hostRef);
|
|
23
|
-
this.selectDateTime = index.createEvent(this, "selectDateTime");
|
|
24
|
-
this.changeYear = index.createEvent(this, "changeYear");
|
|
25
|
-
this.componentReady = index.createEvent(this, "componentReady");
|
|
23
|
+
this.selectDateTime = index.createEvent(this, "selectDateTime", 7);
|
|
24
|
+
this.changeYear = index.createEvent(this, "changeYear", 7);
|
|
25
|
+
this.componentReady = index.createEvent(this, "componentReady", 7);
|
|
26
26
|
// Enable or disable range mode
|
|
27
27
|
this.range = false;
|
|
28
28
|
// A label for the text field
|
|
@@ -307,15 +307,15 @@ export class InclusiveDatesCalendar {
|
|
|
307
307
|
monthIsDisabled(getNextMonth(this.currentDate).getMonth(), getNextMonth(this.currentDate).getFullYear(), this.minDate, this.maxDate)
|
|
308
308
|
}
|
|
309
309
|
};
|
|
310
|
-
return (h(Host, { key: '
|
|
310
|
+
return (h(Host, { key: '0ca78d9d8d4d0edd2375f48f23c5d879a2c6fb44' }, h("div", { key: '8ba043e2d7c70958ca73253348de57c07424c7f2', class: {
|
|
311
311
|
[`${this.getClassName()}-wrapper`]: true,
|
|
312
312
|
[`${this.getClassName()}-wrapper--inline`]: this.inline
|
|
313
|
-
} }, h("div", { key: '
|
|
313
|
+
} }, h("div", { key: '2b6d87a26620acd162d6321add8cb52fe9c41e97', class: {
|
|
314
314
|
[this.getClassName()]: true,
|
|
315
315
|
[`${this.getClassName()}--disabled`]: this.disabled
|
|
316
|
-
} }, h("div", { key: '
|
|
316
|
+
} }, h("div", { key: 'f773d4c95f3ebf4ea79dd5e72385a1f16b6cfe87', class: this.getClassName("header") }, this.showHiddenTitle && (h("span", { key: 'c6249db5073485bcf479bcd1d8c9da6a8270757c', "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle())), this.showYearStepper && (h("button", { key: 'ecf43dac6e8539598c43f782fb211ff44758d58a', "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: '7986a7b8b7a4a696c6e62bba6677f9801c6d9059', 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: '3a1474883ab05ef0c0376944cfc4dbfe63aa6434', points: "11 17 6 12 11 7" }), h("polyline", { key: 'eb15b38a86f440e5b77723e8551e774af50c4a32', points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { key: 'f3a6e864f855833ae24f6b15930ff85a5939d39e', "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: 'b15bc4eb6009b5872bc0d1253b5ca0e863505956', 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: '90d0590bdafd7b802e8967366f30411ac65aead1', points: "15 18 9 12 15 6" })))), h("span", { key: 'c0a4670b7f7f71706e1b02430f08302d69e7bec4', class: this.getClassName("current-month") }, h("select", { key: 'd7b43fcb12387644b74403f52c3e72948d2a460d', "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) => {
|
|
317
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));
|
|
318
|
-
})), h("input", { key: '
|
|
318
|
+
})), h("input", { key: '6123f052aa28fd745ee52a37d817855a31c6a888', "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: '9a9ded70d8cfb7f61d15edc15873f1c7cc24d352', "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: '500969c2fd840a7131c348c4d562f3493dfddd4e', 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: '9e7fdecb2585366f9dc96fe32f0c83123257bd0a', points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { key: '7ee30553302a226836261fd21dafdfa065f831d8', "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: 'd3c6f21d586a2be2ef8f52419fde77c1ad4398ad', 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: '19da599079fab7e31a853a7f09e68d12e66c9974', points: "13 17 18 12 13 7" }), h("polyline", { key: 'b23802d92bc35c3af659f86ecad9d41320cf3467', points: "6 17 11 12 6 7" }))))), h("div", { key: '75b511a738d0d421828c64a88b79cdadeb3e77db', class: this.getClassName("body") }, h("table", { key: '7f62f9985c99c4c19cbf320e009fbefbb436f5c2', class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid", "aria-label": this.getTitle() }, h("thead", { key: '6d518a1c015ee4f545278e175d9f71456b7cb525', class: this.getClassName("calendar-header") }, h("tr", { key: 'd5f289679c98b5ef8f67f8ccbf3999aac68a022c', 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: 'f4cf7ef148106044880c2b6c360e4319a7b31d83' }, this.getCalendarRows().map((calendarRow) => {
|
|
319
319
|
const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
|
|
320
320
|
return (h("tr", { class: this.getClassName("calendar-row"), key: rowKey }, calendarRow.map((day) => {
|
|
321
321
|
var _a, _b, _c;
|
|
@@ -382,8 +382,8 @@ export class InclusiveDatesCalendar {
|
|
|
382
382
|
? 0
|
|
383
383
|
: -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, getScreenReaderText())));
|
|
384
384
|
})));
|
|
385
|
-
})))), showFooter && (h("div", { key: '
|
|
386
|
-
!window.matchMedia("(pointer: coarse)").matches && (h("button", { key: '
|
|
385
|
+
})))), showFooter && (h("div", { key: 'a34938c0321570d5a4983cb47822d12335cb5fba', class: this.getClassName("footer") }, h("div", { key: '0c52dc84cb734326025e7927f94ab7d9947f89c3', class: this.getClassName("footer-buttons") }, this.showTodayButton && (h("button", { key: '11d7621dc4b8ffa33b51bf4312de6f0cedcc94e9', 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: '2eb6ef128169727ba993a68d270e730b600b130a', 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: 'f2f52bf2b5de8d810dab6f3376d5b0923a2abb0c', type: "button", onClick: () => alert("Todo: Add Keyboard helper!"), class: this.getClassName("keyboard-hint") }, h("svg", { key: '1d2f5e1323af69c00c185b450a3e4ac2ed5b9f69', xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 48 48", fill: "currentColor" }, h("path", { key: 'd3f34347335b0e1f100b5e6346a283678daba519', 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: 'fa342bcfcd2cf4cb057b33b0cc8231264e97c51c', name: "after-calendar" }))));
|
|
387
387
|
}
|
|
388
388
|
static get is() { return "tabworthy-dates-calendar"; }
|
|
389
389
|
static get encapsulation() { return "scoped"; }
|
|
@@ -913,7 +913,7 @@ export class InclusiveDatesCalendar {
|
|
|
913
913
|
return [{
|
|
914
914
|
"method": "selectDate",
|
|
915
915
|
"name": "selectDate",
|
|
916
|
-
"bubbles":
|
|
916
|
+
"bubbles": false,
|
|
917
917
|
"cancelable": true,
|
|
918
918
|
"composed": true,
|
|
919
919
|
"docs": {
|
|
@@ -928,7 +928,7 @@ export class InclusiveDatesCalendar {
|
|
|
928
928
|
}, {
|
|
929
929
|
"method": "changeMonth",
|
|
930
930
|
"name": "changeMonth",
|
|
931
|
-
"bubbles":
|
|
931
|
+
"bubbles": false,
|
|
932
932
|
"cancelable": true,
|
|
933
933
|
"composed": true,
|
|
934
934
|
"docs": {
|
|
@@ -949,7 +949,7 @@ export class InclusiveDatesCalendar {
|
|
|
949
949
|
}, {
|
|
950
950
|
"method": "changeYear",
|
|
951
951
|
"name": "changeYear",
|
|
952
|
-
"bubbles":
|
|
952
|
+
"bubbles": false,
|
|
953
953
|
"cancelable": true,
|
|
954
954
|
"composed": true,
|
|
955
955
|
"docs": {
|
|
@@ -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:"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
|
+
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 f(t){const e=new Date(t);return e.setFullYear(e.getFullYear()+1),e}function b(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",3),this.changeMonth=i(this,"changeMonth",3),this.changeYear=i(this,"changeYear",3),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(f(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(b(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?f(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=[],f=[];{let t=(7-i+n)%7,e=b(a);for(;t>0;)u.push(e),e=b(e),t-=1;u.reverse();let s=(7-r+c)%7,o=l(h);for(;s>0;)f.push(o),o=l(o),s-=1}let v=a;for(;v.getMonth()===t.getMonth();)s.push(v),v=l(v);return[...u,...s,...f]}(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()<f(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:"0ca78d9d8d4d0edd2375f48f23c5d879a2c6fb44"},s("div",{key:"8ba043e2d7c70958ca73253348de57c07424c7f2",class:{[`${this.getClassName()}-wrapper`]:!0,[`${this.getClassName()}-wrapper--inline`]:this.inline}},s("div",{key:"2b6d87a26620acd162d6321add8cb52fe9c41e97",class:{[this.getClassName()]:!0,[`${this.getClassName()}--disabled`]:this.disabled}},s("div",{key:"f773d4c95f3ebf4ea79dd5e72385a1f16b6cfe87",class:this.getClassName("header")},this.showHiddenTitle&&s("span",{key:"c6249db5073485bcf479bcd1d8c9da6a8270757c","aria-atomic":"true","aria-live":"polite",class:"visually-hidden"},this.getTitle()),this.showYearStepper&&s("button",{key:"ecf43dac6e8539598c43f782fb211ff44758d58a","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:"7986a7b8b7a4a696c6e62bba6677f9801c6d9059",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:"3a1474883ab05ef0c0376944cfc4dbfe63aa6434",points:"11 17 6 12 11 7"}),s("polyline",{key:"eb15b38a86f440e5b77723e8551e774af50c4a32",points:"18 17 13 12 18 7"}))),this.showMonthStepper&&s("button",{key:"f3a6e864f855833ae24f6b15930ff85a5939d39e","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:"b15bc4eb6009b5872bc0d1253b5ca0e863505956",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:"90d0590bdafd7b802e8967366f30411ac65aead1",points:"15 18 9 12 15 6"}))),s("span",{key:"c0a4670b7f7f71706e1b02430f08302d69e7bec4",class:this.getClassName("current-month")},s("select",{key:"d7b43fcb12387644b74403f52c3e72948d2a460d","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:"6123f052aa28fd745ee52a37d817855a31c6a888","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:"9a9ded70d8cfb7f61d15edc15873f1c7cc24d352","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:"500969c2fd840a7131c348c4d562f3493dfddd4e",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:"9e7fdecb2585366f9dc96fe32f0c83123257bd0a",points:"9 18 15 12 9 6"}))),this.showYearStepper&&s("button",{key:"7ee30553302a226836261fd21dafdfa065f831d8","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:"d3c6f21d586a2be2ef8f52419fde77c1ad4398ad",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:"19da599079fab7e31a853a7f09e68d12e66c9974",points:"13 17 18 12 13 7"}),s("polyline",{key:"b23802d92bc35c3af659f86ecad9d41320cf3467",points:"6 17 11 12 6 7"})))),s("div",{key:"75b511a738d0d421828c64a88b79cdadeb3e77db",class:this.getClassName("body")},s("table",{key:"7f62f9985c99c4c19cbf320e009fbefbb436f5c2",class:this.getClassName("calendar"),onKeyDown:this.onKeyDown,role:"grid","aria-label":this.getTitle()},s("thead",{key:"6d518a1c015ee4f545278e175d9f71456b7cb525",class:this.getClassName("calendar-header")},s("tr",{key:"d5f289679c98b5ef8f67f8ccbf3999aac68a022c",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:"f4cf7ef148106044880c2b6c360e4319a7b31d83"},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 f=p(t,new Date),b=`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")]:f,[this.getClassName("date--selected")]:o,[this.getClassName("date--in-range")]:c},y=o?"strong":f?"em":"span";return s("td",{"aria-disabled":String(d),"aria-selected":o?"true":void 0,class:v,"data-date":r(t),key:b,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:"a34938c0321570d5a4983cb47822d12335cb5fba",class:this.getClassName("footer")},s("div",{key:"0c52dc84cb734326025e7927f94ab7d9947f89c3",class:this.getClassName("footer-buttons")},this.showTodayButton&&s("button",{key:"11d7621dc4b8ffa33b51bf4312de6f0cedcc94e9",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:"2eb6ef128169727ba993a68d270e730b600b130a",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:"f2f52bf2b5de8d810dab6f3376d5b0923a2abb0c",type:"button",onClick:()=>alert("Todo: Add Keyboard helper!"),class:this.getClassName("keyboard-hint")},s("svg",{key:"1d2f5e1323af69c00c185b450a3e4ac2ed5b9f69",xmlns:"http://www.w3.org/2000/svg",height:"1em",width:"1em",viewBox:"0 0 48 48",fill:"currentColor"},s("path",{key:"d3f34347335b0e1f100b5e6346a283678daba519",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:"fa342bcfcd2cf4cb057b33b0cc8231264e97c51c",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}
|
|
@@ -630,9 +630,9 @@ var createEvent = (ref, name, flags) => {
|
|
|
630
630
|
return {
|
|
631
631
|
emit: (detail) => {
|
|
632
632
|
return emitEvent(elm, name, {
|
|
633
|
-
bubbles:
|
|
634
|
-
composed:
|
|
635
|
-
cancelable:
|
|
633
|
+
bubbles: !!(flags & 4 /* Bubbles */),
|
|
634
|
+
composed: !!(flags & 2 /* Composed */),
|
|
635
|
+
cancelable: !!(flags & 1 /* Cancellable */),
|
|
636
636
|
detail
|
|
637
637
|
});
|
|
638
638
|
}
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { b as bootstrapLazy } from './index-zgp3PkTz.js';
|
|
2
|
+
export { s as setNonce } from './index-zgp3PkTz.js';
|
|
3
3
|
import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
4
4
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-zgp3PkTz.js';
|
|
2
|
+
export { s as setNonce } from './index-zgp3PkTz.js';
|
|
3
3
|
import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-zgp3PkTz.js';
|
|
2
2
|
import { g as getISODateString, r as removeTimezoneOffset, a as getNextMonth, b as getNextYear, c as getPreviousMonth, d as getPreviousYear, e as dateIsWithinBounds, f as getPreviousDay, h as getNextDay, s as subDays, i as addDays, j as getFirstOfMonth, k as getLastOfMonth, l as getWeekDays, m as getDaysOfMonth, n as dateIsWithinLowerBounds, o as dateIsWithinUpperBounds, p as getYear, q as getMonth, t as monthIsDisabled, u as getMonths, v as isSameDay, w as isDateInRange } from './utils-BVHu5CWV.js';
|
|
3
3
|
|
|
4
4
|
const tabworthyDatesCalendarCss = () => `.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%)}`;
|
|
@@ -21,9 +21,9 @@ const defaultLabels = {
|
|
|
21
21
|
const InclusiveDatesCalendar = class {
|
|
22
22
|
constructor(hostRef) {
|
|
23
23
|
registerInstance(this, hostRef);
|
|
24
|
-
this.selectDate = createEvent(this, "selectDate");
|
|
25
|
-
this.changeMonth = createEvent(this, "changeMonth");
|
|
26
|
-
this.changeYear = createEvent(this, "changeYear");
|
|
24
|
+
this.selectDate = createEvent(this, "selectDate", 3);
|
|
25
|
+
this.changeMonth = createEvent(this, "changeMonth", 3);
|
|
26
|
+
this.changeYear = createEvent(this, "changeYear", 3);
|
|
27
27
|
this.disabled = false;
|
|
28
28
|
this.modalIsOpen = false;
|
|
29
29
|
this.disableDate = () => false;
|
|
@@ -313,15 +313,15 @@ const InclusiveDatesCalendar = class {
|
|
|
313
313
|
monthIsDisabled(getNextMonth(this.currentDate).getMonth(), getNextMonth(this.currentDate).getFullYear(), this.minDate, this.maxDate)
|
|
314
314
|
}
|
|
315
315
|
};
|
|
316
|
-
return (h(Host, { key: '
|
|
316
|
+
return (h(Host, { key: '0ca78d9d8d4d0edd2375f48f23c5d879a2c6fb44' }, h("div", { key: '8ba043e2d7c70958ca73253348de57c07424c7f2', class: {
|
|
317
317
|
[`${this.getClassName()}-wrapper`]: true,
|
|
318
318
|
[`${this.getClassName()}-wrapper--inline`]: this.inline
|
|
319
|
-
} }, h("div", { key: '
|
|
319
|
+
} }, h("div", { key: '2b6d87a26620acd162d6321add8cb52fe9c41e97', class: {
|
|
320
320
|
[this.getClassName()]: true,
|
|
321
321
|
[`${this.getClassName()}--disabled`]: this.disabled
|
|
322
|
-
} }, h("div", { key: '
|
|
322
|
+
} }, h("div", { key: 'f773d4c95f3ebf4ea79dd5e72385a1f16b6cfe87', class: this.getClassName("header") }, this.showHiddenTitle && (h("span", { key: 'c6249db5073485bcf479bcd1d8c9da6a8270757c', "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle())), this.showYearStepper && (h("button", { key: 'ecf43dac6e8539598c43f782fb211ff44758d58a', "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: '7986a7b8b7a4a696c6e62bba6677f9801c6d9059', 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: '3a1474883ab05ef0c0376944cfc4dbfe63aa6434', points: "11 17 6 12 11 7" }), h("polyline", { key: 'eb15b38a86f440e5b77723e8551e774af50c4a32', points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { key: 'f3a6e864f855833ae24f6b15930ff85a5939d39e', "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: 'b15bc4eb6009b5872bc0d1253b5ca0e863505956', 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: '90d0590bdafd7b802e8967366f30411ac65aead1', points: "15 18 9 12 15 6" })))), h("span", { key: 'c0a4670b7f7f71706e1b02430f08302d69e7bec4', class: this.getClassName("current-month") }, h("select", { key: 'd7b43fcb12387644b74403f52c3e72948d2a460d', "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) => {
|
|
323
323
|
return (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1, disabled: monthIsDisabled(index, this.currentDate.getFullYear(), this.minDate, this.maxDate) }, month));
|
|
324
|
-
})), h("input", { key: '
|
|
324
|
+
})), h("input", { key: '6123f052aa28fd745ee52a37d817855a31c6a888', "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: '9a9ded70d8cfb7f61d15edc15873f1c7cc24d352', "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: '500969c2fd840a7131c348c4d562f3493dfddd4e', 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: '9e7fdecb2585366f9dc96fe32f0c83123257bd0a', points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { key: '7ee30553302a226836261fd21dafdfa065f831d8', "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: 'd3c6f21d586a2be2ef8f52419fde77c1ad4398ad', 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: '19da599079fab7e31a853a7f09e68d12e66c9974', points: "13 17 18 12 13 7" }), h("polyline", { key: 'b23802d92bc35c3af659f86ecad9d41320cf3467', points: "6 17 11 12 6 7" }))))), h("div", { key: '75b511a738d0d421828c64a88b79cdadeb3e77db', class: this.getClassName("body") }, h("table", { key: '7f62f9985c99c4c19cbf320e009fbefbb436f5c2', class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid", "aria-label": this.getTitle() }, h("thead", { key: '6d518a1c015ee4f545278e175d9f71456b7cb525', class: this.getClassName("calendar-header") }, h("tr", { key: 'd5f289679c98b5ef8f67f8ccbf3999aac68a022c', 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: 'f4cf7ef148106044880c2b6c360e4319a7b31d83' }, this.getCalendarRows().map((calendarRow) => {
|
|
325
325
|
const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
|
|
326
326
|
return (h("tr", { class: this.getClassName("calendar-row"), key: rowKey }, calendarRow.map((day) => {
|
|
327
327
|
var _a, _b, _c;
|
|
@@ -388,8 +388,8 @@ const InclusiveDatesCalendar = class {
|
|
|
388
388
|
? 0
|
|
389
389
|
: -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, getScreenReaderText())));
|
|
390
390
|
})));
|
|
391
|
-
})))), showFooter && (h("div", { key: '
|
|
392
|
-
!window.matchMedia("(pointer: coarse)").matches && (h("button", { key: '
|
|
391
|
+
})))), showFooter && (h("div", { key: 'a34938c0321570d5a4983cb47822d12335cb5fba', class: this.getClassName("footer") }, h("div", { key: '0c52dc84cb734326025e7927f94ab7d9947f89c3', class: this.getClassName("footer-buttons") }, this.showTodayButton && (h("button", { key: '11d7621dc4b8ffa33b51bf4312de6f0cedcc94e9', 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: '2eb6ef128169727ba993a68d270e730b600b130a', class: this.getClassName("clear-button"), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton))), this.showKeyboardHint &&
|
|
392
|
+
!window.matchMedia("(pointer: coarse)").matches && (h("button", { key: 'f2f52bf2b5de8d810dab6f3376d5b0923a2abb0c', type: "button", onClick: () => alert("Todo: Add Keyboard helper!"), class: this.getClassName("keyboard-hint") }, h("svg", { key: '1d2f5e1323af69c00c185b450a3e4ac2ed5b9f69', xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 48 48", fill: "currentColor" }, h("path", { key: 'd3f34347335b0e1f100b5e6346a283678daba519', 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: 'fa342bcfcd2cf4cb057b33b0cc8231264e97c51c', name: "after-calendar" }))));
|
|
393
393
|
}
|
|
394
394
|
get el() { return getElement(this); }
|
|
395
395
|
static get watchers() { return {
|
|
@@ -836,8 +836,8 @@ const tabworthyDatesModalCss = () => `:host::part(body){position:absolute;width:
|
|
|
836
836
|
const InclusiveDatesModal = class {
|
|
837
837
|
constructor(hostRef) {
|
|
838
838
|
registerInstance(this, hostRef);
|
|
839
|
-
this.opened = createEvent(this, "opened");
|
|
840
|
-
this.closed = createEvent(this, "closed");
|
|
839
|
+
this.opened = createEvent(this, "opened", 7);
|
|
840
|
+
this.closed = createEvent(this, "closed", 7);
|
|
841
841
|
this.inline = false;
|
|
842
842
|
this.closing = false;
|
|
843
843
|
this.showing = this.inline || false;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-zgp3PkTz.js';
|
|
2
2
|
import { h as hooks } from './moment-Mki5YqAR.js';
|
|
3
3
|
import { r as removeTimezoneOffset, x as extractDates, y as isValidISODate, e as dateIsWithinBounds, n as dateIsWithinLowerBounds, o as dateIsWithinUpperBounds, g as getISODateString } from './utils-BVHu5CWV.js';
|
|
4
4
|
|
|
@@ -10485,9 +10485,9 @@ const defaultLabels = {
|
|
|
10485
10485
|
const TabworthyDates = class {
|
|
10486
10486
|
constructor(hostRef) {
|
|
10487
10487
|
registerInstance(this, hostRef);
|
|
10488
|
-
this.selectDate = createEvent(this, "selectDate");
|
|
10489
|
-
this.changeYear = createEvent(this, "changeYear");
|
|
10490
|
-
this.componentReady = createEvent(this, "componentReady");
|
|
10488
|
+
this.selectDate = createEvent(this, "selectDate", 7);
|
|
10489
|
+
this.changeYear = createEvent(this, "changeYear", 7);
|
|
10490
|
+
this.componentReady = createEvent(this, "componentReady", 7);
|
|
10491
10491
|
// Enable or disable range mode
|
|
10492
10492
|
this.range = false;
|
|
10493
10493
|
// A label for the text field
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-zgp3PkTz.js';
|
|
2
2
|
|
|
3
3
|
const defaultLabels = {
|
|
4
4
|
hours: "Hours",
|
|
@@ -14,7 +14,7 @@ const defaultLabels = {
|
|
|
14
14
|
const InclusiveTimesPicker = class {
|
|
15
15
|
constructor(hostRef) {
|
|
16
16
|
registerInstance(this, hostRef);
|
|
17
|
-
this.timeChanged = createEvent(this, "timeChanged");
|
|
17
|
+
this.timeChanged = createEvent(this, "timeChanged", 7);
|
|
18
18
|
// Current time value (24-hour format)
|
|
19
19
|
this.hours = 12;
|
|
20
20
|
this.minutes = 0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-zgp3PkTz.js';
|
|
2
2
|
import { h as hooks } from './moment-Mki5YqAR.js';
|
|
3
3
|
import { g as getISODateString, r as removeTimezoneOffset } from './utils-BVHu5CWV.js';
|
|
4
4
|
|
|
@@ -18,9 +18,9 @@ const defaultLabels = {
|
|
|
18
18
|
const InclusiveTimes = class {
|
|
19
19
|
constructor(hostRef) {
|
|
20
20
|
registerInstance(this, hostRef);
|
|
21
|
-
this.selectDateTime = createEvent(this, "selectDateTime");
|
|
22
|
-
this.changeYear = createEvent(this, "changeYear");
|
|
23
|
-
this.componentReady = createEvent(this, "componentReady");
|
|
21
|
+
this.selectDateTime = createEvent(this, "selectDateTime", 7);
|
|
22
|
+
this.changeYear = createEvent(this, "changeYear", 7);
|
|
23
|
+
this.componentReady = createEvent(this, "componentReady", 7);
|
|
24
24
|
// Enable or disable range mode
|
|
25
25
|
this.range = false;
|
|
26
26
|
// A label for the text field
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as s,H as e,g as h}from"./p-zgp3PkTz.js";const a={hours:"Hours",minutes:"Minutes",am:"AM",pm:"PM",timePicker:"Time picker",incrementHours:"Increment hours",decrementHours:"Decrement hours",incrementMinutes:"Increment minutes",decrementMinutes:"Decrement minutes"},n=class{constructor(s){t(this,s),this.timeChanged=i(this,"timeChanged",7),this.hours=12,this.minutes=0,this.use12HourFormat=!1,this.labels=a,this.labelsSrOnly=!0,this.disabled=!1,this.elementClassName="tabworthy-times-picker",this.internalHours=this.hours,this.internalMinutes=this.minutes,this.period=this.hours>=12?"PM":"AM",this.handleHourChange=t=>{const i=parseInt(t.target.value,10);this.internalHours=this.use12HourFormat?"AM"===this.period?12===i?0:i:12===i?12:i+12:i,this.emitTimeChange()},this.handleMinuteChange=t=>{this.internalMinutes=parseInt(t.target.value,10),this.emitTimeChange()},this.handlePeriodChange=t=>{if(this.period===t||!this.use12HourFormat)return;this.period=t;const i=this.getDisplayHours();this.internalHours="AM"===t?12===i?0:i:12===i?12:i+12,this.emitTimeChange()},this.handleHourIncrement=()=>{if(this.use12HourFormat){const t=this.getDisplayHours(),i=12===t?1:t+1;this.internalHours="AM"===this.period?12===i?0:i:12===i?12:i+12}else this.internalHours=(this.internalHours+1)%24;this.emitTimeChange()},this.handleHourDecrement=()=>{if(this.use12HourFormat){const t=this.getDisplayHours(),i=1===t?12:t-1;this.internalHours="AM"===this.period?12===i?0:i:12===i?12:i+12}else this.internalHours=0===this.internalHours?23:this.internalHours-1;this.emitTimeChange()},this.handleMinuteIncrement=()=>{this.internalMinutes=(this.internalMinutes+1)%60,this.emitTimeChange()},this.handleMinuteDecrement=()=>{this.internalMinutes=0===this.internalMinutes?59:this.internalMinutes-1,this.emitTimeChange()}}watchHours(t){this.internalHours=t,this.period=t>=12?"PM":"AM"}watchMinutes(t){this.internalMinutes=t}componentWillLoad(){this.internalHours=this.hours,this.internalMinutes=this.minutes,this.period=this.hours>=12?"PM":"AM"}getDisplayHours(){return this.use12HourFormat?0===this.internalHours?12:this.internalHours>12?this.internalHours-12:this.internalHours:this.internalHours}get24HourValue(){if(!this.use12HourFormat)return this.internalHours;const t=this.getDisplayHours();return"AM"===this.period?12===t?0:t:12===t?12:t+12}emitTimeChange(){this.timeChanged.emit({hours:this.get24HourValue(),minutes:this.internalMinutes,period:this.use12HourFormat?this.period:void 0})}padZero(t){return t.toString().padStart(2,"0")}render(){const t=this.getDisplayHours(),i=this.use12HourFormat?12:23,h=this.use12HourFormat?1:0;return s(e,{key:"22eb745a93c68e4e4f78c11d2941681897aa73ef",class:this.elementClassName,"aria-label":this.labels.timePicker},s("div",{key:"ccb05b5d5793442b63aa4c25d5120db8b60bedf3",class:`${this.elementClassName}__container`},s("div",{key:"3fc4ede2d685e43edcfefe8c88de19f705e94478",class:`${this.elementClassName}__field`},s("label",{key:"fb04e846fc9807155c4390e92722850cdaa4bba2",htmlFor:`${this.elementClassName}-hours`,class:{[`${this.elementClassName}__label`]:!0,[`${this.elementClassName}__label--sr-only`]:this.labelsSrOnly}},this.labels.hours),s("div",{key:"d5ed4a06ea4ce2eaaefda2fa316a4789aa4a210a",class:`${this.elementClassName}__control`},s("button",{key:"193c89e3b50934225c05f3241546bc3e7063b1b8",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--increment`,onClick:this.handleHourIncrement,disabled:this.disabled,"aria-label":this.labels.incrementHours},s("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"},s("polyline",{key:"58519a5d7a8cddfe2273f5c8beec3eab7307b43c",points:"18 15 12 9 6 15"}))),s("input",{key:"187ace01f2d83ad59766159d6509e30100b7f812",id:`${this.elementClassName}-hours`,type:"number",class:`${this.elementClassName}__input`,value:this.padZero(t),min:h,max:i,onInput:this.handleHourChange,disabled:this.disabled,"aria-label":this.labels.hours}),s("button",{key:"3bbe5b73ac8a85c165f0332d3c70d30aede096e6",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--decrement`,onClick:this.handleHourDecrement,disabled:this.disabled,"aria-label":this.labels.decrementHours},s("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"},s("polyline",{key:"99aab5a584aed4d8fc1b30dcada0c76e42ba6ac7",points:"6 9 12 15 18 9"}))))),s("div",{key:"a8958b60136f6220bbd944beaa6cf73c7660e3fb",class:`${this.elementClassName}__separator`},":"),s("div",{key:"72b46b517876dc8bc3490afef1860514b46efc46",class:`${this.elementClassName}__field`},s("label",{key:"e09788653c3873e97e1922fcda3076878f9b1ca7",htmlFor:`${this.elementClassName}-minutes`,class:{[`${this.elementClassName}__label`]:!0,[`${this.elementClassName}__label--sr-only`]:this.labelsSrOnly}},this.labels.minutes),s("div",{key:"7bf9642b58249014b2ad802c3fe30f67e5354f4d",class:`${this.elementClassName}__control`},s("button",{key:"71c889d966bceb4aa9e7b6f78c57e968b207ddda",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--increment`,onClick:this.handleMinuteIncrement,disabled:this.disabled,"aria-label":this.labels.incrementMinutes},s("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"},s("polyline",{key:"68dfdfc6cd2bd1f8f916dbf60155eb2cc4a8328d",points:"18 15 12 9 6 15"}))),s("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}),s("button",{key:"5c808f40c040e8ff3e4632738f58e9941e69ec03",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--decrement`,onClick:this.handleMinuteDecrement,disabled:this.disabled,"aria-label":this.labels.decrementMinutes},s("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"},s("polyline",{key:"92eb0d63e7be970b2207cc0c47964eef48005baf",points:"6 9 12 15 18 9"}))))),this.use12HourFormat&&s("div",{key:"8a3235abb0bf0764993271ff4969ca6aaac83bd7",class:`${this.elementClassName}__period`},s("button",{key:"d8f0679faadf7f0cf04e2f57bed4e9c202d0a056",type:"button",class:{[`${this.elementClassName}__period-button`]:!0,[`${this.elementClassName}__period-button--active`]:"AM"===this.period},onClick:()=>this.handlePeriodChange("AM"),disabled:this.disabled,"aria-label":this.labels.am,"aria-pressed":"AM"===this.period},this.labels.am),s("button",{key:"393802044645d205a71ae593227df550adce2970",type:"button",class:{[`${this.elementClassName}__period-button`]:!0,[`${this.elementClassName}__period-button--active`]:"PM"===this.period},onClick:()=>this.handlePeriodChange("PM"),disabled:this.disabled,"aria-label":this.labels.pm,"aria-pressed":"PM"===this.period},this.labels.pm))))}get el(){return h(this)}static get watchers(){return{hours:[{watchHours:0}],minutes:[{watchMinutes:0}]}}};export{n as tabworthy_times_picker}
|