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.
289 lines (288 loc) • 12.5 kB
TypeScript
import { type TemplateResult } from 'lit';
import { type DateRangeDescriptor, type WeekDays } from '../calendar/types.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 FormValue } from '../common/mixins/forms/form-value.js';
import type { DatePart } from '../date-time-input/date-util.js';
import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
export interface IgcDatePickerComponentEventMap {
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/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<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 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 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;
protected get __validators(): import("../common/validators.js").Validator<IgcDatePickerComponent>[];
static register(): void;
private _activeDate;
private _min;
private _max;
private _disabledDates?;
private _dateConstraints?;
private _displayFormat?;
private _inputFormat?;
private get isDropDown();
private _input;
private _calendar;
private prefixes;
private suffixes;
private actions;
private headerDateSlotItems;
protected get _isMaterialTheme(): boolean;
protected _formValue: FormValue<Date | null>;
/**
* 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 | 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: '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: WeekDays;
constructor();
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?: SelectionRangeDirection): void;
setRangeText(replacement: string, start: number, end: number, mode?: RangeTextSelectMode): 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 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>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-date-picker': IgcDatePickerComponent;
}
}
export {};