igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/combo/combo.js

@@ -6,30 +6,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcComboComponent_1;
 import { ComboResourceStringsEN, } from 'igniteui-i18n-core';
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addRootClickController } from '../common/controllers/root-click.js';
-import { addSlotController, setSlots } from '../common/controllers/slot.js';
-import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
-import { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { addI18nController } from '../common/i18n/i18n-controller.js';
-import { IgcBaseComboBoxComponent } 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 { partMap } from '../common/part-map.js';
-import { addSafeEventListener, asArray, bindIf, first, getElementFromPath, isDefined, isEmpty, stopPropagation, } from '../common/util.js';
+import { addAriaProjector } from '#internals/controllers/aria-projection.js';
+import { addRootClickController } from '#internals/controllers/root-click.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { blazorAdditionalDependencies } from '#internals/decorators/blazorAdditionalDependencies.js';
+import { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';
+import { shadowOptions } from '#internals/decorators/shadow-options.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addI18nController } from '#internals/i18n/i18n-controller.js';
+import { IgcBaseComboBoxComponent } from '#internals/mixins/combo-box.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';
+import { createFormValueState } from '#internals/mixins/forms/form-value.js';
+import { partMap } from '#internals/part-map.js';
+import { asArray, firstOf, isEmpty } from '#internals/utils/arrays.js';
+import { addSafeEventListener, getElementFromPath, stopPropagation, } from '#internals/utils/events.js';
+import { bindIf } from '#internals/utils/lit.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
+import IgcVirtualScrollComponent from '../virtualization/virtualization.js';
 import IgcComboHeaderComponent from './combo-header.js';
 import IgcComboItemComponent from './combo-item.js';
-import IgcComboListComponent from './combo-list.js';
 import { DataState } from './controllers/data.js';
 import { ComboNavigationController } from './controllers/navigation.js';
 import { styles } from './themes/combo.base.css.js';
@@ -42,13 +46,14 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     static { this.tagName = 'igc-combo'; }
     static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcComboComponent_1, IgcIconComponent, IgcComboListComponent, IgcComboItemComponent, IgcComboHeaderComponent, IgcInputComponent, IgcPopoverComponent, IgcValidationContainerComponent);
+        registerComponent(IgcComboComponent_1, IgcIconComponent, IgcVirtualScrollComponent, IgcComboItemComponent, IgcComboHeaderComponent, IgcInputComponent, IgcPopoverComponent, IgcValidationContainerComponent);
     }
     get __validators() {
         return comboValidators;
     }
     set _activeIndex(index) {
         this._navigation.active = index;
+        this._listRef.value?.requestUpdate();
     }
     get _activeIndex() {
         return this._navigation.active;
@@ -59,15 +64,21 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     get _searchTerm() {
         return this._state.searchTerm;
     }
+    _itemId(index) {
+        const position = index + 1;
+        return this.id ? `${this.id}-item-${position}` : `item-${position}`;
+    }
+    get _activeDescendant() {
+        return this._activeIndex > -1 ? this._itemId(this._activeIndex) : undefined;
+    }
     get _mainAriaLabel() {
         return isEmpty(this._selected)
             ? this.resourceStrings.combo_aria_label_no_options
             : this.resourceStrings.combo_aria_label_options;
     }
     set data(value) {
-        if (this._data !== value) {
-            this._data = asArray(value);
-        }
+        this._data = asArray(value);
+        this._index = undefined;
     }
     get data() {
         return this._data;
@@ -76,11 +87,11 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         this._singleSelect = Boolean(value);
         this._syncSelectionFromValue();
         if (this.hasUpdated) {
-            const pristine = this._pristine;
-            this._activeIndex = -1;
-            this._searchTerm = '';
-            this._formValue.setValueAndFormState(this.value);
-            this._pristine = pristine;
+            this._withPristine(() => {
+                this._activeIndex = -1;
+                this._searchTerm = '';
+                this._formValue.setValueAndFormState(this.value);
+            });
         }
     }
     get singleSelect() {
@@ -110,6 +121,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     set valueKey(value) {
         this._valueKey = value;
         this._displayKey = this._displayKey ?? this._valueKey;
+        this._index = undefined;
     }
     get valueKey() {
         return this._valueKey;
@@ -168,7 +180,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
                         return null;
                     }
                     if (this.singleSelect) {
-                        return String(first(value));
+                        return String(firstOf(value));
                     }
                     const formData = new FormData();
                     for (const item of value) {
@@ -195,11 +207,12 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             },
         });
         this._data = [];
