igniteui-angular 12.3.40 → 12.3.42

package/fesm2015/igniteui-angular.js

@@ -35248,6 +35248,9 @@ class IgxComboAPIService {
     }
     set_selected_item(itemID, event) {
         const selected = this.combo.isItemSelected(itemID);
+        if (itemID === undefined) {
+            return;
+        }
         if (!selected) {
             this.combo.select([itemID], false, event);
         }
@@ -35829,7 +35832,13 @@ class IgxComboBaseDirective extends DisplayDensityBase {
         return this._data;
     }
     set data(val) {
-        this._data = (val) ? val : [];
+        // igxFor directive ignores undefined values
+        // if the combo uses simple data and filtering is applied
+        // an error will occur due to the mismatch of the length of the data
+        // this can occur during filtering for the igx-combo and
+        // during filtering & selection for the igx-simple-combo
+        // since the simple combo's input is both a container for the selection and a filter
+        this._data = (val) ? val.filter(x => x !== undefined) : [];
     }
     set displayKey(val) {
         this._displayKey = val;
@@ -36335,6 +36344,14 @@ class IgxComboBaseDirective extends DisplayDensityBase {
         this.registerRemoteEntries(removedItems, false);
         return Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');
     }
+    get required() {
+        if (this.ngControl && this.ngControl.control && this.ngControl.control.validator) {
+            // Run the validation with empty object to check if required is enabled.
+            const error = this.ngControl.control.validator({});
+            return error && error.required;
+        }
+        return false;
+    }
 }
 IgxComboBaseDirective.decorators = [
     { type: Directive }
@@ -36508,7 +36525,7 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
      * @hidden
      */
     navigateFirst() {
-        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e.isHeader));
+        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !(e === null || e === void 0 ? void 0 : e.isHeader)));
     }
     /**
      * @hidden
@@ -36643,8 +36660,8 @@ class IgxComboFilteringPipe {
                 });
             }
             else {
-                return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
-                    e.toString().toLowerCase().includes(searchTerm));
+                return collection.filter(e => filteringOptions.caseSensitive ? e === null || e === void 0 ? void 0 : e.includes(searchTerm) :
+                    e === null || e === void 0 ? void 0 : e.toString().toLowerCase().includes(searchTerm));
             }
         }
     }
@@ -36658,6 +36675,7 @@ class IgxComboGroupingPipe {
         this.combo = combo;
     }
     transform(collection, groupKey, valueKey) {
+        // TODO: should filteredData be changed here?
         this.combo.filteredData = collection;
         if ((!groupKey && groupKey !== 0) || !collection.length) {
             return collection;
@@ -36832,7 +36850,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
      * @hidden @internal
      */
     writeValue(value) {
-        const selection = Array.isArray(value) ? value : [];
+        const selection = Array.isArray(value) ? value.filter(x => x !== undefined) : [];
         const oldSelection = this.selection;
         this.selectionService.select_items(this.id, selection, true);
         this.cdr.markForCheck();
@@ -36945,6 +36963,9 @@ class IgxComboComponent extends IgxComboBaseDirective {
      * ```
      */
     setSelectedItem(itemID, select = true, event) {
+        if (itemID === undefined) {
+            return;
+        }
         if (select) {
             this.select([itemID], false, event);
         }
@@ -37028,7 +37049,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
 IgxComboComponent.decorators = [
     { type: Component, args: [{
                 selector: 'igx-combo',
-                template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly [attr.placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n        <input class=\"igx-combo-input\" igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n            [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n            (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n            aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" />\n        <igx-suffix *ngIf=\"showSearchCaseIcon\">\n            <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    </igx-input-group>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [itemHeight]='itemHeight' *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterable\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly [attr.placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n        <input class=\"igx-combo-input\" igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n            [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n            (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n            aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" />\n        <igx-suffix *ngIf=\"showSearchCaseIcon\">\n            <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    </igx-input-group>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [itemHeight]='itemHeight' *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterable\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
                 providers: [
                     IgxComboAPIService,
                     { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
@@ -37131,6 +37152,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         this._updateInput = true;
         // stores the last filtered value - move to common?
         this._internalFilter = '';
+        this._collapsing = false;
         this.findAllMatches = (element) => {
             const value = this.displayKey ? element[this.displayKey] : element;
             if (value === null || value === undefined || value === '') {
@@ -37187,7 +37209,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
      * ```
      */
     select(item) {
-        if (item !== null && item !== undefined) {
+        if (item !== undefined) {
             const newSelection = this.selectionService.add_items(this.id, item instanceof Array ? item : [item], true);
             this.setSelection(newSelection);
         }
@@ -37205,17 +37227,19 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     }
     /** @hidden @internal */
     writeValue(value) {
+        var _a;
         const oldSelection = this.selection;
-        this.selectionService.select_items(this.id, value ? [value] : [], true);
+        this.selectionService.select_items(this.id, this.isValid(value) ? [value] : [], true);
         this.cdr.markForCheck();
         this._value = this.createDisplayText(this.selection, oldSelection);
+        this.filterValue = this._internalFilter = (_a = this._value) === null || _a === void 0 ? void 0 : _a.toString();
     }
     /** @hidden @internal */
     ngAfterViewInit() {
         this.virtDir.contentSizeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.selection.length > 0) {
                 const index = this.virtDir.igxForOf.findIndex(e => {
-                    let current = e[this.valueKey];
+                    let current = e ? e[this.valueKey] : undefined;
                     if (this.valueKey === null || this.valueKey === undefined) {
                         current = e;
                     }
@@ -37229,7 +37253,11 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
                 }
             }
         });
-        this.dropdown.opening.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.dropdown.opening.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+            if (args.cancel) {
+                return;
+            }
+            this._collapsing = false;
             const filtered = this.filteredData.find(this.findAllMatches);
             if (filtered === undefined || filtered === null) {
                 this.filterValue = this.searchValue = this.comboInput.value;
@@ -37244,17 +37272,27 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             this._internalFilter = this.comboInput.value;
         });
         this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+            if (args.cancel) {
+                return;
+            }
             if (this.getEditElement() && !args.event) {
-                this.comboInput.focus();
+                this._collapsing = true;
             }
             else {
                 this.clearOnBlur();
                 this._onTouchedCallback();
             }
+            this.comboInput.focus();
         });
         this.dropdown.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.filterValue = this._internalFilter = this.comboInput.value;
         });
