import { PropertyValueMap } from "lit"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { Instance } from "flatpickr/dist/types/instance"; import { DateLimit, DateOption } from "flatpickr/dist/types/options"; import { FInput } from "../f-input/f-input"; export type FDateTimePickerState = "primary" | "default" | "success" | "warning" | "danger"; export type DateValueType = DateOption | DateOption[]; export type DateDisableType = DateLimit[]; export type FDateOption = DateOption; export declare class FDateTimePicker extends FRoot { /** * css loaded from scss file */ static styles: import("lit").CSSResult[]; /** * @attribute Variants are various visual representations of a date-time-picker field. */ variant?: "curved" | "round" | "block"; /** * @attribute Categories are various visual representations of date-time-picker field. */ category?: "fill" | "outline" | "transparent"; /** * @attribute The mode property specifies whether the picker will include both date and time or only one of them. */ mode?: "date-time" | "date-only" | "time-only"; /** * @attribute Defines the value of the field. Standard validation rules of date and time are applied on the value. */ value?: DateValueType; /** * @attribute Defines the placeholder text for f-date-time-picker */ placeholder?: string; /** * @attribute The medium size is the default. */ size?: "small" | "medium"; /** * @attribute The state helps in indicating the degree of emphasis. By default it is default state. */ state?: FDateTimePickerState; /** * @attribute Sets the minimum value of the date allowed in the picker */ ["min-date"]?: FDateOption; /** * @attribute Sets the maximum value of the date allowed in the picker */ ["max-date"]?: FDateOption; /** * @attribute Sets the certain dates unavailable. There can be multiple options: 1. Disabling specific date(s) 2. Disabling range of dates 3. Disabling dates using a function */ ["disable-date"]?: DateDisableType; /** * @attribute Displays a close icon-button on the right side of the input that allows the user to clear the input value */ clear?: boolean; /** * @attribute Allow a range of dates to be selected by choosing start-date and end-date */ ["is-range"]?: boolean; /** * @attribute Display the date-time picker always in open state. Not acting as a popover now. */ inline?: boolean; /** * @attribute Shows the week numbers on the picker. */ ["week-number"]?: boolean; /** * @attribute Shows the input field in disabled state. Opacity 50% */ disabled?: boolean; /** * @attribute Sets the input field to the loading state. */ loading?: boolean; /** * query selector for input field */ dateTimePickerElement: FInput; /** * query selector for help slot */ dateParsingError: string | null; /** * flatpickr instance */ flatPickerElement?: Instance; reqAniFrame?: number; /** * conditional placeholder */ get placeholderText(): "Select date" | "Select time" | "Select date and time"; /** * regex for date-time validation on keyboard typing */ get regexDateTime(): RegExp; /** * validation message */ get dateValidationMessage(): string; /** * close the date-picker on unmount */ disconnectedCallback(): void; /** * emit input custom event */ handleInput(dateObj: object, dateStr?: string): void; /** * * @param dateObj Date as an object * @param dateStr Date oin string format */ dispatchInputEvent(dateObj: object, dateStr?: string): void; /** * * @param e custom-event value having date string * @returns date object formed from string */ dateObjectFromString(e: CustomEvent<{ value: string; }>): Date; /** * * @param e custom-event value having date string */ handleKeyboardInput(e: CustomEvent<{ value: string | number | undefined; type: "clear" | "input"; }>): void; /** * * @param selectedDates selected date object array * @param dateStr selected date string */ datePickerOnChange(selectedDates: Date[], dateStr: string): void; /** * creates date picker * @param element element w.r.t which creation of date picker takes place */ createDateTimePicker(element: HTMLElement): void; /** * week-number border conditional styling */ addWeekNoStyle(): void; render(): import("lit-html").TemplateResult<1>; protected updated(changedProperties: PropertyValueMap | Map): void; } /** * Required for typescript */ declare global { interface HTMLElementTagNameMap { "f-date-time-picker": FDateTimePicker; } }