igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

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

@@ -1,31 +1,23 @@
 import { type ICalendarResourceStrings, type IDateRangePickerResourceStrings } from 'igniteui-i18n-core';
-import { nothing, type TemplateResult } from 'lit';
-import type { DateRangeDescriptor, WeekDays } from '../calendar/types.js';
-import type { IgcDateRangePickerResourceStrings } from '../common/i18n/EN/date-range-picker.resources.js';
-import { IgcComboBoxBaseLikeComponent } from '../common/mixins/combo-box.js';
-import type { AbstractConstructor } from '../common/mixins/constructor.js';
-import type { ContentOrientation, PickerMode } from '../types.js';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import type { IgcDateRangePickerResourceStrings } from '#internals/i18n/EN/date-range-picker.resources.js';
+import type { AbstractConstructor } from '#internals/mixins/constructor.js';
+import type { CalendarSelection } from '../calendar/types.js';
+import { IgcDatePickerBaseComponent, type IgcPickerBaseEventMap } from '../date-picker/date-picker.base.js';
+import type { DateRangeValue } from '../types.js';
+import IgcDateRangeInputComponent from './date-range-input.js';
 import { DateRangePosition } from './date-range-mask-parser.js';
-export interface DateRangeValue {
-    start: Date | null;
-    end: Date | null;
-}
+export type { DateRangeValue } from '../types.js';
+/** A predefined date range with label for {@link IgcDateRangePickerComponent.customRanges} */
 export interface CustomDateRange {
     label: string;
     dateRange: DateRangeValue;
 }
-export interface IgcDateRangePickerComponentEventMap {
-    igcOpening: CustomEvent<void>;
-    igcOpened: CustomEvent<void>;
-    igcClosing: CustomEvent<void>;
-    igcClosed: CustomEvent<void>;
-    igcChange: CustomEvent<DateRangeValue | null>;
-    igcInput: CustomEvent<DateRangeValue | null>;
-}
+export type IgcDateRangePickerComponentEventMap = IgcPickerBaseEventMap<DateRangeValue>;
 export type DateRangePickerResourceStringsType = IDateRangePickerResourceStrings & ICalendarResourceStrings;
-declare const IgcDateRangePickerComponent_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<IgcDateRangePickerComponentEventMap>> & AbstractConstructor<IgcComboBoxBaseLikeComponent>;
+declare const IgcDateRangePickerComponent_base: import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcDateRangePickerComponentEventMap>> & AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>>;
 /**
- * The igc-date-range-picker allows the user to select a range of dates.
+ * The Date Range Picker includes a text input and a calendar pop-up, allowing users to easily select start and end dates.
  *
  * @element igc-date-range-picker
  *
@@ -56,10 +48,10 @@ declare const IgcDateRangePickerComponent_base: import("../common/mixins/constru
  * @slot actions - Renders content in the action part of the picker in open state.
  * @slot separator - Renders the separator element between the two inputs.
  *
- * @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.
  *
@@ -122,41 +114,49 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     static readonly tagName = "igc-date-range-picker";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    protected get __validators(): import("../../internals/validators.js").Validator<IgcDateRangePickerComponent>[];
     protected readonly _inputId: string;
-    private readonly _themes;
-    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<import("../types.js").DateRangeValue | null>;
-    protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
+    protected readonly _themes: import("#theming/theming-controller.js").ThemingController;
+    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "title" | "prefix" | "[default]" | "actions" | "separator" | "suffix" | "helper-text" | "value-missing" | "custom-error" | "range-overflow" | "range-underflow" | "clear-icon" | "calendar-icon-open" | "calendar-icon" | "header-date" | "bad-input" | "prefix-start" | "prefix-end" | "suffix-start" | "suffix-end" | "clear-icon-start" | "clear-icon-end" | "calendar-icon-start" | "calendar-icon-end" | "calendar-icon-open-start" | "calendar-icon-open-end">;
     /**
      * 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 IgcDateRangePickerResourceStrings is changed to IDateRangePickerResourceStrings
      */
-    protected readonly _i18nController: import("../common/i18n/i18n-controller.js").I18nController<IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType>;
-    private _activeDate;
-    private _min;
-    private _max;
-    private _disabledDates;
-    private _dateConstraints;
-    private _defaultDisplayFormat;
-    private _displayFormat?;
-    private _inputFormat?;
-    private _placeholder?;
+    protected readonly _i18nController: import("#internals/i18n/i18n-controller.js").I18nController<IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType>;
+    protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<DateRangeValue | null>;
+    protected _visibleMonths: number;
+    private _localeDisplayFormat;
     private _defaultMask;
-    private _oldValue;
-    private _visibleMonths;
-    protected get __validators(): import("../common/validators.js").Validator<IgcDateRangePickerComponent>[];
-    private get _isDropDown();
-    private get _firstDefinedInRange();
+    private _placeholder?;
+    /** The range reflected in the calendar, committed or still being typed. */
+    private _calendarRange;
     private readonly _inputs;
     private readonly _input;
