igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

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

@@ -1,23 +1,17 @@
 import { type ICalendarResourceStrings, type IDatePickerResourceStrings } from 'igniteui-i18n-core';
 import { type TemplateResult } from 'lit';
-import type { CalendarHeaderOrientation, DateRangeDescriptor, WeekDays } from '../calendar/types.js';
-import type { IgcCalendarResourceStrings } from '../common/i18n/EN/calendar.resources.js';
-import { IgcComboBoxBaseLikeComponent } from '../common/mixins/combo-box.js';
-import type { AbstractConstructor } from '../common/mixins/constructor.js';
+import type { IgcCalendarResourceStrings } from '#internals/i18n/EN/calendar.resources.js';
+import type { AbstractConstructor } from '#internals/mixins/constructor.js';
+import type { CalendarSelection } from '../calendar/types.js';
 import type { DatePart } from '../date-time-input/date-part.js';
-import type { ContentOrientation, PickerMode, RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
-export interface IgcDatePickerComponentEventMap {
-    igcOpening: CustomEvent<void>;
-    igcOpened: CustomEvent<void>;
-    igcClosing: CustomEvent<void>;
-    igcClosed: CustomEvent<void>;
-    igcChange: CustomEvent<Date | null>;
-    igcInput: CustomEvent<Date | null>;
-}
+import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
+import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
+import { IgcDatePickerBaseComponent, type IgcPickerBaseEventMap } from './date-picker.base.js';
+export type IgcDatePickerComponentEventMap = IgcPickerBaseEventMap<Date>;
 type DatePickerResourceStringsType = IDatePickerResourceStrings & ICalendarResourceStrings;
-declare const IgcDatePickerComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDatePickerComponentEventMap>> & AbstractConstructor<IgcComboBoxBaseLikeComponent>;
+declare const IgcDatePickerComponent_base: import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcDatePickerComponentEventMap>> & AbstractConstructor<IgcDatePickerBaseComponent<Date>>;
 /**
- * igc-date-picker is a feature rich component used for entering a date through manual text input or
+ * The 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
@@ -38,10 +32,10 @@ declare const IgcDatePickerComponent_base: import("../common/mixins/constructor.
  * @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 igcOpening - Emitted just before the calendar popover is shown.
+ * @fires igcOpened - Emitted after the calendar popover is shown.
+ * @fires igcClosing - Emitted just before the calendar popover is hidden.
+ * @fires igcClosed - Emitted after the calendar popover 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.
  *
@@ -96,171 +90,64 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     static readonly tagName = "igc-date-picker";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    protected get __validators(): import("../common/validators.js").Validator<IgcDatePickerComponent>[];
-    private readonly _inputId;
-    private readonly _themes;
-    private readonly _slots;
+    protected get __validators(): import("../../internals/validators.js").Validator<IgcDatePickerComponent>[];
+    protected readonly _inputId: string;
+    protected readonly _themes: import("#theming/theming-controller.js").ThemingController;
+    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "title" | "prefix" | "[default]" | "actions" | "suffix" | "helper-text" | "value-missing" | "custom-error" | "range-overflow" | "range-underflow" | "clear-icon" | "calendar-icon-open" | "calendar-icon" | "header-date" | "bad-input">;
     /**
      * For now we use the core validation strings internally only, to avoid mixing with old resources by users.
      * To Do: Update resourceStrings type when the IgcCalendarResourceStrings is changed to ICalendarResourceStrings
      */
-    protected readonly _i18nController: import("../common/i18n/i18n-controller.js").I18nController<IgcCalendarResourceStrings | DatePickerResourceStringsType>;
-    private _oldValue;
-    private _activeDate;
-    private _min;
-    private _max;
-    private _disabledDates?;
-    private _dateConstraints?;
-    private _inputFormat?;
-    private _displayFormat?;
-    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<Date | null>;
-    protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
+    protected readonly _i18nController: import("#internals/i18n/i18n-controller.js").I18nController<IgcCalendarResourceStrings | DatePickerResourceStringsType>;
+    protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<Date | null>;
     private readonly _input;
-    private readonly _calendar;
-    private get _isDropDown();
-    private get _isMaterial();
-    /**
-     * 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: PickerMode;
-    /**
-     * 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
+    protected get _value(): Date | null;
+    protected set _value(value: Date | null);
+    protected get _hasValue(): boolean;
+    protected get _calendarSelection(): CalendarSelection;
+    protected get _calendarValue(): Date | null;
+    protected get _selectDateLabel(): string | undefined;
+    protected get _calendarIconTitle(): string | undefined;
+    protected get _dialogLabel(): string | undefined;
+    protected get _defaultDisplayFormat(): string | undefined;
+    protected get _defaultInputFormat(): string | undefined;
+    protected get _projectionTarget(): IgcDateTimeInputComponent;
+    protected _focusInput(): void;
+    protected _focusAndSelectInput(): void;
+    protected _syncCalendarOnToggle(): void;
+    protected _clearEditors(): void;
+    protected _valueFromCalendarSelection(dates: Date[]): Date | null;
+    /**
+     * A committed edit in the input already emits `igcChange` on its own, so only a
+     * value which the picker itself has changed is left to notify about here.
+     */
+    protected _onBlur(): void;
+    protected _onDialogClosing(): void;
+    /**
+     * The value of the picker.
+     *
+     * Only ever holds a committed value. While the user is typing in the input, the
+     * intermediate state stays in the editor and is committed - together with an
+     * `igcChange` event - when the edit is committed on blur. Use the `igcInput` event
+     * to observe the value as it is being typed.
+     *
      * @attr
      */
     set value(value: Date | string | null | undefined);
     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 | string | null | undefined);