+        // in reactive form the control is not present initially
+        // and sets the selection to an invalid value in writeValue method
+        if (!this.isValid(this.selectedItem)) {
+            this.selectionService.clear(this.id);
+            this._value = '';
+        }
         super.ngAfterViewInit();
     }
     /** @hidden @internal */
@@ -37266,7 +37304,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         if (this.collapsed && this.comboInput.focused) {
             this.open();
         }
-        if (!this.comboInput.value.trim() && this.selectionService.size(this.id) > 0) {
+        if (!this.comboInput.value.trim() && this.selection.length) {
             // handle clearing of input by space
             this.clearSelection();
             this._onChangeCallback(null);
@@ -37301,6 +37339,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
         if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
             this.clearOnBlur();
+            this.close();
         }
         this.composing = false;
         super.handleKeyDown(event);
@@ -37332,6 +37371,15 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         this.comboInput.focus();
     }
     /** @hidden @internal */
+    onBlur() {
+        // when clicking the toggle button to close the combo and immediately clicking outside of it
+        // the collapsed state is not modified as the dropdown is still not closed
+        if (this.collapsed || this._collapsing) {
+            this.clearOnBlur();
+        }
+        super.onBlur();
+    }
+    /** @hidden @internal */
     onFocus() {
         this._internalFilter = this.comboInput.value || '';
     }
@@ -37405,17 +37453,12 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             owner: this,
             cancel: false
         };
-        // additional checks when selecting and clearing an item with valueKey=undefined
-        // as the event should emit when args.newSelection differs from args.oldSelection
-        // however in this case both args.newSelection and args.oldSelection are 'undefined'
-        if (args.newSelection !== args.oldSelection
-            || args.newSelection === undefined && (newSelection === null || newSelection === void 0 ? void 0 : newSelection.size) > 0
-            || args.oldSelection === undefined && oldSelectionAsArray.length > 0) {
+        if (args.newSelection !== args.oldSelection) {
             this.selectionChanging.emit(args);
         }
         // TODO: refactor below code as it sets the selection and the display text
         if (!args.cancel) {
-            let argsSelection = (newSelection === null || newSelection === void 0 ? void 0 : newSelection.size) > 0
+            let argsSelection = this.isValid(args.newSelection)
                 ? args.newSelection
                 : [];
             argsSelection = Array.isArray(argsSelection) ? argsSelection : [argsSelection];
@@ -37452,32 +37495,31 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     }
     clearOnBlur() {
         const filtered = this.filteredData.find(this.findMatch);
-        if (filtered === undefined || filtered === null || this.getElementKey(filtered) !== this.selectedItem) {
-            this.clearAndClose();
+        // selecting null in primitive data returns undefined as the search text is '', but the item is null
+        if (filtered === undefined && this.selectedItem !== null || !this.selection.length) {
+            this.clear();
             return;
         }
     }
-    getElementKey(element) {
-        const elementVal = this.valueKey ? element[this.valueKey] : element;
-        return elementVal;
-    }
     getElementVal(element) {
         const elementVal = this.displayKey ? element[this.displayKey] : element;
         return String(elementVal);
     }
-    clearAndClose() {
+    clear() {
         this.clearSelection(true);
         this._internalFilter = '';
         this.searchValue = '';
-        if (!this.collapsed) {
-            this.close();
-        }
+    }
+    isValid(value) {
+        return this.required
+            ? value !== null && value !== '' && value !== undefined
+            : value !== undefined;
     }
 }
 IgxSimpleComboComponent.decorators = [
     { type: Component, args: [{
                 selector: 'igx-simple-combo',
-                template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n        [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n        [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n        (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n        [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n        [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n        (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
                 providers: [
                     IgxComboAPIService,
                     { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },