igniteui-webcomponents 6.1.2 → 6.2.0

package/components/select/select.js

@@ -6,21 +6,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcSelectComponent_1;
 import { html } from 'lit';
-import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addKeybindings, altKey, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, enterKey, escapeKey, homeKey, spaceBar, tabKey, } from '../common/controllers/key-bindings.js';
 import { addRootClickController } from '../common/controllers/root-click.js';
 import { addRootScrollHandler } from '../common/controllers/root-scroll.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { getActiveItems, getItems, getNextActiveItem, getPreviousActiveItem, IgcBaseComboBoxLikeComponent, setInitialSelectionState, } 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, } from '../common/mixins/forms/form-value.js';
+import { FormValueSelectTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import { addSafeEventListener, findElementFromEventPath, isEmpty, isString, } from '../common/util.js';
+import { addSafeEventListener, findElementFromEventPath, isString, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
@@ -32,20 +34,21 @@ import { styles } from './themes/select.base.css.js';
 import { styles as shared } from './themes/shared/select.common.css.js';
 import { all } from './themes/themes.js';
 import { selectValidators } from './validators.js';
+const Slots = setSlots('prefix', 'suffix', 'header', 'footer', 'helper-text', 'toggle-icon', 'toggle-icon-expanded', 'value-missing', 'custom-error', 'invalid');
 let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
     static register() {
         registerComponent(IgcSelectComponent_1, IgcIconComponent, IgcInputComponent, IgcPopoverComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent);
     }
-    get _activeItems() {
-        return Array.from(getActiveItems(this, IgcSelectItemComponent.tagName));
-    }
     get __validators() {
         return selectValidators;
     }
+    get _activeItems() {
+        return Array.from(getActiveItems(this, IgcSelectItemComponent.tagName));
+    }
     set value(value) {
         this._updateValue(value);
-        const item = this.getItem(this._formValue.value);
-        item ? this.setSelectedItem(item) : this.clearSelectedItem();
+        const item = this._getItem(this._formValue.value);
+        item ? this._setSelectedItem(item) : this._clearSelectedItem();
     }
     get value() {
         return this._formValue.value;
@@ -59,29 +62,27 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
     get selectedItem() {
         return this._selectedItem;
     }
-    scrollStrategyChanged() {
+    _scrollStrategyChange() {
         this._rootScrollController.update({ resetListeners: true });
     }
-    openChange() {
+    _openChange() {
         this._rootClickController.update();
         this._rootScrollController.update();
     }
     constructor() {
         super();
+        this._searchTerm = '';
+        this._lastKeyTime = 0;
+        this._slots = addSlotController(this, { slots: Slots });
+        this._rootScrollController = addRootScrollHandler(this, {
+            hideCallback: this._handleClosing,
+        });
         this._rootClickController = addRootClickController(this, {
-            onHide: this.handleClosing,
+            onHide: this._handleClosing,
         });
         this._formValue = createFormValueState(this, {
             initialValue: undefined,
-            transformers: {
-                setValue: (value) => value || undefined,
-                setDefaultValue: (value) => value || undefined,
-            },
-        });
-        this._searchTerm = '';
-        this._lastKeyTime = 0;
-        this._rootScrollController = addRootScrollHandler(this, {
-            hideCallback: this.handleClosing,
+            transformers: FormValueSelectTransformers,
         });
         this._selectedItem = null;
         this.outlined = false;
@@ -93,32 +94,27 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
             skip: () => this.disabled,
             bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
         })
-            .set([altKey, arrowDown], this.altArrowDown)
-            .set([altKey, arrowUp], this.altArrowUp)
-            .set(arrowDown, this.onArrowDown)
-            .set(arrowUp, this.onArrowUp)
-            .set(arrowLeft, this.onArrowUp)
-            .set(arrowRight, this.onArrowDown)
-            .set(tabKey, this.onTabKey, { preventDefault: false })
-            .set(escapeKey, this.onEscapeKey)
-            .set(homeKey, this.onHomeKey)
-            .set(endKey, this.onEndKey)
-            .set(spaceBar, this.onSpaceBarKey)
-            .set(enterKey, this.onEnterKey);
-        addSafeEventListener(this, 'keydown', this.handleSearch);
-        addSafeEventListener(this, 'focusin', this.handleFocusIn);
-        addSafeEventListener(this, 'focusout', this.handleFocusOut);
-    }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        root.addEventListener('slotchange', () => this.requestUpdate());
-        return root;
+            .set([altKey, arrowDown], this._handleAltArrowDown)
+            .set([altKey, arrowUp], this._handleAltArrowUp)
+            .set(arrowDown, this._handleArrowDown)
+            .set(arrowUp, this._handleArrowUp)
+            .set(arrowLeft, this._handleArrowUp)
+            .set(arrowRight, this._handleArrowDown)
+            .set(tabKey, this._handleTab, { preventDefault: false })
+            .set(escapeKey, this._handleEscape)
+            .set(homeKey, this._handleHome)
+            .set(endKey, this._handleEnd)
+            .set(spaceBar, this._handleSpace)
+            .set(enterKey, this._handleEnter);
+        addSafeEventListener(this, 'keydown', this._handleSearch);
+        addSafeEventListener(this, 'focusin', this._handleFocusIn);
+        addSafeEventListener(this, 'focusout', this._handleFocusOut);
     }
     async firstUpdated() {
         await this.updateComplete;
         const selected = setInitialSelectionState(this.items);
         if (this.value && !selected) {
-            this._selectItem(this.getItem(this.value), false);
+            this._selectItem(this._getItem(this.value), false);
         }
         if (selected && selected.value !== this.value) {
             this.defaultValue = selected.value;
@@ -127,30 +123,9 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
         if (this.autofocus) {
             this.focus();
         }
-        this._updateValidity();
-    }
-    handleFocusIn({ relatedTarget }) {
-        this._dirty = true;
-        if (this.contains(relatedTarget) || this.open) {
-            return;
-        }
-    }
-    handleFocusOut({ relatedTarget }) {
-        if (this.contains(relatedTarget)) {
-            return;
-        }
-        this.checkValidity();
-    }
-    handleClick(event) {
-        const item = findElementFromEventPath(IgcSelectItemComponent.tagName, event);
-        if (item && this._activeItems.includes(item)) {
-            this._selectItem(item);
-        }
-    }
-    handleChange(item) {
-        return this.emitEvent('igcChange', { detail: item });
+        this._validate();
     }
-    handleSearch(event) {
+    _handleSearch(event) {
         if (!/^.$/u.test(event.key)) {
             return;
         }
@@ -163,74 +138,99 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
         this._searchTerm += event.key.toLocaleLowerCase();
         const item = this._activeItems.find((item) => item.textContent?.trim().toLocaleLowerCase().startsWith(this._searchTerm));
         if (item) {
-            this.open ? this.activateItem(item) : this._selectItem(item);
+            this.open ? this._activateItem(item) : this._selectItem(item);
             this._activeItem.focus();
         }
     }
-    handleAnchorClick() {
-        super.handleAnchorClick();
-        this.focusItemOnOpen();
-    }
-    onEnterKey() {
+    _handleEnter() {
         this.open && this._activeItem
             ? this._selectItem(this._activeItem)
             : this.handleAnchorClick();
     }
-    onSpaceBarKey() {
+    _handleSpace() {
         if (!this.open) {
             this.handleAnchorClick();
         }
     }
-    onArrowDown() {
+    _handleArrowDown() {
         const item = getNextActiveItem(this.items, this._activeItem);
         this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
     }
-    onArrowUp() {
+    _handleArrowUp() {
         const item = getPreviousActiveItem(this.items, this._activeItem);
         this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
     }
-    altArrowDown() {
+    _handleAltArrowDown() {
         if (!this.open) {
             this._show(true);
-            this.focusItemOnOpen();
+            this._focusItemOnOpen();
         }
     }
-    async altArrowUp() {
+    async _handleAltArrowUp() {
         if (this.open && (await this._hide(true))) {
             this._input.focus();
         }
     }
-    async onEscapeKey() {
+    async _handleEscape() {
         if (await this._hide(true)) {
             this._input.focus();
         }
     }
-    onTabKey(event) {
+    _handleTab(event) {
         if (this.open) {
             event.preventDefault();
             this._selectItem(this._activeItem ?? this._selectedItem);
             this._hide(true);
         }
     }
-    onHomeKey() {
+    _handleHome() {
         const item = this._activeItems.at(0);
         this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
     }
-    onEndKey() {
+    _handleEnd() {
         const item = this._activeItems.at(-1);
         this.open ? this._navigateToActiveItem(item) : this._selectItem(item);
     }
-    handleClosing() {
+    _handleFocusIn() {
+        this._setTouchedState();
+    }
+    _handleFocusOut({ relatedTarget }) {
+        if (this.contains(relatedTarget)) {
+            return;
+        }
+        super._handleBlur();
+    }
+    _handleClick(event) {
+        const item = findElementFromEventPath(IgcSelectItemComponent.tagName, event);
+        if (item && this._activeItems.includes(item)) {
+            this._selectItem(item);
+        }
+    }
+    _handleChange(item) {
+        this._setTouchedState();
+        return this.emitEvent('igcChange', { detail: item });
+    }
+    _handleClosing() {
         this._hide(true);
     }
-    activateItem(item) {
+    handleAnchorClick() {
+        super.handleAnchorClick();
+        this._focusItemOnOpen();
+    }
+    _restoreDefaultValue() {
+        super._restoreDefaultValue();
+        this._formValue.setValueAndFormState(this._formValue.defaultValue);
+        const item = this._getItem(this._formValue.value);
+        item ? this._setSelectedItem(item) : this._clearSelectedItem();
+    }
+    _activateItem(item) {
         if (this._activeItem) {
             this._activeItem.active = false;
         }
         this._activeItem = item;
         this._activeItem.active = true;
     }
-    setSelectedItem(item) {
+    _setSelectedItem(item) {
         if (this._selectedItem) {
             this._selectedItem.selected = false;
         }
@@ -240,7 +240,7 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
     }
     _selectItem(item, emit = true) {
         if (!item) {
-            this.clearSelectedItem();
+            this._clearSelectedItem();
             this._updateValue();
             return null;
         }
@@ -251,11 +251,11 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
                 this._input.focus();
             return this._selectedItem;
         }
-        const newItem = this.setSelectedItem(item);
-        this.activateItem(newItem);
+        const newItem = this._setSelectedItem(item);
+        this._activateItem(newItem);
         this._updateValue(newItem.value);
         if (emit)
-            this.handleChange(newItem);
+            this._handleChange(newItem);
         if (shouldFocus)
             this._input.focus();
         if (shouldHide)
@@ -264,26 +264,25 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
     }
     _navigateToActiveItem(item) {
         if (item) {
-            this.activateItem(item);
+            this._activateItem(item);
             this._activeItem.focus({ preventScroll: true });
             item.scrollIntoView({ behavior: 'auto', block: 'nearest' });
         }
     }
     _updateValue(value) {
         this._formValue.setValueAndFormState(value);
-        this._validate();
     }
-    clearSelectedItem() {
+    _clearSelectedItem() {
         if (this._selectedItem) {
             this._selectedItem.selected = false;
         }
         this._selectedItem = null;
     }
-    async focusItemOnOpen() {
+    async _focusItemOnOpen() {
         await this.updateComplete;
         (this._selectedItem || this._activeItem)?.focus();
     }
-    getItem(value) {
+    _getItem(value) {
         return this.items.find((item) => item.value === value);
     }
     focus(options) {
@@ -299,57 +298,54 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
         return valid;
     }
     navigateTo(value) {
-        const item = isString(value) ? this.getItem(value) : this.items[value];
+        const item = isString(value) ? this._getItem(value) : this.items[value];
         if (item) {
             this._navigateToActiveItem(item);
         }
         return item ?? null;
     }
     select(value) {
-        const item = isString(value) ? this.getItem(value) : this.items[value];
+        const item = isString(value) ? this._getItem(value) : this.items[value];
         return item ? this._selectItem(item, false) : null;
     }
     clearSelection() {
         this._updateValue();
-        this.clearSelectedItem();
+        this._clearSelectedItem();
     }
-    renderInputSlots() {
-        const prefixName = isEmpty(this._inputPrefix) ? '' : 'prefix';
-        const suffixName = isEmpty(this._inputSuffix) ? '' : 'suffix';
+    _renderInputSlots() {
+        const prefix = this._slots.hasAssignedElements('prefix') ? 'prefix' : '';
+        const suffix = this._slots.hasAssignedElements('suffix') ? 'suffix' : '';
         return html `
-      <span slot=${prefixName}>
+      <span slot=${prefix}>
         <slot name="prefix"></slot>
       </span>
 
-      <span slot=${suffixName}>
+      <span slot=${suffix}>
         <slot name="suffix"></slot>
       </span>
     `;
     }
-    renderToggleIcon() {
+    _renderToggleIcon() {
         const parts = { 'toggle-icon': true, filled: !!this.value };
-        const iconHidden = this.open && !isEmpty(this._expandedIconSlot);
-        const iconExpandedHidden = !iconHidden;
+        const iconName = this.open ? 'input_collapse' : 'input_expand';
+        const iconHidden = this.open && this._slots.hasAssignedElements('toggle-icon-expanded');
         return html `
       <span slot="suffix" part=${partMap(parts)} aria-hidden="true">
         <slot name="toggle-icon" ?hidden=${iconHidden}>
-          <igc-icon
-            name=${this.open ? 'input_collapse' : 'input_expand'}
-            collection="default"
-          ></igc-icon>
+          <igc-icon name=${iconName} collection="default"></igc-icon>
         </slot>
-        <slot name="toggle-icon-expanded" ?hidden=${iconExpandedHidden}></slot>
+        <slot name="toggle-icon-expanded" ?hidden=${!iconHidden}></slot>
       </span>
     `;
     }
-    renderHelperText() {
+    _renderHelperText() {
         return IgcValidationContainerComponent.create(this, {
             id: 'select-helper-text',
             slot: 'anchor',
             hasHelperText: true,
         });
     }
-    renderInputAnchor() {
+    _renderInputAnchor() {
         const value = this.selectedItem?.textContent?.trim();
         return html `
       <igc-input
@@ -359,7 +355,7 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
         readonly
         aria-controls="dropdown"
         aria-describedby="select-helper-text"
-        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-expanded=${this.open}
         exportparts="container: input, input: native-input, label, prefix, suffix"
         tabIndex=${this.disabled ? -1 : 0}
         value=${ifDefined(value)}
@@ -371,37 +367,42 @@ let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends
         .outlined=${this.outlined}
         @click=${this.handleAnchorClick}
       >
-        ${this.renderInputSlots()} ${this.renderToggleIcon()}
+        ${this._renderInputSlots()} ${this._renderToggleIcon()}
       </igc-input>
 
-      ${this.renderHelperText()}
+      ${this._renderHelperText()}
     `;
     }
-    renderDropdown() {
-        return html `<div part="base" .inert=${!this.open}>
-      <div
-        id="dropdown"
-        role="listbox"
-        part="list"
-        aria-labelledby="input"
-        @click=${this.handleClick}
-      >
-        <slot name="header"></slot>
-        <slot></slot>
-        <slot name="footer"></slot>
+    _renderDropdown() {
+        return html `
+      <div part="base" .inert=${!this.open}>
+        <div
+          id="dropdown"
+          role="listbox"
+          part="list"
+          aria-labelledby="input"
+          @click=${this._handleClick}
+        >
+          <slot name="header"></slot>
+          <slot></slot>
+          <slot name="footer"></slot>
+        </div>
       </div>
-    </div>`;
+    `;
     }
     render() {
-        return html `<igc-popover
-      ?open=${this.open}
-      flip
-      shift
-      same-width
-      .offset=${this.distance}
-      .placement=${this.placement}
-      >${this.renderInputAnchor()} ${this.renderDropdown()}
-    </igc-popover>`;
+        return html `
+      <igc-popover
+        ?open=${this.open}
+        flip
+        shift
+        same-width
+        .offset=${this.distance}
+        .placement=${this.placement}
+      >
+        ${this._renderInputAnchor()} ${this._renderDropdown()}
+      </igc-popover>
+    `;
     }
 };
 IgcSelectComponent.tagName = 'igc-select';
@@ -415,15 +416,6 @@ __decorate([
 __decorate([
     query(IgcInputComponent.tagName, true)
 ], IgcSelectComponent.prototype, "_input", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'suffix' })
-], IgcSelectComponent.prototype, "_inputSuffix", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'prefix' })
-], IgcSelectComponent.prototype, "_inputPrefix", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'toggle-icon-expanded' })
-], IgcSelectComponent.prototype, "_expandedIconSlot", void 0);
 __decorate([
     property()
 ], IgcSelectComponent.prototype, "value", null);
@@ -450,10 +442,10 @@ __decorate([
 ], IgcSelectComponent.prototype, "scrollStrategy", void 0);
 __decorate([
     watch('scrollStrategy', { waitUntilFirstUpdate: true })
-], IgcSelectComponent.prototype, "scrollStrategyChanged", null);
+], IgcSelectComponent.prototype, "_scrollStrategyChange", null);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
-], IgcSelectComponent.prototype, "openChange", null);
+], IgcSelectComponent.prototype, "_openChange", null);
 IgcSelectComponent = IgcSelectComponent_1 = __decorate([
     blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent')
 ], IgcSelectComponent);