@trimble-oss/moduswebcomponents/types/components/modus-wc-date/modus-wc-date.d.ts

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { EventEmitter } from '../../stencil-public-runtime';
import { IInputFeedbackProp, ModusSize, WeekStartDay } from '../types';
/**
 * A customizable date picker component used to create date inputs.
 *
 * Adheres to WCAG 2.2 standards.
 */
export declare class ModusWcDate {
    private inheritedAttributes;
    private popperInstance;
    private inputRef?;
    private calendarRef?;
    private locale;
    private minDate?;
    private maxDate?;
    private readonly resolveEffectiveId;
    /** Reference to the host element */
    el: HTMLElement;
    /** Show the calendar dropdown */
    private showCalendar;
    /** Calendar state object */
    private calendar;
    /** Currently focused date index in calendar */
    private focusedDateIndex;
    /** Tracks whether the component currently has focus */
    private hasFocus;
    /** Indicates that the input should have a border. */
    bordered?: boolean;
    /** Custom CSS class to apply to the input. */
    customClass?: string;
    /** Whether the form control is disabled. */
    disabled?: boolean;
    /** Feedback to render below the input. */
    feedback?: IInputFeedbackProp;
    /** The ID of the input element. */
    inputId?: string;
    /** Determine the control's relative ordering for sequential focus navigation (typically with the Tab key). */
    inputTabIndex?: number;
    /** The text to display within the label. */
    label?: string;
    /** Maximum date value. Must match the `format` prop pattern (or the locale-derived format when unset) or ISO 8601 (`YYYY-MM-DD`). */
    max?: string;
    /** Minimum date value. Must match the `format` prop pattern (or the locale-derived format when unset) or ISO 8601 (`YYYY-MM-DD`). */
    min?: string;
    /** Name of the form control. Submitted with the form as part of a name/value pair. */
    name?: string;
    /** Whether the value is editable. */
    readOnly?: boolean;
    /** A value is required or must be checked for the form to be submittable. */
    required?: boolean;
    /** The size of the input. */
    size?: ModusSize;
    /** The date format for display and input. */
    format?: 'yyyy-mm-dd' | 'dd-mm-yyyy' | 'mm-dd-yyyy' | 'yyyy/mm/dd' | 'dd/mm/yyyy' | 'mm/dd/yyyy' | 'MMM DD, YYYY';
    /** The value of the control. */
    value: string;
    /** The first day of the week for the calendar display */
    weekStartDay?: WeekStartDay;
    /** Displays ISO 8601 week numbers in the calendar. Week numbers are calculated with Monday as the first day of the week. */
    showWeekNumbers?: boolean;
    /** Event emitted when the input loses focus. */
    inputBlur: EventEmitter<FocusEvent>;
    /** Event emitted when the input value changes. `target.value` is always ISO 8601 (YYYY-MM-DD), or empty string when incomplete or invalid. */
    inputChange: EventEmitter<InputEvent>;
    /** Event emitted when the input gains focus. */
    inputFocus: EventEmitter<FocusEvent>;
    /** Event emitted when the calendar month selection changes. */
    calendarMonthChange: EventEmitter<number>;
    /** Event emitted when the calendar year selection changes. */
    calendarYearChange: EventEmitter<number>;
    /** Re-displays the stored ISO value in the new format when the `format` prop changes. */
    handleFormatChange(): void;
    handleMinChange(newValue?: string): void;
    handleMaxChange(newValue?: string): void;
    handleValueChange(newValue?: string): void;
    handleWeekStartDayChange(): void;
    componentWillLoad(): void;
    componentDidUpdate(): void;
    disconnectedCallback(): void;
    private getClasses;
    private handleBlur;
    private handleFocus;
    private handleInput;
    private handleInputKeyDown;
    private setupPopper;
    private toggleCalendar;
    private handleDateSelect;
    private addMonthOffset;
    private handleMonthChange;
    private handleYearChange;
    private handleDateKeyDown;
    handleClickOutside(event: MouseEvent): void;
    handleEscapeKey(event: KeyboardEvent): void;
    private navigateToAdjacentMonth;
    handleArrowKeys(event: KeyboardEvent): void;
    private renderCalendarHeader;
    private renderCalendarBody;
    private compareDate;
    private get effectiveFormat();
    /** Generates a localized guide for the placeholder (e.g., "mm/dd/yyyy") */
    private getLocaleFormatGuide;
    /**
     * Parses a date string into a `Date`. Accepts pure ISO 8601 (`YYYY-MM-DD`), abbreviated month
     * name strings matching the `MMM DD, YYYY` token pattern (e.g. `Oct 15, 2025`), and any
     * numeric format whose day/month/year order is resolved from `this.format` or the locale guide.
     */
    private parseISODate;
    /** Formats date as ISO 8601 (YYYY-MM-DD) for the value prop */
    private formatISODate;
    /** Returns the current value formatted for display, or empty string if value is absent or unparseable. */
    private get inputDisplayValue();
    /** Formats date for display in the input using the selected format pattern */
    private formatForDisplay;
    private cloneDate;
    private clampDate;
    private isDateDisabled;
    private ensureValueWithinBounds;
    private ensureCalendarWithinBounds;
    private setCalendarMonth;
    private updateCalendarAndEmitEvents;
    private syncValueFromInput;
    render(): any;
}