@lmvz-ds/components 0.35.1 → 0.36.0

package/collection/components/lmvz-datepicker/lmvz-datepicker.js

@@ -0,0 +1,988 @@
+import { Host, forceUpdate, h } from "@stencil/core";
+import * as CalendarFns from "temporal-polyfill/fns/Calendar";
+import * as NowFns from "temporal-polyfill/fns/Now";
+import * as PDate from "temporal-polyfill/fns/PlainDate";
+import * as PYM from "temporal-polyfill/fns/PlainYearMonth";
+import chevronLeft from "@lmvz-ds/icons/assets/chevron-left.svg";
+import chevronRight from "@lmvz-ds/icons/assets/chevron-right.svg";
+import { parseIsoDateSafely, toIsoDateString, toIsoYearMonthString } from "@lmvz-ds/lib-ts/date/temporal.js";
+import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
+import calendar from "../../assets/icons/calendar.svg";
+import { buildCalendarGrid, derivePatternFromLocale, firstSelectableDayOfMonth, formatToDisplay, getNavLabels, getValidationLabels, isDisabled, isSelected, lastSelectableDayOfMonth, parseFromDisplay, } from "./lmvz-datepicker.utils";
+const CHEVRON_LEFT = toValidSvgStringWithFallback(chevronLeft);
+const CHEVRON_RIGHT = toValidSvgStringWithFallback(chevronRight);
+const CALENDAR_ICON = toValidSvgStringWithFallback(calendar);
+export class LmvzDatepicker {
+    el;
+    monthLabelId = `lmvz-dp-month-${Math.random().toString(36).slice(2, 9)}`;
+    internals;
+    visibleDays;
+    inputEl;
+    focusedButtonRef;
+    initialValue;
+    pendingGridFocus = false;
+    syncOrigin = null;
+    focusedDate;
+    setFocusedDate(val) {
+        if (this.focusedDate === val || (this.focusedDate && val && PDate.compare(this.focusedDate, val) === 0))
+            return;
+        this.focusedDate = val;
+    }
+    valueDate;
+    get value() {
+        return this.valueDate ? toIsoDateString(this.valueDate) : undefined;
+    }
+    set value(value) {
+        this.valueDate = value ? parseIsoDateSafely(value) : undefined;
+        this.visibleMonthDate = this.valueDate ? PDate.toPlainYearMonth(this.valueDate) : this.effectiveVisibleMonth;
+        this.setFocusedDate(this.valueDate);
+        this.syncInputTextFromValue();
+        this.updateFormState();
+    }
+    visibleMonthDate;
+    get visibleMonth() {
+        return this.visibleMonthDate ? toIsoYearMonthString(this.visibleMonthDate) : undefined;
+    }
+    set visibleMonth(value) {
+        this.visibleMonthDate = value ? PYM.fromString(value, CalendarFns.getBasic) : undefined;
+        this.initFocusedDate();
+    }
+    min;
+    max;
+    locale = 'de-CH';
+    firstDayOfWeek = 1;
+    disabled = false;
+    readonly = false;
+    required = false;
+    name;
+    label;
+    placeholder;
+    helperText;
+    errorMessage;
+    open = false;
+    displayFormat;
+    lmvzChange;
+    lmvzMonthChange;
+    lmvzOpen;
+    lmvzClose;
+    componentWillLoad() {
+        if (!this.label) {
+            console.warn('[lmvz-datepicker] no `label` provided; the text field will have no accessible name.');
+        }
+        this.initialValue = this.value;
+        this.syncInputTextFromValue();
+        this.updateFormState();
+    }
+    formAssociatedCallback(form) {
+        if (!form)
+            return;
+        this.updateFormState();
+    }
+    formResetCallback() {
+        this.internals.setValidity?.({});
+        this.value = this.initialValue;
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state !== 'string')
+            return;
+        this.value = (state || undefined);
+    }
+    async checkValidity() {
+        return this.internals.checkValidity?.() ?? true;
+    }
+    async reportValidity() {
+        return this.internals.reportValidity?.() ?? true;
+    }
+    handleValidityRelevantPropChange() {
+        this.updateFormState();
+    }
+    handleDisplayFormatChange() {
+        this.syncInputTextFromValue();
+    }
+    handleDisabledChange(disabled) {
+        if (disabled)
+            this.open = false;
+    }
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        const path = ev.composedPath();
+        if (!path.some((el) => el?.getAttribute?.('role') === 'grid'))
+            return;
+        const focused = this.focusedDate;
+        if (!focused) {
+            console.warn('[lmvz-datepicker] any date should be focused but none is.');
+            return;
+        }
+        const minDate = parseIsoDateSafely(this.min);
+        const maxDate = parseIsoDateSafely(this.max);
+        const swallowEvent = () => {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        switch (ev.key) {
+            case 'ArrowRight': {
+                swallowEvent();
+                this.moveFocus(PDate.addDays(focused, 1));
+                break;
+            }
+            case 'ArrowLeft': {
+                swallowEvent();
+                this.moveFocus(PDate.addDays(focused, -1));
+                break;
+            }
+            case 'ArrowDown': {
+                swallowEvent();
+                this.moveFocus(PDate.addDays(focused, 7));
+                break;
+            }
+            case 'ArrowUp': {
+                swallowEvent();
+                this.moveFocus(PDate.addDays(focused, -7));
+                break;
+            }
+            case 'Home': {
+                swallowEvent();
+                this.moveFocus(firstSelectableDayOfMonth(this.effectiveVisibleMonth, minDate, maxDate));
+                break;
+            }
+            case 'End': {
+                swallowEvent();
+                this.moveFocus(lastSelectableDayOfMonth(this.effectiveVisibleMonth, minDate, maxDate));
+                break;
+            }
+            case 'PageUp':
+                swallowEvent();
+                this.moveFocus(ev.shiftKey ? PDate.addYears(focused, -1) : PDate.addMonths(focused, -1));
+                break;
+            case 'PageDown':
+                swallowEvent();
+                this.moveFocus(ev.shiftKey ? PDate.addYears(focused, 1) : PDate.addMonths(focused, 1));
+                break;
+            case 'Enter':
+            case ' ':
+                ev.preventDefault();
+                if (!this.readonly && !isDisabled(focused, minDate, maxDate)) {
+                    this.selectDate(focused, { origin: 'calendar', closePopover: true });
+                }
+                break;
+            case 'Escape':
+                break;
+            default:
+                break;
+        }
+    }
+    initFocusedDate() {
+        const vm = this.effectiveVisibleMonth;
+        if (this.focusedDate && PYM.compare(PDate.toPlainYearMonth(this.focusedDate), vm) === 0) {
+            return;
+        }
+        const selectedDate = this.valueDate;
+        if (selectedDate && PYM.compare(PDate.toPlainYearMonth(selectedDate), vm) === 0) {
+            this.setFocusedDate(selectedDate);
+            return;
+        }
+        const todayDate = NowFns.plainDateISO();
+        if (PYM.compare(PDate.toPlainYearMonth(todayDate), vm) === 0) {
+            this.setFocusedDate(todayDate);
+            return;
+        }
+        this.setFocusedDate(PYM.toPlainDate(vm, { day: 1 }));
+    }
+    get effectiveVisibleMonth() {
+        return this.visibleMonthDate ? this.visibleMonthDate : PDate.toPlainYearMonth(NowFns.plainDateISO());
+    }
+    navigateMonth(delta, byMonthNav = false) {
+        if (delta === 0)
+            return;
+        const newMonth = PYM.addMonths(this.effectiveVisibleMonth, delta);
+        this.visibleMonthDate = newMonth;
+        this.lmvzMonthChange.emit({ visibleMonth: toIsoYearMonthString(newMonth) });
+        if (byMonthNav) {
+            this.setFocusedDate(PYM.toPlainDate(newMonth, { day: 1 }));
+        }
+    }
+    selectDate(date, opts = { origin: 'calendar' }) {
+        this.syncOrigin = opts.origin;
+        this.valueDate = date;
+        this.setFocusedDate(date);
+        this.lmvzChange.emit({ value: toIsoDateString(date) });
+        this.navigateMonth(PYM.compare(PDate.toPlainYearMonth(date), this.effectiveVisibleMonth));
+        if (opts.origin === 'input') {
+            this.inputText = formatToDisplay(this.value, this.locale, this.displayFormat);
+            this.hasUnparseableInput = false;
+        }
+        else {
+            this.syncInputTextFromValue();
+        }
+        this.updateFormState();
+        if (opts.closePopover)
+            this.open = false;
+        this.syncOrigin = null;
+    }
+    moveFocus(date) {
+        if (!date)
+            return;
+        this.setFocusedDate(date);
+        if (!this.visibleDays?.length)
+            return;
+        let day = this.visibleDays.at(0);
+        if (day && PDate.compare(date, day) < 0) {
+            return this.navigateMonth(-1);
+        }
+        day = this.visibleDays.at(-1);
+        if (day && PDate.compare(date, day) > 0) {
+            return this.navigateMonth(1);
+        }
+    }
+    syncInputTextFromValue() {
+        if (this.syncOrigin === 'input')
+            return;
+        this.inputText = formatToDisplay(this.value, this.locale, this.displayFormat);
+        this.hasUnparseableInput = false;
+    }
+    inputText = '';
+    hasUnparseableInput = false;
+    handleInputTextChange = (ev) => {
+        const text = ev.detail;
+        this.inputText = text;
+        if (!text.trim()) {
+            this.hasUnparseableInput = false;
+            if (this.valueDate) {
+                this.syncOrigin = 'input';
+                this.valueDate = undefined;
+                this.lmvzChange.emit({ value: undefined });
+                this.syncOrigin = null;
+            }
+            this.updateFormState();
+            return;
+        }
+        const parsed = parseFromDisplay(text, this.locale, this.displayFormat);
+        if (!parsed) {
+            this.hasUnparseableInput = true;
+            this.updateFormState();
+            return;
+        }
+        this.hasUnparseableInput = false;
+        const parsedDate = parseIsoDateSafely(parsed);
+        if (!parsedDate)
+            return;
+        if (this.valueDate && PDate.compare(this.valueDate, parsedDate) === 0)
+            return;
+        this.selectDate(parsedDate, { origin: 'input' });
+    };
+    handleInputFocus(ev) {
+        if (this.disabled || this.readonly)
+            return;
+        const originalTarget = ev.composedPath()[0];
+        if (originalTarget !== this.inputEl && !this.inputEl?.contains(originalTarget ?? null))
+            return;
+        this.initFocusedDate();
+        this.open = true;
+    }
+    handleInputKeydown = (ev) => {
+        if (this.disabled || this.readonly)
+            return;
+        if (!['ArrowDown', 'ArrowUp', ' '].includes(ev.key))
+            return;
+        ev.preventDefault();
+        if (!this.open) {
+            this.pendingGridFocus = true;
+            this.initFocusedDate();
+            this.open = true;
+        }
+        else {
+            this.focusGrid();
+        }
+    };
+    focusGrid() {
+        requestAnimationFrame(() => this.focusedButtonRef?.focus());
+    }
+    handlePopoverOpen = (ev) => {
+        ev.stopPropagation();
+        console.log('emitting open event');
+        this.lmvzOpen.emit();
+        if (this.pendingGridFocus) {
+            this.pendingGridFocus = false;
+            this.focusGrid();
+        }
+    };
+    handlePopoverClose = (ev) => {
+        console.log('handlePopoverClose', ev);
+        ev.stopPropagation();
+        this.open = false;
+        this.lmvzClose.emit();
+    };
+    updateFormState() {
+        const isoValue = this.value;
+        this.internals.setFormValue?.(isoValue ?? null);
+        const flags = {};
+        if (this.required && !this.valueDate) {
+            flags.valueMissing = true;
+        }
+        if (this.hasUnparseableInput) {
+            flags.badInput = true;
+        }
+        if (this.valueDate) {
+            const minDate = parseIsoDateSafely(this.min);
+            const maxDate = parseIsoDateSafely(this.max);
+            if (minDate && PDate.compare(this.valueDate, minDate) < 0)
+                flags.rangeUnderflow = true;
+            if (maxDate && PDate.compare(this.valueDate, maxDate) > 0)
+                flags.rangeOverflow = true;
+        }
+        const isInvalid = Object.values(flags).some(Boolean);
+        this.isInvalid = isInvalid;
+        const validationLabels = getValidationLabels(this.locale);
+        this.internals.setValidity?.(flags, isInvalid ? this.errorMessage || validationLabels.invalidDateMessage : undefined, isInvalid ? this.el : undefined);
+    }
+    isInvalid = false;
+    get effectivePlaceholder() {
+        return this.placeholder ?? derivePatternFromLocale(this.locale).toLowerCase();
+    }
+    renderHeader() {
+        const { locale } = this;
+        const vm = this.effectiveVisibleMonth;
+        const navLabels = getNavLabels(locale);
+        const monthYearLabel = PDate.toLocaleString(PYM.toPlainDate(vm, { day: 1 }), locale, { month: 'long', year: 'numeric' });
+        const prevMonth = PYM.addMonths(vm, -1);
+        const nextMonth = PYM.addMonths(vm, 1);
+        const minYM = this.min ? PYM.fromString(this.min.slice(0, 7), CalendarFns.getBasic) : undefined;
+        const maxYM = this.max ? PYM.fromString(this.max.slice(0, 7), CalendarFns.getBasic) : undefined;
+        const isPrevDisabled = this.disabled || (minYM !== undefined && PYM.compare(prevMonth, minYM) < 0);
+        const isNextDisabled = this.disabled || (maxYM !== undefined && PYM.compare(nextMonth, maxYM) > 0);
+        return (h("div", { part: "header", class: "datepicker-header" }, h("lmvz-button", { part: "nav-prev", variant: "tertiary", scale: "small", "aria-label": navLabels.prev, disabled: isPrevDisabled, onLmvzActivation: () => this.navigateMonth(-1, true) }, h("lmvz-icon", { icon: CHEVRON_LEFT, "aria-hidden": "true" })), h("span", { id: this.monthLabelId, part: "month-label", class: "datepicker-month-label" }, monthYearLabel), h("lmvz-button", { part: "nav-next", variant: "tertiary", scale: "small", "aria-label": navLabels.next, disabled: isNextDisabled, onLmvzActivation: () => this.navigateMonth(1, true) }, h("lmvz-icon", { icon: CHEVRON_RIGHT, "aria-hidden": "true" }))));
+    }
+    renderWeekdayRow() {
+        const { locale } = this;
+        const mondayFirstDows = [1, 2, 3, 4, 5, 6, 7];
+        const refMonday = PDate.fromFields({ year: 2024, month: 1, day: 1 });
+        return (h("div", { part: "weekday-row", role: "row", class: "datepicker-weekday-row" }, mondayFirstDows.map((dow) => {
+            const refDate = PDate.addDays(refMonday, dow - 1);
+            const shortName = PDate.toLocaleString(refDate, locale, { weekday: 'short' });
+            const longName = PDate.toLocaleString(refDate, locale, { weekday: 'long' });
+            return (h("span", { part: "weekday", role: "columnheader", "aria-label": longName, class: "datepicker-weekday", key: dow }, h("abbr", { title: longName }, shortName)));
+        })));
+    }
+    renderGrid() {
+        const { locale, focusedDate } = this;
+        const vm = this.effectiveVisibleMonth;
+        const selectedDate = this.valueDate;
+        const minDate = parseIsoDateSafely(this.min);
+        const maxDate = parseIsoDateSafely(this.max);
+        const grid = (this.visibleDays = buildCalendarGrid(vm));
+        const weekdayAriaLabelFormatter = {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        };
+        const weeks = [];
+        for (let w = 0; w < 6; w++) {
+            if (!grid.at(w * 7))
+                break;
+            weeks.push(grid.slice(w * 7, w * 7 + 7));
+        }
+        return (h("div", { part: "grid", role: "grid", "aria-labelledby": this.monthLabelId, class: "datepicker-grid" }, this.renderWeekdayRow(), weeks.map((week, wi) => (h("div", { part: "week-row", role: "row", class: "datepicker-week-row", key: wi }, week.map((date) => {
+            const iso = toIsoDateString(date);
+            const isTodayDate = PDate.compare(date, NowFns.plainDateISO()) === 0;
+            const isSelectedDate = isSelected(date, selectedDate);
+            const isOutOfMonth = PYM.compare(PDate.toPlainYearMonth(date), vm) !== 0;
+            const isDisabledDate = this.readonly || isDisabled(date, minDate, maxDate);
+            const isFocused = focusedDate !== undefined && PDate.compare(date, focusedDate) === 0;
+            const partMarkers = ['day'];
+            if (isTodayDate)
+                partMarkers.push('day--today');
+            if (isSelectedDate)
+                partMarkers.push('day--selected');
+            if (isOutOfMonth)
+                partMarkers.push('day--out-of-month');
+            if (isDisabledDate)
+                partMarkers.push('day--disabled');
+            const ariaLabel = PDate.toLocaleString(date, locale, weekdayAriaLabelFormatter);
+            let fromRender = false;
+            let buttonRef;
+            if (isFocused) {
+                requestAnimationFrame(() => {
+                    const activeEl = this.el.shadowRoot?.activeElement;
+                    if (!(activeEl instanceof HTMLButtonElement) || activeEl.getAttribute('role') !== 'gridcell')
+                        return;
+                    fromRender = true;
+                    buttonRef?.focus();
+                });
+            }
+            return (h("button", { "data-debug-id": iso, role: "gridcell", type: "button", part: partMarkers.join(' '), tabIndex: isFocused ? 0 : -1, "aria-label": ariaLabel, "aria-selected": isSelectedDate ? 'true' : undefined, "aria-current": isTodayDate ? 'date' : undefined, "aria-disabled": isDisabledDate ? 'true' : undefined, onClick: () => {
+                    if (isDisabledDate || this.disabled)
+                        return;
+                    this.selectDate(date, { origin: 'calendar', closePopover: true });
+                }, ref: (e) => {
+                    buttonRef = e;
+                    if (isFocused)
+                        this.focusedButtonRef = e;
+                }, onFocus: (e) => {
+                    console.log('focus event on grid cell', iso, e.target);
+                    if (!this.el.shadowRoot?.contains(e.target))
+                        return;
+                    if (fromRender) {
+                        fromRender = false;
+                        return;
+                    }
+                    this.setFocusedDate(date);
+                }, key: iso }, date.day));
+        }))))));
+    }
+    render() {
+        const validationLabels = getValidationLabels(this.locale);
+        const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
+        return (h(Host, { key: 'df61136bb4d184e91e086a06f60e3c198f8a2b85' }, h("lmvz-input", { key: '04986afb4a0926df4da693de6210ee4fccd74bd7', ref: (el) => {
+                const wasUnset = !this.inputEl;
+                this.inputEl = el;
+                if (wasUnset && this.inputEl) {
+                    forceUpdate(this);
+                }
+            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.isInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: '47897492e6df2f4b303c99aa33c48f326f3d9d63', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), h("lmvz-popover", { key: 'd2904def9519907f56dada15df992800da77db55', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, h("div", { key: 'dbdfe38144a63e5ac9de4c46e0df9918f898de28', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
+    }
+    static get is() { return "lmvz-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-datepicker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${number}-${number}-${number}` | undefined",
+                    "resolved": "`${number}-${number}-${number}` | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date in ISO `YYYY-MM-DD` format."
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "visibleMonth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IsoYearMonthString | undefined",
+                    "resolved": "`${number}-${number}` | undefined",
+                    "references": {
+                        "IsoYearMonthString": {
+                            "location": "import",
+                            "path": "@lmvz-ds/lib-ts/date/IsoDateString.js",
+                            "id": "../../lib/ts/src/date/IsoDateString.d.ts::IsoYearMonthString",
+                            "referenceLocation": "IsoYearMonthString"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ISO year-month string (`YYYY-MM`) whose month is currently displayed.\nDefaults to the current month when unset."
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": false,
+                "attribute": "visible-month"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IsoDateString | undefined",
+                    "resolved": "`${number}-${number}-${number}` | undefined",
+                    "references": {
+                        "IsoDateString": {
+                            "location": "import",
+                            "path": "@lmvz-ds/lib-ts/date/IsoDateString.js",
+                            "id": "../../lib/ts/src/date/IsoDateString.d.ts::IsoDateString",
+                            "referenceLocation": "IsoDateString"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable date in ISO `YYYY-MM-DD` format.\nDays before this date are disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IsoDateString | undefined",
+                    "resolved": "`${number}-${number}-${number}` | undefined",
+                    "references": {
+                        "IsoDateString": {
+                            "location": "import",
+                            "path": "@lmvz-ds/lib-ts/date/IsoDateString.js",
+                            "id": "../../lib/ts/src/date/IsoDateString.d.ts::IsoDateString",
+                            "referenceLocation": "IsoDateString"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable date in ISO `YYYY-MM-DD` format.\nDays after this date are disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'de-CH'"
+                        }],
+                    "text": "BCP 47 locale tag used for weekday/month names, ARIA labels, and the default display format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'de-CH'"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "0 | 1",
+                    "resolved": "0 | 1",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "First day of the week: `0` = Sunday, `1` = Monday.\nMonday-first is hardcoded for v1; this prop is reserved for future runtime support."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week",
+                "defaultValue": "1"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the entire datepicker (input + panel) is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the datepicker is readonly. The text field cannot be typed into and the calendar cannot change the value,\nbut the value is still submitted with the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether a value is required for the form to be valid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name submitted with the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the composed text field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the composed text field. Defaults to the locale-derived display pattern (e.g. `dd.MM.yyyy`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the text field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message displayed below the text field when the value is invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the calendar popover is open. Reflects the actual open state \u2014 it is kept\nin sync with focus/keyboard interactions and with light-dismiss/Escape closing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Datepicker.DisplayFormat",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "Datepicker": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Datepicker",
+                            "referenceLocation": "Datepicker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom display-format pattern for the text field, using the tokens `yyyy`, `MM`, `dd`\n(e.g. `'dd.MM.yyyy'`). Defaults to a pattern derived from `locale`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-format"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focusedDate": {},
+            "valueDate": {},
+            "visibleMonthDate": {},
+            "inputText": {},
+            "hasUnparseableInput": {},
+            "isInvalid": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects a date (via the calendar grid or by typing a complete valid date).\nThe `value` field carries an IsoDateString representing the selected date."
+                },
+                "complexType": {
+                    "original": "{ value: IsoDateString | undefined }",
+                    "resolved": "{ value: `${number}-${number}-${number}` | undefined; }",
+                    "references": {
+                        "IsoDateString": {
+                            "location": "import",
+                            "path": "@lmvz-ds/lib-ts/date/IsoDateString.js",
+                            "id": "../../lib/ts/src/date/IsoDateString.d.ts::IsoDateString",
+                            "referenceLocation": "IsoDateString"
+                        }
+                    }
+                }
+            }, {
+                "method": "lmvzMonthChange",
+                "name": "lmvzMonthChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the displayed month changes via prev/next navigation.\nThe `visibleMonth` field carries an IsoYearMonthString representing the new month."
+                },
+                "complexType": {
+                    "original": "{ visibleMonth: IsoYearMonthString }",
+                    "resolved": "{ visibleMonth: `${number}-${number}`; }",
+                    "references": {
+                        "IsoYearMonthString": {
+                            "location": "import",
+                            "path": "@lmvz-ds/lib-ts/date/IsoDateString.js",
+                            "id": "../../lib/ts/src/date/IsoDateString.d.ts::IsoYearMonthString",
+                            "referenceLocation": "IsoYearMonthString"
+                        }
+                    }
+                }
+            }, {
+                "method": "lmvzOpen",
+                "name": "lmvzOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Forwarded from the internal popover: fired after the calendar panel opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzClose",
+                "name": "lmvzClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Forwarded from the internal popover: fired after the calendar panel closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the current value satisfies `required`/`min`/`max` and is a parseable date.\nUnlike a native `<input>`, form-associated custom elements do not forward `ElementInternals`'\nconstraint-validation API to the element automatically \u2014 this delegates to it explicitly.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports validation errors to the user (e.g. shows the browser's native validation bubble)\nand returns whether the current value is valid.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "required",
+                "methodName": "handleValidityRelevantPropChange"
+            }, {
+                "propName": "min",
+                "methodName": "handleValidityRelevantPropChange"
+            }, {
+                "propName": "max",
+                "methodName": "handleValidityRelevantPropChange"
+            }, {
+                "propName": "locale",
+                "methodName": "handleDisplayFormatChange"
+            }, {
+                "propName": "displayFormat",
+                "methodName": "handleDisplayFormatChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "handleInputFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleInputFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}