@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/date-picker/date-input.class.js

@@ -0,0 +1,704 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { FormAssociated } from '../../internal/form-associated.js';
+import { SET_ANCHORED_VALIDITY } from '../../internal/anchored-validity.js';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { closeIcon, calendarIcon } from '../../internal/icons.js';
+import { composedContains, deepActiveElement } from '../../internal/overlay-manager.js';
+import { dateTimeFormat, parseISO, formatISO, normalizeCalendarMonths, normalizeWeekdayFormat, } from './calendar-core.js';
+import { styles } from './date-input.styles.js';
+import { LyraDatePicker } from './date-picker.class.js';
+import './date-picker.class.js';
+/** Determines the locale's day/month/year field order from a real formatted
+ *  sample (Jan 2, 2026 -- a date where day/month/year are all numerically
+ *  distinguishable), instead of relying on Date.parse()'s implementation-defined
+ *  (commonly mm/dd/yyyy-biased) heuristics for an ambiguous separated date. */
+function localeDateOrder(locale) {
+    try {
+        const parts = new Intl.DateTimeFormat(locale || undefined, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        }).formatToParts(new Date(2026, 0, 2));
+        const order = parts
+            .filter((p) => p.type === 'day' || p.type === 'month' || p.type === 'year')
+            .map((p) => p.type);
+        return order.length === 3 ? order : ['month', 'day', 'year'];
+    }
+    catch {
+        return ['month', 'day', 'year']; // Date.parse()'s own bias, as a last-resort fallback
+    }
+}
+const monthsConverter = {
+    fromAttribute: normalizeCalendarMonths,
+    toAttribute: normalizeCalendarMonths,
+};
+const weekdayFormatConverter = {
+    fromAttribute: normalizeWeekdayFormat,
+    toAttribute: normalizeWeekdayFormat,
+};
+class LyraDateInputBase extends LyraElement {
+}
+/**
+ * `<lyra-date-input>` — a date field with an attached calendar popover.
+ * Mirrors the core `<wa-date-input>` API under `lyra-`. Value is ISO 8601
+ * (`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated.
+ *
+ * This component uses a single text field; typing accepts ISO or a
+ * locale-parseable date.
+ *
+ * @customElement lyra-date-input
+ * @event input - Fired on edits.
+ * @event change - Fired on committed date transitions.
+ * @event lyra-show / lyra-hide - Calendar popover lifecycle.
+ * @event lyra-clear - The clear button was used.
+ * @csspart form-control - The outer form-control wrapper.
+ * @csspart form-control-label - The label wrapper.
+ * @csspart input-wrapper - The input and button wrapper.
+ * @csspart input - The text input.
+ * @csspart clear-button - The clear control.
+ * @csspart expand-button - The calendar popup toggle.
+ * @csspart expand-icon - The calendar icon.
+ * @csspart popup - The positioned calendar popup.
+ * @csspart date-picker - The nested date picker.
+ * @csspart hint - The hint message.
+ * @csspart error - The validation message.
+ * @slot label - Custom label content.
+ * @slot error - Custom error content.
+ * @slot hint - Custom hint content.
+ */
+export class LyraDateInput extends FormAssociated(LyraDateInputBase) {
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        mode: { noAccessor: true },
+        min: { noAccessor: true },
+        max: { noAccessor: true },
+        readonly: { type: Boolean, reflect: true, noAccessor: true },
+        disablePast: { type: Boolean, attribute: 'disable-past', noAccessor: true },
+        disableFuture: { type: Boolean, attribute: 'disable-future', noAccessor: true },
+    }; }
+    constructor() {
+        super();
+        this.open = false;
+        this.withClear = false;
+        this.label = '';
+        this.hint = '';
+        this.errorText = '';
+        this.placeholder = '';
+        this.accessibleLabel = null;
+        this.locale = '';
+        this.months = 1;
+        this.firstDayOfWeek = 'auto';
+        this.weekdayFormat = 'short';
+        this.withOutsideDays = false;
+        /** Accessible label for the clear button. Override for a non-English `locale`. */
+        this.clearLabel = '';
+        /** Accessible label for the calendar-toggle button. Override for a non-English `locale`. */
+        this.openLabel = '';
+        /** Accessible name for the calendar popover dialog. Override for a non-English `locale`. */
+        this.dialogLabel = 'Choose date';
+        this.restorePopupFocusOnClose = false;
+        this.inputId = nextId('date-input');
+        this.popupId = nextId('date-popup');
+        // Set on the date input's first `blur`; gates the `data-invalid`
+        // reflection below so validity styling never flashes on first render.
+        this.touched = false;
+        // `[part]:empty` never matches — the part always contains a literal
+        // `<slot>` child element regardless of assigned content — so real
+        // emptiness is tracked in JS instead (same fix as lyra-stat's
+        // icon/caption) and reflected via `hidden`. Applies to
+        // `form-control-label` too: the required-asterisk `::after` attaches to
+        // that box, so leaving it always-visible orphans a stray ' *' when no
+        // `label` is set.
+        this.hasHintSlot = false;
+        this.hasErrorSlot = false;
+        this.hasLabelSlot = false;
+        this.validityRevision = 0;
+        this._mode = 'single';
+        this._min = '';
+        this._max = '';
+        this._readonly = false;
+        this._disablePast = false;
+        this._disableFuture = false;
+        this.typedBadInput = false;
+        /** Clock seam for temporal validity and deterministic day-boundary tests. */
+        this.now = () => new Date();
+        this.onVisibilityChange = () => {
+            if (this.ownerDocument.visibilityState !== 'visible')
+                return;
+            this.updateValidity();
+            this.validityRevision++;
+        };
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        this.onInputChange = (e) => {
+            const target = e.target;
+            const raw = target.value.trim();
+            if (!raw) {
+                // The mixin's value setter recomputes validity (updateValidity()),
+                // which clears any stale badInput state along the way.
+                this.value = '';
+                this.emit('input');
+                this.emit('change');
+                return;
+            }
+            const parsed = this.mode === 'range' ? this.parseRangeText(raw) : this.parseSingleText(raw);
+            if (parsed) {
+                this.value = parsed;
+                this.emit('input');
+                this.emit('change');
+            }
+            else {
+                // Unparseable text: don't silently keep the committed value while the
+                // field still shows garbage -- revert the display to the last commit
+                // and flag bad input. Parseable dates outside an active bound instead
+                // commit above and expose their precise range validity state.
+                target.value = this.displayText;
+                this.setTypedBadInput(true);
+                this.updateValidity();
+            }
+        };
+        this.onInputKey = (e) => {
+            if (e.altKey && e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.show();
+            }
+        };
+        // Attached to the whole form-control, not just the text input, so Escape
+        // closes the popover from anywhere inside it -- including the nested
+        // picker's own day/nav buttons, which take real DOM focus (roving
+        // tabindex) rather than the input keeping focus throughout.
+        this.onFormControlKey = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                e.preventDefault();
+                this.hide(true);
+            }
+        };
+        this.onInputBlur = () => {
+            this.touched = true;
+        };
+        this.onHintSlotChange = (e) => {
+            this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onErrorSlotChange = (e) => {
+            this.hasErrorSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onLabelSlotChange = (e) => {
+            this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        // The nested picker's `input` event isn't wired anywhere else, so without
+        // this listener it bubbles+composes straight through this shadow boundary
+        // (LyraElement.emit always dispatches bubbles:true, composed:true) and
+        // fires on this host a *second* time, on top of the explicit emit below.
+        this.onPickerInput = (e) => {
+            e.stopPropagation();
+            const picker = e.target;
+            this.value = picker.value;
+            this.emit('input');
+        };
+        this.onPickerChange = (e) => {
+            e.stopPropagation();
+            const picker = e.target;
+            this.value = picker.value;
+            this.emit('change');
+            // The picker only fires `change` once a selection is finalized (a single
+            // pick, or the second click of a range), so this is always the right
+            // moment to close, in either mode.
+            this.hide(true);
+        };
+        this.addEventListener('invalid', () => {
+            this.touched = true;
+        });
+    }
+    get mode() {
+        return this._mode;
+    }
+    set mode(next) {
+        const old = this._mode;
+        this._mode = next === 'range' ? 'range' : 'single';
+        this.updateValidity();
+        this.requestUpdate('mode', old);
+    }
+    get min() {
+        return this._min;
+    }
+    set min(next) {
+        const old = this._min;
+        this._min = next ?? '';
+        this.updateValidity();
+        this.requestUpdate('min', old);
+    }
+    get max() {
+        return this._max;
+    }
+    set max(next) {
+        const old = this._max;
+        this._max = next ?? '';
+        this.updateValidity();
+        this.requestUpdate('max', old);
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(next) {
+        const old = this._readonly;
+        this._readonly = Boolean(next);
+        this.toggleAttribute('readonly', this._readonly);
+        this.updateValidity();
+        this.requestUpdate('readonly', old);
+    }
+    get disablePast() {
+        return this._disablePast;
+    }
+    set disablePast(next) {
+        const old = this._disablePast;
+        this._disablePast = Boolean(next);
+        this.updateValidity();
+        this.requestUpdate('disablePast', old);
+    }
+    get disableFuture() {
+        return this._disableFuture;
+    }
+    set disableFuture(next) {
+        const old = this._disableFuture;
+        this._disableFuture = Boolean(next);
+        this.updateValidity();
+        this.requestUpdate('disableFuture', old);
+    }
+    get value() {
+        return super.value;
+    }
+    set value(next) {
+        this.setTypedBadInput(false);
+        super.value = this.normalizeCommittedValue(next ?? '');
+    }
+    setTypedBadInput(next) {
+        const old = this.typedBadInput;
+        this.typedBadInput = next;
+        if (old !== next)
+            this.requestUpdate('typedBadInput', old);
+    }
+    parseStrictISO(value) {
+        if (!/^\d{4}-\d{2}-\d{2}$/.test(value))
+            return null;
+        return parseISO(value);
+    }
+    normalizeCommittedValue(value) {
+        if (value === '')
+            return '';
+        const parts = value.split('/');
+        if (parts.length !== 1 && parts.length !== 2)
+            return '';
+        const dates = parts.map((part) => this.parseStrictISO(part));
+        if (dates.some((date) => date === null))
+            return '';
+        if (parts.length === 2 && dates[0] > dates[1])
+            return `${parts[1]}/${parts[0]}`;
+        return value;
+    }
+    valueDates(value) {
+        const parts = value.split('/');
+        const expectedParts = this.mode === 'range' ? 2 : 1;
+        if (parts.length !== expectedParts)
+            return null;
+        const dates = parts.map((part) => this.parseStrictISO(part));
+        return dates.some((date) => date === null) ? null : dates;
+    }
+    updateValidity() {
+        if (this.readonly) {
+            this[SET_ANCHORED_VALIDITY]({});
+            return;
+        }
+        const flags = {};
+        let underflowMessage = '';
+        let overflowMessage = '';
+        if (this.required && this.value === '')
+            flags.valueMissing = true;
+        if (this.typedBadInput)
+            flags.badInput = true;
+        if (this.value !== '') {
+            const dates = this.valueDates(this.value);
+            if (!dates) {
+                flags.badInput = true;
+            }
+            else {
+                const min = this.parseStrictISO(this.min);
+                const max = this.parseStrictISO(this.max);
+                const today = this.now();
+                today.setHours(0, 0, 0, 0);
+                if (min !== null && dates.some((date) => date < min)) {
+                    flags.rangeUnderflow = true;
+                    underflowMessage = `Date must be on or after ${this.min}.`;
+                }
+                if (this.disablePast && dates.some((date) => date < today)) {
+                    flags.rangeUnderflow = true;
+                    underflowMessage ||= 'Date cannot be in the past.';
+                }
+                if (max !== null && dates.some((date) => date > max)) {
+                    flags.rangeOverflow = true;
+                    overflowMessage = `Date must be on or before ${this.max}.`;
+                }
+                if (this.disableFuture && dates.some((date) => date > today)) {
+                    flags.rangeOverflow = true;
+                    overflowMessage ||= 'Date cannot be in the future.';
+                }
+            }
+        }
+        let message = '';
+        if (flags.badInput)
+            message = 'Enter a valid date.';
+        else if (flags.rangeUnderflow)
+            message = underflowMessage;
+        else if (flags.rangeOverflow)
+            message = overflowMessage;
+        else if (flags.valueMissing)
+            message = 'Please fill out this field.';
+        this[SET_ANCHORED_VALIDITY](flags, message);
+    }
+    checkValidity() {
+        this.updateValidity();
+        return super.checkValidity();
+    }
+    reportValidity() {
+        this.updateValidity();
+        return super.reportValidity();
+    }
+    get displayText() {
+        const parts = this.value.split('/');
+        const from = parseISO(parts[0] ?? '');
+        const to = parseISO(parts[1] ?? '');
+        if (!from)
+            return '';
+        const formatter = dateTimeFormat(this.locale, {});
+        const fmt = (d) => formatter.format(d);
+        return this.mode === 'range' && to ? `${fmt(from)} – ${fmt(to)}` : fmt(from);
+    }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasHintSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'hint');
+            this.hasErrorSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'error');
+            this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                if (!this.popupTrigger) {
+                    const active = deepActiveElement(this.ownerDocument);
+                    this.popupTrigger = active && typeof active.focus === 'function' ? active : undefined;
+                }
+                this.ownerDocument.addEventListener('pointerdown', this.onDocPointer);
+            }
+            else {
+                this.ownerDocument.removeEventListener('pointerdown', this.onDocPointer);
+                const active = deepActiveElement(this.ownerDocument);
+                const popup = this.renderRoot.querySelector('[part="popup"]');
+                const restoreFocus = this.restorePopupFocusOnClose || (popup !== null && composedContains(popup, active));
+                const trigger = this.popupTrigger;
+                this.popupTrigger = undefined;
+                this.restorePopupFocusOnClose = false;
+                if (restoreFocus && trigger?.isConnected)
+                    trigger.focus();
+            }
+        }
+    }
+    /** Open the calendar popover. */
+    show() {
+        if (this.open || this.effectiveDisabled || this.readonly)
+            return;
+        this.open = true;
+        this.emit('lyra-show');
+    }
+    /** Close the calendar popover. */
+    hide(restoreFocus = false) {
+        if (!this.open)
+            return;
+        this.restorePopupFocusOnClose ||= restoreFocus;
+        this.open = false;
+        this.emit('lyra-hide');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ownerDocument.addEventListener('visibilitychange', this.onVisibilityChange);
+    }
+    /** Clear the value. */
+    clear() {
+        // Matches how `onInputBlur` already flips this on the first blur -- an
+        // explicit user-initiated clear() is itself an interaction, so a
+        // required-and-now-empty field must surface its invalid state right
+        // away instead of silently looking valid until some later blur.
+        this.touched = true;
+        this.value = '';
+        this.emit('input');
+        this.emit('change');
+        this.emit('lyra-clear');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupFn?.();
+        this.cleanupFn = undefined;
+        this.ownerDocument.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this.ownerDocument.removeEventListener('pointerdown', this.onDocPointer);
+        this.popupTrigger = undefined;
+        this.restorePopupFocusOnClose = false;
+        // Reset so a reconnect (e.g. a drag-drop reparent) re-triggers
+        // `updated()`'s `open`-driven branch -- without this, `open` stays
+        // stuck `true` across the disconnect, `updated()` never sees it
+        // *change*, and `place()` never gets called again to re-bind
+        // positioning to the (possibly relocated) anchor.
+        this.open = false;
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            this.cleanupFn?.();
+            this.cleanupFn = undefined;
+            if (this.open) {
+                const anchor = this.renderRoot.querySelector('[part="input-wrapper"]');
+                const popup = this.renderRoot.querySelector('[part="popup"]');
+                if (anchor && popup)
+                    this.cleanupFn = place(anchor, popup);
+            }
+        }
+        if (changed.has('touched') ||
+            changed.has('required') ||
+            changed.has('value') ||
+            changed.has('mode') ||
+            changed.has('min') ||
+            changed.has('max') ||
+            changed.has('readonly') ||
+            changed.has('disablePast') ||
+            changed.has('disableFuture') ||
+            changed.has('typedBadInput') ||
+            changed.has('validityRevision')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
+    }
+    /** Parses one date, ISO-first (so a calendar-invalid ISO string like
+     *  "2026-02-30" is rejected rather than silently rolled over by Date.parse()).
+     *  A 3-part, ambiguous slash/dot/dash-separated date (e.g. "15/07/2026") is
+     *  parsed according to the locale's own day/month/year order (via a real
+     *  Intl.DateTimeFormat sample, see localeDateOrder()) rather than
+     *  Date.parse()'s implementation-defined heuristics -- this is what prevents
+     *  e.g. an en-GB "15/07/2026" from being silently misread as some other day.
+     *  A 4-digit first group (e.g. "2026-7-15") is never locale-guessed, though:
+     *  it's unambiguously a year regardless of locale/separator (ISO's own
+     *  year-first convention, just without zero-padding), so it's routed
+     *  straight through parseISO() instead -- this is what lets a non-padded
+     *  ISO-ish date keep parsing correctly (it did via Date.parse() before the
+     *  ambiguous-date regex below existed at all).
+     *  Anything else (e.g. "July 15, 2026") still falls through to Date.parse(). */
+    parseOneDate(raw) {
+        const looksLikeISO = /^\d{4}-\d{2}-\d{2}$/.test(raw);
+        if (looksLikeISO)
+            return parseISO(raw);
+        const ambiguous = /^(\d{1,4})[/.-](\d{1,4})[/.-](\d{1,4})$/.exec(raw);
+        if (ambiguous) {
+            const [, g1, g2, g3] = ambiguous;
+            if (g1.length === 4) {
+                return parseISO(`${g1}-${g2.padStart(2, '0')}-${g3.padStart(2, '0')}`);
+            }
+            const order = localeDateOrder(this.locale);
+            const values = [Number(g1), Number(g2), Number(g3)];
+            const fields = {};
+            order.forEach((type, i) => {
+                fields[type] = values[i];
+            });
+            if (fields.day != null && fields.month != null && fields.year != null) {
+                const year = fields.year < 100 ? 2000 + fields.year : fields.year;
+                return parseISO(`${String(year).padStart(4, '0')}-${String(fields.month).padStart(2, '0')}-${String(fields.day).padStart(2, '0')}`);
+            }
+        }
+        return isNaN(Date.parse(raw)) ? null : new Date(Date.parse(raw));
+    }
+    parseSingleText(raw) {
+        const parsed = this.parseOneDate(raw);
+        return parsed ? formatISO(parsed) : null;
+    }
+    /** Only round-trips the exact `displayText` shape this component itself
+     *  renders (`"<locale from> – <locale to>"`) — a raw ISO range typed
+     *  directly (`"2026-05-01/2026-05-15"`) is also accepted as a convenience.
+     *  A reversed typed range (`to` before `from`) is normalized into
+     *  from-before-to order, matching what the date-picker's own UI-driven
+     *  `commit()` already does for a UI-picked range. */
+    parseRangeText(raw) {
+        if (/^\d{4}-\d{2}-\d{2}\/\d{4}-\d{2}-\d{2}$/.test(raw)) {
+            const [a, b] = raw.split('/');
+            const from = parseISO(a);
+            const to = parseISO(b);
+            if (!from || !to)
+                return null;
+            return from <= to ? raw : `${b}/${a}`;
+        }
+        const separator = ' – '; // matches displayText's ` – ` join exactly
+        const idx = raw.indexOf(separator);
+        if (idx === -1)
+            return null;
+        const from = this.parseOneDate(raw.slice(0, idx).trim());
+        const to = this.parseOneDate(raw.slice(idx + separator.length).trim());
+        if (!from || !to)
+            return null;
+        return from <= to ? `${formatISO(from)}/${formatISO(to)}` : `${formatISO(to)}/${formatISO(from)}`;
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.value = typeof state === 'string' ? state : '';
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        this.touched = false;
+    }
+    render() {
+        const hasValue = this.value.length > 0;
+        const hasHint = this.hasHintSlot || this.hint.length > 0;
+        const hasError = this.hasErrorSlot || this.errorText.length > 0;
+        const hasLabel = this.hasLabelSlot || this.label.length > 0;
+        const invalid = this.touched && !this.internals.validity.valid;
+        const describedBy = [hasError ? 'date-input-error' : '', hasHint ? 'date-input-hint' : '']
+            .filter(Boolean)
+            .join(' ');
+        return html `
+      <div part="form-control" @keydown=${this.onFormControlKey}>
+        <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
+          ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
+        </label>
+        <div part="input-wrapper">
+          <input
+            id=${this.inputId}
+            part="input"
+            type="text"
+            aria-label=${this.accessibleLabel || (hasLabel ? nothing : this.placeholder || 'Date')}
+            aria-describedby=${describedBy || nothing}
+            aria-required=${this.required ? 'true' : 'false'}
+            aria-invalid=${invalid ? 'true' : 'false'}
+            .value=${this.displayText}
+            placeholder=${this.placeholder}
+            ?required=${this.required}
+            ?disabled=${this.effectiveDisabled}
+            ?readonly=${this.readonly}
+            @change=${this.onInputChange}
+            @keydown=${this.onInputKey}
+            @blur=${this.onInputBlur}
+          />
+          ${this.withClear && hasValue
+            ? html `<button
+                part="clear-button"
+                type="button"
+                ?disabled=${this.effectiveDisabled || this.readonly}
+                aria-label=${this.localize('clear', this.clearLabel || undefined)}
+                @click=${() => this.clear()}
+              >
+                ${closeIcon()}
+              </button>`
+            : ''}
+          <button
+            part="expand-button"
+            type="button"
+            aria-label=${this.localize('openCalendar', this.openLabel || undefined)}
+            aria-haspopup="dialog"
+            aria-expanded=${this.open ? 'true' : 'false'}
+            aria-controls=${this.popupId}
+            ?disabled=${this.effectiveDisabled || this.readonly}
+            @click=${() => (this.open ? this.hide() : this.show())}
+          >
+            <span part="expand-icon" aria-hidden="true">${calendarIcon()}</span>
+          </button>
+        </div>
+        <div id=${this.popupId} part="popup" role="dialog" aria-label=${this.dialogLabel}>
+          <lyra-date-picker
+            part="date-picker"
+            .value=${this.value}
+            .mode=${this.mode}
+            .min=${this.min}
+            .max=${this.max}
+            .months=${normalizeCalendarMonths(this.months)}
+            .locale=${this.locale}
+            .disabled=${this.effectiveDisabled}
+            .readonly=${this.readonly}
+            .disablePast=${this.disablePast}
+            .disableFuture=${this.disableFuture}
+            .withOutsideDays=${this.withOutsideDays}
+            first-day-of-week=${this.firstDayOfWeek}
+            .weekdayFormat=${normalizeWeekdayFormat(this.weekdayFormat)}
+            @input=${this.onPickerInput}
+            @change=${this.onPickerChange}
+          ></lyra-date-picker>
+        </div>
+        <div id="date-input-error" part="error" ?hidden=${!hasError}>
+          ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
+        </div>
+        <div id="date-input-hint" part="hint" ?hidden=${!hasHint}>
+          ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraDateInput.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'with-clear' })
+], LyraDateInput.prototype, "withClear", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "hint", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], LyraDateInput.prototype, "errorText", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], LyraDateInput.prototype, "accessibleLabel", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "locale", void 0);
+__decorate([
+    property({ converter: monthsConverter })
+], LyraDateInput.prototype, "months", void 0);
+__decorate([
+    property({ attribute: 'first-day-of-week' })
+], LyraDateInput.prototype, "firstDayOfWeek", void 0);
+__decorate([
+    property({ attribute: 'weekday-format', converter: weekdayFormatConverter })
+], LyraDateInput.prototype, "weekdayFormat", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'with-outside-days' })
+], LyraDateInput.prototype, "withOutsideDays", void 0);
+__decorate([
+    property({ attribute: 'clear-label' })
+], LyraDateInput.prototype, "clearLabel", void 0);
+__decorate([
+    property({ attribute: 'open-label' })
+], LyraDateInput.prototype, "openLabel", void 0);
+__decorate([
+    property({ attribute: 'dialog-label' })
+], LyraDateInput.prototype, "dialogLabel", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "touched", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "hasHintSlot", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "hasErrorSlot", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "hasLabelSlot", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "validityRevision", void 0);
+//# sourceMappingURL=date-input.class.js.map