@tabworthy/components 0.2.0

package/dist/esm/tabworthy-times-picker.entry.js

@@ -0,0 +1,179 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BusoZVTR.js';
+
+const defaultLabels = {
+    hours: "Hours",
+    minutes: "Minutes",
+    am: "AM",
+    pm: "PM",
+    timePicker: "Time picker",
+    incrementHours: "Increment hours",
+    decrementHours: "Decrement hours",
+    incrementMinutes: "Increment minutes",
+    decrementMinutes: "Decrement minutes"
+};
+const InclusiveTimesPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.timeChanged = createEvent(this, "timeChanged");
+        // Current time value (24-hour format)
+        this.hours = 12;
+        this.minutes = 0;
+        this.use12HourFormat = false;
+        // Labels for accessibility and i18n
+        this.labels = defaultLabels;
+        // Hide labels visually but keep them for screen readers
+        this.labelsSrOnly = true;
+        this.disabled = false;
+        this.elementClassName = "tabworthy-times-picker";
+        this.internalHours = this.hours;
+        this.internalMinutes = this.minutes;
+        this.period = this.hours >= 12 ? "PM" : "AM";
+        this.handleHourChange = (e) => {
+            const value = parseInt(e.target.value, 10);
+            if (this.use12HourFormat) {
+                // Convert to 24-hour format based on period
+                if (this.period === "AM") {
+                    this.internalHours = value === 12 ? 0 : value;
+                }
+                else {
+                    this.internalHours = value === 12 ? 12 : value + 12;
+                }
+            }
+            else {
+                this.internalHours = value;
+            }
+            this.emitTimeChange();
+        };
+        this.handleMinuteChange = (e) => {
+            this.internalMinutes = parseInt(e.target.value, 10);
+            this.emitTimeChange();
+        };
+        this.handlePeriodChange = (period) => {
+            if (this.period === period || !this.use12HourFormat)
+                return;
+            this.period = period;
+            // Convert hours based on new period
+            const displayHours = this.getDisplayHours();
+            if (period === "AM") {
+                this.internalHours = displayHours === 12 ? 0 : displayHours;
+            }
+            else {
+                this.internalHours = displayHours === 12 ? 12 : displayHours + 12;
+            }
+            this.emitTimeChange();
+        };
+        this.handleHourIncrement = () => {
+            if (this.use12HourFormat) {
+                const displayHours = this.getDisplayHours();
+                const newDisplayHours = displayHours === 12 ? 1 : displayHours + 1;
+                if (this.period === "AM") {
+                    this.internalHours = newDisplayHours === 12 ? 0 : newDisplayHours;
+                }
+                else {
+                    this.internalHours = newDisplayHours === 12 ? 12 : newDisplayHours + 12;
+                }
+            }
+            else {
+                this.internalHours = (this.internalHours + 1) % 24;
+            }
+            this.emitTimeChange();
+        };
+        this.handleHourDecrement = () => {
+            if (this.use12HourFormat) {
+                const displayHours = this.getDisplayHours();
+                const newDisplayHours = displayHours === 1 ? 12 : displayHours - 1;
+                if (this.period === "AM") {
+                    this.internalHours = newDisplayHours === 12 ? 0 : newDisplayHours;
+                }
+                else {
+                    this.internalHours = newDisplayHours === 12 ? 12 : newDisplayHours + 12;
+                }
+            }
+            else {
+                this.internalHours = this.internalHours === 0 ? 23 : this.internalHours - 1;
+            }
+            this.emitTimeChange();
+        };
+        this.handleMinuteIncrement = () => {
+            this.internalMinutes = (this.internalMinutes + 1) % 60;
+            this.emitTimeChange();
+        };
+        this.handleMinuteDecrement = () => {
+            this.internalMinutes = this.internalMinutes === 0 ? 59 : this.internalMinutes - 1;
+            this.emitTimeChange();
+        };
+    }
+    watchHours(newValue) {
+        this.internalHours = newValue;
+        this.period = newValue >= 12 ? "PM" : "AM";
+    }
+    watchMinutes(newValue) {
+        this.internalMinutes = newValue;
+    }
+    componentWillLoad() {
+        this.internalHours = this.hours;
+        this.internalMinutes = this.minutes;
+        this.period = this.hours >= 12 ? "PM" : "AM";
+    }
+    getDisplayHours() {
+        if (!this.use12HourFormat) {
+            return this.internalHours;
+        }
+        if (this.internalHours === 0)
+            return 12;
+        if (this.internalHours > 12)
+            return this.internalHours - 12;
+        return this.internalHours;
+    }
+    get24HourValue() {
+        if (!this.use12HourFormat) {
+            return this.internalHours;
+        }
+        const displayHours = this.getDisplayHours();
+        if (this.period === "AM") {
+            return displayHours === 12 ? 0 : displayHours;
+        }
+        else {
+            return displayHours === 12 ? 12 : displayHours + 12;
+        }
+    }
+    emitTimeChange() {
+        this.timeChanged.emit({
+            hours: this.get24HourValue(),
+            minutes: this.internalMinutes,
+            period: this.use12HourFormat ? this.period : undefined
+        });
+    }
+    padZero(num) {
+        return num.toString().padStart(2, "0");
+    }
+    render() {
+        const displayHours = this.getDisplayHours();
+        const maxHours = this.use12HourFormat ? 12 : 23;
+        const minHours = this.use12HourFormat ? 1 : 0;
+        return (h(Host, { key: '826752ac3b056591e50c55198f01b232e0d914e7', class: this.elementClassName, "aria-label": this.labels.timePicker }, h("div", { key: '5e7179bcf1e2e9087f7fb8f62366af4b3432cf9b', class: `${this.elementClassName}__container` }, h("div", { key: 'f589fc8f0672b1446e0e3b9e3d2d1a134355975c', class: `${this.elementClassName}__field` }, h("label", { key: 'a35e5e1e6e1be6166d2908b200904c4ebf266170', htmlFor: `${this.elementClassName}-hours`, class: {
+                [`${this.elementClassName}__label`]: true,
+                [`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
+            } }, this.labels.hours), h("div", { key: '7c2340bc7b58f47ccb5cf555460665fe99d2bb14', class: `${this.elementClassName}__control` }, h("button", { key: 'dd0339ee230032b0ae681b19e7ccad362454e70d', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleHourIncrement, disabled: this.disabled, "aria-label": this.labels.incrementHours }, h("svg", { key: 'f976e2e85f45795317a8e6f8b97f56d787075b30', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: 'd92fe17241918aa191b3bf8c1cf67d0783d6904c', points: "18 15 12 9 6 15" }))), h("input", { key: '12c6de6d83c13e437f1ec0f6e6a552c9806eee7e', id: `${this.elementClassName}-hours`, type: "number", class: `${this.elementClassName}__input`, value: this.padZero(displayHours), min: minHours, max: maxHours, onInput: this.handleHourChange, disabled: this.disabled, "aria-label": this.labels.hours }), h("button", { key: '9a3fe68583a1a92c1cb9ce82d8c79d435cc364c6', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleHourDecrement, disabled: this.disabled, "aria-label": this.labels.decrementHours }, h("svg", { key: 'c52dd2da808714a53da185d830609a83165d0435', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: '759299e487f09e8047643aed7bf5c27687ba0114', points: "6 9 12 15 18 9" }))))), h("div", { key: '9839abd75a1d2fbbfd085b5090586e5b90e43582', class: `${this.elementClassName}__separator` }, ":"), h("div", { key: '40a7656ee0e1fdde1287fad6200b415361e9d8a7', class: `${this.elementClassName}__field` }, h("label", { key: '12924e2ce017f31969cdd17efc61c5bc2c7299e1', htmlFor: `${this.elementClassName}-minutes`, class: {
+                [`${this.elementClassName}__label`]: true,
+                [`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
+            } }, this.labels.minutes), h("div", { key: '71ce2e345a98345b591e92803ad25fe10ae52ac1', class: `${this.elementClassName}__control` }, h("button", { key: 'ec85968d4d7b43fb348cbc9577f6329bc510b88b', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleMinuteIncrement, disabled: this.disabled, "aria-label": this.labels.incrementMinutes }, h("svg", { key: '459a04638058154613fc642ac6ec3c884b2eb3ed', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: '88747079b0a8cdc6f2d9bea21ec5b74dd334c889', points: "18 15 12 9 6 15" }))), h("input", { key: 'ccd14478435689bad16be5b3038c37fff7e55506', id: `${this.elementClassName}-minutes`, type: "number", class: `${this.elementClassName}__input`, value: this.padZero(this.internalMinutes), min: 0, max: 59, onInput: this.handleMinuteChange, disabled: this.disabled, "aria-label": this.labels.minutes }), h("button", { key: 'b645e0a9c10cf35e9b6ebfe6660f9e4770edabe7', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleMinuteDecrement, disabled: this.disabled, "aria-label": this.labels.decrementMinutes }, h("svg", { key: 'e1fbeb018b7d3898af319f227d2f3257a281b141', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: '9fa1f35020d93eea906247c0eca79c6978e75c81', points: "6 9 12 15 18 9" }))))), this.use12HourFormat && (h("div", { key: '80f5d6355c5627d98e25a3d945f3224d217d350b', class: `${this.elementClassName}__period` }, h("button", { key: '7fdbfe17b0b1d50a707aeb927847626d2e4b277a', type: "button", class: {
+                [`${this.elementClassName}__period-button`]: true,
+                [`${this.elementClassName}__period-button--active`]: this.period === "AM"
+            }, onClick: () => this.handlePeriodChange("AM"), disabled: this.disabled, "aria-label": this.labels.am, "aria-pressed": this.period === "AM" }, this.labels.am), h("button", { key: '5817fb8c5a5901077320472b9535700d3e980c3c', type: "button", class: {
+                [`${this.elementClassName}__period-button`]: true,
+                [`${this.elementClassName}__period-button--active`]: this.period === "PM"
+            }, onClick: () => this.handlePeriodChange("PM"), disabled: this.disabled, "aria-label": this.labels.pm, "aria-pressed": this.period === "PM" }, this.labels.pm))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "hours": [{
+                "watchHours": 0
+            }],
+        "minutes": [{
+                "watchMinutes": 0
+            }]
+    }; }
+};
+
+export { InclusiveTimesPicker as tabworthy_times_picker };

package/dist/esm/tabworthy-times.entry.js

@@ -0,0 +1,240 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BusoZVTR.js';
+import { h as hooks } from './moment-Mki5YqAR.js';
+import { g as getISODateString, r as removeTimezoneOffset } from './utils-BVHu5CWV.js';
+
+const defaultLabels = {
+    selected: "selected",
+    openCalendar: "Open date and time picker",
+    calendar: "date and time picker",
+    invalidDateError: "We could not find a matching date",
+    minDateError: `Please fill in a date after `,
+    maxDateError: `Please fill in a date before `,
+    rangeOutOfBoundsError: `Please enter a valid range of dates`,
+    disabledDateError: `Please choose an available date`,
+    to: "to",
+    startDate: "Start date",
+    timeLabel: "Time"
+};
+const InclusiveTimes = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectDateTime = createEvent(this, "selectDateTime");
+        this.changeYear = createEvent(this, "changeYear");
+        this.componentReady = createEvent(this, "componentReady");
+        // Enable or disable range mode
+        this.range = false;
+        // A label for the text field
+        this.label = "Choose a date and time";
+        // A placeholder for the text field
+        this.placeholder = "";
+        // Locale used for internal translations and date parsing
+        this.locale = (navigator === null || navigator === void 0 ? void 0 : navigator.language) || "en-US";
+        // If the datetime picker is disabled
+        this.disabled = false;
+        // Which date to be displayed when calendar is first opened
+        this.startDate = getISODateString(new Date());
+        // Reference date used for Chrono date parsing. Equals "today"
+        this.referenceDate = getISODateString(new Date());
+        // Use 12-hour format with AM/PM
+        this.use12HourFormat = true;
+        // Labels used for internal translations
+        this.timesLabels = defaultLabels;
+        // Prevent hiding the calendar
+        this.inline = false;
+        // Current error state of the input field
+        this.hasError = false;
+        // Show or hide the next/previous year buttons
+        this.showYearStepper = false;
+        // Show or hide the next/previous month buttons
+        this.showMonthStepper = true;
+        // Show or hide the clear button
+        this.showClearButton = true;
+        // Show or hide the today button
+        this.showTodayButton = true;
+        // Function to disable individual dates
+        this.disableDate = () => false;
+        // Component name used to generate CSS classes
+        this.elementClassName = "tabworthy-times";
+        // Which day that should start the week (0 is sunday, 1 is monday)
+        this.firstDayOfWeek = 1;
+        // Format for the value prop (input/output format). Defaults to ISO 8601 format.
+        this.format = "YYYY-MM-DDTHH:mm:ss";
+        this.selectedHours = 12;
+        this.selectedMinutes = 0;
+        this.errorState = this.hasError;
+        this.disabledState = this.disabled;
+        this.errorMessage = "";
+        this.handlePickerSelection = async (dateString) => {
+            const dates = dateString.split(",");
+            if (this.range && dates.length === 2) {
+                const startDate = removeTimezoneOffset(new Date(dates[0]));
+                const endDate = removeTimezoneOffset(new Date(dates[1]));
+                this.updateValue([startDate, endDate]);
+                // Update calendar with selected dates
+                if (this.pickerRef) {
+                    this.pickerRef.value = [startDate, endDate];
+                }
+            }
+            else {
+                const date = removeTimezoneOffset(new Date(dates[0]));
+                this.updateValue(date);
+                // Update calendar with selected date
+                if (this.pickerRef) {
+                    this.pickerRef.value = date;
+                }
+            }
+        };
+        this.handleTimeChange = (event) => {
+            this.selectedHours = event.detail.hours;
+            this.selectedMinutes = event.detail.minutes;
+            // Update the value if we have a selected date
+            if (this.selectedDate) {
+                this.updateValue(this.selectedDate);
+            }
+        };
+        this.handleCalendarButtonClick = async () => {
+            if (this.modalRef) {
+                await this.modalRef.setTriggerElement(this.calendarButtonRef);
+                await this.modalRef.open();
+            }
+        };
+        this.handleYearChange = (eventDetail) => {
+            if (this.changeYear) {
+                this.changeYear.emit(eventDetail);
+            }
+        };
+        this.handleChangedMonths = (_eventDetail) => {
+            // Can be used for month change tracking
+        };
+        this.handleInputBlur = () => {
+            this.formatInput();
+        };
+        this.handleInputChange = (event) => {
+            const value = event.target.value;
+            // Try to parse the input value as a datetime
+            const parsed = hooks(value);
+            if (parsed.isValid()) {
+                this.selectedHours = parsed.hours();
+                this.selectedMinutes = parsed.minutes();
+                this.updateValue(parsed.toDate());
+            }
+        };
+    }
+    watchValue(_newValue) {
+        this.syncFromValueProp();
+    }
+    watchDisabled(newValue) {
+        this.disabledState = newValue;
+    }
+    watchHasError(newValue) {
+        this.errorState = newValue;
+    }
+    componentDidLoad() {
+        this.syncFromValueProp();
+        this.componentReady.emit();
+        if (!this.id) {
+            console.error('tabworthy-times: The "id" prop is required for accessibility');
+        }
+    }
+    syncFromValueProp() {
+        if (this.value) {
+            this.internalValue = this.value;
+            // Parse the first datetime value to set time picker
+            const firstValue = Array.isArray(this.value) ? this.value[0] : this.value;
+            if (firstValue) {
+                const parsed = hooks(firstValue, this.format);
+                if (parsed.isValid()) {
+                    this.selectedDate = parsed.toDate();
+                    this.selectedHours = parsed.hours();
+                    this.selectedMinutes = parsed.minutes();
+                }
+            }
+        }
+        else {
+            this.internalValue = null;
+        }
+    }
+    updateValue(date) {
+        if (Array.isArray(date)) {
+            // Range mode
+            const formattedDates = date.map((d) => {
+                const m = hooks(d);
+                m.hours(this.selectedHours);
+                m.minutes(this.selectedMinutes);
+                m.seconds(0);
+                return m.format(this.format);
+            });
+            this.internalValue = formattedDates;
+            this.value = formattedDates;
+            this.selectDateTime.emit(formattedDates);
+        }
+        else {
+            // Single date mode
+            const m = hooks(date);
+            m.hours(this.selectedHours);
+            m.minutes(this.selectedMinutes);
+            m.seconds(0);
+            const formatted = m.format(this.format);
+            this.internalValue = formatted;
+            this.value = formatted;
+            this.selectedDate = date;
+            this.selectDateTime.emit(formatted);
+        }
+        this.errorState = false;
+        this.formatInput();
+    }
+    formatInput() {
+        if (!this.internalValue)
+            return;
+        if (Array.isArray(this.internalValue)) {
+            // Format range
+            const formatted = this.internalValue
+                .map((v) => hooks(v, this.format).format("lll"))
+                .join(` ${this.timesLabels.to} `);
+            this.inputRef.value = formatted;
+        }
+        else {
+            // Format single datetime
+            this.inputRef.value = hooks(this.internalValue, this.format).format("lll");
+        }
+    }
+    getClassName(suffix) {
+        return `${this.elementClassName}__${suffix}`;
+    }
+    async clearValue() {
+        this.internalValue = null;
+        this.value = undefined;
+        this.selectedDate = undefined;
+        this.inputRef.value = "";
+        if (this.pickerRef) {
+            this.pickerRef.value = null;
+        }
+        this.selectDateTime.emit(undefined);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'e922c649f8ed2bf03711fe99ae73bca550c9d8ef', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: '6b8c053bcb4d232c52e0b95da141e4a433f2bc16', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '1950259cf662cedae9b8f0fed6a61f095d3a4424', class: this.getClassName("input-container") }, h("input", { key: '1c6bfced55bd60706eadf6304eb7204c89bda8d6', id: `${this.id}-input`, ref: (r) => (this.inputRef = r), type: "text", class: this.getClassName("input"), placeholder: this.placeholder, disabled: this.disabledState, value: (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.toString(), onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: '60b202b017d7ffe5de182908c809a24eba4f8e56', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.timesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '83716e92fd3711c65b23f007bba209bcc60a4d7d', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
+                if (this.pickerRef) {
+                    this.pickerRef.modalIsOpen = true;
+                }
+            }, onClosed: () => {
+                if (this.pickerRef) {
+                    this.pickerRef.modalIsOpen = false;
+                }
+            }, inline: this.inline }, h("div", { key: '3972712165cdc3069498d5683ca7b8b25041e44d', class: this.getClassName("picker-container") }, h("tabworthy-dates-calendar", { key: 'e6472861402e4926227657fb68f57d8671452260', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline }, h("div", { key: 'e9f7b9baa9544ae651b4b6b73094a215cabcc796', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: 'b4c2f14b9311d1e3c186825785d6f64580f2896c', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: '684dce5fc46c53feea28b19eca46746d7538aa3f', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }],
+        "disabled": [{
+                "watchDisabled": 0
+            }],
+        "hasError": [{
+                "watchHasError": 0
+            }]
+    }; }
+};
+
+export { InclusiveTimes as tabworthy_times };

