import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type WeekdayFormat}from'./calendar-core.js';import type{LyraAppearance,LyraSize}from'../../../internal/variants.js';import type{LyraSelectionDirection}from'../../../internal/shared-unions.js';import{type DateRange,type LyraDatePickerDayContent,type LyraDatePickerDisabledDates,type LyraDatePickerFirstDayOfWeek,type LyraDatePickerPageBy,type LyraDateRangePreset}from'./date-picker.class.js';import'./date-picker.class.js';export type LyraDateInputSelectionDirection=LyraSelectionDirection;export type LyraDateInputPlacement='top'|'top-start'|'top-end'|'right'|'right-start'|'right-end'|'bottom'|'bottom-start'|'bottom-end'|'left'|'left-start'|'left-end'; /** Source-compatible date-input name for the shared picker weekday vocabulary. */ export type LyraDateInputFirstDayOfWeek=LyraDatePickerFirstDayOfWeek;export type LyraDateInputValidatorResult=void|boolean|string|ValidityStateFlags; /** Result shape accepted from object validators used by the upstream form-control contract. */ export interface LyraDateInputObjectValidatorResult{message:string;isValid:boolean;invalidKeys:Exclude[];} /** Structural compatibility shape for an object validator. The `never` callback input is * intentional: it lets an array typed by another custom-element package remain assignable while * Lyra invokes the callback with this host at runtime. Author new Lyra validators with the * strongly typed function or `validate()` branches of {@linkcode LyraDateInputValidator}. */ export interface LyraDateInputObjectValidator{ /** Host attributes that trigger a fresh validity check when they change. */ observedAttributes?:string[];checkValidity:(input:never)=>LyraDateInputObjectValidatorResult;message?:string|((input:never)=>string);}export type LyraDateInputValidator=((value:string,input:LyraDateInput)=>LyraDateInputValidatorResult)|{validate(value:string,input:LyraDateInput):LyraDateInputValidatorResult;}|LyraDateInputObjectValidator;export interface LyraDateInputEventMap{'lr-invalid':CustomEvent;'lr-show':CustomEvent;'lr-after-show':CustomEvent;'lr-hide':CustomEvent;'lr-after-hide':CustomEvent;'lr-clear':CustomEvent;input:InputEvent;change:Event;blur:FocusEvent;focus:FocusEvent;}declare class LyraDateInputBase extends LyraElement{}declare const LyraDateInput_base:typeof LyraDateInputBase&(new(...args:any[])=>import("../../../lyra.js").FormAssociatedInterface &import("../../../internal/form-associated.js").FormAssociatedSubclassInterface); /** * `` — a date field with an attached calendar popover. * Mirrors the core `` API under `lr-`. Value is ISO 8601 * (`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated. * The ISO model is explicitly proleptic Gregorian for every locale. Display uses locale digits * and `Intl.DateTimeFormat.formatRange()`; parsing normalizes those digits and bidi marks so the * component's own Arabic/Persian presentation always round-trips to the same ISO value. * * This component uses a single text field; typing accepts ISO or a * locale-parseable date. Enter commits the typed text and then performs the implicit form * submission a native `` would (see `internal/submit-on-enter.ts` — the internal input is * in a shadow root and has no form owner, so the platform can never do it here); the commit runs * first so the submitted value is the date the field visibly shows. * That text field is also the popup-opening `role="combobox"` owner, with explicit * `aria-haspopup`, `aria-controls`, and `aria-expanded`; the adjacent button remains an equivalent * pointer/keyboard toggle rather than carrying the only popup relationship. * * `size` uses the same `2xs`–`xl` scale as `lr-input`/`lr-select`/`lr-combobox`'s own `size`, * default `m`. The calendar-toggle and clear buttons fit within the selected control height * while retaining a 24px target. The smallest tiers can grow to accommodate that minimum. * In a constrained row the editable input shrinks first, while each public `start`/`end` * adornment is capped at 40% so unbroken consumer content cannot widen the field. * * Host aria-describedby targets in the host root resolve onto the native combobox input before * its local error and hint guidance, and follow target replacement, reconnect, and adoption. * * @customElement lr-date-input * @event {InputEvent} input - Fired on edits as a bubbling, composed, non-cancelable native event. * @event {Event} change - Fired on committed date transitions as a bubbling, composed, * non-cancelable native event. * @event lr-show - Fired before the calendar popover opens; cancelable. * @event lr-after-show - The calendar popover finished opening. * @event lr-hide - Fired before the calendar popover closes; cancelable. * @event lr-after-hide - The calendar popover finished closing. * @event lr-clear - The clear button was used. * @event {FocusEvent} blur - Re-dispatched from the internal ``'s own `blur` as a bubbling, * composed, non-cancelable event, unlike the native event. * @event {FocusEvent} focus - Re-dispatched from the internal ``'s own `focus` as a * bubbling, composed, non-cancelable event, unlike the native event. * @event lr-invalid - The date input failed a validity check; cancelable. Calling * `preventDefault()` also cancels the native `invalid` event it aliases, suppressing the * browser's own validation bubble and `reportValidity()`'s focus/scroll. * @csspart date-input - The date-input wrapper. * @csspart base - Permanent compatibility name for the nested base wrapper. * @csspart form-control - The outer form-control wrapper. * @csspart form-control-label - The outer label wrapper. * @csspart label - Permanent compatibility name for the inner label-content wrapper. * @csspart form-control-input - The editable date surface. * @csspart input-wrapper - The input and button wrapper. * @csspart input - The text input. * @csspart segment - The editable date segment wrapper. * @csspart segment-literal - A literal inside the editable date surface. * @csspart range-separator - The range separator. * @csspart start - Wrapper around the `start` adornment slot; `hidden` while nothing is slotted. * @csspart end - Wrapper around the `end` adornment slot; `hidden` while nothing is slotted. * @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 presets - The nested picker's quick-range row, forwarded from ``. * @csspart preset-button - One quick-range button, forwarded from ``. * @csspart hint - The hint message. * @csspart error - The validation message. * @cssprop [--lr-date-input-padding-block=var(--lr-form-control-padding-block)] - Text input block padding, scaled by `size`. * @cssprop [--lr-date-input-padding-inline=var(--lr-form-control-padding-inline)] - Inline padding of the input row, scaled by `size`. * @cssprop [--lr-date-input-font-size=var(--lr-form-control-font-size)] - Font size of the text input, scaled by `size`. * @cssprop [--lr-date-input-placeholder-color=var(--lr-color-text-quiet)] - Placeholder text color. * @cssprop [--lr-date-input-gap=var(--lr-space-xs)] - Gap between input-row children. * @cssprop [--lr-date-input-radius=var(--lr-radius)] - Input-row corner radius. `pill` changes its * private default to `--lr-radius-pill`; an inherited or direct public value still wins. * @cssprop [--lr-date-input-focus-border-color=var(--lr-color-brand)] - Focused row border color. * @cssprop [--lr-date-input-action-hover-color=var(--lr-color-text)] - Clear/calendar action color on hover. * @cssprop [--lr-date-input-action-hover-bg=transparent] - Clear/calendar action background on hover. * @cssprop [--lr-date-input-action-hover-radius=var(--lr-date-input-radius)] - Clear/calendar action corner radius on hover. * @cssprop [--lr-date-input-action-active-color=var(--lr-date-input-action-hover-color,var(--lr-color-text))] - Clear/calendar action color while pressed. * @cssprop [--lr-date-input-action-active-bg=color-mix(...)] - Clear/calendar action background while pressed. * @cssprop [--lr-date-input-action-active-radius=var(--lr-date-input-radius)] - Clear/calendar action corner radius while pressed. * @cssprop [--lr-date-input-control-min-height=var(--lr-form-control-height)] - Minimum block size * of the input row, read from the shared form-control height ladder so retuning * `--lr-theme-form-control-height-*` moves this control and every sibling field together. * The smallest tiers can grow to fit the action buttons' 24px minimum and row borders. * @cssprop --lr-date-input-control-height - Exact block size of the input row. Undeclared by * default, so the row grows to fit its content (floored by `--lr-date-input-control-min-height`). * Set it to pin a fixed height; the calendar toggle keeps its own 24x24 touch target even when * this pins a shorter row. * @cssprop [--show-duration=var(--lr-transition-fast)] - Popup enter-transition duration. * @cssprop [--hide-duration=var(--lr-transition-fast)] - Popup exit-transition duration. * @cssprop [--lr-date-input-fill=var(--lr-color-surface)] - Resting background of the input row. * The `filled`/`filled-outlined` treatments default it to `--lr-color-surface-raised`; a value set * here wins over every treatment. * @cssprop [--lr-date-input-border-color=var(--lr-color-border)] - Resting border color of the * input row, `transparent` by default on the `filled` treatment. * @cssprop [--lr-form-control-focus-shadow=none] - The shared field focus halo, painted as a * `box-shadow` while this control is focused. One name for every field-shaped control in the * library, so a halo is configured once rather than per component. Additive: the focus outline and * border cue are the accessibility answer to focus and are never replaced by it. * @cssprop [--lr-form-control-required-content=' *'] - The required-field marker rendered after the * label. Set it to `''` to suppress the marker, or to any other quoted string (`' (required)'`, a * localized word) to replace it. Caller-supplied content, so it is never localized here. * @cssprop [--lr-form-control-required-color=var(--lr-color-danger)] - Color of that marker, * retunable without touching any other danger-coloured surface. * @cssprop [--lr-form-control-required-offset=0] - Inline space between the label text and the * marker. * @slot label - Custom label content. * @slot hint - Custom hint content. * @slot start - Adornment at the inline-start of the input row, before the text field. * @slot end - Adornment after the text field and the built-in clear action, and before the * calendar toggle — so consumer content never sits outboard of the calendar button. * @slot clear-icon - Replaces the clear icon. * @slot expand-icon - Replaces the calendar icon. * @slot previous-icon - Replaces the previous-month icon in the calendar. * @slot next-icon - Replaces the next-month icon in the calendar. * @slot footer - Calendar footer content. * @slot day-YYYY-MM-DD - Content for an individual ISO calendar day. * @slot error - Lyra extension for custom validation markup. * @cssstate blank - Matches while the committed value is empty. * @cssstate disabled - Matches while disabled directly or through an ancestor fieldset. * @cssstate open - Matches while the calendar popover is open. * @cssstate range - Matches while `mode="range"` is active. * @cssprop --lr-positioning-strategy - Cascading `absolute`/`fixed` override for the calendar * popup's `fixed` default, read from computed style when it is (re)positioned. Set it once on * `:root`, a theme, or one clipping ancestor to change every unset date input beneath it; an * unrecognized value falls back to `fixed`. * @status experimental * @since 4.0.0 */ export declare class LyraDateInput extends LyraDateInput_base{static styles:import("lit").CSSResultGroup[];static properties:{mode:{reflect:boolean;noAccessor:boolean;};min:{reflect:boolean;noAccessor:boolean;};max:{reflect:boolean;noAccessor:boolean;};readonly:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disablePast:{type:BooleanConstructor;attribute:string;reflect:boolean;noAccessor:boolean;};disableFuture:{type:BooleanConstructor;attribute:string;reflect:boolean;noAccessor:boolean;};};appearance:Extract; /** Whether the calendar popup is open. Disabled or readonly controls reject direct reopen * attempts, including the synchronous fieldset cascade before its callback runs. */ get open():boolean;set open(next:boolean);withClear:boolean;withHint:boolean;withLabel:boolean; /** Visual size — the library-wide `2xs`–`xl` ladder shared with * `lr-input`/`lr-select`/`lr-combobox`. `'2xs'` is the tightest tier, for dense * toolbar-embedded fields. The Web Awesome / Shoelace spellings `small`/`medium`/`large` are * accepted for `s`/`m`/`l`, so a migration is a tag rename with no attribute rewrite. */ size:LyraSize; /** Rounds the input row's corners to a full pill, mirroring `lr-input`'s own `pill`. It is a * single override of `--lr-date-input-radius`, so a consumer setting that property directly * still wins for a bespoke shape. */ pill:boolean;label:string;hint:string;errorText:string;placeholder:string; /** Forwarded to the internal ``'s own `spellcheck`. Defaults to `true`, matching the * native element's own default. Uses {@link spellcheckConverter} rather than Lit's default * presence-based `type: Boolean` converter -- see that converter's doc comment. A bare * `.spellcheck` property binding can still turn this off with `spellcheck="false"`; a Lit * template can do the same with either that attribute string or a `.spellcheck=${false}` * binding. */ spellcheck:boolean; /** Forwarded to the internal ``'s own `autocapitalize`. Empty string omits the * attribute (browser default). */ autocapitalize:string; /** Forwarded to the internal ``'s own `autocorrect` (Safari/WebKit-specific). Empty * string omits the attribute (browser default). * Named `autoCorrect` (capital `C`), not `autocorrect`, purely to dodge a TS `lib.dom.d.ts` * collision: newer DOM typings declare a `boolean`-typed `HTMLElement.autocorrect` IDL member, * which conflicts with this component's `string`-typed property of the same name. The explicit * attribute mapping preserves the standard lowercase `autocorrect` wire name in both Lit and * generated component metadata. */ autoCorrect:string; /** Forwarded to the internal date text input. Empty strings preserve the browser default. */ autocomplete:string;inputMode:string;enterKeyHint:string; /** Overrides the internal ``'s computed accessible name. Wins over * `label`/`placeholder`/the localized `date` fallback in that order -- * see the `aria-label` binding in `render()`. Attribute-reflects from a * host-level `aria-label` so a plain-markup consumer gets ARIA-name * forwarding without setting a JS property. */ accessibleLabel:string|null;locale:string;months:1|2;firstDayOfWeek:LyraDateInputFirstDayOfWeek;weekdayFormat:WeekdayFormat; /** * Quick-range options forwarded verbatim to the nested ``; see that component's * own `presets` doc for the semantics. Range mode only, and unset renders nothing. * * Forwarded rather than reimplemented: the picker lives in this component's shadow root, so a * consumer has no route to it -- a CSS part cannot set a JS property -- and this compact * text-field-plus-popover shape is the one a dashboard time filter actually uses. */ presets:readonly LyraDateRangePreset[];private _appliedPreset?; /** * The preset whose button produced the current `value`, or `undefined` when the value was picked * on the calendar, typed into the field, cleared, or reset. Read it inside your own * `change`/`input` handler. * * Mirrors the nested ``'s own `appliedPreset` across this shadow boundary, * because the readback is what the compact popover shape needs most: a dashboard filter has to * persist WHICH preset is active rather than the pair it froze to -- "Last 7 days" must still * mean the last 7 days after tomorrow's reload. That fact is not recoverable from `value`: * re-deriving it by string-matching is the mapping table `presets` exists to delete, and it is * ambiguous anyway (Today and This month coincide on the 1st of a month, and a hand-picked range * can equal a preset's pair by construction). The picker instance itself is unreachable from * outside -- a CSS part cannot yield it -- so a consumer cannot read it there. * * A property rather than an event detail, for the same reason it is one on the picker: * `input`/`change` here are NATIVE events, deliberately indistinguishable from a manual * selection so existing handlers need no special case, and a native Event cannot carry a detail * without changing its type. The mirror is updated before those events are relayed, so a handler * reading it observes the preset that caused the very commit it is handling; it is `undefined` * while the popover has never been opened, since no preset button has run. */ get appliedPreset():LyraDateRangePreset|undefined;withOutsideDays:boolean;withWeekNumbers:boolean;disabledDates:LyraDatePickerDisabledDates;disabledDaysOfWeek:string; /** Optional JavaScript predicate that disables matching calendar dates. */ isDateDisabled?:(date:Date)=>boolean; /** Optional JavaScript renderer for individual calendar-day content. */ dayContent?:LyraDatePickerDayContent;minRange:number;maxRange:number;pageBy:LyraDatePickerPageBy;today:string;distance:number;placement:LyraDateInputPlacement; /** Event names that mark the control as user-interacted for `:state(user-*)` styling. */ assumeInteractionOn:string[]; /** Additional JavaScript validators run after the intrinsic date constraints. Accepts a * function, an object with `validate(value, input)`, or the mapped object-validator shape with * `checkValidity(input)` and `{ isValid, message, invalidKeys }` results. Object validators can * list host `observedAttributes` that should trigger live revalidation. */ validators:LyraDateInputValidator[]; /** Accessible label for the clear button. Omitted copy localizes; explicit text, * including the built-in English label or an empty string, wins verbatim. * @default '' */ clearLabel:string;private clearLabelAuthored; /** Accessible label for the calendar-toggle button. Omitted copy localizes; explicit text, * including the built-in English label or an empty string, wins verbatim. * @default '' */ openLabel:string;private openLabelAuthored; /** Accessible label for the calendar popover dialog. Omitted copy localizes; explicit text, * including the built-in English label or an empty string, wins verbatim. * @default 'Choose date' */ dialogLabel:string;private dialogLabelAuthored;private inputElement?;private validationTargetOverride?; /** Raw text the Enter key already committed, or `null`. Lets `onInputChange()` recognise -- and * ignore -- the native `change` the browser fires for that very same keystroke, which would * otherwise re-commit the identical text and emit a second `input`/`change` pair. */ private enterCommittedText; /** Whether the internal text field already relayed the native input event for the edit that is * about to commit. Synthetic test/integration changes can arrive without a preceding input; * those receive one generated InputEvent so every committed transition keeps the same public * input/change sequence without duplicating real browser input events. */ private inputRelayedSinceCommit;private cleanupFn?;private pointerListenerDocument?;private pointerListener?;private visibilityListenerDocument?;private visibilityListener?;private overlayHandle?;private restorePopupFocusOnClose;private transitionToken;private transitionWaiters;private interactionListeners;private validatorAttributeObserver?;private localDescriptionIds;private externalDescription?;private inputId;private popupId;private touched;static get observedAttributes():string[];constructor();private hasHintSlot;private hasErrorSlot;private hasLabelSlot;private hasStartSlot;private hasEndSlot;private validityRevision;private _mode;private _min;private _max;private _open;private _readonly;private _disablePast;private _disableFuture;private typedBadInput; /** Clock seam for temporal validity and deterministic day-boundary tests. */ private now;get mode():'single'|'range';set mode(next:'single'|'range');get min():string;set min(next:string);get max():string;set max(next:string);get readonly():boolean;set readonly(next:boolean);get disabled():boolean;set disabled(next:boolean);get disablePast():boolean;set disablePast(next:boolean);get disableFuture():boolean;set disableFuture(next:boolean); /** The underlying date text input for platform-specific integrations. */ get input():HTMLInputElement|undefined;get selectionStart():number|null;set selectionStart(value:number|null);get selectionEnd():number|null;set selectionEnd(value:number|null);get selectionDirection():LyraDateInputSelectionDirection|null;set selectionDirection(value:LyraDateInputSelectionDirection|null);get value():string;set value(next:string);get valueAsDate():Date|null;set valueAsDate(next:Date|null); /** Date-range projection of `value`; writes normalize reversed endpoints and remain event-silent. */ get valueAsRange():DateRange;set valueAsRange(next:DateRange); /** Native input used as the browser validation bubble's focus anchor. */ get validationTarget():HTMLElement|undefined;set validationTarget(next:HTMLElement|undefined); /** Clear consumer-supplied validity, then recompute intrinsic and configured validators. */ resetValidity():void;private setTypedBadInput;private parseStrictISO;private normalizeCommittedValue; /** A single ISO date committed while in range mode -- the shape the nested * picker's `commit()` produces after only the first click of a range pick * (`from` set, `to` still null). This is a normal, transient in-progress * selection, not a malformed value: it just hasn't picked up its second * endpoint yet. */ private isIncompleteRangeValue;private valueDates;private configuredDisabledDateKeys;private configuredDisabledWeekdays;private rangeLength;private validatorResult;protected updateValidity():void;checkValidity():boolean;reportValidity():boolean;private onVisibilityChange;private bindVisibilityListener;private unbindVisibilityListener;private get displayText();protected willUpdate(changed:PropertyValues):void; /** Synchronous disabled truth for public actions, including an ancestor fieldset cascade that * can precede `formDisabledCallback()` and the next rendered native `disabled` attribute. */ private get liveDisabled(); /** Open the calendar popover, unless the cancelable `lr-show` request is vetoed. */ show():Promise; /** Close the calendar popover, unless the cancelable `lr-hide` request is vetoed. */ hide(restoreFocus?:boolean):Promise;private onDocPointer;private bindDocumentPointer;private unbindDocumentPointer;private reconnectOpenPopup;private settleTransition;private waitForTransition;private resolveTransitionWaiters;connectedCallback():void; /** Clear the value. */ clear():void;private syncInteractionListeners;private syncValidatorAttributeObserver;private disconnectValidatorAttributeObserver;private syncCustomStates;disconnectedCallback():void;adoptedCallback():void;private syncExternalDescription;protected updated(changed:PropertyValues):void; /** Parses raw typed text and, if it resolves to a real date (or range), * commits it as the new value; otherwise reverts the field to the last * committed display text and flags bad input. Either branch keeps `value`, * form value, and validity in sync, which is what lets this double as both * the native ``'s `change` handler and the implementation of the * public `setRangeText()` editing method -- a programmatic edit of the same * underlying text needs the identical parse-or-revert contract. Returns * whether the text actually committed, so callers can decide whether to * emit `input`/`change` (only a real, user-driven edit does). */ private applyTypedText;private onInputChange;private onInput; /** 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(). */ private parseOneDate;private parseSingleText; /** Literal joining the start/end ranges for this locale's Gregorian numeric formatter. */ private localizedRangeSeparator; /** Only round-trips the exact `displayText` shape this component itself * renders (`" – "`) — 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. */ private parseRangeText;private onInputKey;private onInputBlur;private onInputFocus; /** Activate the internal date text input unless the form control is effectively disabled. */ click():void; /** Focus the internal date text input unless the form control is effectively disabled. */ focus(options?:FocusOptions):void; /** Blur the internal date text input. */ blur():void; /** Select all editable date text. */ select():void; /** Set the selection range in the editable date text. */ setSelectionRange(start:number|null,end:number|null,direction?:LyraDateInputSelectionDirection):void;setRangeText(replacement:string):void;setRangeText(replacement:string,start:number,end:number,selectMode?:SelectionMode):void;formStateRestoreCallback(state:string|File|FormData|null,_mode?:'restore'|'autocomplete'):void;formResetCallback():void;formDisabledCallback(disabled:boolean):void;private onHintSlotChange;private onErrorSlotChange;private onLabelSlotChange;private onStartSlotChange;private onEndSlotChange;private onPickerInput;private onPickerChange;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-date-input':LyraDateInput;}}export{};