igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/date-picker/date-picker.base.js

@@ -0,0 +1,480 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { addAriaProjector } from '#internals/controllers/aria-projection.js';
+import { addKeybindings, altKey, arrowDown, arrowUp, escapeKey, } from '#internals/controllers/key-bindings.js';
+import { addRootClickController } from '#internals/controllers/root-click.js';
+import { convertToDate } from '#internals/date/converters.js';
+import { IgcComboBoxBaseLikeComponent } from '#internals/mixins/combo-box.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';
+import { asArray } from '#internals/utils/arrays.js';
+import { addSafeEventListener, focusLeftHost, getElementFromPath, } from '#internals/utils/events.js';
+import { bindIf } from '#internals/utils/lit.js';
+import { equal } from '#internals/utils/objects.js';
+import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
+import { createDateConstraints } from '../calendar/helpers.js';
+import IgcDialogComponent from '../dialog/dialog.js';
+import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
+import IgcIconComponent from '../icon/icon.js';
+import IgcPopoverComponent from '../popover/popover.js';
+import IgcValidationContainerComponent from '../validation-container/validation-container.js';
+export const calendarExportParts = `header, header-title, header-date, content: calendar-content, navigation, months-navigation,
+  years-navigation, years-range, navigation-buttons, navigation-button, days-view-container,
+  days-view, months-view, years-view, days-row, months-row, years-row, label: calendar-label,
+  label-inner: calendar-label-inner, week-number, week-number-inner, date,
+  date-inner, first, last, inactive, hidden, weekend, range, special, disabled, single, preview,
+  month, month-inner, year, year-inner, selected, current`;
+const emptyValues = [];
+export const pickerDependencies = [
+    IgcCalendarComponent,
+    IgcDialogComponent,
+    IgcFocusTrapComponent,
+    IgcIconComponent,
+    IgcPopoverComponent,
+    IgcValidationContainerComponent,
+];
+export class IgcDatePickerBaseComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcComboBoxBaseLikeComponent)) {
+    get _isDropDown() {
+        return this.mode === 'dropdown';
+    }
+    get _isMaterial() {
+        return this._themes.theme === 'material';
+    }
+    get _isEditorReadOnly() {
+        return !this._isDropDown || this.readOnly || this.nonEditable;
+    }
+    get _calendarValue() {
+        return null;
+    }
+    get _calendarValues() {
+        return null;
+    }
+    get _defaultActiveDate() {
+        return this._calendarValue;
+    }
+    get _calendarIconTitle() {
+        return undefined;
+    }
+    get _dialogLabel() {
+        return this._selectDateLabel;
+    }
+    get _defaultDisplayFormat() {
+        return undefined;
+    }
+    get _defaultInputFormat() {
+        return undefined;
+    }
+    _canCloseOnSelect() {
+        return true;
+    }
+    _handleDismiss() { }
+    _onBlur() { }
+    _onDialogClosing() { }
+    _syncCalendarOnToggle() { }
+    _commitsCalendarSelection() {
+        return true;
+    }
+    set displayFormat(value) {
+        this._displayFormat = value;
+    }
+    get displayFormat() {
+        return (this._displayFormat ?? this._defaultDisplayFormat);
+    }
+    set inputFormat(value) {
+        this._inputFormat = value;
+    }
+    get inputFormat() {
+        return (this._inputFormat ?? this._defaultInputFormat);
+    }
+    set locale(value) {
+        this._i18nController.locale = value;
+    }
+    get locale() {
+        return this._i18nController.locale;
+    }
+    set min(value) {
+        this._min = convertToDate(value);
+        this._setDateConstraints();
+        this._validate();
+    }
+    get min() {
+        return this._min;
+    }
+    set max(value) {
+        this._max = convertToDate(value);
+        this._setDateConstraints();
+        this._validate();
+    }
+    get max() {
+        return this._max;
+    }
+    set disabledDates(dates) {
+        this._disabledDates = dates;
+        this._setDateConstraints();
+        this._validate();
+    }
+    get disabledDates() {
+        return this._disabledDates;
+    }
+    set activeDate(value) {
+        this._activeDate = convertToDate(value);
+    }
+    get activeDate() {
+        return this._activeDate ?? this._calendar?.activeDate;
+    }
+    set visibleMonths(value) {
+        this._visibleMonths = value;
+    }
+    get visibleMonths() {
+        return this._visibleMonths;
+    }
+    constructor() {
+        super();
+        this._oldValue = null;
+        this._activeDate = null;
+        this._min = null;
+        this._max = null;
+        this._disabledDates = [];
+        this._dateConstraints = [];
+        this._visibleMonths = 1;
+        this._rootClickController = addRootClickController(this, { onHide: this._handleClosing });
+        this.mode = 'dropdown';
+        this.readOnly = false;
+        this.nonEditable = false;
+        this.outlined = false;
+        this.prompt = '_';
+        this.headerOrientation = 'horizontal';
+        this.orientation = 'horizontal';
+        this.hideHeader = false;
+        this.hideOutsideDays = false;
+        this.showWeekNumbers = false;
+        this.weekStart = 'sunday';
+        addAriaProjector(this, {
+            target: () => this._projectionTarget,
+            state: () => ({
+                hasPopup: 'dialog',
+                labelledBy: this._internals.labels,
+                describedBy: this._helperText ? [this._helperText] : null,
+            }),
+        });
+        addSafeEventListener(this, 'focusout', this._handleFocusOut);
+        addKeybindings(this, {
+            skip: () => this.disabled || this.readOnly,
+        })
+            .set([altKey, arrowDown], this._handleAnchorClick)
+            .set([altKey, arrowUp], this._onEscapeKey)
+            .set(escapeKey, this._onEscapeKey);
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('open')) {
+            this._rootClickController.update();
+            if (this.open) {
+                this._oldValue = this._value;
+            }
+        }
+    }
+    _setDateConstraints() {
+        this._dateConstraints =
+            createDateConstraints(this._min, this._max, this._disabledDates) ?? [];
+    }
+    async _shouldCloseCalendarDropdown() {
+        if (this.keepOpenOnSelect || !this._canCloseOnSelect()) {
+            return;
+        }
+        if (await this._hide(true)) {
+            this._focusAndSelectInput();
+        }
+    }
+    async _restoreCalendarSelection() {
+        await this._calendar.updateComplete;
+        if (this._calendarSelection === 'single') {
+            this._calendar.value = this._calendarValue;
+        }
+        else {
+            this._calendar.values = this._calendarValues ?? emptyValues;
+        }
+    }
+    _emitChangeIfDirty() {
+        if (!equal(this._value, this._oldValue)) {
+            this.emitEvent('igcChange', { detail: this._value });
+            this._oldValue = this._value;
+        }
+    }
+    clear() {
+        this._oldValue = this._value;
+        this._value = null;
+        this._clearEditors();
+    }
+    async _onEscapeKey() {
+        if (await this._hide(true)) {
+            this._handleDismiss();
+            this._focusInput();
+        }
+    }
+    async _handleAnchorClick() {
+        super._handleAnchorClick();
+        this._syncCalendarOnToggle();
+        await this.updateComplete;
+        this._calendar[focusActiveDate]({ preventScroll: true });
+    }
+    _handleInputClick(event) {
+        if (getElementFromPath('input', event)) {
+            this._handleAnchorClick();
+        }
+    }
+    _handleCalendarIconSlotPointerDown(event) {
+        event.preventDefault();
+    }
+    _handleFocusOut(event) {
+        if (focusLeftHost(this, event)) {
+            this._handleBlur();
+            this._onBlur();
+        }
+    }
+    _handleClosing() {
+        this._hide(true);
+    }
+    async _handleCalendarChangeEvent(event) {
+        event.stopPropagation();
+        this._setTouchedState();
+        if (this.readOnly) {
+            await this._restoreCalendarSelection();
+            return;
+        }
+        this._value = this._valueFromCalendarSelection(asArray(event.detail));
+        if (this._commitsCalendarSelection()) {
+            this.emitEvent('igcChange', { detail: this._value });
+        }
+        this._shouldCloseCalendarDropdown();
+    }
+    _handleDialogClosing(event) {
+        event.stopPropagation();
+        this._onDialogClosing();
+        this._hide(true);
+    }
+    _handleDialogClosed(event) {
+        event.stopPropagation();
+    }
+    _renderClearIcon(part = 'clear-icon') {
+        return this._hasValue
+            ? html `
+          <span
+            slot="suffix"
+            part=${part}
+            @click=${bindIf(!this.readOnly, this.clear)}
+          >
+            <slot name=${part}>
+              <igc-icon
+                name="input_clear"
+                collection="default"
+                aria-hidden="true"
+              ></igc-icon>
+            </slot>
+          </span>
+        `
+            : nothing;
+    }
+    _renderCalendarIcon(suffix = '') {
+        const defaultIcon = html `
+      <igc-icon
+        name="today"
+        collection="default"
+        aria-hidden="true"
+        title=${ifDefined(this._calendarIconTitle)}
+      ></igc-icon>
+    `;
+        const part = `${this.open ? 'calendar-icon-open' : 'calendar-icon'}${suffix}`;
+        return html `
+      <span
+        slot="prefix"
+        part=${part}
+        @pointerdown=${this._handleCalendarIconSlotPointerDown}
+        @click=${bindIf(!this.readOnly, this._handleAnchorClick)}
+      >
+        <slot name=${part}>${defaultIcon}</slot>
+      </span>
+    `;
+    }
+    _renderEditorSlots(suffix = '') {
+        const prefixSlot = `prefix${suffix}`;
+        const suffixSlot = `suffix${suffix}`;
+        return html `
+      ${this._renderCalendarIcon(suffix)}
+      <slot
+        name=${prefixSlot}
+        slot=${bindIf(this._slots.hasAssignedElements(prefixSlot), 'prefix')}
+      ></slot>
+      ${this._renderClearIcon(`clear-icon${suffix}`)}
+      <slot
+        name=${suffixSlot}
+        slot=${bindIf(this._slots.hasAssignedElements(suffixSlot), 'suffix')}
+      ></slot>
+    `;
+    }
+    _renderCalendarSlots() {
+        if (this._isDropDown) {
+            return nothing;
+        }
+        const hasHeaderDate = this._slots.hasAssignedElements('header-date');
+        return html `
+      <slot name="title" slot="title">${this._selectDateLabel}</slot>
+      <slot
+        name="header-date"
+        slot=${bindIf(hasHeaderDate, 'header-date')}
+      ></slot>
+    `;
+    }
+    _renderCalendar(id) {
+        const hideHeader = this._isDropDown ? true : this.hideHeader;
+        const isInert = !this.open || this.disabled;
+        return html `
+      <igc-calendar
+        aria-labelledby=${id}
+        role="dialog"
+        selection=${this._calendarSelection}
+        .inert=${isInert}
+        ?show-week-numbers=${this.showWeekNumbers}
+        ?hide-outside-days=${this.hideOutsideDays}
+        ?hide-header=${hideHeader}
+        .activeDate=${this.activeDate ?? this._defaultActiveDate}
+        .value=${this._calendarValue}
+        .values=${this._calendarValues ?? emptyValues}
+        .headerOrientation=${this.headerOrientation}
+        .orientation=${this.orientation}
+        .visibleMonths=${this._visibleMonths}
+        .locale=${this.locale}
+        .disabledDates=${this._dateConstraints}
+        .specialDates=${this.specialDates}
+        .weekStart=${this.weekStart}
+        @igcChange=${this._handleCalendarChangeEvent}
+        exportparts=${calendarExportParts}
+      >
+        ${this._renderCalendarSlots()}
+      </igc-calendar>
+    `;
+    }
+    _renderActions() {
+        const hasActions = this._slots.hasAssignedElements('actions');
+        return html `
+      <div
+        part="actions"
+        ?hidden=${!hasActions}
+        slot=${bindIf(!this._isDropDown && hasActions, 'footer')}
+      >
+        <slot name="actions"></slot>
+      </div>
+    `;
+    }
+    _renderPickerContent(id) {
+        return html `${this._renderCalendar(id)}${this._renderActions()}`;
+    }
+    _renderDialogFooter() {
+        return nothing;
+    }
+    _renderPicker(id) {
+        const isDisabled = !this.open || this.disabled;
+        return this._isDropDown
+            ? html `
+          <igc-popover ?open=${this.open} anchor=${id} flip shift>
+            <igc-focus-trap ?disabled=${isDisabled}>
+              ${this._renderPickerContent(id)}
+            </igc-focus-trap>
+          </igc-popover>
+        `
+            : html `
+          <igc-dialog
+            aria-label=${ifDefined(this._dialogLabel)}
+            role="dialog"
+            ?open=${this.open}
+            ?close-on-outside-click=${!this.keepOpenOnOutsideClick}
+            hide-default-action
+            @igcClosing=${this._handleDialogClosing}
+            @igcClosed=${this._handleDialogClosed}
+            exportparts="base: dialog-base, title, footer, overlay"
+          >
+            ${this._renderPickerContent(id)}${this._renderDialogFooter()}
+          </igc-dialog>
+        `;
+    }
+    _renderHelperText() {
+        return IgcValidationContainerComponent.create(this);
+    }
+}
+__decorate([
+    query(IgcCalendarComponent.tagName)
+], IgcDatePickerBaseComponent.prototype, "_calendar", void 0);
+__decorate([
+    query('#helper-text')
+], IgcDatePickerBaseComponent.prototype, "_helperText", void 0);
+__decorate([
+    property()
+], IgcDatePickerBaseComponent.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'readonly' })
+], IgcDatePickerBaseComponent.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'non-editable' })
+], IgcDatePickerBaseComponent.prototype, "nonEditable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcDatePickerBaseComponent.prototype, "outlined", void 0);
+__decorate([
+    property()
+], IgcDatePickerBaseComponent.prototype, "label", void 0);
+__decorate([
+    property()
+], IgcDatePickerBaseComponent.prototype, "prompt", void 0);
+__decorate([
+    property({ attribute: 'display-format' })
+], IgcDatePickerBaseComponent.prototype, "displayFormat", null);
+__decorate([
+    property({ attribute: 'input-format' })
+], IgcDatePickerBaseComponent.prototype, "inputFormat", null);
+__decorate([
+    property()
+], IgcDatePickerBaseComponent.prototype, "locale", null);
+__decorate([
+    property({ converter: convertToDate })
+], IgcDatePickerBaseComponent.prototype, "min", null);
+__decorate([
+    property({ converter: convertToDate })
+], IgcDatePickerBaseComponent.prototype, "max", null);
+__decorate([
+    property({ attribute: false })
+], IgcDatePickerBaseComponent.prototype, "disabledDates", null);
+__decorate([
+    property({ attribute: false })
+], IgcDatePickerBaseComponent.prototype, "specialDates", void 0);
+__decorate([
+    property({ attribute: 'active-date', converter: convertToDate })
+], IgcDatePickerBaseComponent.prototype, "activeDate", null);
+__decorate([
+    property({ type: Number, attribute: 'visible-months' })
+], IgcDatePickerBaseComponent.prototype, "visibleMonths", null);
+__decorate([
+    property({ attribute: 'header-orientation', reflect: true })
+], IgcDatePickerBaseComponent.prototype, "headerOrientation", void 0);
+__decorate([
+    property()
+], IgcDatePickerBaseComponent.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-header' })
+], IgcDatePickerBaseComponent.prototype, "hideHeader", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-outside-days' })
+], IgcDatePickerBaseComponent.prototype, "hideOutsideDays", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })
+], IgcDatePickerBaseComponent.prototype, "showWeekNumbers", void 0);
+__decorate([
+    property({ attribute: 'week-start' })
+], IgcDatePickerBaseComponent.prototype, "weekStart", void 0);
+//# sourceMappingURL=date-picker.base.js.map

