igniteui-webcomponents 4.8.2 → 4.10.0

package/components/date-picker/date-picker.d.ts

@@ -0,0 +1,279 @@
+import { themeSymbol } from '../../theming/theming-decorator.js';
+import { type DateRangeDescriptor } from '../calendar/common/calendar.model.js';
+import { type IgcCalendarResourceStrings } from '../common/i18n/calendar.resources.js';
+import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
+import type { AbstractConstructor } from '../common/mixins/constructor.js';
+import { type Validator } from '../common/validators.js';
+import type { DatePart } from '../date-time-input/date-util.js';
+export interface IgcDatepickerEventMap {
+    igcOpening: CustomEvent<void>;
+    igcOpened: CustomEvent<void>;
+    igcClosing: CustomEvent<void>;
+    igcClosed: CustomEvent<void>;
+    igcChange: CustomEvent<Date>;
+    igcInput: CustomEvent<Date>;
+}
+declare const IgcDatePickerComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDatepickerEventMap>> & AbstractConstructor<IgcBaseComboBoxLikeComponent>;
+/**
+ * igc-date-picker is a feature rich component used for entering a date through manual text input or
+ * choosing date values from a calendar dialog that pops up.
+ *
+ * @element igc-date-picker
+ *
+ * @slot prefix - Renders content before the input.
+ * @slot suffix - Renders content after the input.
+ * @slot helper-text - Renders content below the input.
+ * @slot title - Renders content in the calendar title.
+ * @slot clear-icon - Renders a clear icon template.
+ * @slot calendar-icon - Renders the icon/content for the calendar picker.
+ * @slot calendar-icon-open - Renders the icon/content for the picker in open state.
+ * @slot actions - Renders content in the action part of the picker in open state.
+ *
+ * @fires igcOpening - Emitted just before the calendar dropdown is shown.
+ * @fires igcOpened - Emitted after the calendar dropdown is shown.
+ * @fires igcClosing - Emitted just before the calendar dropdown is hidden.
+ * @fires igcClosed - Emitted after the calendar dropdown is hidden.
+ * @fires igcChange - Emitted when the user modifies and commits the elements's value.
+ * @fires igcInput - Emitted when when the user types in the element.
+ *
+ * @csspart label - The label wrapper that renders content above the target input.
+ * @csspart container - The main wrapper that holds all main input elements.
+ * @csspart input - The native input element.
+ * @csspart prefix - The prefix wrapper.
+ * @csspart suffix - The suffix wrapper.
+ * @csspart calendar-icon - The calendar icon wrapper for closed state.
+ * @csspart calendar-icon-open - The calendar icon wrapper for opened state.
+ * @csspart clear-icon - The clear icon wrapper.
+ * @csspart actions - The actions wrapper.
+ * @csspart helper-text - The helper-text wrapper that renders content below the target input.
+ * @csspart header - The calendar header element.
+ * @csspart header-title - The calendar header title element.
+ * @csspart header-date - The calendar header date element.
+ * @csspart calendar-content - The calendar content element which contains the views and navigation elements.
+ * @csspart navigation - The calendar navigation container element.
+ * @csspart months-navigation - The calendar months navigation button element.
+ * @csspart years-navigation - The calendar years navigation button element.
+ * @csspart years-range - The calendar years range element.
+ * @csspart navigation-buttons - The calendar navigation buttons container.
+ * @csspart navigation-button - The calendar previous/next navigation button.
+ * @csspart days-view-container - The calendar days view container element.
+ * @csspart days-view - The calendar days view element.
+ * @csspart months-view - The calendar months view element.
+ * @csspart years-view - The calendar years view element.
+ * @csspart days-row - The calendar days row element.
+ * @csspart calendar-label - The calendar week header label element.
+ * @csspart week-number - The calendar week number element.
+ * @csspart week-number-inner - The calendar week number inner element.
+ * @csspart date - The calendar date element.
+ * @csspart date-inner - The calendar date inner element.
+ * @csspart first - The calendar first selected date element in range selection.
+ * @csspart last - The calendar last selected date element in range selection.
+ * @csspart inactive - The calendar inactive date element.
+ * @csspart hidden - The calendar hidden date element.
+ * @csspart weekend - The calendar weekend date element.
+ * @csspart range - The calendar range selected element.
+ * @csspart special - The calendar special date element.
+ * @csspart disabled - The calendar disabled date element.
+ * @csspart single - The calendar single selected date element.
+ * @csspart preview - The calendar range selection preview date element.
+ * @csspart month - The calendar month element.
+ * @csspart month-inner - The calendar month inner element.
+ * @csspart year - The calendar year element.
+ * @csspart year-inner - The calendar year inner element.
+ * @csspart selected - The calendar selected state for element(s). Applies to date, month and year elements.
+ * @csspart current - The calendar current state for element(s). Applies to date, month and year elements.
+ */
+export default class IgcDatePickerComponent extends IgcDatePickerComponent_base {
+    static readonly tagName = "igc-date-picker";
+    static styles: import("lit").CSSResult[];
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private static readonly increment;
+    protected inputId: string;
+    private readonly [themeSymbol];
+    protected validators: Validator<this>[];
+    static register(): void;
+    private _value?;
+    private _activeDate?;
+    private _min?;
+    private _max?;
+    private _disabledDates?;
+    private _dateConstraints?;
+    private _displayFormat?;
+    private _inputFormat?;
+    private _rootClickController;
+    private get isDropDown();
+    private get isMaterialTheme();
+    private _input;
+    private _calendar;
+    private prefixes;
+    private suffixes;
+    private actions;
+    private helperText;
+    /**
+     * Sets the state of the datepicker dropdown.
+     * @attr
+     */
+    open: boolean;
+    /**
+     * The label of the datepicker.
+     * @attr label
+     */
+    label: string;
+    /**
+     * Determines whether the calendar is opened in a dropdown or a modal dialog
+     * @attr mode
+     */
+    mode: 'dropdown' | 'dialog';
+    /**
+     * Whether to allow typing in the input.
+     * @attr non-editable
+     */
+    nonEditable: boolean;
+    /**
+     * Makes the control a readonly field.
+     * @attr readonly
+     */
+    readOnly: boolean;
+    /**
+     * The value of the picker
+     * @attr
+     */
+    set value(value: Date | null);
+    get value(): Date | null;
+    /**
+     * Gets/Sets the date which is shown in the calendar picker and is highlighted.
+     * By default it is the current date.
+     */
+    set activeDate(value: Date);
+    get activeDate(): Date;
+    /**
+     * The minimum value required for the date picker to remain valid.
+     * @attr
+     */
+    set min(value: Date);
+    get min(): Date;
+    /**
+     * The maximum value required for the date picker to remain valid.
+     * @attr
+     */
+    set max(value: Date);
+    get max(): Date;
+    /** The orientation of the calendar header.
+     * @attr header-orientation
+     */
+    headerOrientation: 'vertical' | 'horizontal';
+    /** The orientation of the multiple months displayed in the calendar's days view.
+     *  @attr
+     */
+    orientation: 'vertical' | 'horizontal';
+    /** Determines whether the calendar hides its header.
+     * @attr hide-header
+     */
+    hideHeader: boolean;
+    /**
+     * Controls the visibility of the dates that do not belong to the current month.
+     * @attr hide-outside-days
+     */
+    hideOutsideDays: boolean;
+    /** Gets/sets disabled dates. */
+    set disabledDates(dates: DateRangeDescriptor[]);
+    get disabledDates(): DateRangeDescriptor[];
+    /** Gets/sets special dates. */
+    specialDates: DateRangeDescriptor[];
+    /**
+     * Whether the control will have outlined appearance.
+     * @attr
+     */
+    outlined: boolean;
+    /**
+     * The placeholder attribute of the control.
+     * @attr
+     */
+    placeholder: string;
+    /**
+     * The number of months displayed in the calendar.
+     * @attr visible-months
+     */
+    visibleMonths: number;
+    /**
+     * Whether to show the number of the week in the calendar.
+     * @attr show-week-numbers
+     */
+    showWeekNumbers: boolean;
+    /**
+     * Format to display the value in when not editing.
+     * Defaults to the input format if not set.
+     * @attr display-format
+     */
+    set displayFormat(value: string);
+    get displayFormat(): string;
+    /**
+     * The date format to apply on the input.
+     * Defaults to the current locale Intl.DateTimeFormat
+     * @attr input-format
+     */
+    set inputFormat(value: string);
+    get inputFormat(): string;
+    /**
+     * The locale settings used to display the value.
+     * @attr
+     */
+    locale: string;
+    /** The prompt symbol to use for unfilled parts of the mask.
+     *  @attr
+     */
+    prompt: string;
+    /** The resource strings of the calendar. */
+    resourceStrings: IgcCalendarResourceStrings;
+    protected openChange(): void;
+    /** Sets the start day of the week for the calendar. */
+    weekStart: 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
+    constructor();
+    connectedCallback(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Clears the input part of the component of any user input */
+    clear(): void;
+    /** Increments the passed in date part */
+    stepUp(datePart?: DatePart, delta?: number): void;
+    /** Decrements the passed in date part */
+    stepDown(datePart?: DatePart, delta?: number): void;
+    /** Selects the text in the input of the component */
+    select(): void;
+    /** Sets the text selection range in the input of the component */
+    setSelectionRange(start: number, end: number, direction?: 'none' | 'backward' | 'forward'): void;
+    setRangeText(replacement: string, start: number, end: number, mode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    protected onEscapeKey(): Promise<void>;
+    protected handleFocusIn(): void;
+    protected handleFocusOut({ relatedTarget }: FocusEvent): void;
+    protected handlerCalendarIconSlotPointerDown(event: PointerEvent): void;
+    protected handleInputClick(event: Event): void;
+    protected handleAnchorClick(): Promise<void>;
+    private _shouldCloseCalendarDropdown;
+    protected handleInputChangeEvent(event: CustomEvent<Date>): void;
+    protected handleCalendarChangeEvent(event: CustomEvent<Date>): Promise<void>;
+    protected handleInputEvent(event: CustomEvent<Date>): void;
+    protected handleClosing(): void;
+    protected handleDialogClosing(event: Event): void;
+    protected handleDialogClosed(event: Event): void;
+    private setDateConstraints;
+    private renderClearIcon;
+    private renderCalendarIcon;
+    private renderCalendar;
+    protected renderActions(): import("lit-html").TemplateResult<1>;
+    protected renderPicker(id: string): import("lit-html").TemplateResult<1>;
+    private renderLabel;
+    private renderHelperText;
+    protected renderInput(id: string): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-date-picker': IgcDatePickerComponent;
+    }
+}
+export {};