+        this._indexSize = 0;
         this._disableFiltering = false;
         this._singleSelect = false;
         this._selected = new Set();
         this._filteringOptions = {
-            filterKey: this.displayKey,
+            filterKey: undefined,
             caseSensitive: false,
             matchDiacritics: false,
         };
@@ -211,10 +224,8 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         this.disableClear = false;
         this.itemTemplate = ({ item }) => html `${this.displayKey ? item[this.displayKey] : item}`;
         this.groupHeaderTemplate = ({ item }) => html `${this.groupKey && item[this.groupKey]}`;
-        this._itemRenderer = (item, index) => {
-            if (!item) {
-                return nothing;
-            }
+        this._itemRenderer = (context) => {
+            const { value: item, index } = context;
             if (this.groupKey && item.header) {
                 return html `
         <igc-combo-header part="group-header">
@@ -222,19 +233,14 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         </igc-combo-header>
       `;
             }
-            const position = index + 1;
-            const id = this.id ? `${this.id}-item-${position}` : `item-${position}`;
             const active = this._activeIndex === index;
-            const selected = this._selected.has(this.data[item.dataIndex]);
-            if (active) {
-                this._activeDescendant = id;
-            }
+            const selected = this._selected.has(item.value);
             return html `
       <igc-combo-item
-        id=${id}
+        id=${this._itemId(index)}
         part=${partMap({ item: true, selected, active })}
-        aria-setsize=${this._state.dataState.length}
-        aria-posinset=${position}
+        aria-setsize=${this._state.itemCount}
+        aria-posinset=${item.position}
         exportparts="checkbox, checkbox-indicator, checked"
         .index=${index}
         ?active=${active}
@@ -245,7 +251,22 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
       </igc-combo-item>
     `;
         };
-        addThemingController(this, all);
+        addThemingController(this, all, {
+            themeChange: () => this._listRef.value?.requestUpdate(),
+        });
+        addAriaProjector(this, {
+            target: () => this._inputRef.value,
+            state: () => ({
+                role: 'combobox',
+                hasPopup: 'listbox',
+                expanded: `${this.open}`,
+                disabled: `${this.disabled}`,
+                label: this._mainAriaLabel,
+                controls: this._listRef.value ? [this._listRef.value] : null,
+                describedBy: this._helperText ? [this._helperText] : null,
+                labelledBy: this._internals.labels,
+            }),
+        });
         addSafeEventListener(this, 'blur', this._handleBlur);
         addSafeEventListener(this, 'focusin', this._handleFocusIn);
     }
@@ -260,21 +281,27 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             this._state.invalidate();
         }
         if (props.has('data') && !isEmpty(this.data) && !isEmpty(this.value)) {
-            const pristine = this._pristine;
-            this._syncSelectionFromValue();
-            this._formValue.setValueAndFormState(this.value);
-            this._pristine = pristine;
+            this._withPristine(() => {
+                this._syncSelectionFromValue();
+                this._formValue.setValueAndFormState(this.value);
+            });
         }
     }
