@aceshooting/lyra-ui 2.1.0 → 2.2.0

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

@@ -1,677 +1,6 @@
-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';
+export * from './date-input.class.js';
+import { LyraDateInput } from './date-input.class.js';
 import { defineElement } from '../../internal/prefix.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.js';
-import './date-picker.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,
-};
-/**
- * `<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.
- *
- * v1 uses a single text field (locale-segmented spinbuttons are a future
- * enhancement); 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(LyraElement) {
-    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 = 'Clear';
-        /** Accessible label for the calendar-toggle button. Override for a non-English `locale`. */
-        this.openLabel = 'Open calendar';
-        /** 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, commit 6c1004c) 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._mode = 'single';
-        this._min = '';
-        this._max = '';
-        this._readonly = false;
-        this._disablePast = false;
-        this._disableFuture = false;
-        this.typedBadInput = false;
-        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 = new Date();
-                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);
-    }
-    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');
-    }
-    /** 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('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')) {
-            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.clearLabel}
-                @click=${() => this.clear()}
-              >
-                ${closeIcon()}
-              </button>`
-            : ''}
-          <button
-            part="expand-button"
-            type="button"
-            aria-label=${this.openLabel}
-            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);
+import "./date-picker.js";
 defineElement('date-input', LyraDateInput);
+//# sourceMappingURL=date-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-input.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,kBAAkB,CAAC;AAC1B,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC"}

package/dist/components/date-picker/date-input.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=date-input.styles.d.ts.map