package/dist/esm/utils-BVHu5CWV.js

@@ -0,0 +1,188 @@
+function addDays(date, days) {
+    const newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + days);
+    return newDate;
+}
+function getDaysOfMonth(date, padded, firstDayOfWeek) {
+    const days = [];
+    const firstOfMonth = getFirstOfMonth(date);
+    const firstDayMonth = firstOfMonth.getDay() === 0 ? 7 : firstOfMonth.getDay();
+    const lastOfMonth = getLastOfMonth(date);
+    const lastDayOfMonth = lastOfMonth.getDay() === 0 ? 7 : lastOfMonth.getDay();
+    const lastDayOfWeek = firstDayOfWeek === 1 ? 7 : firstDayOfWeek - 1;
+    const leftPaddingDays = [];
+    const rightPaddingDays = [];
+    {
+        const leftPadding = (7 - firstDayOfWeek + firstDayMonth) % 7;
+        let leftPaddingAmount = leftPadding;
+        let leftPaddingDay = getPreviousDay(firstOfMonth);
+        while (leftPaddingAmount > 0) {
+            leftPaddingDays.push(leftPaddingDay);
+            leftPaddingDay = getPreviousDay(leftPaddingDay);
+            leftPaddingAmount -= 1;
+        }
+        leftPaddingDays.reverse();
+        const rightPadding = (7 - lastDayOfMonth + lastDayOfWeek) % 7;
+        let rightPaddingAmount = rightPadding;
+        let rightPaddingDay = getNextDay(lastOfMonth);
+        while (rightPaddingAmount > 0) {
+            rightPaddingDays.push(rightPaddingDay);
+            rightPaddingDay = getNextDay(rightPaddingDay);
+            rightPaddingAmount -= 1;
+        }
+    }
+    let currentDay = firstOfMonth;
+    while (currentDay.getMonth() === date.getMonth()) {
+        days.push(currentDay);
+        currentDay = getNextDay(currentDay);
+    }
+    return [...leftPaddingDays, ...days, ...rightPaddingDays];
+}
+function getFirstOfMonth(date) {
+    const firstOfMonth = removeTimezoneOffset(new Date(`${getYear(date)}-${String(getMonth(date)).padStart(2, "0")}-01`));
+    return firstOfMonth;
+}
+function getISODateStringHistoricalImplementation(date) {
+    if (!(date instanceof Date)) {
+        return;
+    }
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function getISODateString(date) {
+    // this is a lie, but can have unpredictable issues because heavily used,
+    // so atm keeping historical implementation, until better test coverage and confidence is achieved
+    return getISODateStringHistoricalImplementation(date);
+}
+function getLastOfMonth(date) {
+    const newDate = getFirstOfMonth(date);
+    newDate.setMonth(newDate.getMonth() + 1);
+    newDate.setDate(newDate.getDate() - 1);
+    return newDate;
+}
+function getMonth(date) {
+    return date.getMonth() + 1;
+}
+function getMonths(locale) {
+    return new Array(12).fill(undefined).map((_, month) => {
+        const date = removeTimezoneOffset(new Date(`2006-${String(month + 1).padStart(2, "0")}-01`));
+        return Intl.DateTimeFormat(locale, {
+            month: "long"
+        }).format(date);
+    });
+}
+function getNextDay(date) {
+    return addDays(date, 1);
+}
+function getNextMonth(date) {
+    const newDate = new Date(date);
+    newDate.setMonth(newDate.getMonth() + 1);
+    return newDate;
+}
+function getNextYear(date) {
+    const newDate = new Date(date);
+    newDate.setFullYear(newDate.getFullYear() + 1);
+    return newDate;
+}
+function getPreviousDay(date) {
+    return subDays(date, 1);
+}
+function getPreviousMonth(date) {
+    const newDate = new Date(date);
+    newDate.setMonth(newDate.getMonth() - 1);
+    return newDate;
+}
+function getPreviousYear(date) {
+    const newDate = new Date(date);
+    newDate.setFullYear(newDate.getFullYear() - 1);
+    return newDate;
+}
+function getWeekDays(firstDayOfWeek, locale) {
+    return new Array(7)
+        .fill(undefined)
+        .map((_, index) => ((firstDayOfWeek + index) % 7) + 1)
+        .map((day) => {
+        const date = new Date(2006, 0, day);
+        return [
+            Intl.DateTimeFormat(locale, {
+                weekday: "short"
+            }).format(date),
+            Intl.DateTimeFormat(locale, {
+                weekday: "long"
+            }).format(date)
+        ];
+    });
+}
+function getYear(date) {
+    return date.getFullYear();
+}
+function isDateInRange(date, range) {
+    if (!date || !range || !range.from || !range.to) {
+        return false;
+    }
+    const earlyDate = range.from < range.to ? range.from : range.to;
+    const laterDate = range.from < range.to ? range.to : range.from;
+    return date >= earlyDate && date <= laterDate;
+}
+function isSameDay(date1, date2) {
+    if (!date1 || !date2) {
+        return false;
+    }
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+}
+function removeTimezoneOffset(date) {
+    const newDate = new Date(date);
+    newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());
+    return newDate;
+}
+function subDays(date, days) {
+    const newDate = new Date(date);
+    newDate.setDate(newDate.getDate() - days);
+    return newDate;
+}
+function dateIsWithinLowerBounds(date, minDate) {
+    if (minDate) {
+        const min = removeTimezoneOffset(new Date(minDate));
+        return date >= min || isSameDay(min, date);
+    }
+    else
+        return true;
+}
+function dateIsWithinUpperBounds(date, maxDate) {
+    if (maxDate) {
+        const max = removeTimezoneOffset(new Date(maxDate));
+        return date <= max || isSameDay(date, max);
+    }
+    else
+        return true;
+}
+function dateIsWithinBounds(date, minDate, maxDate) {
+    return (dateIsWithinLowerBounds(date, minDate) &&
+        dateIsWithinUpperBounds(date, maxDate));
+}
+function monthIsDisabled(month, year, minDate, maxDate) {
+    const firstDate = new Date(year, month, 1);
+    firstDate.setDate(firstDate.getDate() - 1);
+    const lastDate = new Date(year, month + 1, 0);
+    lastDate.setDate(firstDate.getDate() + 1);
+    return (!dateIsWithinBounds(firstDate, minDate, maxDate) &&
+        !dateIsWithinBounds(lastDate, minDate, maxDate));
+}
+function isValidISODate(dateString) {
+    var isoFormat = /^\d{4}-\d{2}-\d{2}$/;
+    if (dateString.match(isoFormat) == null) {
+        return false;
+    }
+    else {
+        var d = new Date(dateString);
+        return !isNaN(d.getTime());
+    }
+}
+function extractDates(text) {
+    var dateRegex = /\d{4}-\d{2}-\d{2}/g;
+    var matches = text.match(dateRegex);
+    return matches === null || matches === void 0 ? void 0 : matches.slice(0, 2);
+}
+
+export { getNextMonth as a, getNextYear as b, getPreviousMonth as c, getPreviousYear as d, dateIsWithinBounds as e, getPreviousDay as f, getISODateString as g, getNextDay as h, addDays as i, getFirstOfMonth as j, getLastOfMonth as k, getWeekDays as l, getDaysOfMonth as m, dateIsWithinLowerBounds as n, dateIsWithinUpperBounds as o, getYear as p, getMonth as q, removeTimezoneOffset as r, subDays as s, monthIsDisabled as t, getMonths as u, isSameDay as v, isDateInRange as w, extractDates as x, isValidISODate as y };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../cjs/loader.cjs.js');

package/dist/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../cjs/loader.cjs.js');

package/dist/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/dist/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../esm/loader.js';