-    get activeDate(): Date;
-    /**
-     * The minimum value required for the date picker to remain valid.
-     * @attr
-     */
-    set min(value: Date | string | null | undefined);
-    get min(): Date | null;
-    /**
-     * The maximum value required for the date picker to remain valid.
-     * @attr
-     */
-    set max(value: Date | string | null | undefined);
-    get max(): Date | null;
-    /**
-     * The orientation of the calendar header.
-     * @attr header-orientation
-     */
-    headerOrientation: CalendarHeaderOrientation;
-    /**
-     * The orientation of the multiple months displayed in the calendar's days view.
-     *  @attr
-     */
-    orientation: ContentOrientation;
-    /**
-     * 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.
+     * The placeholder text 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 locale 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 prompt symbol to use for unfilled parts of the mask.
-     *  @attr
-     */
-    prompt: string;
-    /**
-     * Gets/Sets the locale used for formatting the display value.
-     * @attr locale
-     */
-    set locale(value: string);
-    get locale(): string;
     /**
      * The resource strings for localization.
      */
     set resourceStrings(value: IgcCalendarResourceStrings | DatePickerResourceStringsType);
     get resourceStrings(): IgcCalendarResourceStrings & DatePickerResourceStringsType;
-    /** Sets the start day of the week for the calendar. */
-    weekStart: WeekDays;
-    protected _openChange(): void;
-    constructor();
-    private _setDateConstraints;
-    private _shouldCloseCalendarDropdown;
-    protected _onEscapeKey(): Promise<void>;
-    protected _handleFocusOut({ relatedTarget }: FocusEvent): void;
-    protected _handlerCalendarIconSlotPointerDown(event: PointerEvent): void;
-    protected _handleInputClick(event: Event): void;
-    protected _handleAnchorClick(): Promise<void>;
     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;
-    /** Clears the input part of the component of any user input */
-    clear(): void;
+    protected formResetCallback(): void;
     /** Increments the passed in date part */
     stepUp(datePart?: DatePart, delta?: number): void;
     /** Decrements the passed in date part */
@@ -270,16 +157,9 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     /** Sets the text selection range in the input of the component */
     setSelectionRange(start: number, end: number, direction?: SelectionRangeDirection): void;
     setRangeText(replacement: string, start: number, end: number, mode?: RangeTextSelectMode): void;
-    private _renderClearIcon;
-    private _renderCalendarIcon;
-    private _renderCalendarSlots;
-    private _renderCalendar;
-    protected _renderActions(): TemplateResult<1>;
-    protected _renderPicker(id: string): TemplateResult<1>;
     private _renderLabel;
-    private _renderHelperText;
     protected _renderInput(id: string): TemplateResult<1>;
-    protected render(): TemplateResult<1>;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {