igniteui-angular 22.2.0-rc.0 → 22.2.0-rc.1

package/fesm2022/igniteui-angular-combo.mjs

@@ -1,5 +1,5 @@
 import * as i3 from 'igniteui-angular/input-group';
-import { IGX_INPUT_GROUP_TYPE, IgxInputState, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxLabelDirective, IgxReadOnlyInputDirective } from 'igniteui-angular/input-group';
+import { IGX_INPUT_GROUP_TYPE, IgxInputState, toInputState, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxLabelDirective, IgxReadOnlyInputDirective } from 'igniteui-angular/input-group';
 import { NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, inject, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, Directive, InjectionToken, ElementRef, ChangeDetectorRef, DOCUMENT, Injector, EventEmitter, QueryList, TemplateRef, ViewChildren, ContentChildren, ViewChild, ContentChild, forwardRef, Output, ViewEncapsulation, Pipe, HostListener, NgModule } from '@angular/core';
@@ -1126,12 +1126,8 @@ class IgxComboBaseDirective {
         this.itemsInContainer = 10;
         this.onStatusChanged = () => {
             if (this.control && this.control.touchedOrDirty && !this.control.disabled) {
-                if (this.control.hasValidators && (!this.collapsed || this.inputGroup.isFocused)) {
-                    this.valid = this.control.valid ? IgxInputState.VALID : IgxInputState.INVALID;
-                }
-                else {
-                    this.valid = this.control.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
-                }
+                const showSuccess = this.control.hasValidators && (!this.collapsed || this.inputGroup.isFocused);
+                this.valid = toInputState(this.control.status, showSuccess ? 'allowed' : 'suppressed');
             }
             else {
                 // B.P. 18 May 2021: IgxDatePicker does not reset its state upon resetForm #9526
@@ -2464,7 +2460,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type === 'search' ? 'box' : 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,[igxPrefix]\"></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]=\"displayValue\" readonly\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxReadOnlyInput]=\"false\"\n        role=\"combobox\" aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    @if (displayValue && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClearItems($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n\n    <!-- The igx-combo class is needed here in order to scope the css variables -->\n    <div class=\"igx-combo\">\n        @if (displaySearchInput) {\n            <div class=\"igx-combo__search\">\n                <igx-input-group type=\"line\">\n                    <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]=\"getSearchPlaceholderText()\"\n                           aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n                    @if (showSearchCaseIcon) {\n                        <igx-suffix\n                            class=\"igx-input-group__case-icon igx-combo__case-icon\"\n                            [ngClass]=\"{ 'igx-combo__case-icon--active': filteringOptions.caseSensitive }\"\n                            (click)=\"toggleCaseSensitive()\"\n                        >\n                            <igx-icon\n                                    family=\"default\"\n                                    name=\"case_sensitive\"\n                                    [active]=\"filteringOptions.caseSensitive\">\n                            </igx-icon>\n                        </igx-suffix>\n                    }\n                </igx-input-group>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"headerTemplate\">\n        </ng-container>\n        @let itemWindow = data!\n        | comboRecordWindow:totalItemCount:virtualStartIndex\n        | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n        | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n        | comboDataWindow:totalItemCount:virtualStartIndex;\n        <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n             [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n             [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n             [attr.aria-activedescendant]=\"activeDescendant\">\n            <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                [dataWindow]=\"itemWindow\"\n                                [estimatedItemSize]=\"estimatedItemSize\"\n                                [initialViewportSize]=\"viewportSize\"\n                                (stateChange)=\"handleVirtualStateChange($event)\">\n                <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                    <igx-combo-item [itemHeight]=\"itemHeight\"\n                                    [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n                        @if (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                        }\n                        <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                        @if (!item?.isHeader) {\n                            <ng-container #listItem\n                                          *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                            </ng-container>\n                        }\n                    </igx-combo-item>\n                </ng-template>\n            </igx-virtual-scroll>\n        </div>\n\n        @if (filteredData?.length === 0 || isAddButtonVisible()) {\n            <div class=\"igx-combo__add\">\n                @if (filteredData?.length === 0) {\n                    <div class=\"igx-combo__empty\">\n                        <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                        </ng-container>\n                    </div>\n                }\n                @if (isAddButtonVisible()) {\n                    <igx-combo-add-item [itemHeight]=\"itemHeight\"\n                                        [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                                        [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                        <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                        </ng-container>\n                    </igx-combo-add-item>\n                }\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"footerTemplate\">\n        </ng-container>\n    </div>\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 type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxVirtualScrollComponent, selector: "igx-virtual-scroll", inputs: ["data", "orientation", "overScan", "estimatedItemSize", "dataWindow", "initialViewportSize", "itemTemplate"], outputs: ["stateChange", "dataRequest"] }, { kind: "directive", type: IgxVirtualItemDirective, selector: "ng-template[igxVirtualItem]" }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }, { kind: "pipe", type: IgxComboDataWindowPipe, name: "comboDataWindow" }, { kind: "pipe", type: IgxComboRecordWindowPipe, name: "comboRecordWindow" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type === 'search' ? 'box' : 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,[igxPrefix]\"></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]=\"displayValue\" readonly\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxReadOnlyInput]=\"false\"\n        role=\"combobox\" aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    @if (displayValue && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClearItems($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n</igx-input-group>\n<!-- Outside the drop-down: its content is detached while closed, and a @let there fails to serialize (NG0502). -->\n@let itemWindow = data!\n    | comboRecordWindow:totalItemCount:virtualStartIndex\n    | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n    | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n    | comboDataWindow:totalItemCount:virtualStartIndex;\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n\n    <!-- The igx-combo class is needed here in order to scope the css variables -->\n    <div class=\"igx-combo\">\n        @if (displaySearchInput) {\n            <div class=\"igx-combo__search\">\n                <igx-input-group type=\"line\">\n                    <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]=\"getSearchPlaceholderText()\"\n                           aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n                    @if (showSearchCaseIcon) {\n                        <igx-suffix\n                            class=\"igx-input-group__case-icon igx-combo__case-icon\"\n                            [ngClass]=\"{ 'igx-combo__case-icon--active': filteringOptions.caseSensitive }\"\n                            (click)=\"toggleCaseSensitive()\"\n                        >\n                            <igx-icon\n                                    family=\"default\"\n                                    name=\"case_sensitive\"\n                                    [active]=\"filteringOptions.caseSensitive\">\n                            </igx-icon>\n                        </igx-suffix>\n                    }\n                </igx-input-group>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"headerTemplate\">\n        </ng-container>\n        <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n             [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n             [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n             [attr.aria-activedescendant]=\"activeDescendant\">\n            <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                [dataWindow]=\"itemWindow\"\n                                [estimatedItemSize]=\"estimatedItemSize\"\n                                [initialViewportSize]=\"viewportSize\"\n                                (stateChange)=\"handleVirtualStateChange($event)\">\n                <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                    <igx-combo-item [itemHeight]=\"itemHeight\"\n                                    [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n                        @if (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                        }\n                        <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                        @if (!item?.isHeader) {\n                            <ng-container #listItem\n                                          *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                            </ng-container>\n                        }\n                    </igx-combo-item>\n                </ng-template>\n            </igx-virtual-scroll>\n        </div>\n\n        @if (filteredData?.length === 0 || isAddButtonVisible()) {\n            <div class=\"igx-combo__add\">\n                @if (filteredData?.length === 0) {\n                    <div class=\"igx-combo__empty\">\n                        <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                        </ng-container>\n                    </div>\n                }\n                @if (isAddButtonVisible()) {\n                    <igx-combo-add-item [itemHeight]=\"itemHeight\"\n                                        [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                                        [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                        <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                        </ng-container>\n                    </igx-combo-add-item>\n                }\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"footerTemplate\">\n        </ng-container>\n    </div>\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 type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxVirtualScrollComponent, selector: "igx-virtual-scroll", inputs: ["data", "orientation", "overScan", "estimatedItemSize", "dataWindow", "initialViewportSize", "itemTemplate"], outputs: ["stateChange", "dataRequest"] }, { kind: "directive", type: IgxVirtualItemDirective, selector: "ng-template[igxVirtualItem]" }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }, { kind: "pipe", type: IgxComboDataWindowPipe, name: "comboDataWindow" }, { kind: "pipe", type: IgxComboRecordWindowPipe, name: "comboRecordWindow" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
@@ -2493,7 +2489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         IgxComboGroupingPipe,
                         IgxComboDataWindowPipe,
                         IgxComboRecordWindowPipe
-                    ], template: "<igx-input-group #inputGroup [type]=\"type === 'search' ? 'box' : 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,[igxPrefix]\"></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]=\"displayValue\" readonly\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxReadOnlyInput]=\"false\"\n        role=\"combobox\" aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    @if (displayValue && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClearItems($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n\n    <!-- The igx-combo class is needed here in order to scope the css variables -->\n    <div class=\"igx-combo\">\n        @if (displaySearchInput) {\n            <div class=\"igx-combo__search\">\n                <igx-input-group type=\"line\">\n                    <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]=\"getSearchPlaceholderText()\"\n                           aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n                    @if (showSearchCaseIcon) {\n                        <igx-suffix\n                            class=\"igx-input-group__case-icon igx-combo__case-icon\"\n                            [ngClass]=\"{ 'igx-combo__case-icon--active': filteringOptions.caseSensitive }\"\n                            (click)=\"toggleCaseSensitive()\"\n                        >\n                            <igx-icon\n                                    family=\"default\"\n                                    name=\"case_sensitive\"\n                                    [active]=\"filteringOptions.caseSensitive\">\n                            </igx-icon>\n                        </igx-suffix>\n                    }\n                </igx-input-group>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"headerTemplate\">\n        </ng-container>\n        @let itemWindow = data!\n        | comboRecordWindow:totalItemCount:virtualStartIndex\n        | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n        | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n        | comboDataWindow:totalItemCount:virtualStartIndex;\n        <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n             [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n             [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n             [attr.aria-activedescendant]=\"activeDescendant\">\n            <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                [dataWindow]=\"itemWindow\"\n                                [estimatedItemSize]=\"estimatedItemSize\"\n                                [initialViewportSize]=\"viewportSize\"\n                                (stateChange)=\"handleVirtualStateChange($event)\">\n                <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                    <igx-combo-item [itemHeight]=\"itemHeight\"\n                                    [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n                        @if (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                        }\n                        <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                        @if (!item?.isHeader) {\n                            <ng-container #listItem\n                                          *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                            </ng-container>\n                        }\n                    </igx-combo-item>\n                </ng-template>\n            </igx-virtual-scroll>\n        </div>\n\n        @if (filteredData?.length === 0 || isAddButtonVisible()) {\n            <div class=\"igx-combo__add\">\n                @if (filteredData?.length === 0) {\n                    <div class=\"igx-combo__empty\">\n                        <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                        </ng-container>\n                    </div>\n                }\n                @if (isAddButtonVisible()) {\n                    <igx-combo-add-item [itemHeight]=\"itemHeight\"\n                                        [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                                        [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                        <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                        </ng-container>\n                    </igx-combo-add-item>\n                }\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"footerTemplate\">\n        </ng-container>\n    </div>\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 type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"] }]
+                    ], template: "<igx-input-group #inputGroup [type]=\"type === 'search' ? 'box' : 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,[igxPrefix]\"></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]=\"displayValue\" readonly\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxReadOnlyInput]=\"false\"\n        role=\"combobox\" aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n        [attr.aria-label]=\"getAriaLabel()\"\n        (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    @if (displayValue && !disableClear) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button igx-input-group__clear-button\"\n            (click)=\"handleClearItems($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n    <igx-suffix class=\"igx-input-group__toggle-button igx-combo__toggle-button\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n</igx-input-group>\n<!-- Outside the drop-down: its content is detached while closed, and a @let there fails to serialize (NG0502). -->\n@let itemWindow = data!\n    | comboRecordWindow:totalItemCount:virtualStartIndex\n    | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n    | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator\n    | comboDataWindow:totalItemCount:virtualStartIndex;\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n\n    <!-- The igx-combo class is needed here in order to scope the css variables -->\n    <div class=\"igx-combo\">\n        @if (displaySearchInput) {\n            <div class=\"igx-combo__search\">\n                <igx-input-group type=\"line\">\n                    <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]=\"getSearchPlaceholderText()\"\n                           aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n                    @if (showSearchCaseIcon) {\n                        <igx-suffix\n                            class=\"igx-input-group__case-icon igx-combo__case-icon\"\n                            [ngClass]=\"{ 'igx-combo__case-icon--active': filteringOptions.caseSensitive }\"\n                            (click)=\"toggleCaseSensitive()\"\n                        >\n                            <igx-icon\n                                    family=\"default\"\n                                    name=\"case_sensitive\"\n                                    [active]=\"filteringOptions.caseSensitive\">\n                            </igx-icon>\n                        </igx-suffix>\n                    }\n                </igx-input-group>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"headerTemplate\">\n        </ng-container>\n        <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n             [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n             [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n             [attr.aria-activedescendant]=\"activeDescendant\">\n            <igx-virtual-scroll #virtualScroll role=\"presentation\"\n                                [dataWindow]=\"itemWindow\"\n                                [estimatedItemSize]=\"estimatedItemSize\"\n                                [initialViewportSize]=\"viewportSize\"\n                                (stateChange)=\"handleVirtualStateChange($event)\">\n                <ng-template igxVirtualItem let-item let-rowIndex=\"index\">\n                    <igx-combo-item [itemHeight]=\"itemHeight\"\n                                    [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n                        @if (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                        }\n                        <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n                        @if (!item?.isHeader) {\n                            <ng-container #listItem\n                                          *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                            </ng-container>\n                        }\n                    </igx-combo-item>\n                </ng-template>\n            </igx-virtual-scroll>\n        </div>\n\n        @if (filteredData?.length === 0 || isAddButtonVisible()) {\n            <div class=\"igx-combo__add\">\n                @if (filteredData?.length === 0) {\n                    <div class=\"igx-combo__empty\">\n                        <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                        </ng-container>\n                    </div>\n                }\n                @if (isAddButtonVisible()) {\n                    <igx-combo-add-item [itemHeight]=\"itemHeight\"\n                                        [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                                        [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"itemWindow.totalCount\">\n                        <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                        </ng-container>\n                    </igx-combo-add-item>\n                }\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"footerTemplate\">\n        </ng-container>\n    </div>\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 type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", styles: ["@layer ig.base{.igx-drop-down{--item-count: 6;--_search-input-inline-padding: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-drop-down .igx-combo{display:contents}.igx-combo{position:relative;display:block}.igx-combo__checkbox{margin-inline-end:.5rem}.igx-combo__search{--ig-input-group-border-border-radius: 0;padding-inline:var(--_search-input-inline-padding);padding-block:var(--_search-input-block-padding);z-index:26;border-bottom:.0625rem dashed var(--search-separator-border-color)}.igx-combo__search igx-input-group{--ig-size: 1}.igx-combo__case-icon{cursor:pointer;color:var(--ig-gray-600);background:#0000}.igx-combo__case-icon .igx-icon--inactive{--ig-icon-disabled-color: var(--ig-gray-600);opacity:1}.igx-combo__case-icon--active{color:var(--ig-primary-500)}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.igx-combo__content igx-virtual-scroll{max-height:inherit}.igx-combo__content:focus{outline:rgba(0,0,0,0)}.igx-combo__add{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem 1.5rem;gap:1rem;background:var(--empty-list-background)}.igx-combo__add-item{height:auto;background:var(--empty-list-background);justify-content:center;outline:none}.igx-combo__empty{display:flex;justify-content:center;align-items:center;width:100%;color:var(--empty-list-placeholder-color);padding:0 1.5rem;font-size:.8125rem}}@layer ig.material{@container style(--ig-theme: material){.igx-combo__checkbox{margin-inline-end:1rem}.igx-combo__checkbox div{padding:0}.igx-combo__search igx-input-group{--size: 2.375rem}.igx-combo__search .igx-input-group__bundle{padding-block-start:0;height:auto}.igx-combo__search .igx-input-group__bundle-main{padding-inline-start:0!important}.igx-combo__search .igx-input-group__bundle-start,.igx-combo__search .igx-input-group__bundle-end{min-width:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-combo__search{--ig-input-group-border-border-radius: 0}.igx-combo__search igx-input-group{--size: 1.75rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-start,.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-end{border-block-end-color:var(--focused-border-color);border-block-end-width:.125rem}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle-main{border-block-end-width:.125rem}.igx-combo__search igx-input-group:not(.igx-input-group--prefixed) .igx-input-group__bundle-main,.igx-combo__search igx-input-group:not(.igx-input-group--suffixed) .igx-input-group__bundle-main{border-inline-width:0;border-block-start-width:0}.igx-combo__search igx-input-group.igx-input-group--suffixed .igx-input-group__bundle-end{border-inline-end-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline:0}.igx-combo__search .igx-input-group--focused:not(.igx-input-group--file) .igx-input-group__bundle-main{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search .igx-input-group__bundle{border-inline-width:0;border-block-start-width:0}.igx-combo__search .igx-input-group__input{padding-inline-start:0}.igx-combo__search .igx-input-group--focused .igx-input-group__bundle:after{border-inline-width:0;border-block-start-width:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-combo{--_search-input-inline-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));--_search-input-block-padding: max(var(--is-large, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-combo__search igx-input-group{--ig-size: 2}.igx-combo__content{max-height:calc(var(--size)*var(--item-count) + 1rem)}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autoFocusSearch: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]