igniteui-webcomponents 7.1.0 → 7.1.2

package/components/combo/combo.js

@@ -6,22 +6,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcComboComponent_1;
 import { ComboResourceStringsEN, } from 'igniteui-i18n-core';
-import { html, LitElement, nothing } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, 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 { watch } from '../common/decorators/watch.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, equal, findElementFromEventPath, first, isEmpty, } from '../common/util.js';
+import { addSafeEventListener, asArray, bindIf, first, getElementFromPath, isDefined, isEmpty, stopPropagation, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
@@ -29,14 +30,14 @@ import IgcValidationContainerComponent from '../validation-container/validation-
 import IgcComboHeaderComponent from './combo-header.js';
 import IgcComboItemComponent from './combo-item.js';
 import IgcComboListComponent from './combo-list.js';
-import { DataController } from './controllers/data.js';
+import { DataState } from './controllers/data.js';
 import { ComboNavigationController } from './controllers/navigation.js';
-import { SelectionController } from './controllers/selection.js';
 import { styles } from './themes/combo.base.css.js';
 import { styles as shared } from './themes/shared/combo.common.css.js';
 import { all } from './themes/themes.js';
 import { comboValidators } from './validators.js';
-let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(LitElement)) {
+const SLOTS = setSlots('prefix', 'suffix', 'header', 'footer', 'empty', 'helper-text', 'toggle-icon', 'clear-icon', 'value-missing', 'custom-error', 'invalid');
+let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxComponent)) {
     static { IgcComboComponent_1 = this; }
     static { this.tagName = 'igc-combo'; }
     static { this.styles = [styles, shared]; }
@@ -46,29 +47,40 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     get __validators() {
         return comboValidators;
     }
+    set _activeIndex(index) {
+        this._navigation.active = index;
+    }
+    get _activeIndex() {
+        return this._navigation.active;
+    }
+    set _searchTerm(value) {
+        this._state.searchTerm = value;
+    }
+    get _searchTerm() {
+        return this._state.searchTerm;
+    }
+    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) {
-            return;
+        if (this._data !== value) {
+            this._data = asArray(value);
         }
-        this._data = asArray(value);
-        const pristine = this._pristine;
-        this.value = asArray(this.value);
-        this._pristine = pristine;
-        this._state.runPipeline();
     }
     get data() {
         return this._data;
     }
     set singleSelect(value) {
-        if (this._singleSelect === Boolean(value)) {
-            return;
-        }
         this._singleSelect = Boolean(value);
-        this._selection.clear();
+        this._syncSelectionFromValue();
         if (this.hasUpdated) {
-            this.updateValue();
-            this.resetSearchTerm();
-            this._navigation.active = -1;
+            const pristine = this._pristine;
+            this._activeIndex = -1;
+            this._searchTerm = '';
+            this._formValue.setValueAndFormState(this.value);
+            this._pristine = pristine;
         }
     }
     get singleSelect() {
@@ -76,6 +88,7 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     }
     set locale(value) {
         this._i18nController.locale = value;
+        this._state.updateLocale(value);
     }
     get locale() {
         return this._i18nController.locale;
@@ -110,74 +123,37 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     get displayKey() {
         return this._displayKey ?? this._valueKey;
     }
-    set groupKey(value) {
-        if (this._groupKey !== value) {
-            this._groupKey = value;
-            this._state.runPipeline();
-        }
-    }
-    get groupKey() {
-        return this._groupKey;
-    }
-    set groupSorting(value) {
-        if (this._groupSorting !== value) {
-            this._groupSorting = value;
-            this._state.runPipeline();
-        }
-    }
-    get groupSorting() {
-        return this._groupSorting;
-    }
     set filteringOptions(value) {
-        const options = { ...this._filteringOptions, ...value };
-        if (!equal(options, this._filteringOptions)) {
-            this._filteringOptions = options;
-            this._state.runPipeline();
-        }
+        this._filteringOptions = { ...this._filteringOptions, ...value };
     }
     get filteringOptions() {
         return this._filteringOptions;
     }
     set disableFiltering(value) {
         this._disableFiltering = value;
-        this.resetSearchTerm();
+        this._searchTerm = '';
     }
     get disableFiltering() {
         return this._disableFiltering;
     }
     set value(items) {
-        this._formValue.value = items;
+        this._formValue.setValueAndFormState(items);
+        this._syncSelectionFromValue();
         if (this.hasUpdated) {
-            this._updateSelection();
-            this.updateValue();
+            this._validate();
         }
     }
     get value() {
         return this._formValue.value;
     }
-    _updateSelection() {
-        this._selection.deselect();
-        if (!isEmpty(this.value)) {
-            this._selection.select(this.value);
-        }
-    }
-    toggleDirectiveChange() {
-        this._rootClickController.update();
+    get selection() {
+        return Array.from(this._selected);
     }
     constructor() {
         super();
-        this._inputRef = createRef();
-        this._searchRef = createRef();
-        this._listRef = createRef();
+        this._slots = addSlotController(this, { slots: SLOTS });
         this._rootClickController = addRootClickController(this, {
-            onHide: async () => {
-                if (!this.handleClosing()) {
-                    return;
-                }
-                this.open = false;
-                await this.updateComplete;
-                this.emitEvent('igcClosed');
-            },
+            onHide: this._handleClosing,
         });
         this._i18nController = addI18nController(this, {
             defaultEN: ComboResourceStringsEN,
@@ -187,35 +163,57 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
             transformers: {
                 setValue: asArray,
                 setDefaultValue: asArray,
+                setFormValue: (value) => {
+                    if (isEmpty(value) || !this.name) {
+                        return null;
+                    }
+                    if (this.singleSelect) {
+                        return String(first(value));
+                    }
+                    const formData = new FormData();
+                    for (const item of value) {
+                        formData.append(this.name, String(item));
+                    }
+                    return formData;
+                },
+            },
+        });
+        this._inputRef = createRef();
+        this._searchRef = createRef();
+        this._listRef = createRef();
+        this._state = new DataState(this);
+        this._navigation = new ComboNavigationController(this, this._state, {
+            input: this._inputRef,
+            search: this._searchRef,
+            list: this._listRef,
+            interactions: {
+                show: () => this._show(true),
+                hide: () => this._hide(true),
+                toggleSelection: (index) => this._toggleSelection(index),
+                select: (index) => this._selectByIndex(index),
+                clearSelection: () => this._clearSelection(),
             },
         });
         this._data = [];
         this._disableFiltering = false;
         this._singleSelect = false;
-        this._groupSorting = 'asc';
+        this._selected = new Set();
         this._filteringOptions = {
             filterKey: this.displayKey,
             caseSensitive: false,
             matchDiacritics: false,
         };
         this._displayValue = '';
-        this._state = new DataController(this);
-        this._selection = new SelectionController(this, this._state);
-        this._navigation = new ComboNavigationController(this, this._state, {
-            input: this._inputRef,
-            search: this._searchRef,
-            list: this._listRef,
-        });
         this.outlined = false;
         this.autofocusList = false;
-        this.open = false;
+        this.groupSorting = 'asc';
         this.caseSensitiveIcon = false;
         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) => {
+        this._itemRenderer = (item, index) => {
             if (!item) {
-                return html `${nothing}`;
+                return nothing;
             }
             if (this.groupKey && item.header) {
                 return html `
@@ -224,9 +222,10 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         </igc-combo-header>
       `;
             }
-            const { id, position } = this._getActiveDescendantId(index);
-            const active = this._navigation.active === index;
-            const selected = this._selection.has(this.data.at(item.dataIndex));
+            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;
             }
@@ -250,213 +249,264 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         addSafeEventListener(this, 'blur', this._handleBlur);
         addSafeEventListener(this, 'focusin', this._handleFocusIn);
     }
-    async firstUpdated() {
-        await this.updateComplete;
-        this._updateSelection();
-        this.updateValue(this.hasUpdated);
-        this._pristine = true;
-        this._state.runPipeline();
+    willUpdate(props) {
+        if (props.has('open')) {
+            this._rootClickController.update();
+        }
+        if (props.has('groupKey') ||
+            props.has('groupSorting') ||
+            props.has('filteringOptions') ||
+            props.has('data')) {
+            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;
+        }
     }
     _restoreDefaultValue() {
-        this._formValue.value = this._formValue.defaultValue;
-        this._updateSelection();
-        this.updateValue(true);
-        this._validate();
+        super._restoreDefaultValue();
+        this._syncSelectionFromValue();
     }
     _setDefaultValue(current) {
-        this.defaultValue = JSON.parse(current ?? '[]');
+        try {
+            this.defaultValue = JSON.parse(current || '[]');
+        }
+        catch { }
+    }
+    async _show(emitEvent = false) {
+        const [canOpen, _] = await Promise.all([
+            super._show(emitEvent),
+            this.updateComplete,
+        ]);
+        if (canOpen) {
+            if (!this.singleSelect) {
+                this._listRef.value?.focus();
+            }
+            if (!this.autofocusList) {
+                this._searchRef.value?.focus();
+            }
+        }
+        return canOpen;
+    }
+    async _hide(emitEvent = false) {
+        const [canClose, _] = await Promise.all([
+            super._hide(emitEvent),
+            this.updateComplete,
+        ]);
+        if (canClose) {
+            this._activeIndex = -1;
+        }
+        return canClose;
     }
-    _setFormValue() {
-        if (isEmpty(this.value)) {
-            super._setFormValue(null);
+    _resolveItems(items) {
+        if (this.valueKey) {
+            const keys = new Set(items);
+            return this.data.filter((item) => keys.has(item[this.valueKey]));
+        }
+        const dataSet = new Set(this.data);
+        return items.filter((item) => dataSet.has(item));
+    }
+    _resolveItemValue(record) {
+        return this.valueKey ? record[this.valueKey] : record;
+    }
+    _getValues(items, key) {
+        return Iterator.from(items)
+            .map((item) => (key ? item[key] : undefined) ?? item)
+            .toArray();
+    }
+    _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 = '';
+        }
+        if (isEmpty(collection)) {
+            if (!this.singleSelect) {
+                this._selected = new Set(this.data);
+                this.requestUpdate();
+            }
             return;
         }
         if (this.singleSelect) {
-            super._setFormValue(`${first(this.value)}`);
+            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;
         }
-        if (this.name) {
-            const value = new FormData();
-            for (const item of this.value) {
-                value.append(this.name, `${item}`);
+        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;
             }
-            super._setFormValue(value);
+            this._selected.clear();
+            this.requestUpdate();
+            return;
         }
-    }
-    resetSearchTerm() {
-        this._state.searchTerm = '';
-    }
-    updateValue(initial = false) {
-        if (isEmpty(this.data)) {
+        if (this.singleSelect) {
+            collection = collection.slice(0, 1);
+        }
+        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),
+                items: resolved,
+                type: 'deselection',
+            })) {
             return;
         }
-        this._formValue.value = this._selection.getSelectedValuesByKey(this.valueKey);
-        this._displayValue = this._selection
-            .getSelectedValuesByKey(this.displayKey)
-            .join(', ');
-        this._setFormValue();
+        for (const item of resolved) {
+            this._selected.delete(item);
+        }
+        this.requestUpdate();
+    }
+    _syncSelectionFromValue() {
+        this._selected.clear();
+        if (!isEmpty(this._formValue.value)) {
+            const values = this.singleSelect
+                ? asArray(first(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);
+            }
+        }
+        this._displayValue = this._getValues(this._selected, this.displayKey).join(', ');
+    }
+    _findItemByValue(value, key) {
+        return this.data.find((item) => (key ? item[key] : item) === value);
+    }
+    _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._validate();
-            this._listRef.value.requestUpdate();
+            this._listRef.value?.requestUpdate();
         }
     }
