igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
359 lines (358 loc) • 16.1 kB
TypeScript
import { nothing, type TemplateResult } from 'lit';
import { type DateRangeDescriptor, type WeekDays } from '../calendar/types.js';
import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
import type { AbstractConstructor } from '../common/mixins/constructor.js';
import type { ContentOrientation, PickerMode } from '../types.js';
export interface DateRangeValue {
start: Date | null;
end: Date | null;
}
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>;
}
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<IgcBaseComboBoxLikeComponent>;
/**
* The igc-date-range-picker allows the user to select a range of dates.
*
* @element igc-date-range-picker
*
* @slot prefix - Renders content before the input (single input).
* @slot prefix-start - Renders content before the start input (two inputs).
* @slot prefix-end - Renders content before the end input (two inputs).
* @slot suffix - Renders content after the input (single input).
* @slot suffix-start - Renders content after the start input (single input).
* @slot suffix-end - Renders content after the end input (single input).
* @slot helper-text - Renders content below the input.
* @slot bad-input - Renders content when the value is in the disabledDates ranges.
* @slot value-missing - Renders content when the required validation fails.
* @slot range-overflow - Renders content when the max validation fails.
* @slot range-underflow - Renders content when the min validation fails.
* @slot custom-error - Renders content when setCustomValidity(message) is set.
* @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
* @slot title - Renders content in the calendar title.
* @slot header-date - Renders content instead of the current date/range in the calendar header.
* @slot clear-icon - Renders a clear icon template.
* @slot clear-icon-start - Renders a clear icon template for the start input (two inputs).
* @slot clear-icon-end - Renders a clear icon template for the end input (two inputs).
* @slot calendar-icon - Renders the icon/content for the calendar picker.
* @slot calendar-icon-start - Renders the icon/content for the calendar picker for the start input (two inputs).
* @slot calendar-icon-end - Renders the icon/content for the calendar picker for the end input (two inputs).
* @slot calendar-icon-open - Renders the icon/content for the picker in open state.
* @slot calendar-icon-open-start - Renders the icon/content for the picker in open state for the start input (two inputs).
* @slot calendar-icon-open-end - Renders the icon/content for the picker in open state for the end input (two inputs).
* @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 igcChange - Emitted when the user modifies and commits the elements's value.
* @fires igcInput - Emitted when when the user types in the element.
*
* @csspart separator - The separator element between the two inputs.
* @csspart ranges - The wrapper that renders the custom and predefined ranges.
* @csspart label - The label wrapper that renders content above the target input.
* @csspart calendar-icon - The calendar icon wrapper for closed state (single input).
* @csspart calendar-icon-start - The calendar icon wrapper for closed state for the start input (two inputs).
* @csspart calendar-icon-end - The calendar icon wrapper for closed state for the end input (two inputs).
* @csspart calendar-icon-open - The calendar icon wrapper for opened state (single input).
* @csspart calendar-icon-open-start - The calendar icon wrapper for opened state for the start input (two inputs).
* @csspart calendar-icon-open-end - The calendar icon wrapper for opened state for the end input (two inputs).
* @csspart clear-icon - The clear icon wrapper (single input).
* @csspart clear-icon-start - The clear icon wrapper for the start input (two inputs).
* @csspart clear-icon-end - The clear icon wrapper for the end input (two inputs).
* @csspart actions - The wrapper for the custom actions area.
* @csspart clear-icon - The clear icon wrapper.
* @csspart input - The native input element.
* @csspart prefix - The prefix wrapper.
* @csspart suffix - The suffix 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 IgcDateRangePickerComponent extends IgcDateRangePickerComponent_base {
static readonly tagName = "igc-date-range-picker";
static styles: import("lit").CSSResult[];
static register(): void;
private static readonly _increment;
protected readonly _inputId: string;
private readonly _themes;
protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<DateRangeValue | null>;
protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
private _activeDate;
private _min;
private _max;
private _disabledDates;
private _dateConstraints;
private _displayFormat?;
private _inputFormat?;
private _placeholder?;
private _defaultMask;
private _oldValue;
private _visibleMonths;
protected get __validators(): import("../common/validators.js").Validator<IgcDateRangePickerComponent>[];
private get _isDropDown();
private get _firstDefinedInRange();
private _maskedRangeValue;
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;
set value(value: DateRangeValue | string | null | undefined);
get value(): DateRangeValue | null;
/**
* Renders chips with custom ranges based on the elements of the array.
*/
customRanges: CustomDateRange[];
/**
* Determines whether the calendar is opened in a dropdown or a modal dialog
* @attr mode
*/
mode: PickerMode;
/**
* Use two inputs to display the date range values. Makes the input editable in dropdown mode.
* @attr use-two-inputs
*/
useTwoInputs: boolean;
/**
* Whether the control will show chips with predefined ranges.
* @attr
*/
usePredefinedRanges: boolean;
/**
* The locale settings used to display the value.
* @attr
*/
locale: string;
/** The resource strings of the date range picker. */
resourceStrings: import("../common/i18n/date-range-picker.resources.js").IgcDateRangePickerResourceStrings;
/**
* 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.
* @attr label-start
*/
labelStart: string;
/**
* The label attribute of the end input.
* @attr label-end
*/
labelEnd: string;
/**
* The placeholder attribute of the control (single input).
* @attr
*/
set placeholder(value: string);
get placeholder(): string;
/**
* The placeholder attribute of the start input.
* @attr placeholder-start
*/
placeholderStart: string;
/**
* The placeholder attribute 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 input 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 firstUpdated(): void;
protected formResetCallback(): void;
/** 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 _handleInputEvent(event: CustomEvent<Date | null>): void;
protected _handleInputChangeEvent(event: CustomEvent<Date | 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;
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.
*/
private _setCalendarActiveDateAndViewIndex;
private _getUpdatedDateRange;
private _delegateInputsValidity;
private _setDateConstraints;
private _updateMaskedRangeValue;
private _setCalendarRangeValues;
private _swapDates;
private _shouldCloseCalendarDropdown;
private _select;
private _renderClearIcon;
private _renderCalendarIcon;
private _renderCalendarSlots;
private _renderCalendar;
protected _renderActions(): TemplateResult<1>;
protected _renderPredefinedRanges(): TemplateResult<1> | typeof nothing;
protected _renderPicker(id: string): TemplateResult<1>;
private _renderHelperText;
protected _renderInput(id: string, picker?: DateRangePickerInput): TemplateResult<1>;
private _renderInputs;
private _renderSingleInput;
protected render(): TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-date-range-picker': IgcDateRangePickerComponent;
}
}
type DateRangePickerInput = 'start' | 'end';
export {};