@tabworthy/components 0.2.0

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

@@ -0,0 +1,181 @@
+'use strict';
+
+var index = require('./index-C15oswCE.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) {
+        index.registerInstance(this, hostRef);
+        this.timeChanged = index.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 (index.h(index.Host, { key: '826752ac3b056591e50c55198f01b232e0d914e7', class: this.elementClassName, "aria-label": this.labels.timePicker }, index.h("div", { key: '5e7179bcf1e2e9087f7fb8f62366af4b3432cf9b', class: `${this.elementClassName}__container` }, index.h("div", { key: 'f589fc8f0672b1446e0e3b9e3d2d1a134355975c', class: `${this.elementClassName}__field` }, index.h("label", { key: 'a35e5e1e6e1be6166d2908b200904c4ebf266170', htmlFor: `${this.elementClassName}-hours`, class: {
+                [`${this.elementClassName}__label`]: true,
+                [`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
+            } }, this.labels.hours), index.h("div", { key: '7c2340bc7b58f47ccb5cf555460665fe99d2bb14', class: `${this.elementClassName}__control` }, index.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 }, index.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" }, index.h("polyline", { key: 'd92fe17241918aa191b3bf8c1cf67d0783d6904c', points: "18 15 12 9 6 15" }))), index.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 }), index.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 }, index.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" }, index.h("polyline", { key: '759299e487f09e8047643aed7bf5c27687ba0114', points: "6 9 12 15 18 9" }))))), index.h("div", { key: '9839abd75a1d2fbbfd085b5090586e5b90e43582', class: `${this.elementClassName}__separator` }, ":"), index.h("div", { key: '40a7656ee0e1fdde1287fad6200b415361e9d8a7', class: `${this.elementClassName}__field` }, index.h("label", { key: '12924e2ce017f31969cdd17efc61c5bc2c7299e1', htmlFor: `${this.elementClassName}-minutes`, class: {
+                [`${this.elementClassName}__label`]: true,
+                [`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
+            } }, this.labels.minutes), index.h("div", { key: '71ce2e345a98345b591e92803ad25fe10ae52ac1', class: `${this.elementClassName}__control` }, index.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 }, index.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" }, index.h("polyline", { key: '88747079b0a8cdc6f2d9bea21ec5b74dd334c889', points: "18 15 12 9 6 15" }))), index.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 }), index.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 }, index.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" }, index.h("polyline", { key: '9fa1f35020d93eea906247c0eca79c6978e75c81', points: "6 9 12 15 18 9" }))))), this.use12HourFormat && (index.h("div", { key: '80f5d6355c5627d98e25a3d945f3224d217d350b', class: `${this.elementClassName}__period` }, index.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), index.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 index.getElement(this); }
+    static get watchers() { return {
+        "hours": [{
+                "watchHours": 0
+            }],
+        "minutes": [{
+                "watchMinutes": 0
+            }]
+    }; }
+};
+
+exports.tabworthy_times_picker = InclusiveTimesPicker;

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

@@ -0,0 +1,242 @@
+'use strict';
+
+var index = require('./index-C15oswCE.js');
+var moment = require('./moment-CdViwxPQ.js');
+var utils = require('./utils-y5Vtky2t.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) {
+        index.registerInstance(this, hostRef);
+        this.selectDateTime = index.createEvent(this, "selectDateTime");
+        this.changeYear = index.createEvent(this, "changeYear");
+        this.componentReady = index.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 = utils.getISODateString(new Date());
+        // Reference date used for Chrono date parsing. Equals "today"
+        this.referenceDate = utils.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 = utils.removeTimezoneOffset(new Date(dates[0]));
+                const endDate = utils.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 = utils.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 = moment.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 = moment.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 = moment.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 = moment.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) => moment.hooks(v, this.format).format("lll"))
+                .join(` ${this.timesLabels.to} `);
+            this.inputRef.value = formatted;
+        }
+        else {
+            // Format single datetime
+            this.inputRef.value = moment.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 (index.h(index.Host, { key: 'e922c649f8ed2bf03711fe99ae73bca550c9d8ef', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, index.h("label", { key: '6b8c053bcb4d232c52e0b95da141e4a433f2bc16', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), index.h("div", { key: '1950259cf662cedae9b8f0fed6a61f095d3a4424', class: this.getClassName("input-container") }, index.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 && (index.h("button", { key: '60b202b017d7ffe5de182908c809a24eba4f8e56', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (index.h("span", { innerHTML: this.calendarButtonContent })) : (this.timesLabels.openCalendar)))), index.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 }, index.h("div", { key: '3972712165cdc3069498d5683ca7b8b25041e44d', class: this.getClassName("picker-container") }, index.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 }, index.h("div", { key: 'e9f7b9baa9544ae651b4b6b73094a215cabcc796', slot: "after-calendar", class: this.getClassName("time-section") }, index.h("tabworthy-times-picker", { key: 'b4c2f14b9311d1e3c186825785d6f64580f2896c', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (index.h("div", { key: '684dce5fc46c53feea28b19eca46746d7538aa3f', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }],
+        "disabled": [{
+                "watchDisabled": 0
+            }],
+        "hasError": [{
+                "watchHasError": 0
+            }]
+    }; }
+};
+
+exports.tabworthy_times = InclusiveTimes;

package/dist/cjs/utils-y5Vtky2t.js

@@ -0,0 +1,214 @@
+'use strict';
+
+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);
+}
+
+exports.addDays = addDays;
+exports.dateIsWithinBounds = dateIsWithinBounds;
+exports.dateIsWithinLowerBounds = dateIsWithinLowerBounds;
+exports.dateIsWithinUpperBounds = dateIsWithinUpperBounds;
+exports.extractDates = extractDates;
+exports.getDaysOfMonth = getDaysOfMonth;
+exports.getFirstOfMonth = getFirstOfMonth;
+exports.getISODateString = getISODateString;
+exports.getLastOfMonth = getLastOfMonth;
+exports.getMonth = getMonth;
+exports.getMonths = getMonths;
+exports.getNextDay = getNextDay;
+exports.getNextMonth = getNextMonth;
+exports.getNextYear = getNextYear;
+exports.getPreviousDay = getPreviousDay;
+exports.getPreviousMonth = getPreviousMonth;
+exports.getPreviousYear = getPreviousYear;
+exports.getWeekDays = getWeekDays;
+exports.getYear = getYear;
+exports.isDateInRange = isDateInRange;
+exports.isSameDay = isSameDay;
+exports.isValidISODate = isValidISODate;
+exports.monthIsDisabled = monthIsDisabled;
+exports.removeTimezoneOffset = removeTimezoneOffset;
+exports.subDays = subDays;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,16 @@
+{
+  "entries": [
+    "components/tabworthy-dates-calendar/tabworthy-dates-calendar.js",
+    "components/tabworthy-dates/tabworthy-dates.js",
+    "components/tabworthy-times-picker/tabworthy-times-picker.js",
+    "components/tabworthy-times/tabworthy-times.js",
+    "components/tabworthy-modal/tabworthy-dates-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.42.1",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/tabworthy-dates/tabworthy-dates.css

@@ -0,0 +1,10 @@
+.visually-hidden {
+  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%);
+}