-    focus(options) {
-        this._inputRef.value.focus(options);
-    }
-    blur() {
-        this._inputRef.value.blur();
+    _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);
+        this._activeIndex = index;
+        this._syncValueFromSelection();
     }
-    get selection() {
-        return this._selection.asArray;
+    _selectByIndex(index) {
+        this._selectItems(this._resolveItemValue(this.data[this._state.dataState[index].dataIndex]), true);
+        this._activeIndex = index;
+        this._syncValueFromSelection();
     }
-    select(items) {
-        this._selection.select(items);
-        this.updateValue();
+    _clearSelection() {
+        if (this.singleSelect) {
+            this._searchTerm = '';
+            this._clearSingleSelection();
+        }
+        else {
+            this._deselectItems([], true);
+        }
+        this._syncValueFromSelection();
     }
-    deselect(items) {
-        this._selection.deselect(items);
-        this.updateValue();
+    _clearSingleSelection() {
+        const [selection] = this._selected;
+        if (selection) {
+            this._deselectItems(this._resolveItemValue(selection), true);
+            this._formValue.setValueAndFormState([]);
+        }
     }
-    async handleMainInput({ detail }) {
+    async _handleMainInput({ detail, }) {
         this._setTouchedState();
-        this._show();
-        this._state.searchTerm = detail;
+        this._show(true);
+        this._searchTerm = detail;
         await this.updateComplete;
-        const matchIndex = this._state.dataState.findIndex((i) => !i.header);
-        this._navigation.active = detail ? matchIndex : -1;
-        this._listRef.value.requestUpdate();
-        this.clearSingleSelection();
+        this._activeIndex = this._state.dataState.findIndex((i) => !i.header);
+        this._clearSingleSelection();
     }
     _handleFocusIn() {
         this._setTouchedState();
     }
     _handleBlur() {
-        if (this._selection.isEmpty) {
-            this._displayValue = '';
-            this.resetSearchTerm();
+        if (isEmpty(this._selected)) {
+            this._searchTerm = '';
         }
         super._handleBlur();
     }
-    handleSearchInput({ detail }) {
-        this._state.searchTerm = detail;
-    }
-    handleOpening() {
-        return this.emitEvent('igcOpening', { cancelable: true });
-    }
-    handleClosing() {
-        return this.emitEvent('igcClosing', { cancelable: true });
-    }
-    async _show(emitEvent = true) {
-        if (this.open || (emitEvent && !this.handleOpening())) {
-            return false;
-        }
-        this.open = true;
-        await this.updateComplete;
-        if (emitEvent) {
-            this.emitEvent('igcOpened');
-        }
-        if (!this.singleSelect) {
-            this._listRef.value.focus();
-        }
-        if (!this.autofocusList) {
-            this._searchRef.value.focus();
-        }
-        return true;
-    }
-    async show() {
-        return await this._show(false);
-    }
-    async _hide(emitEvent = true) {
-        if (!this.open || (emitEvent && !this.handleClosing())) {
-            return false;
-        }
-        this.open = false;
-        await this.updateComplete;
-        if (emitEvent) {
-            this.emitEvent('igcClosed');
-        }
-        this._navigation.active = -1;
-        return true;
-    }
-    async hide() {
-        return await this._hide(false);
-    }
-    _toggle(emit = true) {
-        return this.open ? this._hide(emit) : this._show(emit);
+    _handleSearchInput({ detail }) {
+        this._searchTerm = detail;
     }
-    async toggle() {
-        return await this._toggle(false);
+    _handleClosing() {
+        this._hide(true);
     }
-    _getActiveDescendantId(index) {
-        const position = index + 1;
-        const id = this.id ? `${this.id}-item-${position}` : `item-${position}`;
-        return { id, position };
-    }
-    itemClickHandler(event) {
-        this._setTouchedState();
-        const target = findElementFromEventPath(IgcComboItemComponent.tagName, event);
+    async _itemClickHandler(event) {
+        const target = getElementFromPath(IgcComboItemComponent.tagName, event);
         if (!target) {
             return;
         }
-        this.toggleSelect(target.index);
-        if (this.singleSelect) {
-            this._inputRef.value.focus();
-            this._hide();
-        }
-        else {
-            this._searchRef.value.focus();
-        }
-    }
-    toggleSelect(index) {
-        const { dataIndex } = this._state.dataState.at(index);
-        this._selection.changeSelection(dataIndex);
-        this._navigation.active = index;
-        this.updateValue();
-    }
-    selectByIndex(index) {
-        const { dataIndex } = this._state.dataState.at(index);
-        this._selection.selectByIndex(dataIndex);
-        this._navigation.active = index;
-        this.updateValue();
-    }
-    clearSelection() {
+        this._setTouchedState();
+        this._toggleSelection(target.index);
         if (this.singleSelect) {
-            this.resetSearchTerm();
-            this.clearSingleSelection();
+            this._inputRef.value?.focus();
+            await this._hide(true);
         }
         else {
-            this._selection.deselect([], true);
+            this._searchRef.value?.focus();
         }
-        this.updateValue();
     }
-    clearSingleSelection() {
-        const _selection = this._selection.asArray;
-        const selection = first(_selection);
-        if (selection) {
-            const item = this.valueKey ? selection[this.valueKey] : selection;
-            this._selection.deselect(item, !isEmpty(_selection));
-            this._formValue.value = [];
-        }
+    _handleClearIconClick(event) {
+        event.stopPropagation();
+        this._clearSelection();
+        this._activeIndex = -1;
     }
-    handleClearIconClick(e) {
-        e.stopPropagation();
-        this.clearSelection();
-        this._navigation.active = -1;
-    }
-    toggleCaseSensitivity() {
+    _handleCaseSensitivity() {
         this.filteringOptions = {
             caseSensitive: !this.filteringOptions.caseSensitive,
         };
     }
-    getMainAriaLabel() {
-        return this._selection.isEmpty
-            ? this.resourceStrings.combo_aria_label_no_options
-            : this.resourceStrings.combo_aria_label_options;
+    focus(options) {
+        this._inputRef.value?.focus(options);
+    }
+    blur() {
+        this._inputRef.value?.blur();
     }
-    _stopPropagation(e) {
-        e.stopPropagation();
+    select(items) {
+        this._selectItems(items);
+        this._syncValueFromSelection();
+    }
+    deselect(items) {
+        this._deselectItems(items);
+        this._syncValueFromSelection();
     }
-    renderToggleIcon() {
+    _renderToggleIcon() {
         return html `
       <span
         slot="suffix"
@@ -475,14 +525,14 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
       </span>
     `;
     }
-    renderClearIcon() {
+    _renderClearIcon() {
         return html `
       <span
         slot="suffix"
         part="clear-icon"
-        @click=${this.handleClearIconClick}
-        ?hidden=${this.disableClear || this._selection.isEmpty}
-        aria-label=${this.resourceStrings.combo_clearItems_placeholder}
+        @click=${this._handleClearIconClick}
+        ?hidden=${this.disableClear || isEmpty(this._selected)}
+        aria-label=${ifDefined(this.resourceStrings.combo_clearItems_placeholder)}
       >
         <slot name="clear-icon">
           <igc-icon
@@ -494,7 +544,9 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
       </span>
     `;
     }
-    renderMainInput() {
+    _renderMainInput() {
+        const hasPrefix = this._slots.hasAssignedElements('prefix');
+        const hasSuffix = this._slots.hasAssignedElements('suffix');
         return html `
       <igc-input
         ${ref(this._inputRef)}
@@ -506,13 +558,13 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         aria-expanded=${this.open}
         aria-describedby="combo-helper-text"
         aria-disabled=${this.disabled}
-        aria-label=${this.getMainAriaLabel()}
+        aria-label=${this._mainAriaLabel}
         exportparts="container: input, input: native-input, label, prefix, suffix"
-        @click=${this._toggle}
+        @click=${this._handleAnchorClick}
         placeholder=${ifDefined(this.placeholder)}
         label=${ifDefined(this.label)}
-        @igcChange=${this._stopPropagation}
-        @igcInput=${this.handleMainInput}
+        @igcChange=${stopPropagation}
+        @igcInput=${this._handleMainInput}
         .value=${this._displayValue}
         .disabled=${this.disabled}
         .required=${this.required}
@@ -521,18 +573,18 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
         .autofocus=${this.autofocus}
         ?readonly=${!this.singleSelect}
       >
-        <span slot=${!isEmpty(this.inputPrefix) && 'prefix'}>
+        <span slot=${bindIf(hasPrefix, 'prefix')}>
           <slot name="prefix"></slot>
         </span>
-        ${this.renderClearIcon()}
-        <span slot=${!isEmpty(this.inputSuffix) && 'suffix'}>
+        ${this._renderClearIcon()}
+        <span slot=${bindIf(hasSuffix, 'suffix')}>
           <slot name="suffix"></slot>
         </span>
-        ${this.renderToggleIcon()}
+        ${this._renderToggleIcon()}
       </igc-input>
     `;
     }
-    renderSearchInput() {
+    _renderSearchInput() {
         return html `
       <div
         part="filter-input"
@@ -540,37 +592,37 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
       >
         <igc-input
           ${ref(this._searchRef)}
-          .value=${this._state.searchTerm}
+          .value=${this._searchTerm}
           part="search-input"
           placeholder=${this.placeholderSearch}
           exportparts="input: search-input"
-          @igcInput=${this.handleSearchInput}
+          @igcInput=${this._handleSearchInput}
         >
           <igc-icon
-            slot=${this.caseSensitiveIcon && 'suffix'}
+            slot=${bindIf(this.caseSensitiveIcon, 'suffix')}
             name="case_sensitive"
             collection="default"
             part=${partMap({
             'case-icon': true,
-            active: this.filteringOptions.caseSensitive ?? false,
+            active: this.filteringOptions.caseSensitive,
         })}
-            @click=${this.toggleCaseSensitivity}
+            @click=${this._handleCaseSensitivity}
           ></igc-icon>
         </igc-input>
       </div>
     `;
     }
-    renderEmptyTemplate() {
+    _renderEmptyTemplate() {
         return html `
       <div part="empty" ?hidden=${!isEmpty(this._state.dataState)}>
         <slot name="empty">${this.resourceStrings.combo_empty_message}</slot>
       </div>
     `;
     }
-    renderList() {
+    _renderList() {
         return html `
       <div .inert=${!this.open} part="list-wrapper">
-        ${this.renderSearchInput()}
+        ${this._renderSearchInput()}
         <div part="header">
           <slot name="header"></slot>
         </div>
@@ -584,19 +636,19 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
           aria-labelledby="target"
           aria-activedescendant=${ifDefined(this._activeDescendant)}
           .items=${this._state.dataState}
-          .renderItem=${this.itemRenderer}
+          .renderItem=${this._itemRenderer}
           ?hidden=${isEmpty(this._state.dataState)}
-          @click=${this.itemClickHandler}
+          @click=${this._itemClickHandler}
         >
         </igc-combo-list>
-        ${this.renderEmptyTemplate()}
+        ${this._renderEmptyTemplate()}
         <div part="footer">
           <slot name="footer"></slot>
         </div>
       </div>
     `;
     }
-    renderHelperText() {
+    _renderHelperText() {
         return IgcValidationContainerComponent.create(this, {
             id: 'combo-helper-text',
             hasHelperText: true,
@@ -605,24 +657,24 @@ let IgcComboComponent = class IgcComboComponent extends FormAssociatedRequiredMi
     render() {
         return html `
       <igc-popover ?open=${this.open} flip shift same-width>
-        ${this.renderMainInput()} ${this.renderList()}
+        ${this._renderMainInput()} ${this._renderList()}
       </igc-popover>
-      ${this.renderHelperText()}
+      ${this._renderHelperText()}
     `;
     }
 };
 __decorate([
     state()
-], IgcComboComponent.prototype, "_activeDescendant", void 0);
+], IgcComboComponent.prototype, "_activeIndex", null);
 __decorate([
     state()
-], IgcComboComponent.prototype, "_displayValue", void 0);
+], IgcComboComponent.prototype, "_searchTerm", null);
 __decorate([
-    queryAssignedElements({ slot: 'suffix' })
-], IgcComboComponent.prototype, "inputSuffix", void 0);
+    state()
+], IgcComboComponent.prototype, "_activeDescendant", void 0);
 __decorate([
-    queryAssignedElements({ slot: 'prefix' })
-], IgcComboComponent.prototype, "inputPrefix", void 0);
+    state()
+], IgcComboComponent.prototype, "_displayValue", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcComboComponent.prototype, "data", null);
@@ -650,9 +702,6 @@ __decorate([
 __decorate([
     property({ attribute: 'placeholder-search' })
 ], IgcComboComponent.prototype, "placeholderSearch", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcComboComponent.prototype, "open", void 0);
 __decorate([
     property({ attribute: false })
 ], IgcComboComponent.prototype, "resourceStrings", null);
@@ -664,10 +713,10 @@ __decorate([
 ], IgcComboComponent.prototype, "displayKey", null);
 __decorate([
     property({ attribute: 'group-key' })
-], IgcComboComponent.prototype, "groupKey", null);
+], IgcComboComponent.prototype, "groupKey", void 0);
 __decorate([
     property({ attribute: 'group-sorting' })
-], IgcComboComponent.prototype, "groupSorting", null);
+], IgcComboComponent.prototype, "groupSorting", void 0);
 __decorate([
     property({ type: Object, attribute: 'filtering-options' })
 ], IgcComboComponent.prototype, "filteringOptions", null);
@@ -689,9 +738,6 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], IgcComboComponent.prototype, "value", null);
-__decorate([
-    watch('open')
-], IgcComboComponent.prototype, "toggleDirectiveChange", null);
 IgcComboComponent = IgcComboComponent_1 = __decorate([
     blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent'),
     blazorIndirectRender