-    _restoreDefaultValue() {
-        super._restoreDefaultValue();
-        this._syncSelectionFromValue();
+    _withPristine(callback) {
+        const pristine = this._pristine;
+        try {
+            callback();
+        }
+        finally {
+            this._pristine = pristine;
+        }
     }
     _setDefaultValue(current) {
         try {
             this.defaultValue = JSON.parse(current || '[]');
         }
-        catch { }
+        catch {
+        }
     }
     async _show(emitEvent = false) {
         const [canOpen, _] = await Promise.all([
@@ -306,130 +333,150 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             this._inputRef.value.value = value;
         }
     }
+    get _dataIndex() {
+        if (!this._index || this._indexSize !== this.data.length) {
+            this._index = Map.groupBy(this.data.keys(), (position) => this._resolveItemValue(this.data[position]));
+            this._indexSize = this.data.length;
+        }
+        return this._index;
+    }
     _resolveItems(items) {
-        if (this.valueKey) {
-            const keys = new Set(items);
-            return this.data.filter((item) => keys.has(item[this.valueKey]));
+        const index = this._dataIndex;
+        const positions = new Set();
+        for (const item of items) {
+            const matches = index.get(item);
+            if (matches) {
+                for (const position of matches) {
+                    positions.add(position);
+                }
+            }
         }
-        const dataSet = new Set(this.data);
-        return items.filter((item) => dataSet.has(item));
+        return Array.from(positions)
+            .sort((a, b) => a - b)
+            .map((position) => this.data[position]);
     }
     _resolveItemValue(record) {
         return this.valueKey ? record[this.valueKey] : record;
     }
-    _getValues(items, key) {
-        return Iterator.from(items)
-            .map((item) => (key ? item[key] : undefined) ?? item)
-            .toArray();
+    _toValues(items) {
+        const { valueKey } = this;
+        const values = [];
+        for (const item of items) {
+            values.push((valueKey ? item[valueKey] : undefined) ?? item);
+        }
+        return values;
+    }
+    _projectSelection() {
+        const { valueKey, displayKey } = this;
+        const values = [];
+        const display = [];
+        for (const item of this._selected) {
+            values.push((valueKey ? item[valueKey] : undefined) ?? item);
+            display.push(String((displayKey ? item[displayKey] : undefined) ?? item));
+        }
+        this._displayValue = display.join(', ');
+        return values;
     }
     _emitSelectionChange(detail) {
         return this.emitEvent('igcChange', { cancelable: true, detail });
     }
-    _selectItems(items, emit = false) {
-        let collection = asArray(items);
-        if (this.singleSelect) {
-            this._selected.clear();
-            this._searchTerm = '';
+    _previewValue(resolved, selecting) {
+        if (selecting) {
+            return this._toValues(this.singleSelect ? resolved : new Set([...resolved, ...this._selected]));
         }
+        const removed = new Set(resolved);
+        return this._toValues(Iterator.from(this._selected).filter((item) => !removed.has(item)));
+    }
+    _updateSelection(items, type, emit) {
+        const singleSelect = this.singleSelect;
+        const selecting = type === 'selection';
+        const collection = singleSelect
+            ? asArray(items).slice(0, 1)
+            : asArray(items);
         if (isEmpty(collection)) {
-            if (!this.singleSelect) {
-                this._selected = new Set(this.data);
-                this.requestUpdate();
+            if (selecting) {
+                this._selected = singleSelect ? new Set() : new Set(this.data);
+                if (singleSelect) {
+                    this._searchTerm = '';
+                }
             }
-            return;
-        }
-        if (this.singleSelect) {
-            collection = collection.slice(0, 1);
-        }
-        const resolved = this._resolveItems(collection);
-        if (emit &&
-            !this._emitSelectionChange({
-                newValue: this._getValues([...resolved, ...this._selected], this.valueKey),
-                items: resolved,
-                type: 'selection',
-            })) {
-            return;
-        }
-        for (const item of resolved) {
-            this._selected.add(item);
-        }
-        this.requestUpdate();
-    }
-    _deselectItems(items, emit = false) {
-        let collection = asArray(items);
-        if (isEmpty(collection)) {
-            if (emit &&
-                !this._emitSelectionChange({
-                    newValue: [],
-                    items: Array.from(this._selected),
-                    type: 'deselection',
-                })) {
-                return;
+            else {
+                if (emit &&
+                    !this._emitSelectionChange({
+                        newValue: [],
+                        items: this.selection,
+                        type,
+                    })) {
+                    return false;
+                }
+                this._selected.clear();
             }
-            this._selected.clear();
             this.requestUpdate();
-            return;
-        }
-        if (this.singleSelect) {
-            collection = collection.slice(0, 1);
+            return true;
         }
         const resolved = this._resolveItems(collection);
-        const resolvedSet = new Set(resolved);
-        const remaining = Array.from(this._selected).filter((item) => !resolvedSet.has(item));
         if (emit &&
             !this._emitSelectionChange({
-                newValue: this._getValues(remaining, this.valueKey),
+                newValue: this._previewValue(resolved, selecting),
                 items: resolved,
-                type: 'deselection',
+                type,
             })) {
-            return;
+            return false;
+        }
+        if (selecting && singleSelect) {
+            this._selected.clear();
+            this._searchTerm = '';
         }
         for (const item of resolved) {
-            this._selected.delete(item);
+            selecting ? this._selected.add(item) : this._selected.delete(item);
         }
         this.requestUpdate();
+        return true;
     }
     _syncSelectionFromValue() {
         this._selected.clear();
         if (!isEmpty(this._formValue.value)) {
             const values = this.singleSelect
-                ? asArray(first(this._formValue.value))
+                ? asArray(firstOf(this._formValue.value))
                 : this._formValue.value;
             if (this.singleSelect && values.length !== this._formValue.value.length) {
                 this._formValue.setValueAndFormState(values);
             }
-            const items = Iterator.from(values)
-                .map((val) => this._findItemByValue(val, this.valueKey))
-                .filter(isDefined);
-            for (const item of items) {
-                this._selected.add(item);
+            const index = this._dataIndex;
+            for (const value of values) {
+                const position = index.get(value)?.[0];
+                if (position !== undefined) {
+                    this._selected.add(this.data[position]);
+                }
             }
         }
-        this._displayValue = this._getValues(this._selected, this.displayKey).join(', ');
+        this._projectSelection();
     }
-    _findItemByValue(value, key) {
-        return this.data.find((item) => (key ? item[key] : item) === value);
+    _syncValueFromSelection() {
+        this._formValue.setValueAndFormState(this._projectSelection());
+        this._setSingleSelectionDisplayValue(this._displayValue);
+        this._validate();
+        this._listRef.value?.requestUpdate();
     }
-    _syncValueFromSelection(initial = false) {
-        const values = this._getValues(this._selected, this.valueKey);
-        this._displayValue = this._getValues(this._selected, this.displayKey).join(', ');
-        this._formValue.setValueAndFormState(values);
-        if (!initial) {
-            this._setSingleSelectionDisplayValue(this._displayValue);
-            this._validate();
-            this._listRef.value?.requestUpdate();
-        }
+    _recordAt(index) {
+        const record = this._state.dataState[index];
+        return record && !record.header ? record.value : undefined;
     }
     _toggleSelection(index) {
-        const record = this.data[this._state.dataState[index].dataIndex];
-        this._selected.has(record)
-            ? this._deselectItems(this._resolveItemValue(record), true)
-            : this._selectItems(this._resolveItemValue(record), true);
+        const record = this._recordAt(index);
+        if (!record) {
+            return;
+        }
+        this._updateSelection(this._resolveItemValue(record), this._selected.has(record) ? 'deselection' : 'selection', true);
         this._activeIndex = index;
         this._syncValueFromSelection();
     }
     _selectByIndex(index) {
-        this._selectItems(this._resolveItemValue(this.data[this._state.dataState[index].dataIndex]), true);
+        const record = this._recordAt(index);
+        if (!record) {
+            return;
+        }
+        this._updateSelection(this._resolveItemValue(record), 'selection', true);
         this._activeIndex = index;
         this._syncValueFromSelection();
     }
@@ -439,23 +486,25 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             this._clearSingleSelection();
         }
         else {
-            this._deselectItems([], true);
+            this._updateSelection([], 'deselection', true);
         }
         this._syncValueFromSelection();
     }
     _clearSingleSelection() {
         const [selection] = this._selected;
-        if (selection) {
-            this._deselectItems(this._resolveItemValue(selection), true);
+        if (selection &&
+            this._updateSelection(this._resolveItemValue(selection), 'deselection', true)) {
             this._formValue.setValueAndFormState([]);
         }
     }
     async _handleMainInput({ detail, }) {
         this._setTouchedState();
-        this._show(true);
-        this._searchTerm = detail;
+        void this._show(true);
+        if (!this.disableFiltering) {
+            this._searchTerm = detail;
+        }
         await this.updateComplete;
-        this._activeIndex = this._state.dataState.findIndex((i) => !i.header);
+        this._activeIndex = this._state.firstItemIndex;
         this._clearSingleSelection();
     }
     _handleFocusIn() {
@@ -506,11 +555,11 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         this._inputRef.value?.blur();
     }
     select(items) {
-        this._selectItems(items);
+        this._updateSelection(items, 'selection', false);
         this._syncValueFromSelection();
     }
     deselect(items) {
-        this._deselectItems(items);
+        this._updateSelection(items, 'deselection', false);
         this._syncValueFromSelection();
     }
     _renderToggleIcon() {
@@ -537,6 +586,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
       <span
         slot="suffix"
         part="clear-icon"
+        role="button"
         @click=${this._handleClearIconClick}
         ?hidden=${this.disableClear || isEmpty(this._selected)}
         aria-label=${ifDefined(this.resourceStrings.combo_clearItems_placeholder)}
@@ -559,13 +609,6 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         ${ref(this._inputRef)}
         id="target"
         slot="anchor"
-        role="combobox"
-        aria-controls="dropdown"
-        aria-owns="dropdown"
-        aria-expanded=${this.open}
-        aria-describedby="combo-helper-text"
-        aria-disabled=${this.disabled}
-        aria-label=${this._mainAriaLabel}
         exportparts="container: input, input: native-input, label, prefix, suffix"
         @click=${this._handleAnchorClick}
         placeholder=${ifDefined(this.placeholder)}
@@ -633,7 +676,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         <div part="header">
           <slot name="header"></slot>
         </div>
-        <igc-combo-list
+        <igc-virtual-scroll
           ${ref(this._listRef)}
           aria-multiselectable=${!this.singleSelect}
           id="dropdown"
@@ -641,13 +684,14 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
           role="listbox"
           tabindex="0"
           aria-labelledby="target"
+          over-scan="15"
           aria-activedescendant=${ifDefined(this._activeDescendant)}
-          .items=${this._state.dataState}
-          .renderItem=${this._itemRenderer}
+          .data=${this._state.dataState}
+          .itemTemplate=${this._itemRenderer}
           ?hidden=${isEmpty(this._state.dataState)}
           @click=${this._itemClickHandler}
         >
-        </igc-combo-list>
+        </igc-virtual-scroll>
         ${this._renderEmptyTemplate()}
         <div part="footer">
           <slot name="footer"></slot>
@@ -670,15 +714,15 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     `;
     }
 };
+__decorate([
+    query('#combo-helper-text')
+], IgcComboComponent.prototype, "_helperText", void 0);
 __decorate([
     state()
 ], IgcComboComponent.prototype, "_activeIndex", null);
 __decorate([
     state()
 ], IgcComboComponent.prototype, "_searchTerm", null);
-__decorate([
-    state()
-], IgcComboComponent.prototype, "_activeDescendant", void 0);
 __decorate([
     state()
 ], IgcComboComponent.prototype, "_displayValue", void 0);
@@ -747,7 +791,8 @@ __decorate([
 ], IgcComboComponent.prototype, "value", null);
 IgcComboComponent = IgcComboComponent_1 = __decorate([
     blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent'),
-    blazorIndirectRender
+    blazorIndirectRender,
+    shadowOptions({ delegatesFocus: true })
 ], IgcComboComponent);
 export default IgcComboComponent;
 //# sourceMappingURL=combo.js.map