-    private readonly _calendar;
-    private readonly _prefixes;
-    private readonly _startPrefixes;
-    private readonly _endPrefixes;
-    private readonly _suffixes;
-    private readonly _startSuffixes;
-    private readonly _endSuffixes;
-    private readonly _actions;
-    private readonly _headerDateSlotItems;
+    /** The editors currently rendered by the picker. */
+    private get _editors();
+    /** The editor of single editor operations - the start one when the range is split. */
+    private get _startEditor();
+    private get _firstDefinedInRange();
+    protected get _value(): DateRangeValue | null;
+    protected set _value(value: DateRangeValue | null);
+    protected get _hasValue(): boolean;
+    protected get _calendarSelection(): CalendarSelection;
+    protected get _calendarValues(): Date[] | null;
+    protected get _defaultActiveDate(): Date | null;
+    protected get _selectDateLabel(): string | undefined;
+    protected get _defaultDisplayFormat(): string | undefined;
+    protected get _defaultInputFormat(): string | undefined;
+    protected get _projectionTarget(): IgcDateRangeInputComponent;
+    protected _focusInput(): void;
+    protected _focusAndSelectInput(): void;
+    protected _canCloseOnSelect(): boolean;
+    protected _handleDismiss(): void;
+    protected _syncCalendarOnToggle(): void;
+    protected _clearEditors(): void;
+    protected _onDialogClosing(): void;
+    /** In dialog mode the range is committed by the actions of the dialog instead. */
+    protected _commitsCalendarSelection(): boolean;
+    protected _valueFromCalendarSelection(dates: Date[]): DateRangeValue;
     /**
      * The value of the picker
      * @attr
@@ -164,14 +164,16 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
     set value(value: DateRangeValue | string | null | undefined);
     get value(): DateRangeValue | null;
     /**
-     * Renders chips with custom ranges based on the elements of the array.
+     * The number of months displayed in the calendar.
+     * @attr visible-months
+     * @default 2
      */
-    customRanges: CustomDateRange[];
+    set visibleMonths(value: number);
+    get visibleMonths(): number;
     /**
-     * Determines whether the calendar is opened in a dropdown or a modal dialog
-     * @attr mode
+     * Renders chips with custom ranges based on the elements of the array.
      */
-    mode: PickerMode;
+    customRanges: CustomDateRange[];
     /**
      * Use two inputs to display the date range values. Makes the input editable in dropdown mode.
      * @attr use-two-inputs
@@ -182,195 +184,100 @@ export default class IgcDateRangePickerComponent extends IgcDateRangePickerCompo
      * @attr
      */
     usePredefinedRanges: boolean;
-    /**
-     * The locale settings used to display the value.
-     * @attr
-     */
-    set locale(value: string);
-    get locale(): string;
     /** The resource strings of the date range picker. */
     set resourceStrings(value: IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType);
     get resourceStrings(): IgcDateRangePickerResourceStrings & DateRangePickerResourceStringsType;
     /**
-     * Makes the control a readonly field.
-     * @attr readonly
-     */
-    readOnly: boolean;
-    /**
-     * Whether to allow typing in the input.
-     * @attr non-editable
-     */
-    nonEditable: boolean;
-    /**
-     * Whether the control will have outlined appearance.
-     * @attr
-     */
-    outlined: boolean;
-    /**
-     * The label of the control (single input).
-     * @attr label
-     */
-    label: string;
-    /**
-     * The label attribute of the start input.
+     * The label of the start input.
      * @attr label-start
      */
     labelStart: string;
     /**
-     * The label attribute of the end input.
+     * The label of the end input.
      * @attr label-end
      */
     labelEnd: string;
     /**
-     * The placeholder attribute of the control (single input).
+     * The placeholder text of the control (single input).
      * @attr
      */
     set placeholder(value: string);
     get placeholder(): string;
     /**
-     * The placeholder attribute of the start input.
+     * The placeholder text of the start input.
      * @attr placeholder-start
      */
     placeholderStart: string;
     /**
-     * The placeholder attribute of the end input.
+     * The placeholder text of the end input.
      * @attr placeholder-end
      */
     placeholderEnd: string;
