igniteui-webcomponents 5.4.1 → 6.0.1

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

@@ -22,7 +22,7 @@ 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 IgcDialogComponent from '../dialog/dialog.js';
 import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
@@ -35,13 +35,13 @@ 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,12 +96,12 @@ 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;
@@ -124,59 +124,64 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
             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,45 @@ 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();
+    }
+    stepUp(datePart, delta) {
+        this._input.stepUp(datePart, delta);
     }
-    renderClearIcon() {
+    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
             ? nothing
             : html `
-          <span slot="suffix" part="clear-icon" @click=${this.clear}>
+          <span
+            slot="suffix"
+            part="clear-icon"
+            @click=${this.readOnly ? nothing : this.clear}
+          >
             <slot name="clear-icon">
               <igc-icon
                 name="input_clear"
@@ -262,7 +266,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
           </span>
         `;
     }
-    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,38 @@ 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) {
+    _renderInput(id) {
         const format = formats.has(this._displayFormat)
             ? `${this._displayFormat}Date`
             : this._displayFormat;
-        const readOnly = !this.isDropDown || this.readOnly || this.nonEditable;
+        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 +399,25 @@ 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 ? this._renderLabel(id) : nothing}
+      ${this._renderInput(id)}${this._renderPicker(id)}${this._renderHelperText()}
     `;
     }
 };
@@ -424,7 +427,7 @@ IgcDatePickerComponent.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-IgcDatePickerComponent.increment = createCounter();
+IgcDatePickerComponent._increment = createCounter();
 __decorate([
     query(IgcDateTimeInputComponent.tagName)
 ], IgcDatePickerComponent.prototype, "_input", void 0);
@@ -433,16 +436,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 +518,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')