package/components/date-picker/date-picker.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.base.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addAriaProjector } from '#internals/controllers/aria-projection.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowUp,\n  escapeKey,\n} from '#internals/controllers/key-bindings.js';\nimport { addRootClickController } from '#internals/controllers/root-click.js';\nimport { convertToDate } from '#internals/date/converters.js';\nimport { IgcComboBoxBaseLikeComponent } from '#internals/mixins/combo-box.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { asArray } from '#internals/utils/arrays.js';\nimport {\n  addSafeEventListener,\n  focusLeftHost,\n  getElementFromPath,\n} from '#internals/utils/events.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { equal } from '#internals/utils/objects.js';\nimport type { ThemingController } from '#theming/theming-controller.js';\nimport IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';\nimport { createDateConstraints } from '../calendar/helpers.js';\nimport type {\n  CalendarHeaderOrientation,\n  CalendarSelection,\n  DateRangeDescriptor,\n  WeekDays,\n} from '../calendar/types.js';\nimport IgcDialogComponent from '../dialog/dialog.js';\nimport IgcFocusTrapComponent from '../focus-trap/focus-trap.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcPopoverComponent from '../popover/popover.js';\nimport type {\n  ContentOrientation,\n  DateRangeValue,\n  PickerMode,\n} from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\n\n/**\n * The events emitted by a picker driven by a calendar.\n * `T` is the value type of the picker - a single date or a date range.\n */\nexport interface IgcPickerBaseEventMap<T> {\n  igcOpening: CustomEvent<void>;\n  igcOpened: CustomEvent<void>;\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n  igcChange: CustomEvent<T | null>;\n  igcInput: CustomEvent<T | null>;\n}\n\n/** The parts of the calendar which the pickers re-export to their own consumers. */\nexport const calendarExportParts =\n  `header, header-title, header-date, content: calendar-content, navigation, months-navigation,\n  years-navigation, years-range, navigation-buttons, navigation-button, days-view-container,\n  days-view, months-view, years-view, days-row, months-row, years-row, label: calendar-label,\n  label-inner: calendar-label-inner, week-number, week-number-inner, date,\n  date-inner, first, last, inactive, hidden, weekend, range, special, disabled, single, preview,\n  month, month-inner, year, year-inner, selected, current` as const;\n\n/** Stable identity for \"no range\", so that the calendar binding is committed only once. */\nconst emptyValues: Date[] = [];\n\n/** The components rendered by the picker chrome of every picker. */\nexport const pickerDependencies = [\n  IgcCalendarComponent,\n  IgcDialogComponent,\n  IgcFocusTrapComponent,\n  IgcIconComponent,\n  IgcPopoverComponent,\n  IgcValidationContainerComponent,\n];\n\n/**\n * The subset of the slot controller which the base picker queries.\n * Kept structural so that each picker can declare its own set of slot names.\n */\ntype PickerSlots = {\n  hasAssignedElements(slot: string): boolean;\n};\n\n/* blazorIndirectRender */\n/* omitModule */\n/**\n * Common behavior for the pickers which drive an `igc-calendar` from an editor -\n * {@link IgcDatePickerComponent} and {@link IgcDateRangePickerComponent}.\n *\n * It owns the calendar and editor facing properties, the open/close plumbing and the\n * picker chrome - calendar, popover/dialog, icons and actions. The value itself, its\n * form state and the editors are left to the concrete pickers.\n */\nexport abstract class IgcDatePickerBaseComponent<\n  T extends Date | DateRangeValue,\n> extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<\n    IgcPickerBaseEventMap<Date | DateRangeValue>,\n    AbstractConstructor<IgcComboBoxBaseLikeComponent>\n  >(IgcComboBoxBaseLikeComponent)\n) {\n  //#region Internal state and properties\n\n  protected _oldValue: T | null = null;\n\n  protected _activeDate: Date | null = null;\n  protected _min: Date | null = null;\n  protected _max: Date | null = null;\n  protected _disabledDates: DateRangeDescriptor[] = [];\n  protected _dateConstraints: DateRangeDescriptor[] = [];\n  protected _displayFormat?: string;\n  protected _inputFormat?: string;\n  protected _visibleMonths = 1;\n\n  protected override readonly _rootClickController = addRootClickController(\n    this,\n    { onHide: this._handleClosing }\n  );\n\n  @query(IgcCalendarComponent.tagName)\n  protected readonly _calendar!: IgcCalendarComponent;\n\n  @query('#helper-text')\n  protected readonly _helperText!: IgcValidationContainerComponent | null;\n\n  protected get _isDropDown(): boolean {\n    return this.mode === 'dropdown';\n  }\n\n  protected get _isMaterial(): boolean {\n    return this._themes.theme === 'material';\n  }\n\n  /** Dialog mode is always read-only, the rest depends on the configuration. */\n  protected get _isEditorReadOnly(): boolean {\n    return !this._isDropDown || this.readOnly || this.nonEditable;\n  }\n\n  //#endregion\n\n  //#region Abstract members\n\n  /** The id of the editor the picker is anchored to. */\n  protected abstract readonly _inputId: string;\n\n  /** The slots of the concrete picker. */\n  protected abstract readonly _slots: PickerSlots;\n\n  /** The theming controller of the concrete picker. */\n  protected abstract readonly _themes: ThemingController;\n\n  /**\n   * The localization controller of the concrete picker.\n   * Only the locale is shared - the resource strings differ per picker.\n   */\n  protected abstract readonly _i18nController: { locale: string };\n\n  /**\n   * The current value of the picker.\n   *\n   * The public `value` is declared by the concrete pickers, since its type,\n   * converter and form state differ between them.\n   */\n  protected abstract get _value(): T | null;\n  protected abstract set _value(value: T | null);\n\n  /** Clears any user input left in the editor(s) of the picker. */\n  protected abstract _clearEditors(): void;\n\n  /** Whether the picker holds a value. */\n  protected abstract get _hasValue(): boolean;\n\n  /** The selection mode of the underlying calendar. */\n  protected abstract get _calendarSelection(): CalendarSelection;\n\n  /** The localized label of the calendar picker. */\n  protected abstract get _selectDateLabel(): string | undefined;\n\n  /**\n   * The editor the host's ARIA state is projected onto — its associated\n   * labels and the `aria-haspopup=\"dialog\"` semantics of the picker, both of\n   * which must land on the native input assistive technology reports.\n   */\n  protected abstract get _projectionTarget(): Element | null;\n\n  /** Moves focus to the editor of the picker. */\n  protected abstract _focusInput(): void;\n\n  /** Restores focus to the editor after a value has been selected in the calendar. */\n  protected abstract _focusAndSelectInput(): void;\n\n  /**\n   * Resolves the value of the picker from the dates selected in the calendar, which come\n   * in ascending order.\n   */\n  protected abstract _valueFromCalendarSelection(dates: Date[]): T | null;\n\n  //#endregion\n\n  //#region Overridable hooks\n\n  /** The value reflected in the calendar when it is in single selection mode. */\n  protected get _calendarValue(): Date | null {\n    return null;\n  }\n\n  /** The values reflected in the calendar when it is in range selection mode. */\n  protected get _calendarValues(): Date[] | null {\n    return null;\n  }\n\n  /**\n   * Seeds the active date of the calendar on the initial render, when the picker holds\n   * a value but no explicit active date. From then on the calendar owns its active date\n   * and `activeDate` reads it back, so this is consulted once.\n   */\n  protected get _defaultActiveDate(): Date | null {\n    return this._calendarValue;\n  }\n\n  /** The title of the calendar icon, if the picker provides one. */\n  protected get _calendarIconTitle(): string | undefined {\n    return undefined;\n  }\n\n  /** The accessible name of the picker in dialog mode. */\n  protected get _dialogLabel(): string | undefined {\n    return this._selectDateLabel;\n  }\n\n  /** The format the editor(s) fall back to when no display format is set. */\n  protected get _defaultDisplayFormat(): string | undefined {\n    return undefined;\n  }\n\n  /** The format the editor(s) fall back to when no input format is set. */\n  protected get _defaultInputFormat(): string | undefined {\n    return undefined;\n  }\n\n  /** Whether the current calendar selection is complete enough to close the picker. */\n  protected _canCloseOnSelect(): boolean {\n    return true;\n  }\n\n  /** Invoked when the picker is dismissed through the Escape key. */\n  protected _handleDismiss(): void {}\n\n  /** Invoked when focus has left the picker for good. */\n  protected _onBlur(): void {}\n\n  /** Invoked when the dialog of the picker is closing, before the picker is hidden. */\n  protected _onDialogClosing(): void {}\n\n  /** Invoked when the picker is toggled, before the update is awaited. */\n  protected _syncCalendarOnToggle(): void {}\n\n  /** Whether a selection made in the calendar commits the value of the picker right away. */\n  protected _commitsCalendarSelection(): boolean {\n    return true;\n  }\n\n  //#endregion\n\n  //#region Public properties and attributes\n\n  /**\n   * Determines whether the calendar is opened in a dropdown or a modal dialog.\n   * @attr mode\n   * @default dropdown\n   */\n  @property()\n  public mode: PickerMode = 'dropdown';\n\n  /**\n   * Makes the control a readonly field.\n   * @attr readonly\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'readonly' })\n  public readOnly = false;\n\n  /**\n   * Whether to allow typing in the input.\n   * @attr non-editable\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'non-editable' })\n  public nonEditable = false;\n\n  /**\n   * Whether the control will have outlined appearance.\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The label of the picker.\n   * @attr label\n   */\n  @property()\n  public label!: string;\n\n  /**\n   * The prompt symbol to use for unfilled parts of the mask.\n   * @attr\n   * @default _\n   */\n  @property()\n  public prompt = '_';\n\n  /**\n   * Format to display the value in when not editing.\n   * Defaults to the locale format if not set.\n   * @attr display-format\n   */\n  @property({ attribute: 'display-format' })\n  public set displayFormat(value: string) {\n    this._displayFormat = value;\n  }\n\n  public get displayFormat(): string {\n    return (this._displayFormat ?? this._defaultDisplayFormat)!;\n  }\n\n  /**\n   * The date format to apply on the input.\n   * Defaults to the current locale Intl.DateTimeFormat\n   * @attr input-format\n   */\n  @property({ attribute: 'input-format' })\n  public set inputFormat(value: string) {\n    this._inputFormat = value;\n  }\n\n  public get inputFormat(): string {\n    return (this._inputFormat ?? this._defaultInputFormat)!;\n  }\n\n  /**\n   * Gets/Sets the locale used for formatting the display value.\n   * @attr locale\n   */\n  @property()\n  public set locale(value: string) {\n    this._i18nController.locale = value;\n  }\n\n  public get locale(): string {\n    return this._i18nController.locale;\n  }\n\n  /**\n   * The minimum value required for the picker to remain valid.\n   * @attr\n   */\n  @property({ converter: convertToDate })\n  public set min(value: Date | string | null | undefined) {\n    this._min = convertToDate(value);\n    this._setDateConstraints();\n    this._validate();\n  }\n\n  public get min(): Date | null {\n    return this._min;\n  }\n\n  /**\n   * The maximum value required for the picker to remain valid.\n   * @attr\n   */\n  @property({ converter: convertToDate })\n  public set max(value: Date | string | null | undefined) {\n    this._max = convertToDate(value);\n    this._setDateConstraints();\n    this._validate();\n  }\n\n  public get max(): Date | null {\n    return this._max;\n  }\n\n  /** Gets/sets disabled dates. */\n  @property({ attribute: false })\n  public set disabledDates(dates: DateRangeDescriptor[]) {\n    this._disabledDates = dates;\n    this._setDateConstraints();\n    this._validate();\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] {\n    return this._disabledDates;\n  }\n\n  /** Gets/sets special dates. */\n  @property({ attribute: false })\n  public specialDates!: DateRangeDescriptor[];\n\n  /**\n   * Gets/Sets the date which is shown in the calendar picker and is highlighted.\n   * By default it is the current date.\n   */\n  @property({ attribute: 'active-date', converter: convertToDate })\n  public set activeDate(value: Date | string | null | undefined) {\n    this._activeDate = convertToDate(value);\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate ?? this._calendar?.activeDate;\n  }\n\n  /**\n   * The number of months displayed in the calendar.\n   * @attr visible-months\n   * @default 1\n   */\n  @property({ type: Number, attribute: 'visible-months' })\n  public set visibleMonths(value: number) {\n    this._visibleMonths = value;\n  }\n\n  public get visibleMonths(): number {\n    return this._visibleMonths;\n  }\n\n  /**\n   * The orientation of the calendar header.\n   * @attr header-orientation\n   * @default horizontal\n   */\n  @property({ attribute: 'header-orientation', reflect: true })\n  public headerOrientation: CalendarHeaderOrientation = 'horizontal';\n\n  /**\n   * The orientation of the multiple months displayed in the calendar's days view.\n   * @attr\n   * @default horizontal\n   */\n  @property()\n  public orientation: ContentOrientation = 'horizontal';\n\n  /**\n   * Determines whether the calendar hides its header.\n   * @attr hide-header\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-header' })\n  public hideHeader = false;\n\n  /**\n   * Controls the visibility of the dates that do not belong to the current month.\n   * @attr hide-outside-days\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-outside-days' })\n  public hideOutsideDays = false;\n\n  /**\n   * Whether to show the number of the week in the calendar.\n   * @attr show-week-numbers\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /** Sets the start day of the week for the calendar. */\n  @property({ attribute: 'week-start' })\n  public weekStart: WeekDays = 'sunday';\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  constructor() {\n    super();\n\n    // Projects the host's labels and popup semantics onto the native input\n    // inside the editor (see ProjectedARIA for why the host cannot publish\n    // these itself).\n    addAriaProjector(this, {\n      target: () => this._projectionTarget,\n      state: () => ({\n        hasPopup: 'dialog',\n        labelledBy: this._internals.labels,\n        describedBy: this._helperText ? [this._helperText] : null,\n      }),\n    });\n\n    addSafeEventListener(this, 'focusout', this._handleFocusOut);\n\n    addKeybindings(this, {\n      skip: () => this.disabled || this.readOnly,\n    })\n      .set([altKey, arrowDown], this._handleAnchorClick)\n      .set([altKey, arrowUp], this._onEscapeKey)\n      .set(escapeKey, this._onEscapeKey);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('open')) {\n      this._rootClickController.update();\n\n      if (this.open) {\n        this._oldValue = this._value;\n      }\n    }\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  protected _setDateConstraints(): void {\n    this._dateConstraints =\n      createDateConstraints(this._min, this._max, this._disabledDates) ?? [];\n  }\n\n  protected async _shouldCloseCalendarDropdown(): Promise<void> {\n    if (this.keepOpenOnSelect || !this._canCloseOnSelect()) {\n      return;\n    }\n\n    if (await this._hide(true)) {\n      this._focusAndSelectInput();\n    }\n  }\n\n  /**\n   * Pushes the value of the picker back onto the calendar, which a read-only picker has\n   * to do directly - the binding is left with nothing to re-commit.\n   */\n  protected async _restoreCalendarSelection(): Promise<void> {\n    await this._calendar.updateComplete;\n\n    if (this._calendarSelection === 'single') {\n      this._calendar.value = this._calendarValue;\n    } else {\n      this._calendar.values = this._calendarValues ?? emptyValues;\n    }\n  }\n\n  /** Emits `igcChange` if the value has moved away from the last committed one. */\n  protected _emitChangeIfDirty(): void {\n    if (!equal(this._value, this._oldValue)) {\n      this.emitEvent('igcChange', { detail: this._value });\n      this._oldValue = this._value;\n    }\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /** Clears the editor(s) of the picker of any user input. */\n  public clear(): void {\n    this._oldValue = this._value;\n    this._value = null;\n    this._clearEditors();\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected async _onEscapeKey(): Promise<void> {\n    if (await this._hide(true)) {\n      this._handleDismiss();\n      this._focusInput();\n    }\n  }\n\n  protected override async _handleAnchorClick(): Promise<void> {\n    super._handleAnchorClick();\n    this._syncCalendarOnToggle();\n    await this.updateComplete;\n    this._calendar[focusActiveDate]({ preventScroll: true });\n  }\n\n  protected _handleInputClick(event: Event): void {\n    if (getElementFromPath('input', event)) {\n      // Open only if the click originates from the underlying input\n      this._handleAnchorClick();\n    }\n  }\n\n  protected _handleCalendarIconSlotPointerDown(event: PointerEvent): void {\n    // Keeps the `delegatesFocus` of the host from focusing the editor, which would enter\n    // an invalid state on blur as focus moves on to the calendar.\n    event.preventDefault();\n  }\n\n  protected _handleFocusOut(event: FocusEvent): void {\n    if (focusLeftHost(this, event)) {\n      this._handleBlur();\n      this._onBlur();\n    }\n  }\n\n  protected _handleClosing(): void {\n    this._hide(true);\n  }\n\n  protected async _handleCalendarChangeEvent(\n    event: CustomEvent<Date | Date[]>\n  ): Promise<void> {\n    event.stopPropagation();\n    this._setTouchedState();\n\n    if (this.readOnly) {\n      await this._restoreCalendarSelection();\n      return;\n    }\n\n    this._value = this._valueFromCalendarSelection(asArray(event.detail));\n\n    if (this._commitsCalendarSelection()) {\n      this.emitEvent('igcChange', { detail: this._value });\n    }\n\n    this._shouldCloseCalendarDropdown();\n  }\n\n  protected _handleDialogClosing(event: Event): void {\n    event.stopPropagation();\n    this._onDialogClosing();\n    this._hide(true);\n  }\n\n  protected _handleDialogClosed(event: Event): void {\n    event.stopPropagation();\n  }\n\n  //#endregion\n\n  //#region Rendering\n\n  protected _renderClearIcon(part = 'clear-icon') {\n    return this._hasValue\n      ? html`\n          <span\n            slot=\"suffix\"\n            part=${part}\n            @click=${bindIf(!this.readOnly, this.clear)}\n          >\n            <slot name=${part}>\n              <igc-icon\n                name=\"input_clear\"\n                collection=\"default\"\n                aria-hidden=\"true\"\n              ></igc-icon>\n            </slot>\n          </span>\n        `\n      : nothing;\n  }\n\n  protected _renderCalendarIcon(suffix = '') {\n    const defaultIcon = html`\n      <igc-icon\n        name=\"today\"\n        collection=\"default\"\n        aria-hidden=\"true\"\n        title=${ifDefined(this._calendarIconTitle)}\n      ></igc-icon>\n    `;\n\n    const part = `${this.open ? 'calendar-icon-open' : 'calendar-icon'}${suffix}`;\n\n    return html`\n      <span\n        slot=\"prefix\"\n        part=${part}\n        @pointerdown=${this._handleCalendarIconSlotPointerDown}\n        @click=${bindIf(!this.readOnly, this._handleAnchorClick)}\n      >\n        <slot name=${part}>${defaultIcon}</slot>\n      </span>\n    `;\n  }\n\n  /**\n   * The content projected into an editor of the picker - its icons and prefix/suffix slots.\n   *\n   * The suffix distinguishes the editors of a picker which renders more than one,\n   * e.g. `-start` and `-end`.\n   */\n  protected _renderEditorSlots(suffix = '') {\n    const prefixSlot = `prefix${suffix}`;\n    const suffixSlot = `suffix${suffix}`;\n\n    return html`\n      ${this._renderCalendarIcon(suffix)}\n      <slot\n        name=${prefixSlot}\n        slot=${bindIf(this._slots.hasAssignedElements(prefixSlot), 'prefix')}\n      ></slot>\n      ${this._renderClearIcon(`clear-icon${suffix}`)}\n      <slot\n        name=${suffixSlot}\n        slot=${bindIf(this._slots.hasAssignedElements(suffixSlot), 'suffix')}\n      ></slot>\n    `;\n  }\n\n  protected _renderCalendarSlots() {\n    if (this._isDropDown) {\n      return nothing;\n    }\n\n    const hasHeaderDate = this._slots.hasAssignedElements('header-date');\n\n    return html`\n      <slot name=\"title\" slot=\"title\">${this._selectDateLabel}</slot>\n      <slot\n        name=\"header-date\"\n        slot=${bindIf(hasHeaderDate, 'header-date')}\n      ></slot>\n    `;\n  }\n\n  protected _renderCalendar(id: string) {\n    const hideHeader = this._isDropDown ? true : this.hideHeader;\n    const isInert = !this.open || this.disabled;\n\n    return html`\n      <igc-calendar\n        aria-labelledby=${id}\n        role=\"dialog\"\n        selection=${this._calendarSelection}\n        .inert=${isInert}\n        ?show-week-numbers=${this.showWeekNumbers}\n        ?hide-outside-days=${this.hideOutsideDays}\n        ?hide-header=${hideHeader}\n        .activeDate=${this.activeDate ?? this._defaultActiveDate}\n        .value=${this._calendarValue}\n        .values=${this._calendarValues ?? emptyValues}\n        .headerOrientation=${this.headerOrientation}\n        .orientation=${this.orientation}\n        .visibleMonths=${this._visibleMonths}\n        .locale=${this.locale}\n        .disabledDates=${this._dateConstraints}\n        .specialDates=${this.specialDates}\n        .weekStart=${this.weekStart}\n        @igcChange=${this._handleCalendarChangeEvent}\n        exportparts=${calendarExportParts}\n      >\n        ${this._renderCalendarSlots()}\n      </igc-calendar>\n    `;\n  }\n\n  protected _renderActions() {\n    const hasActions = this._slots.hasAssignedElements('actions');\n\n    // If in dialog mode use the dialog footer slot\n    return html`\n      <div\n        part=\"actions\"\n        ?hidden=${!hasActions}\n        slot=${bindIf(!this._isDropDown && hasActions, 'footer')}\n      >\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  /** The content rendered inside the popover/dialog of the picker. */\n  protected _renderPickerContent(id: string) {\n    return html`${this._renderCalendar(id)}${this._renderActions()}`;\n  }\n\n  /** Additional content rendered in the dialog of the picker. */\n  protected _renderDialogFooter(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  protected _renderPicker(id: string) {\n    const isDisabled = !this.open || this.disabled;\n\n    return this._isDropDown\n      ? html`\n          <igc-popover ?open=${this.open} anchor=${id} flip shift>\n            <igc-focus-trap ?disabled=${isDisabled}>\n              ${this._renderPickerContent(id)}\n            </igc-focus-trap>\n          </igc-popover>\n        `\n      : html`\n          <igc-dialog\n            aria-label=${ifDefined(this._dialogLabel)}\n            role=\"dialog\"\n            ?open=${this.open}\n            ?close-on-outside-click=${!this.keepOpenOnOutsideClick}\n            hide-default-action\n            @igcClosing=${this._handleDialogClosing}\n            @igcClosed=${this._handleDialogClosed}\n            exportparts=\"base: dialog-base, title, footer, overlay\"\n          >\n            ${this._renderPickerContent(id)}${this._renderDialogFooter()}\n          </igc-dialog>\n        `;\n  }\n\n  protected _renderHelperText(): TemplateResult {\n    return IgcValidationContainerComponent.create(this);\n  }\n\n  //#endregion\n}\n"]}