-    /** The prompt symbol to use for unfilled parts of the mask.
-     *  @attr
-     */
-    prompt: string;
-    /**
-     * 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 inputs.
-     * Defaults to the current locale Intl.DateTimeFormat
-     * @attr input-format
-     */
-    set inputFormat(value: string);
-    get inputFormat(): string;
-    /**
-     * The minimum value required for the date range picker to remain valid.
-     * @attr
-     */
-    set min(value: Date | string | null | undefined);
-    get min(): Date | null;
-    /**
-     * The maximum value required for the date range picker to remain valid.
-     * @attr
-     */
-    set max(value: Date | string | null | undefined);
-    get max(): Date | null;
-    /** Gets/sets disabled dates. */
-    set disabledDates(dates: DateRangeDescriptor[]);
-    get disabledDates(): DateRangeDescriptor[];
-    /**
-     * The number of months displayed in the calendar.
-     * @attr visible-months
-     */
-    get visibleMonths(): number;
-    set visibleMonths(value: number);
-    /**
-     * The orientation of the calendar header.
-     * @attr header-orientation
-     */
-    headerOrientation: ContentOrientation;
-    /**
-     * 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;
-    /**
-     * 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;
-    /**
-     * Whether to show the number of the week in the calendar.
-     * @attr show-week-numbers
-     */
-    showWeekNumbers: boolean;
-    /**
-     * Controls the visibility of the dates that do not belong to the current month.
-     * @attr hide-outside-days
-     */
-    hideOutsideDays: boolean;
-    /** Gets/sets special dates. */
-    specialDates: DateRangeDescriptor[];
-    /** Sets the start day of the week for the calendar. */
-    weekStart: WeekDays;
     constructor();
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(): void;
     protected formResetCallback(): void;
     /** @internal */
     hasDateParts(): boolean;
     /** @internal */
     hasTimeParts(): boolean;
-    /** Clears the input parts of the component of any user input */
-    clear(): void;
     /** Selects a date range value in the picker */
     select(value: DateRangeValue | null): void;
-    protected _openChange(): void;
-    protected _updateDefaultMask(): void;
-    protected _updateDateRange(): Promise<void>;
-    protected _modeChanged(): Promise<void>;
-    protected _handleClosing(): void;
-    protected _handleDialogClosing(event: Event): void;
-    protected _handleDialogClosed(event: Event): void;
     protected _dialogCancel(): void;
     protected _dialogDone(): void;
     protected _handleInput(event: CustomEvent<string>): void;
     protected _handleInputChange(event: CustomEvent<Date | null>): void;
     protected _handleDateRangeInput(event: CustomEvent<string>): Promise<void>;
     protected _handleDateRangeInputChange(event: CustomEvent<DateRangeValue | null>): void;
-    protected _handleFocusOut({ relatedTarget }: FocusEvent): void;
-    protected _handleInputClick(event: Event): void;
-    protected _onEscapeKey(): Promise<void>;
-    protected _handleAnchorClick(): Promise<void>;
-    protected _handleCalendarChangeEvent(event: CustomEvent<Date>): Promise<void>;
-    protected _handleCalendarIconSlotPointerDown(event: PointerEvent): void;
+    private _updateDefaultMask;
+    private _syncCalendarRange;
+    private _syncEditors;
     protected _revertValue(): void;
     /**
-     * Sets the active date of the calendar based on current selection, if any,
-     * or its current active date and its active day view index to always be the first one.
+     * Points the calendar at the current range, if any, and back to its first rendered
+     * month.
      */
     private _setCalendarActiveDateAndViewIndex;
+    /**
+     * Composes the range from what the two editors currently hold.
+     *
+     * The sibling input is read through its draft rather than through the committed
+     * `value`, since an edit in progress there has not reached the picker yet.
+     */
     private _getUpdatedDateRange;
+    /**
+     * Delegates the validity methods of the editors to the range validation of the picker.
+     * The pristine check keeps a form reset, which assigns to the editors, from validating.
+     */
     private _delegateInputsValidity;
-    private _setDateConstraints;
+    /**
+     * Reflects a range in the calendar. Defaults to the committed value, but the input
+     * handlers pass the uncommitted draft so that the calendar keeps following along
+     * while the user types.
+     */
     private _setCalendarRangeValues;
+    /**
+     * Commits a range entered through an editor, normalizing a reversed one, and notifies.
+     * Assigning the value reflects the range in the calendar on its own.
+     */
+    private _commitRange;
     private _swapDates;
-    private _shouldCloseCalendarDropdown;
     private _select;
-    private _renderClearIcon;
-    private _renderCalendarIcon;
-    private _renderCalendarSlots;
-    private _renderCalendar;
+    /**
+     * Custom actions stay in the body of the dialog, so that they do not collide
+     * with the cancel/done buttons rendered in its footer.
+     */
     protected _renderActions(): TemplateResult<1>;
-    protected _renderPredefinedRanges(): typeof nothing | TemplateResult<1>;
-    protected _renderPicker(id: string): TemplateResult<1>;
-    private _renderHelperText;
-    protected _renderInput(id: string, picker?: DateRangePosition): TemplateResult<1>;
+    protected _renderPredefinedRanges(): TemplateResult<1> | typeof nothing;
+    protected _renderPickerContent(id: string): TemplateResult<1>;
+    protected _renderDialogFooter(): TemplateResult<1>;
+    protected _renderInput(id: string, picker?: DateRangePosition.Start | DateRangePosition.End): TemplateResult<1>;
     private _renderInputs;
     private _renderSingleInput;
-    protected render(): TemplateResult<1>;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-date-range-picker': IgcDateRangePickerComponent;
     }
 }
-export {};