import { Locale } from "date-fns"; import { LitElement, PropertyValues } from "lit"; import "../icon/icon.js"; import "../tooltip/tooltip.js"; declare const WarpDatepicker_base: import("@open-wc/form-control").Constructor & typeof LitElement; /** * A date picker allows the user to select a specific calendar date. * * [Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements) */ declare class WarpDatepicker extends WarpDatepicker_base { #private; static shadowRootOptions: { delegatesFocus: boolean; clonable?: boolean; customElementRegistry?: CustomElementRegistry | null; mode: ShadowRootMode; serializable?: boolean; slotAssignment?: SlotAssignmentMode; }; static styles: import("lit").CSSResult[]; /** * The label displayed above the date input. * * Use this to give the datepicker a visible and accessible name. */ label: string | undefined; /** * Whether user input is required on the input before form submission */ required: boolean; /** * Indicate visually that the field is optional */ optional: boolean; /** * Use in combination with `invalid` to show as a validation error message, * or on its own to show a help text. * * @summary Description shown below the input field */ helpText: string | undefined; /** * Mark the form field as invalid. * * Make sure to also set a `help-text` to help users fix the validation problem. */ invalid: boolean; /** * Supplementary information that should show in a tooltip behind an information icon after the label. * * You must provide a label to be able to show an info icon with a tooltip. */ tooltip?: string; /** * The locale used for calendar labels and date formatting. * * This takes precedence over the `` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`. */ lang: string; /** * The name submitted with the date value. * * Use this when the datepicker belongs to a form and its value should be included in form data. */ name: string | undefined; /** * The selected date value. * * Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets. */ value: string | undefined; /** * Keep in mind that using disabled in its current form is an anti-pattern. * * There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons. * * Please consider more informative alternatives before choosing to use disabled on an element. * * @summary Makes the element not focusable and hides it from form submits */ disabled: boolean; /** * Whether the input can be selected but not changed by the user */ readonly: boolean; /** * The date format used in the calendar header. * * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */ headerFormat: string; /** * The weekday format shown above the calendar grid. * * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */ weekdayFormat: string; /** * Function used to disable dates in the calendar. * * Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. * * @example * ```ts * import type { WarpDatepicker } from "@warp-ds/elements"; * import { isBefore, startOfDay } from 'date-fns'; * * const today = startOfDay(new Date()); * const datePicker = document.querySelector('w-datepicker') as WarpDatepicker; * datePicker.isDayDisabled = (day: Date) => isBefore(startOfDay(day), today); * ``` */ isDayDisabled: ((day: Date) => boolean) | undefined; /** * The date format used for calendar day accessible names. * * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */ dayFormat: string; isCalendarOpen: boolean; navigationDate: Date; /** @internal This gets picked up by the custom element manifest analyzer as a property for some reason */ locale: Locale; get selectedDate(): Date | null; get month(): Date; get weeks(): import("date-fns").EachDayOfIntervalResult<{ start: Date; end: Date; }, undefined>[]; calendar: HTMLDivElement; input: HTMLInputElement; toggleButton: HTMLButtonElement; wrapper: HTMLDivElement; /** * This is the first focusable element, needed for the modal focus trap. * * Don't cache this and other `@query` fields from inside the calendar modal. * They work the first time, but once the calendar is closed and reopened * the query will point to an element that doesn't exist anymore. */ previousMonthButton: HTMLButtonElement; todayCell: HTMLTableCellElement; selectedCell: HTMLTableCellElement; /** * We can't use private fields (`#` prefix) for this method * since we can't overwrite private field methods. We need * to `.bind(this)` in the constructor because we need one * stable method handler we can register and unregister on * `document`, that has access to this specific instance * of WarpDatepicker to control the calendar. * @internal */ private _onClickOutside; constructor(); resetFormControl(): void; /** Returns the validation message if the textarea is invalid, otherwise an empty string */ get validationMessage(): string; /** Returns the validity state of the textarea */ get validity(): ValidityState; /** @internal */ get _error(): string | undefined; /** Checks whether the textarea passes constraint validation */ checkValidity(): boolean; /** Checks validity and shows the browser's validation message if invalid */ reportValidity(): boolean; /** Sets a custom validation message. Pass an empty string to clear. */ setCustomValidity(message: string): void; connectedCallback(): void; disconnectedCallback(): void; updated(changedProperties: Map): void; firstUpdated(changedProperties: PropertyValues): void; render(): import("lit").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "w-datepicker": WarpDatepicker; } } export { WarpDatepicker };