igniteui-webcomponents 5.1.2 → 5.2.0

package/components/combo/combo.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcComboComponent_1;
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -17,7 +17,8 @@ import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import { findElementFromEventPath, isEmpty, partNameMap, } from '../common/util.js';
+import { createFormValueState, } from '../common/mixins/forms/form-value.js';
+import { asArray, findElementFromEventPath, first, isEmpty, partNameMap, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
@@ -39,71 +40,111 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     get __validators() {
         return comboValidators;
     }
-    get filteringOptions() {
-        return this._filteringOptions;
+    set data(value) {
+        this._data = asArray(value);
+        this.value = asArray(this.value);
+        this._state.runPipeline();
     }
-    set filteringOptions(value) {
-        this._filteringOptions = { ...this._filteringOptions, ...value };
-        this.requestUpdate('pipeline');
+    get data() {
+        return this._data;
     }
-    dataChanged() {
-        if (isEmpty(this.data))
-            return;
-        this.dataState = structuredClone(this.data);
+    set singleSelect(value) {
+        this._singleSelect = value;
+        this._selection.clear();
         if (this.hasUpdated) {
-            this.pipeline();
+            this.updateValue();
+            this.resetSearchTerm();
+            this._navigation.active = -1;
         }
-        this.requestUpdate('value');
     }
-    updateDisplayKey() {
-        this.displayKey = this.displayKey ?? this.valueKey;
+    get singleSelect() {
+        return this._singleSelect;
+    }
+    set valueKey(value) {
+        this._valueKey = value;
+        this._displayKey = this._displayKey ?? this._valueKey;
+    }
+    get valueKey() {
+        return this._valueKey;
     }
-    updateFilterKey() {
+    set displayKey(value) {
+        this._displayKey = value;
         if (!this.filteringOptions.filterKey) {
             this.filteringOptions = { filterKey: this.displayKey };
         }
     }
-    async pipeline() {
-        this.dataState = await this.dataController.apply([...this.data]);
+    get displayKey() {
+        return this._displayKey ?? this._valueKey;
     }
-    toggleDirectiveChange() {
-        this._rootClickController.update();
+    set groupKey(value) {
+        this._groupKey = value;
+        this._state.runPipeline();
+    }
+    get groupKey() {
+        return this._groupKey;
+    }
+    set groupSorting(value) {
+        this._groupSorting = value;
+        this._state.runPipeline();
+    }
+    get groupSorting() {
+        return this._groupSorting;
+    }
+    set filteringOptions(value) {
+        this._filteringOptions = { ...this._filteringOptions, ...value };
+        this._state.runPipeline();
     }
-    updateOnDisableFiltering() {
+    get filteringOptions() {
+        return this._filteringOptions;
+    }
+    set disableFiltering(value) {
+        this._disableFiltering = value;
         this.resetSearchTerm();
-        this.pipeline();
+    }
+    get disableFiltering() {
+        return this._disableFiltering;
+    }
+    set value(items) {
+        this._formValue.value = items;
+        if (this.hasUpdated) {
+            this._updateSelection();
+            this.updateValue();
+        }
+    }
+    get value() {
+        return this._formValue.value;
+    }
+    _updateSelection() {
+        this._selection.deselect();
+        if (!isEmpty(this.value)) {
+            this._selection.select(this.value);
+        }
+    }
+    toggleDirectiveChange() {
+        this._rootClickController.update();
     }
     constructor() {
         super();
-        this._value = [];
-        this._displayValue = '';
+        this._data = [];
+        this._disableFiltering = false;
+        this._singleSelect = false;
+        this._groupSorting = 'asc';
         this._filteringOptions = {
             filterKey: this.displayKey,
             caseSensitive: false,
             matchDiacritics: false,
         };
-        this.navigationController = new NavigationController(this);
-        this.selectionController = new SelectionController(this);
-        this.dataController = new DataController(this);
-        this.data = [];
+        this._displayValue = '';
+        this._state = new DataController(this);
+        this._selection = new SelectionController(this, this._state);
+        this._navigation = new NavigationController(this, this._state);
         this.outlined = false;
-        this.singleSelect = false;
         this.autofocusList = false;
         this.placeholderSearch = 'Search';
         this.open = false;
-        this.displayKey = this.valueKey;
-        this.groupKey = this.displayKey;
-        this.groupSorting = 'asc';
         this.caseSensitiveIcon = false;
-        this.disableFiltering = false;
-        this.itemTemplate = ({ item }) => {
-            const template = this.displayKey ? `${item[this.displayKey]}` : `${item}`;
-            return html `${template}`;
-        };
-        this.groupHeaderTemplate = ({ item }) => {
-            return html `${this.groupKey && item[this.groupKey]}`;
-        };
-        this.dataState = [];
+        this.itemTemplate = ({ item }) => html `${this.displayKey ? item[this.displayKey] : item}`;
+        this.groupHeaderTemplate = ({ item }) => html `${this.groupKey && item[this.groupKey]}`;
         this._rootClickController = addRootClickHandler(this, {
             hideCallback: async () => {
                 if (!this.handleClosing())
@@ -114,147 +155,133 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
             },
         });
         this.itemRenderer = (item, index) => {
-            const record = item;
-            const dataItem = this.data.at(record.dataIndex);
-            const active = this.navigationController.active === index;
-            const selected = this.selectionController.selected.has(dataItem);
-            const headerTemplate = html `<igc-combo-header part="group-header"
-      >${this.groupHeaderTemplate({ item: record.value })}</igc-combo-header
-    >`;
-            const itemPosition = index + 1;
-            const itemId = this.id
-                ? `${this.id}-item-${itemPosition}`
-                : `item-${itemPosition}`;
+            if (!item) {
+                return html `${nothing}`;
+            }
+            if (this.groupKey && item.header) {
+                return html `
+        <igc-combo-header part="group-header">
+          ${this.groupHeaderTemplate({ item: item.value })}
+        </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));
             if (active) {
-                this._activeDescendant = itemId;
+                this._activeDescendant = id;
             }
-            const itemTemplate = html `<igc-combo-item
-      id=${itemId}
-      part=${partNameMap({ item: true, selected, active })}
-      aria-setsize=${this.dataState.length}
-      aria-posinset=${itemPosition}
-      exportparts="checkbox, checkbox-indicator, checked"
-      @click=${this.itemClickHandler.bind(this)}
-      .index=${index}
-      ?active=${active}
-      ?selected=${selected}
-      ?hide-checkbox=${this.singleSelect}
-      >${this.itemTemplate({ item: record.value })}</igc-combo-item
-    >`;
-            return html `${this.groupKey && record.header
-                ? headerTemplate
-                : itemTemplate}`;
+            return html `
+      <igc-combo-item
+        id=${id}
+        part=${partNameMap({ item: true, selected, active })}
+        aria-setsize=${this._state.dataState.length}
+        aria-posinset=${position}
+        exportparts="checkbox, checkbox-indicator, checked"
+        .index=${index}
+        ?active=${active}
+        ?selected=${selected}
+        ?hide-checkbox=${this.singleSelect}
+      >
+        ${this.itemTemplate({ item: item.value })}
+      </igc-combo-item>
+    `;
         };
-        this.addEventListener('blur', () => {
-            const { selected } = this.selectionController;
-            if (isEmpty(selected)) {
-                this._displayValue = '';
-                this.resetSearchTerm();
-            }
-            this.invalid = !this.checkValidity();
+        this._formValue = createFormValueState(this, {
+            initialValue: [],
+            transformers: {
+                setValue: asArray,
+                setDefaultValue: asArray,
+            },
         });
-        this.addEventListener('keydown', this.navigationController.navigateHost.bind(this.navigationController));
-    }
-    resetSearchTerm() {
-        this.dataController.searchTerm = '';
-    }
-    resetState() {
-        this.selectionController.selected.clear();
-        this.updateValue();
-        this.resetSearchTerm();
-        this.navigationController.active = -1;
+        this.addEventListener('blur', this._handleBlur);
+        this.addEventListener('keydown', this._navigation.navigateHost.bind(this._navigation));
     }
-    selectItems() {
-        if (!this._value || isEmpty(this._value)) {
-            this.selectionController.deselect([]);
-        }
-        else {
-            this.selectionController.deselect([]);
-            this.selectionController.select(this._value);
-        }
-        this.updateValue();
-    }
-    set value(items) {
-        const oldValue = this._value;
-        this._value = items;
-        this.requestUpdate('value', oldValue);
+    async firstUpdated() {
+        await this.updateComplete;
+        this._updateSelection();
+        this.updateValue(this.hasUpdated);
+        this._pristine = true;
+        this._state.runPipeline();
     }
-    get value() {
-        return this._value;
+    _restoreDefaultValue() {
+        this._formValue.value = this._formValue.defaultValue;
+        this._updateSelection();
+        this.updateValue(true);
+        this._updateValidity();
     }
-    _setDefaultValue(_, current) {
-        this._defaultValue = JSON.parse(current ?? '[]');
+    _setDefaultValue(current) {
+        this.defaultValue = JSON.parse(current ?? '[]');
     }
     _setFormValue() {
-        if (!this.name) {
-            return;
-        }
-        const items = this._value;
-        if (isEmpty(items)) {
+        if (isEmpty(this.value)) {
             super._setFormValue(null);
             return;
         }
-        const data = new FormData();
         if (this.singleSelect) {
-            data.set(this.name, `${items[0]}`);
+            super._setFormValue(`${first(this.value)}`);
+            return;
         }
-        else {
-            for (const item of items) {
-                data.append(this.name, `${item}`);
+        if (this.name) {
+            const value = new FormData();
+            for (const item of this.value) {
+                value.append(this.name, `${item}`);
             }
+            super._setFormValue(value);
         }
-        super._setFormValue(data);
     }
-    async updateValue() {
-        if (isEmpty(this.data))
+    resetSearchTerm() {
+        this._state.searchTerm = '';
+    }
+    updateValue(initial = false) {
+        if (isEmpty(this.data)) {
             return;
-        const selected = Array.from(this.selectionController.selected);
-        this._value = this.selectionController.getValue(selected, this.valueKey);
-        this._displayValue = this.selectionController
-            .getValue(selected, this.displayKey)
-            .join(', ');
-        if (this.target && this.singleSelect) {
-            this.target.value = this._displayValue;
         }
+        this._formValue.value = this._selection.getSelectedValuesByKey(this.valueKey);
+        this._displayValue = this._selection
+            .getSelectedValuesByKey(this.displayKey)
+            .join(', ');
         this._setFormValue();
-        this._validate();
-        await this.updateComplete;
-        this.list.requestUpdate();
+        if (!initial) {
+            this._validate();
+            this._list.requestUpdate();
+        }
     }
     focus(options) {
-        this.target.focus(options);
+        this._input.focus(options);
     }
     blur() {
-        this.target.blur();
-        super.blur();
-    }
-    normalizeSelection(items = []) {
-        return Array.isArray(items) ? items : [items];
+        this._input.blur();
     }
     get selection() {
-        return Array.from(this.selectionController.selected.values());
+        return this._selection.asArray;
     }
     select(items) {
-        const _items = this.normalizeSelection(items);
-        this.selectionController.select(_items, false);
+        this._selection.select(items);
         this.updateValue();
     }
     deselect(items) {
-        const _items = this.normalizeSelection(items);
-        this.selectionController.deselect(_items, false);
+        this._selection.deselect(items);
         this.updateValue();
     }
-    async handleMainInput(e) {
+    async handleMainInput({ detail }) {
         this._show();
-        this.dataController.searchTerm = e.detail;
+        this._state.searchTerm = detail;
         await this.updateComplete;
-        const matchIndex = this.dataState.findIndex((i) => !i.header);
-        this.navigationController.active = e.detail.length > 0 ? matchIndex : -1;
-        this.list.requestUpdate();
+        const matchIndex = this._state.dataState.findIndex((i) => !i.header);
+        this._navigation.active = detail ? matchIndex : -1;
+        this._list.requestUpdate();
         this.clearSingleSelection();
     }
-    handleSearchInput(e) {
-        this.dataController.searchTerm = e.detail;
+    _handleBlur() {
+        if (this._selection.isEmpty) {
+            this._displayValue = '';
+            this.resetSearchTerm();
+        }
+        this.checkValidity();
+    }
+    handleSearchInput({ detail }) {
+        this._state.searchTerm = detail;
     }
     handleOpening() {
         return this.emitEvent('igcOpening', { cancelable: true });
@@ -272,10 +299,10 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
             this.emitEvent('igcOpened');
         }
         if (!this.singleSelect) {
-            this.list.focus();
+            this._list.focus();
         }
         if (!this.autofocusList) {
-            this.input.focus();
+            this._searchInput.focus();
         }
         return true;
     }
@@ -291,7 +318,7 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         if (emitEvent) {
             this.emitEvent('igcClosed');
         }
-        this.navigationController.active = -1;
+        this._navigation.active = -1;
         return true;
     }
     async hide() {
@@ -303,45 +330,50 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     async toggle() {
         return this._toggle(false);
     }
+    _getActiveDescendantId(index) {
+        const position = index + 1;
+        const id = this.id ? `${this.id}-item-${position}` : `item-${position}`;
+        return { id, position };
+    }
     listKeydownHandler(event) {
-        const target = event
-            .composedPath()
-            .find((el) => el instanceof IgcComboListComponent);
+        const target = findElementFromEventPath(IgcComboListComponent.tagName, event);
         if (target) {
-            this.navigationController.navigateList(event, target);
+            this._navigation.navigateList(event, target);
         }
     }
     itemClickHandler(event) {
-        const input = this.singleSelect ? this.target : this.input;
         const target = findElementFromEventPath(IgcComboItemComponent.tagName, event);
+        if (!target) {
+            return;
+        }
         this.toggleSelect(target.index);
-        input.focus();
         if (this.singleSelect) {
+            this._input.focus();
             this._hide();
         }
+        else {
+            this._searchInput.focus();
+        }
     }
     toggleSelect(index) {
-        const { dataIndex } = this.dataState.at(index);
-        this.selectionController.changeSelection(dataIndex);
-        this.navigationController.active = index;
+        const { dataIndex } = this._state.dataState.at(index);
+        this._selection.changeSelection(dataIndex);
+        this._navigation.active = index;
         this.updateValue();
     }
     selectByIndex(index) {
-        const { dataIndex } = this.dataState.at(index);
-        this.selectionController.selectByIndex(dataIndex);
-        this.navigationController.active = index;
+        const { dataIndex } = this._state.dataState.at(index);
+        this._selection.selectByIndex(dataIndex);
+        this._navigation.active = index;
         this.updateValue();
     }
-    navigateTo(item) {
-        this.navigationController.navigateTo(item, this.list);
-    }
     clearSingleSelection() {
-        const { selected } = this.selectionController;
-        const selection = selected.values().next().value;
+        const _selection = this._selection.asArray;
+        const selection = first(_selection);
         if (selection) {
             const item = this.valueKey ? selection[this.valueKey] : selection;
-            this.selectionController.deselect([item], !isEmpty(selected));
-            this._value = [];
+            this._selection.deselect(item, !isEmpty(_selection));
+            this._formValue.value = [];
         }
     }
     handleClearIconClick(e) {
@@ -351,28 +383,22 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
             this.clearSingleSelection();
         }
         else {
-            this.selectionController.deselect([], true);
+            this._selection.deselect([], true);
         }
         this.updateValue();
-        this.navigationController.active = -1;
+        this._navigation.active = -1;
     }
     handleMainInputKeydown(e) {
-        this.navigationController.navigateMainInput(e, this.list);
+        this._navigation.navigateMainInput(e, this._list);
     }
     handleSearchInputKeydown(e) {
-        this.navigationController.navigateSearchInput(e, this.list);
+        this._navigation.navigateSearchInput(e, this._list);
     }
     toggleCaseSensitivity() {
         this.filteringOptions = {
             caseSensitive: !this.filteringOptions.caseSensitive,
         };
     }
-    get hasPrefixes() {
-        return this.inputPrefix.length > 0;
-    }
-    get hasSuffixes() {
-        return this.inputSuffix.length > 0;
-    }
     _stopPropagation(e) {
         e.stopPropagation();
     }
@@ -380,10 +406,10 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
         return html `
       <span
         slot="suffix"
-        part="${partNameMap({
+        part=${partNameMap({
             'toggle-icon': true,
-            filled: this.value.length > 0,
-        })}"
+            filled: !isEmpty(this.value),
+        })}
       >
         <slot name="toggle-icon">
           <igc-icon
@@ -396,125 +422,126 @@ let IgcComboComponent = IgcComboComponent_1 = class IgcComboComponent extends Fo
     `;
     }
     renderClearIcon() {
-        const { selected } = this.selectionController;
-        return html `<span
-      slot="suffix"
-      part="clear-icon"
-      @click=${this.handleClearIconClick}
-      ?hidden=${isEmpty(selected)}
-    >
-      <slot name="clear-icon">
-        <igc-icon
-          name="input_clear"
-          collection="default"
-          aria-hidden="true"
-        ></igc-icon>
-      </slot>
-    </span>`;
+        return html `
+      <span
+        slot="suffix"
+        part="clear-icon"
+        @click=${this.handleClearIconClick}
+        ?hidden=${this._selection.isEmpty}
+      >
+        <slot name="clear-icon">
+          <igc-icon
+            name="input_clear"
+            collection="default"
+            aria-hidden="true"
+          ></igc-icon>
+        </slot>
+      </span>
+    `;
     }
     renderMainInput() {
-        return html `<igc-input
-      id="target"
-      slot="anchor"
-      role="combobox"
-      aria-controls="dropdown"
-      aria-owns="dropdown"
-      aria-expanded=${this.open ? 'true' : 'false'}
-      aria-describedby="combo-helper-text"
-      aria-disabled=${this.disabled}
-      exportparts="container: input, input: native-input, label, prefix, suffix"
-      @click=${(e) => {
-            e.preventDefault();
-            this._toggle(true);
-        }}
-      placeholder=${ifDefined(this.placeholder)}
-      label=${ifDefined(this.label)}
-      @igcChange=${this._stopPropagation}
-      @focus=${() => {
-            requestAnimationFrame(() => {
-                this.target.select();
-            });
-        }}
-      @igcInput=${this.handleMainInput}
-      @keydown=${this.handleMainInputKeydown}
-      .value=${this._displayValue}
-      .disabled=${this.disabled}
-      .required=${this.required}
-      .invalid=${live(this.invalid)}
-      .outlined=${this.outlined}
-      .autofocus=${this.autofocus}
-      ?readonly=${!this.singleSelect}
-    >
-      <span slot=${this.hasPrefixes && 'prefix'}>
-        <slot name="prefix"></slot>
-      </span>
-      ${this.renderClearIcon()}
-      <span slot=${this.hasSuffixes && 'suffix'}>
-        <slot name="suffix"></slot>
-      </span>
-      ${this.renderToggleIcon()}
-    </igc-input>`;
+        return html `
+      <igc-input
+        id="target"
+        slot="anchor"
+        role="combobox"
+        aria-controls="dropdown"
+        aria-owns="dropdown"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-describedby="combo-helper-text"
+        aria-disabled=${this.disabled}
+        exportparts="container: input, input: native-input, label, prefix, suffix"
+        @click=${this._toggle}
+        placeholder=${ifDefined(this.placeholder)}
+        label=${ifDefined(this.label)}
+        @igcChange=${this._stopPropagation}
+        @igcInput=${this.handleMainInput}
+        @keydown=${this.handleMainInputKeydown}
+        .value=${this._displayValue}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .invalid=${live(this.invalid)}
+        .outlined=${this.outlined}
+        .autofocus=${this.autofocus}
+        ?readonly=${!this.singleSelect}
+      >
+        <span slot=${!isEmpty(this.inputPrefix) && 'prefix'}>
+          <slot name="prefix"></slot>
+        </span>
+        ${this.renderClearIcon()}
+        <span slot=${!isEmpty(this.inputSuffix) && 'suffix'}>
+          <slot name="suffix"></slot>
+        </span>
+        ${this.renderToggleIcon()}
+      </igc-input>
+    `;
     }
     renderSearchInput() {
-        return html `<div
-      part="filter-input"
-      ?hidden=${this.disableFiltering || this.singleSelect}
-    >
-      <igc-input
-        .value=${this.dataController.searchTerm}
-        part="search-input"
-        placeholder=${this.placeholderSearch}
-        exportparts="input: search-input"
-        @igcInput=${this.handleSearchInput}
-        @keydown=${this.handleSearchInputKeydown}
+        return html `
+      <div
+        part="filter-input"
+        ?hidden=${this.disableFiltering || this.singleSelect}
       >
-        <igc-icon
-          slot=${this.caseSensitiveIcon && 'suffix'}
-          name="case_sensitive"
-          collection="default"
-          part=${partNameMap({
+        <igc-input
+          .value=${this._state.searchTerm}
+          part="search-input"
+          placeholder=${this.placeholderSearch}
+          exportparts="input: search-input"
+          @igcInput=${this.handleSearchInput}
+          @keydown=${this.handleSearchInputKeydown}
+        >
+          <igc-icon
+            slot=${this.caseSensitiveIcon && 'suffix'}
+            name="case_sensitive"
+            collection="default"
+            part=${partNameMap({
             'case-icon': true,
             active: this.filteringOptions.caseSensitive ?? false,
         })}
-          @click=${this.toggleCaseSensitivity}
-        ></igc-icon>
-      </igc-input>
-    </div>`;
+            @click=${this.toggleCaseSensitivity}
+          ></igc-icon>
+        </igc-input>
+      </div>
+    `;
     }
     renderEmptyTemplate() {
-        return html `<div part="empty" ?hidden=${this.dataState.length > 0}>
-      <slot name="empty">The list is empty</slot>
-    </div>`;
+        return html `
+      <div part="empty" ?hidden=${!isEmpty(this._state.dataState)}>
+        <slot name="empty">The list is empty</slot>
+      </div>
+    `;
     }
     renderList() {
-        const hasItems = this.dataState.length > 0;
-        return html `<div
-      .inert=${!this.open}
-      @keydown=${this.listKeydownHandler}
-      part="list-wrapper"
-    >
-      ${this.renderSearchInput()}
-      <div part="header">
-        <slot name="header"></slot>
-      </div>
-      <igc-combo-list
-        aria-multiselectable=${!this.singleSelect}
-        id="dropdown"
-        part="list"
-        role="listbox"
-        tabindex="0"
-        aria-labelledby="target"
-        aria-activedescendant=${ifDefined(this._activeDescendant)}
-        .items=${this.dataState}
-        .renderItem=${this.itemRenderer}
-        ?hidden=${!hasItems}
+        return html `
+      <div
+        .inert=${!this.open}
+        @keydown=${this.listKeydownHandler}
+        part="list-wrapper"
       >
-      </igc-combo-list>
-      ${this.renderEmptyTemplate()}
-      <div part="footer">
-        <slot name="footer"></slot>
+        ${this.renderSearchInput()}
+        <div part="header">
+          <slot name="header"></slot>
+        </div>
+        <igc-combo-list
+          aria-multiselectable=${!this.singleSelect}
+          id="dropdown"
+          part="list"
+          role="listbox"
+          tabindex="0"
+          aria-labelledby="target"
+          aria-activedescendant=${ifDefined(this._activeDescendant)}
+          .items=${this._state.dataState}
+          .renderItem=${this.itemRenderer}
+          ?hidden=${isEmpty(this._state.dataState)}
+          @click=${this.itemClickHandler}
+        >
+        </igc-combo-list>
+        ${this.renderEmptyTemplate()}
+        <div part="footer">
+          <slot name="footer"></slot>
+        </div>
       </div>
-    </div>`;
+    `;
     }
     renderHelperText() {
         return IgcValidationContainerComponent.create(this, {
@@ -547,61 +574,61 @@ __decorate([
 ], IgcComboComponent.prototype, "inputPrefix", void 0);
 __decorate([
     query('[part="search-input"]')
-], IgcComboComponent.prototype, "input", void 0);
+], IgcComboComponent.prototype, "_searchInput", void 0);
 __decorate([
-    query('igc-input#target')
-], IgcComboComponent.prototype, "target", void 0);
+    query('#target', true)
+], IgcComboComponent.prototype, "_input", void 0);
 __decorate([
-    query('igc-combo-list')
-], IgcComboComponent.prototype, "list", void 0);
+    query(IgcComboListComponent.tagName, true)
+], IgcComboComponent.prototype, "_list", void 0);
 __decorate([
     property({ attribute: false })
-], IgcComboComponent.prototype, "data", void 0);
+], IgcComboComponent.prototype, "data", null);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcComboComponent.prototype, "outlined", void 0);
 __decorate([
-    property({ attribute: 'single-select', reflect: true, type: Boolean })
-], IgcComboComponent.prototype, "singleSelect", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'single-select' })
+], IgcComboComponent.prototype, "singleSelect", null);
 __decorate([
     property({ type: Boolean })
 ], IgcComboComponent.prototype, "autofocus", void 0);
 __decorate([
-    property({ attribute: 'autofocus-list', type: Boolean })
+    property({ type: Boolean, attribute: 'autofocus-list' })
 ], IgcComboComponent.prototype, "autofocusList", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], IgcComboComponent.prototype, "label", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], IgcComboComponent.prototype, "placeholder", void 0);
 __decorate([
-    property({ attribute: 'placeholder-search', type: String })
+    property({ attribute: 'placeholder-search' })
 ], IgcComboComponent.prototype, "placeholderSearch", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcComboComponent.prototype, "open", void 0);
 __decorate([
-    property({ attribute: 'value-key', reflect: false })
-], IgcComboComponent.prototype, "valueKey", void 0);
+    property({ attribute: 'value-key' })
+], IgcComboComponent.prototype, "valueKey", null);
 __decorate([
-    property({ attribute: 'display-key', reflect: false })
-], IgcComboComponent.prototype, "displayKey", void 0);
+    property({ attribute: 'display-key' })
+], IgcComboComponent.prototype, "displayKey", null);
 __decorate([
-    property({ attribute: 'group-key', reflect: false })
-], IgcComboComponent.prototype, "groupKey", void 0);
+    property({ attribute: 'group-key' })
+], IgcComboComponent.prototype, "groupKey", null);
 __decorate([
-    property({ attribute: 'group-sorting', reflect: false })
-], IgcComboComponent.prototype, "groupSorting", void 0);
+    property({ attribute: 'group-sorting' })
+], IgcComboComponent.prototype, "groupSorting", null);
 __decorate([
-    property({ attribute: 'filtering-options', type: Object })
+    property({ type: Object, attribute: 'filtering-options' })
 ], IgcComboComponent.prototype, "filteringOptions", null);
 __decorate([
-    property({ type: Boolean, attribute: 'case-sensitive-icon', reflect: false })
+    property({ type: Boolean, attribute: 'case-sensitive-icon' })
 ], IgcComboComponent.prototype, "caseSensitiveIcon", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'disable-filtering', reflect: false })
-], IgcComboComponent.prototype, "disableFiltering", void 0);
+    property({ type: Boolean, attribute: 'disable-filtering' })
+], IgcComboComponent.prototype, "disableFiltering", null);
 __decorate([
     property({ attribute: false })
 ], IgcComboComponent.prototype, "itemTemplate", void 0);
@@ -609,37 +636,11 @@ __decorate([
     property({ attribute: false })
 ], IgcComboComponent.prototype, "groupHeaderTemplate", void 0);
 __decorate([
-    state()
-], IgcComboComponent.prototype, "dataState", void 0);
-__decorate([
-    watch('data')
-], IgcComboComponent.prototype, "dataChanged", null);
-__decorate([
-    watch('valueKey')
-], IgcComboComponent.prototype, "updateDisplayKey", null);
-__decorate([
-    watch('displayKey')
-], IgcComboComponent.prototype, "updateFilterKey", null);
-__decorate([
-    watch('groupKey'),
-    watch('groupSorting'),
-    watch('pipeline')
-], IgcComboComponent.prototype, "pipeline", null);
+    property({ type: Array })
+], IgcComboComponent.prototype, "value", null);
 __decorate([
     watch('open')
 ], IgcComboComponent.prototype, "toggleDirectiveChange", null);
-__decorate([
-    watch('disableFiltering')
-], IgcComboComponent.prototype, "updateOnDisableFiltering", null);
-__decorate([
-    watch('singleSelect', { waitUntilFirstUpdate: true })
-], IgcComboComponent.prototype, "resetState", null);
-__decorate([
-    watch('value')
-], IgcComboComponent.prototype, "selectItems", null);
-__decorate([
-    property({ attribute: true, type: Array })
-], IgcComboComponent.prototype, "value", null);
 IgcComboComponent = IgcComboComponent_1 = __decorate([
     themes(all),
     blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent'),