igniteui-webcomponents 6.0.0 → 6.1.0

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

@@ -3,8 +3,8 @@ import { type CalendarHeaderOrientation, type DateRangeDescriptor, type WeekDays
 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 FormValueOf } from '../common/mixins/forms/form-value.js';
+import { type DatePart } from '../date-time-input/date-util.js';
 import type { ContentOrientation, PickerMode, RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
 export interface IgcDatePickerComponentEventMap {
     igcOpening: CustomEvent<void>;
@@ -100,10 +100,10 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
-    private static readonly increment;
-    protected inputId: string;
-    protected get __validators(): import("../common/validators.js").Validator<IgcDatePickerComponent>[];
     static register(): void;
+    private static readonly _increment;
+    protected _inputId: string;
+    protected get __validators(): import("../common/validators.js").Validator<IgcDatePickerComponent>[];
     private _activeDate;
     private _min;
     private _max;
@@ -111,15 +111,15 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     private _dateConstraints?;
     private _displayFormat?;
     private _inputFormat?;
-    private get isDropDown();
-    private _input;
-    private _calendar;
-    private prefixes;
-    private suffixes;
-    private actions;
-    private headerDateSlotItems;
+    protected readonly _formValue: FormValueOf<Date | null>;
+    private readonly _input;
+    private readonly _calendar;
+    private readonly _prefixes;
+    private readonly _suffixes;
+    private readonly _actions;
+    private readonly _headerSlotItems;
+    private get _isDropDown();
     protected get _isMaterialTheme(): boolean;
-    protected _formValue: FormValue<Date | null>;
     /**
      * Sets the state of the datepicker dropdown.
      * @attr
@@ -239,11 +239,25 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     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;
+    protected _openChange(): void;
     constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    private _setDateConstraints;
+    private _shouldCloseCalendarDropdown;
+    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>;
+    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;
     /** Increments the passed in date part */
@@ -255,29 +269,15 @@ 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;
-    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>;
+    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 {

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

@@ -22,8 +22,9 @@ import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import { createFormValueState, defaultDateTimeTransformers, } from '../common/mixins/forms/form-value.js';
-import { createCounter, findElementFromEventPath } from '../common/util.js';
+import { createCounter, findElementFromEventPath, isEmpty, } from '../common/util.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
+import { DateTimeUtil } from '../date-time-input/date-util.js';
 import IgcDialogComponent from '../dialog/dialog.js';
 import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -33,15 +34,14 @@ import { styles } from './themes/date-picker.base.css.js';
 import { styles as shared } from './themes/shared/date-picker.common.css.js';
 import { all } from './themes/themes.js';
 import { datePickerValidators } from './validators.js';
-const formats = new Set(['short', 'medium', 'long', 'full']);
 let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
-    get __validators() {
-        return datePickerValidators;
-    }
     static register() {
         registerComponent(IgcDatePickerComponent_1, IgcCalendarComponent, IgcDateTimeInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent);
     }
-    get isDropDown() {
+    get __validators() {
+        return datePickerValidators;
+    }
+    get _isDropDown() {
         return this.mode === 'dropdown';
     }
     get _isMaterialTheme() {
@@ -62,7 +62,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     }
     set min(value) {
         this._min = convertToDate(value);
-        this.setDateConstraints();
+        this._setDateConstraints();
         this._updateValidity();
     }
     get min() {
@@ -70,7 +70,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     }
     set max(value) {
         this._max = convertToDate(value);
-        this.setDateConstraints();
+        this._setDateConstraints();
         this._updateValidity();
     }
     get max() {
@@ -78,7 +78,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     }
     set disabledDates(dates) {
         this._disabledDates = dates;
-        this.setDateConstraints();
+        this._setDateConstraints();
         this._updateValidity();
     }
     get disabledDates() {
@@ -96,15 +96,19 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     get inputFormat() {
         return this._inputFormat ?? this._input?.inputFormat;
     }
-    openChange() {
+    _openChange() {
         this._rootClickController.update();
     }
     constructor() {
         super();
-        this.inputId = `date-picker-${IgcDatePickerComponent_1.increment()}`;
+        this._inputId = `date-picker-${IgcDatePickerComponent_1._increment()}`;
         this._activeDate = null;
         this._min = null;
         this._max = null;
+        this._formValue = createFormValueState(this, {
+            initialValue: null,
+            transformers: defaultDateTimeTransformers,
+        });
         this.open = false;
         this.mode = 'dropdown';
         this.nonEditable = false;
@@ -120,63 +124,64 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
         this.prompt = '_';
         this.resourceStrings = IgcCalendarResourceStringEN;
         this.weekStart = 'sunday';
-        this._formValue = createFormValueState(this, {
-            initialValue: null,
-            transformers: defaultDateTimeTransformers,
-        });
-        this.addEventListener('focusin', this.handleFocusIn);
-        this.addEventListener('focusout', this.handleFocusOut);
-        this._rootClickController.update({ hideCallback: this.handleClosing });
+        this.addEventListener('focusin', this._handleFocusIn);
+        this.addEventListener('focusout', this._handleFocusOut);
+        this._rootClickController.update({ hideCallback: this._handleClosing });
         addKeybindings(this, {
-            skip: () => this.disabled,
+            skip: () => this.disabled || this.readOnly,
             bindingDefaults: { preventDefault: true },
         })
             .set([altKey, arrowDown], this.handleAnchorClick)
-            .set([altKey, arrowUp], this.onEscapeKey)
-            .set(escapeKey, this.onEscapeKey);
+            .set([altKey, arrowUp], this._onEscapeKey)
+            .set(escapeKey, this._onEscapeKey);
     }
     createRenderRoot() {
         const root = super.createRenderRoot();
         root.addEventListener('slotchange', () => this.requestUpdate());
         return root;
     }
-    clear() {
-        this.value = null;
-        this._input?.clear();
-    }
-    stepUp(datePart, delta) {
-        this._input.stepUp(datePart, delta);
-    }
-    stepDown(datePart, delta) {
-        this._input.stepDown(datePart, delta);
-    }
-    select() {
-        this._input.select();
-    }
-    setSelectionRange(start, end, direction) {
-        this._input.setSelectionRange(start, end, direction);
+    _setDateConstraints() {
+        const dates = [];
+        if (this._min) {
+            dates.push({
+                type: DateRangeType.Before,
+                dateRange: [this._min],
+            });
+        }
+        if (this._max) {
+            dates.push({
+                type: DateRangeType.After,
+                dateRange: [this._max],
+            });
+        }
+        if (!isEmpty(this._disabledDates ?? [])) {
+            dates.push(...this.disabledDates);
+        }
+        this._dateConstraints = isEmpty(dates) ? undefined : dates;
     }
-    setRangeText(replacement, start, end, mode) {
-        this._input.setRangeText(replacement, start, end, mode);
-        this.value = this._input.value;
+    async _shouldCloseCalendarDropdown() {
+        if (!this.keepOpenOnSelect && (await this._hide(true))) {
+            this._input.focus();
+            this._input.select();
+        }
     }
-    async onEscapeKey() {
+    async _onEscapeKey() {
         if (await this._hide(true)) {
             this._input.focus();
         }
     }
-    handleFocusIn() {
+    _handleFocusIn() {
         this._dirty = true;
     }
-    handleFocusOut({ relatedTarget }) {
+    _handleFocusOut({ relatedTarget }) {
         if (!this.contains(relatedTarget)) {
             this.checkValidity();
         }
     }
-    handlerCalendarIconSlotPointerDown(event) {
+    _handlerCalendarIconSlotPointerDown(event) {
         event.preventDefault();
     }
-    handleInputClick(event) {
+    _handleInputClick(event) {
         if (findElementFromEventPath('input', event)) {
             this.handleAnchorClick();
         }
@@ -187,18 +192,12 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
         await this.updateComplete;
         this._calendar[focusActiveDate]();
     }
-    async _shouldCloseCalendarDropdown() {
-        if (!this.keepOpenOnSelect && (await this._hide(true))) {
-            this._input.focus();
-            this._input.select();
-        }
-    }
-    handleInputChangeEvent(event) {
+    _handleInputChangeEvent(event) {
         event.stopPropagation();
         this.value = event.target.value;
         this.emitEvent('igcChange', { detail: this.value });
     }
-    async handleCalendarChangeEvent(event) {
+    async _handleCalendarChangeEvent(event) {
         event.stopPropagation();
         if (this.readOnly) {
             await this._calendar.updateComplete;
@@ -209,7 +208,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
         this.emitEvent('igcChange', { detail: this.value });
         this._shouldCloseCalendarDropdown();
     }
-    handleInputEvent(event) {
+    _handleInputEvent(event) {
         event.stopPropagation();
         if (this.nonEditable) {
             event.preventDefault();
@@ -218,40 +217,44 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
         this.value = event.target.value;
         this.emitEvent('igcInput', { detail: this.value });
     }
-    handleClosing() {
+    _handleClosing() {
         this._hide(true);
     }
-    handleDialogClosing(event) {
+    _handleDialogClosing(event) {
         event.stopPropagation();
         this._hide(true);
     }
-    handleDialogClosed(event) {
+    _handleDialogClosed(event) {
         event.stopPropagation();
     }
-    setDateConstraints() {
-        const dates = [];
-        if (this._min) {
-            dates.push({
-                type: DateRangeType.Before,
-                dateRange: [this._min],
-            });
-        }
-        if (this._max) {
-            dates.push({
-                type: DateRangeType.After,
-                dateRange: [this._max],
-            });
-        }
-        if (this._disabledDates?.length) {
-            dates.push(...this.disabledDates);
-        }
-        this._dateConstraints = dates.length ? dates : undefined;
+    clear() {
+        this.value = null;
+        this._input?.clear();
     }
-    renderClearIcon() {
-        return !this.value
-            ? nothing
-            : html `
-          <span slot="suffix" part="clear-icon" @click=${this.clear}>
+    stepUp(datePart, delta) {
+        this._input.stepUp(datePart, delta);
+    }
+    stepDown(datePart, delta) {
+        this._input.stepDown(datePart, delta);
+    }
+    select() {
+        this._input.select();
+    }
+    setSelectionRange(start, end, direction) {
+        this._input.setSelectionRange(start, end, direction);
+    }
+    setRangeText(replacement, start, end, mode) {
+        this._input.setRangeText(replacement, start, end, mode);
+        this.value = this._input.value;
+    }
+    _renderClearIcon() {
+        return this.value
+            ? html `
+          <span
+            slot="suffix"
+            part="clear-icon"
+            @click=${this.readOnly ? nothing : this.clear}
+          >
             <slot name="clear-icon">
               <igc-icon
                 name="input_clear"
@@ -260,9 +263,10 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
               ></igc-icon>
             </slot>
           </span>
-        `;
+        `
+            : nothing;
     }
-    renderCalendarIcon() {
+    _renderCalendarIcon() {
         const defaultIcon = html `
       <igc-icon name="today" collection="default" aria-hidden="true"></igc-icon>
     `;
@@ -271,18 +275,18 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
       <span
         slot="prefix"
         part=${state}
-        @pointerdown=${this.handlerCalendarIconSlotPointerDown}
-        @click=${this.handleAnchorClick}
+        @pointerdown=${this._handlerCalendarIconSlotPointerDown}
+        @click=${this.readOnly ? nothing : this.handleAnchorClick}
       >
         <slot name=${state}>${defaultIcon}</slot>
       </span>
     `;
     }
-    renderCalendarSlots() {
-        if (this.isDropDown) {
+    _renderCalendarSlots() {
+        if (this._isDropDown) {
             return nothing;
         }
-        const hasHeaderDate = this.headerDateSlotItems.length ? 'header-date' : '';
+        const hasHeaderDate = isEmpty(this._headerSlotItems) ? '' : 'header-date';
         return html `
       <slot name="title" slot="title">
         ${this.resourceStrings.selectDate}
@@ -290,8 +294,8 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
       <slot name="header-date" slot=${hasHeaderDate}></slot>
     `;
     }
-    renderCalendar(id) {
-        const hideHeader = this.isDropDown ? true : this.hideHeader;
+    _renderCalendar(id) {
+        const hideHeader = this._isDropDown ? true : this.hideHeader;
         return html `
       <igc-calendar
         aria-labelledby=${id}
@@ -309,35 +313,32 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
         .disabledDates=${this._dateConstraints}
         .specialDates=${this.specialDates}
         .weekStart=${this.weekStart}
-        @igcChange=${this.handleCalendarChangeEvent}
+        @igcChange=${this._handleCalendarChangeEvent}
         exportparts="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, label: calendar-label, 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"
       >
-        ${this.renderCalendarSlots()}
+        ${this._renderCalendarSlots()}
       </igc-calendar>
     `;
     }
-    renderActions() {
-        const slot = this.isDropDown || !this.actions.length ? undefined : 'footer';
+    _renderActions() {
+        const hasActions = !isEmpty(this._actions);
+        const slot = this._isDropDown || hasActions ? undefined : 'footer';
         return html `
-      <div
-        part="actions"
-        ?hidden=${!this.actions.length}
-        slot=${ifDefined(slot)}
-      >
+      <div part="actions" ?hidden=${!hasActions} slot=${ifDefined(slot)}>
         <slot name="actions"></slot>
       </div>
     `;
     }
-    renderPicker(id) {
-        return this.isDropDown
+    _renderPicker(id) {
+        return this._isDropDown
             ? html `
           <igc-popover ?open=${this.open} anchor=${id} flip shift>
             <igc-focus-trap ?disabled=${!this.open || this.disabled}>
-              ${this.renderCalendar(id)}${this.renderActions()}
+              ${this._renderCalendar(id)}${this._renderActions()}
             </igc-focus-trap>
           </igc-popover>
         `
@@ -348,32 +349,36 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
             ?open=${this.open}
             ?close-on-outside-click=${!this.keepOpenOnOutsideClick}
             hide-default-action
-            @igcClosing=${this.handleDialogClosing}
-            @igcClosed=${this.handleDialogClosed}
+            @igcClosing=${this._handleDialogClosing}
+            @igcClosed=${this._handleDialogClosed}
             exportparts="base: dialog-base, title, footer, overlay"
           >
-            ${this.renderCalendar(id)}${this.renderActions()}
+            ${this._renderCalendar(id)}${this._renderActions()}
           </igc-dialog>
         `;
     }
-    renderLabel(id) {
+    _renderLabel(id) {
+        const isDisabled = this._isDropDown || this.readOnly;
         return this.label
-            ? html `<label
-          part="label"
-          for=${id}
-          @click=${this.isDropDown ? nothing : this.handleAnchorClick}
-          >${this.label}</label
-        >`
+            ? html `
+          <label
+            part="label"
+            for=${id}
+            @click=${isDisabled ? nothing : this.handleAnchorClick}
+          >
+            ${this.label}
+          </label>
+        `
             : nothing;
     }
-    renderHelperText() {
+    _renderHelperText() {
         return IgcValidationContainerComponent.create(this);
     }
-    renderInput(id) {
-        const format = formats.has(this._displayFormat)
-            ? `${this._displayFormat}Date`
-            : this._displayFormat;
-        const readOnly = !this.isDropDown || this.readOnly || this.nonEditable;
+    _renderInput(id) {
+        const format = DateTimeUtil.predefinedToDateDisplayFormat(this._displayFormat);
+        const readOnly = !this._isDropDown || this.readOnly || this.nonEditable;
+        const prefix = isEmpty(this._prefixes) ? undefined : 'prefix';
+        const suffix = isEmpty(this._suffixes) ? undefined : 'suffix';
         return html `
       <igc-date-time-input
         id=${id}
@@ -392,29 +397,26 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
         .min=${this.min}
         .max=${this.max}
         .invalid=${live(this.invalid)}
-        @igcChange=${this.handleInputChangeEvent}
-        @igcInput=${this.handleInputEvent}
-        @click=${this.isDropDown ? nothing : this.handleInputClick}
+        @igcChange=${this._handleInputChangeEvent}
+        @igcInput=${this._handleInputEvent}
+        @click=${this._isDropDown || this.readOnly
+            ? nothing
+            : this._handleInputClick}
         exportparts="input, label, prefix, suffix"
       >
-        ${this.renderCalendarIcon()}
-        <slot
-          name="prefix"
-          slot=${ifDefined(!this.prefixes.length ? undefined : 'prefix')}
-        ></slot>
-        ${this.renderClearIcon()}
-        <slot
-          name="suffix"
-          slot=${ifDefined(!this.suffixes.length ? undefined : 'suffix')}
-        ></slot>
+        ${this._renderCalendarIcon()}
+        <slot name="prefix" slot=${ifDefined(prefix)}></slot>
+        ${this._renderClearIcon()}
+        <slot name="suffix" slot=${ifDefined(suffix)}></slot>
       </igc-date-time-input>
     `;
     }
     render() {
-        const id = this.id || this.inputId;
+        const id = this.id || this._inputId;
         return html `
-      ${!this._isMaterialTheme ? this.renderLabel(id) : nothing}
-      ${this.renderInput(id)}${this.renderPicker(id)}${this.renderHelperText()}
+      ${this._isMaterialTheme ? nothing : this._renderLabel(id)}
+      ${this._renderInput(id)} ${this._renderPicker(id)}
+      ${this._renderHelperText()}
     `;
     }
 };
@@ -424,7 +426,7 @@ IgcDatePickerComponent.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-IgcDatePickerComponent.increment = createCounter();
+IgcDatePickerComponent._increment = createCounter();
 __decorate([
     query(IgcDateTimeInputComponent.tagName)
 ], IgcDatePickerComponent.prototype, "_input", void 0);
@@ -433,16 +435,16 @@ __decorate([
 ], IgcDatePickerComponent.prototype, "_calendar", void 0);
 __decorate([
     queryAssignedElements({ slot: 'prefix' })
-], IgcDatePickerComponent.prototype, "prefixes", void 0);
+], IgcDatePickerComponent.prototype, "_prefixes", void 0);
 __decorate([
     queryAssignedElements({ slot: 'suffix' })
-], IgcDatePickerComponent.prototype, "suffixes", void 0);
+], IgcDatePickerComponent.prototype, "_suffixes", void 0);
 __decorate([
     queryAssignedElements({ slot: 'actions' })
-], IgcDatePickerComponent.prototype, "actions", void 0);
+], IgcDatePickerComponent.prototype, "_actions", void 0);
 __decorate([
     queryAssignedElements({ slot: 'header-date' })
-], IgcDatePickerComponent.prototype, "headerDateSlotItems", void 0);
+], IgcDatePickerComponent.prototype, "_headerSlotItems", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcDatePickerComponent.prototype, "open", void 0);
@@ -515,12 +517,12 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], IgcDatePickerComponent.prototype, "resourceStrings", void 0);
-__decorate([
-    watch('open')
-], IgcDatePickerComponent.prototype, "openChange", null);
 __decorate([
     property({ attribute: 'week-start' })
 ], IgcDatePickerComponent.prototype, "weekStart", void 0);
+__decorate([
+    watch('open')
+], IgcDatePickerComponent.prototype, "_openChange", null);
 IgcDatePickerComponent = IgcDatePickerComponent_1 = __decorate([
     themes(all, { exposeController: true }),
     blazorAdditionalDependencies('IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent')