igniteui-angular 22.1.4 → 22.2.0-rc.0

package/fesm2022/igniteui-angular-combo.mjs

@@ -5,15 +5,16 @@ 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';
 import * as i1 from '@angular/forms';
 import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { IgxForOfDirective, IgxToggleDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { rem, IgxSelectionAPIService, getCurrentResourceStrings, ComboResourceStringsEN, SortingDirection, onResourceChangeHandle, AutoPositionStrategy, AbsoluteScrollStrategy, cloneArray } from 'igniteui-angular/core';
+import { IgxVirtualScrollComponent, IgxVirtualItemDirective } from 'igniteui-angular/virtual-scroll';
+import { IgxToggleDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { rem, IgxSelectionAPIService, getCurrentResourceStrings, ComboResourceStringsEN, SortingDirection, onResourceChangeHandle, AutoPositionStrategy, AbsoluteScrollStrategy, NgControlAdapter, cloneArray } from 'igniteui-angular/core';
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 import { IgxDropDownItemComponent, Navigate, IgxDropDownComponent, DropDownActionKey, IGX_DROPDOWN_BASE, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
 import { caseSensitive } from '@igniteui/material-icons-extended';
 import { Subject, noop } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxIconService, IgxIconComponent } from 'igniteui-angular/icon';
-import { isEqual } from 'lodash-es';
+import { isObject, isEqual } from 'lodash-es';
 
 /**
  * @hidden
@@ -61,10 +62,10 @@ class IgxComboAPIService {
     is_item_selected(itemID) {
         return this.combo.isItemSelected(itemID);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboAPIService, decorators: [{
             type: Injectable
         }] });
 
@@ -163,10 +164,10 @@ class IgxComboItemComponent extends IgxDropDownItemComponent {
     disableCheck(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxComboItemComponent, isStandalone: true, selector: "igx-combo-item", inputs: { itemHeight: "itemHeight", ariaLabel: "ariaLabel", singleMode: ["singleMode", "singleMode", booleanAttribute] }, host: { properties: { "style.height.rem": "this._itemHeightToRem", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, ngImport: i0, template: "@if (!isHeader && !singleMode) {\n    <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->\n    <igx-checkbox [checked]=\"selected\" [readonly]=\"true\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n}\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n", dependencies: [{ kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxComboItemComponent, isStandalone: true, selector: "igx-combo-item", inputs: { itemHeight: "itemHeight", ariaLabel: "ariaLabel", singleMode: ["singleMode", "singleMode", booleanAttribute] }, host: { properties: { "style.height.rem": "this._itemHeightToRem", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, ngImport: i0, template: "@if (!isHeader && !singleMode) {\n    <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->\n    <igx-checkbox [checked]=\"selected\" [readonly]=\"true\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n}\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n", dependencies: [{ kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo-item', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCheckboxComponent], template: "@if (!isHeader && !singleMode) {\n    <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->\n    <igx-checkbox [checked]=\"selected\" [readonly]=\"true\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n}\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n" }]
         }], propDecorators: { itemHeight: [{
@@ -201,10 +202,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * </igx-combo>
  */
 class IgxComboHeaderDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboHeaderDirective, isStandalone: true, selector: "[igxComboHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboHeaderDirective, isStandalone: true, selector: "[igxComboHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboHeader]',
@@ -228,10 +229,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * </igx-combo>
  */
 class IgxComboFooterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboFooterDirective, isStandalone: true, selector: "[igxComboFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboFooterDirective, isStandalone: true, selector: "[igxComboFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboFooter]',
@@ -257,10 +258,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
   * </igx-combo>
  */
 class IgxComboItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboItemDirective, isStandalone: true, selector: "[igxComboItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboItemDirective, isStandalone: true, selector: "[igxComboItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboItem]',
@@ -285,10 +286,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  *  </igx-combo>
  */
 class IgxComboEmptyDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboEmptyDirective, isStandalone: true, selector: "[igxComboEmpty]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboEmptyDirective, isStandalone: true, selector: "[igxComboEmpty]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboEmptyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboEmptyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboEmpty]',
@@ -311,10 +312,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  *  </igx-combo>
  */
 class IgxComboHeaderItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboHeaderItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboHeaderItemDirective, isStandalone: true, selector: "[igxComboHeaderItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboHeaderItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboHeaderItemDirective, isStandalone: true, selector: "[igxComboHeaderItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboHeaderItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboHeaderItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboHeaderItem]',
@@ -341,10 +342,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  *  </igx-combo>
  */
 class IgxComboAddItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboAddItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboAddItemDirective, isStandalone: true, selector: "[igxComboAddItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboAddItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboAddItemDirective, isStandalone: true, selector: "[igxComboAddItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboAddItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboAddItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboAddItem]',
@@ -367,10 +368,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  *  </igx-combo>
  */
 class IgxComboToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboToggleIconDirective, isStandalone: true, selector: "[igxComboToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboToggleIconDirective, isStandalone: true, selector: "[igxComboToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboToggleIcon]',
@@ -393,10 +394,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  *  </igx-combo>
  */
 class IgxComboClearIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboClearIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboClearIconDirective, isStandalone: true, selector: "[igxComboClearIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboClearIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboClearIconDirective, isStandalone: true, selector: "[igxComboClearIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboClearIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboClearIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboClearIcon]',
@@ -406,6 +407,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
 
 const IGX_COMBO_COMPONENT = /*@__PURE__*/ new InjectionToken('IgxComboComponentToken');
 let NEXT_ID = 0;
+/** Row height assumed before a real row has been measured, in pixels. */
+const DEFAULT_ITEM_SIZE = 40;
 class IgxComboBaseDirective {
     /**
     * Enables/disables filtering in the list. The default is `false`.
@@ -509,6 +512,7 @@ class IgxComboBaseDirective {
         // 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) : [];
+        this._loadedStartIndex = this._requestedStartIndex;
     }
     set displayKey(val) {
         this._displayKey = val;
@@ -673,7 +677,7 @@ class IgxComboBaseDirective {
      * ```
      */
     get virtualizationState() {
-        return this.virtDir.state;
+        return this._virtualizationState;
     }
     /**
      * Sets the current state of the virtualized data.
@@ -684,7 +688,9 @@ class IgxComboBaseDirective {
      * ```
      */
     set virtualizationState(state) {
-        this.virtDir.state = state;
+        this._virtualizationState = { ...state };
+        this._requestedStartIndex = state.startIndex ?? 0;
+        void this.virtualScrollContainer?.scrollToIndex(state.startIndex ?? 0);
     }
     /**
      * Gets drop down state.
@@ -705,18 +711,29 @@ class IgxComboBaseDirective {
      * ```
      */
     get totalItemCount() {
-        return this.virtDir.totalItemCount;
+        return this._totalItemCount;
     }
     /**
      * Sets total count of the virtual data items, when using remote service.
      *
      * ```typescript
      * // set
-     * this.combo.totalItemCount(remoteService.count);
+     * this.combo.totalItemCount = remoteService.count;
      * ```
      */
     set totalItemCount(count) {
-        this.virtDir.totalItemCount = count;
+        if (this._totalItemCount === count) {
+            return;
+        }
+        this._totalItemCount = count;
+        this.cdr.markForCheck();
+        // Move an out-of-range viewport without relocating its loaded records.
+        // The record-window pipe excludes records past the new total.
+        const lastStart = Math.max(0, count - (this._virtualizationState.chunkSize ?? 0));
+        if ((this._virtualizationState.startIndex ?? 0) > lastStart) {
+            this._virtualizationState = { ...this._virtualizationState, startIndex: lastStart };
+            void this.virtualScrollContainer?.scrollToIndex(lastStart);
+        }
     }
     /** @hidden @internal */
     get template() {
@@ -1069,8 +1086,18 @@ class IgxComboBaseDirective {
         this.defaultFallbackGroup = 'Other';
         /** @hidden @internal */
         this.activeDescendant = '';
-        this.containerSize = undefined;
         this.itemSize = undefined;
+        /** The wanted window, in the shape `virtualizationState` and `dataPreLoad` use. */
+        this._virtualizationState = { startIndex: 0, chunkSize: 0 };
+        /** Where the records currently bound sit, which a pending request has not moved yet. */
+        this._loadedStartIndex = 0;
+        /** The index the last asked-for range began at, which arriving records belong to. */
+        this._requestedStartIndex = 0;
+        this._recordsByKey = new Map();
+        this._recordsByKeySource = null;
+        this._recordsByKeyLength = -1;
+        this._recordsByKeyValueKey = null;
+        this._totalItemCount = 0;
         this._data = [];
         this._value = [];
         this._displayValue = '';
@@ -1083,6 +1110,7 @@ class IgxComboBaseDirective {
         this._defaultResourceStrings = getCurrentResourceStrings(ComboResourceStringsEN);
         this._valid = IgxInputState.INITIAL;
         this.ngControl = null;
+        this.control = null;
         this.destroy$ = new Subject();
         this._onTouchedCallback = noop;
         this._onChangeCallback = noop;
@@ -1097,12 +1125,12 @@ class IgxComboBaseDirective {
         this._defaultFilteringOptions = { caseSensitive: false };
         this.itemsInContainer = 10;
         this.onStatusChanged = () => {
-            if (this.ngControl && this.isTouchedOrDirty && !this.ngControl.disabled) {
-                if (this.hasValidators && (!this.collapsed || this.inputGroup.isFocused)) {
-                    this.valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
+            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.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
+                    this.valid = this.control.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
                 }
             }
             else {
@@ -1154,6 +1182,7 @@ class IgxComboBaseDirective {
     /** @hidden @internal */
     ngOnInit() {
         this.ngControl = this._injector.get(NgControl, null);
+        this.control = NgControlAdapter.from(this.ngControl, this._injector);
         this.selectionService.set(this.id, new Set());
         this._iconService?.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
         this.computedStyles = this.document.defaultView.getComputedStyle(this.elementRef.nativeElement);
@@ -1161,26 +1190,53 @@ class IgxComboBaseDirective {
     /** @hidden @internal */
     ngAfterViewInit() {
         this.filteredData = [...this.data];
-        if (this.ngControl) {
-            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
+        if (this.control) {
+            this.control.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
             this.manageRequiredAsterisk();
             this.cdr.detectChanges();
         }
-        this.virtDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
-            const eventArgs = Object.assign({}, e, { owner: this });
-            this.dataPreLoad.emit(eventArgs);
-        });
         this.dropdown?.opening.subscribe((_args) => {
-            // calculate the container size and item size based on the sizes from the DOM
-            const dropdownContainerHeight = this.dropdownContainer.nativeElement.getBoundingClientRect().height;
-            if (dropdownContainerHeight) {
-                this.containerSize = parseFloat(dropdownContainerHeight);
-            }
+            // Take the row height from a real item, for the combos that do not set itemHeight.
             if (this.dropdown.children?.first) {
                 this.itemSize = this.dropdown.children.first.element.nativeElement.getBoundingClientRect().height;
             }
         });
     }
+    /** @hidden @internal The height the list gets, for the pass that opens the drop-down. */
+    get viewportSize() {
+        return this.itemsMaxHeight || this.estimatedItemSize * this.itemsInContainer;
+    }
+    /** @hidden @internal The size rows are assumed to be until they are measured. */
+    get estimatedItemSize() {
+        return this.itemHeight || this.itemSize || DEFAULT_ITEM_SIZE;
+    }
+    /** @hidden @internal Where the loaded items sit in the collection they came from. */
+    get virtualStartIndex() {
+        return this._loadedStartIndex;
+    }
+    /**
+     * @hidden @internal
+     * Reports the wanted window as `virtualizationState` and asks for the data behind it.
+     */
+    handleVirtualStateChange(state) {
+        const chunkSize = state.endIndex - state.startIndex + 1;
+        if (this._virtualizationState.startIndex === state.startIndex &&
+            this._virtualizationState.chunkSize === chunkSize) {
+            return;
+        }
+        const initial = !this._virtualizationState.chunkSize;
+        const startIndex = state.startIndex;
+        this._virtualizationState = { startIndex, chunkSize };
+        this._requestedStartIndex = startIndex;
+        // The first window a list reports can already be covered by the page it was given,
+        // and then there is nothing to fetch. Later windows are always reported, so a reply
+        // to a range the list has left is superseded rather than left in flight.
+        if (initial && startIndex >= this._loadedStartIndex &&
+            state.endIndex <= this._loadedStartIndex + this._data.length - 1) {
+            return;
+        }
+        this.dataPreLoad.emit({ ...this._virtualizationState, owner: this });
+    }
     /** @hidden @internal */
     ngOnDestroy() {
         this.destroy$.next();
@@ -1296,7 +1352,7 @@ class IgxComboBaseDirective {
         this.customValueFlag = false;
         this.searchInput?.nativeElement.focus();
         this.dropdown.focusedItem = null;
-        this.virtDir.scrollTo(0);
+        void this.virtualScrollContainer?.scrollToIndex(0);
     }
     /** @hidden @internal */
     isAddButtonVisible() {
@@ -1311,13 +1367,35 @@ class IgxComboBaseDirective {
                 owner: this,
                 cancel: false
             };
+            const restore = this.resetVirtualizationState();
             this.searchInputUpdate.emit(args);
             if (args.cancel) {
                 this.filterValue = null;
+                restore();
+            }
+            else {
+                void this.virtualScrollContainer?.scrollToIndex(0);
             }
         }
         this.checkMatch();
     }
+    /**
+     * @hidden @internal
+     * Reports the start of the list without moving it. Returns a callback that puts it back.
+     */
+    resetVirtualizationState() {
+        const previous = this._virtualizationState;
+        const previousRequested = this._requestedStartIndex;
+        if (previous.startIndex === 0 && previousRequested === 0) {
+            return () => { };
+        }
+        this._virtualizationState = { startIndex: 0, chunkSize: previous.chunkSize };
+        this._requestedStartIndex = 0;
+        return () => {
+            this._virtualizationState = previous;
+            this._requestedStartIndex = previousRequested;
+        };
+    }
     /**
      * Event handlers
      *
@@ -1409,21 +1487,49 @@ class IgxComboBaseDirective {
             this.valid = IgxInputState.INITIAL;
         }
     }
-    get isTouchedOrDirty() {
-        return (this.ngControl.control.touched || this.ngControl.control.dirty);
-    }
-    get hasValidators() {
-        return (!!this.ngControl.control.validator || !!this.ngControl.control.asyncValidator);
-    }
     /** if there is a valueKey - map the keys to data items, else - just return the keys */
     convertKeysToItems(keys) {
-        if (this.valueKey === null || this.valueKey === undefined) {
+        if (!keys.length || this.valueKey === null || this.valueKey === undefined) {
             return keys;
         }
-        return keys.map(key => {
-            const item = this.data.find(entry => isEqual(entry[this.valueKey], key));
-            return item !== undefined ? item : { [this.valueKey]: key };
-        });
+        if (keys.some(isObject)) {
+            return keys.map(key => this.data.find(entry => isEqual(entry[this.valueKey], key)) ?? { [this.valueKey]: key });
+        }
+        const data = this.data;
+        if (this._recordsByKeySource !== data || this._recordsByKeyLength !== data.length ||
+            this._recordsByKeyValueKey !== this.valueKey) {
+            this._recordsByKey.clear();
+            this._recordsByKeySource = data;
+            this._recordsByKeyLength = data.length;
+            this._recordsByKeyValueKey = this.valueKey;
+        }
+        // A cached hit must still occupy its original index and carry the requested key.
+        // Missing or replaced records are resolved together, without caching misses.
+        const remaining = new Set();
+        for (const key of keys) {
+            const cached = this._recordsByKey.get(key);
+            if (!cached || data[cached.index] !== cached.item || !isEqual(cached.item[this.valueKey], key)) {
+                this._recordsByKey.delete(key);
+                remaining.add(key);
+            }
+        }
+        for (let index = 0; remaining.size && index < data.length; index++) {
+            const item = data[index];
+            const itemKey = item[this.valueKey];
+            if (isObject(itemKey)) {
+                // A boxed key can be deeply equal to a requested primitive key.
+                for (const key of remaining) {
+                    if (isEqual(itemKey, key)) {
+                        this._recordsByKey.set(key, { item, index });
+                        remaining.delete(key);
+                    }
+                }
+            }
+            else if (remaining.delete(itemKey)) {
+                this._recordsByKey.set(itemKey, { item, index });
+            }
+        }
+        return keys.map(key => this._recordsByKey.get(key)?.item ?? { [this.valueKey]: key });
     }
     checkMatch() {
         const itemMatch = this.filteredData.some(this.findMatch);
@@ -1470,17 +1576,12 @@ class IgxComboBaseDirective {
         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;
+        return this.control?.required ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxComboBaseDirective, isStandalone: true, inputs: { showSearchCaseIcon: ["showSearchCaseIcon", "showSearchCaseIcon", booleanAttribute], disableFiltering: ["disableFiltering", "disableFiltering", booleanAttribute], overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: ["allowCustomValues", "allowCustomValues", booleanAttribute], itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], disableClear: ["disableClear", "disableClear", booleanAttribute], type: "type", resourceStrings: "resourceStrings", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }, { propertyName: "contentHints", predicate: IgxHintDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }, { propertyName: "internalSuffixes", predicate: IgxSuffixDirective, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxComboBaseDirective, isStandalone: true, inputs: { showSearchCaseIcon: ["showSearchCaseIcon", "showSearchCaseIcon", booleanAttribute], disableFiltering: ["disableFiltering", "disableFiltering", booleanAttribute], overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: ["allowCustomValues", "allowCustomValues", booleanAttribute], itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], disableClear: ["disableClear", "disableClear", booleanAttribute], type: "type", resourceStrings: "resourceStrings", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }, { propertyName: "contentHints", predicate: IgxHintDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: ["virtualScroll"], descendants: true, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }, { propertyName: "internalSuffixes", predicate: IgxSuffixDirective, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { showSearchCaseIcon: [{
                 type: Input,
@@ -1590,10 +1691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 args: ['searchInput']
             }], virtualScrollContainer: [{
                 type: ViewChild,
-                args: [IgxForOfDirective, { static: true }]
-            }], virtDir: [{
-                type: ViewChild,
-                args: [IgxForOfDirective, { read: IgxForOfDirective, static: true }]
+                args: ['virtualScroll', { static: true }]
             }], dropdownContainer: [{
                 type: ViewChild,
                 args: ['dropdownItemContainer', { static: true }]
@@ -1635,10 +1733,10 @@ class IgxComboAddItemComponent extends IgxComboItemComponent {
         this.comboAPI.disableTransitions = false;
         this.comboAPI.add_custom_item();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", host: { properties: { "class.igx-drop-down__item": "this.isDropDownItem" } }, providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", host: { properties: { "class.igx-drop-down__item": "this.isDropDownItem" } }, providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-combo-add-item',
@@ -1670,13 +1768,7 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
     }
     /** @hidden @internal */
     get scrollContainer() {
-        // TODO: Update, use public API if possible:
-        return this.virtDir.dc.location.nativeElement;
-    }
-    get isScrolledToLast() {
-        const scrollTop = this.virtDir.scrollPosition;
-        const scrollHeight = this.virtDir.getScroll().scrollHeight;
-        return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
+        return this.virtualization.scrollElement;
     }
     get lastVisibleIndex() {
         return this.combo.totalItemCount ?
@@ -1764,14 +1856,18 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
      * @hidden
      */
     navigateFirst() {
-        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e?.isHeader));
+        // The first selectable entry can only be looked for in what is loaded. A page that
+        // starts further in does not hold it, so the collection's own start is the target.
+        this.navigateItem(this.virtualization?.startIndex === 0
+            ? this.virtualization.findIndex(e => !e?.isHeader)
+            : 0);
         this.combo.setActiveDescendant();
     }
     /**
      * @hidden
      */
     navigatePrev() {
-        if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+        if (this._focusedItem && this._focusedItem.index === 0) {
             this.combo.focusSearchInput(false);
             this.focusedItem = null;
         }
@@ -1784,7 +1880,7 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
      * @hidden
      */
     navigateNext() {
-        const lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
+        const lastIndex = (this.virtualization?.length ?? 0) - 1;
         if (this._focusedItem && this._focusedItem.index === lastIndex) {
             this.focusAddItemButton();
         }
@@ -1809,7 +1905,7 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
      * @hidden @internal
      */
     updateScrollPosition() {
-        this.virtDir.getScroll().scrollTop = this._scrollPosition;
+        this.virtualization.scrollPosition = this._scrollPosition;
     }
     /**
      * @hidden @internal
@@ -1830,13 +1926,14 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
         }
     }
     ngAfterViewInit() {
-        this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
+        super.ngAfterViewInit();
+        this.scrollContainer.addEventListener('scroll', this.scrollHandler);
     }
     /**
      * @hidden @internal
      */
     ngOnDestroy() {
-        this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
+        this.virtualization?.scrollElement.removeEventListener('scroll', this.scrollHandler);
         super.ngOnDestroy();
     }
     scrollToHiddenItem(_newItem) { }
@@ -1866,10 +1963,10 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
             this.focusedItem = this.items[this.items.length - 1];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxComboDropDownComponent, isStandalone: true, selector: "igx-combo-drop-down", inputs: { singleMode: ["singleMode", "singleMode", booleanAttribute] }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down\" [style.width]=\"width\"\n    igxToggle\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n    (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" [attr.role]=\"role\" [attr.aria-labelledby]=\"labelledBy\"\n        [style.height]=\"height\"\n        [style.maxHeight]=\"maxHeight\">\n        @if (!collapsed) {\n            <ng-content></ng-content>\n        }\n    </div>\n</div>\n", styles: ["@layer ig.base{.igx-drop-down__group label,.igx-drop-down__header,.igx-drop-down__item{display:flex;justify-content:flex-start;align-items:center;width:100%;white-space:nowrap;position:relative;height:var(--size);color:var(--item-text-color)}.igx-drop-down__group label igx-divider,.igx-drop-down__header igx-divider,.igx-drop-down__item igx-divider{position:absolute;width:100%;inset-inline-start:0;bottom:0}.igx-drop-down__group label igx-icon,.igx-drop-down__header igx-icon,.igx-drop-down__item igx-icon{--component-size: 1;justify-content:center}.igx-drop-down__group label,.igx-drop-down__header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--header-text-color);pointer-events:none;padding-inline: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(.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))))}.igx-drop-down{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);width:-moz-max-content;width:max-content;overflow:hidden;border-radius:var(--border-radius);background:var(--background-color);box-shadow:var(--elevation);min-width:8rem;border:var(--border-width) solid var(--border-color)}.igx-drop-down__list-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.igx-drop-down__list-scroll .igx-display-container--scrollbar{padding-inline-end:var(--vhelper-scrollbar-size)}.igx-drop-down__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--dropdown-size);cursor:pointer;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:var(--item-border-radius)}.igx-drop-down__item igx-icon{color:var(--item-icon-color)}.igx-drop-down__item:hover{background:var(--hover-item-background);color:var(--hover-item-text-color)}.igx-drop-down__item:hover igx-icon{color:var(--hover-item-icon-color)}.igx-drop-down__item:focus{outline:0;outline-color:#0000;background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__inner{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;align-items:center;gap:.5rem;margin-inline-end:auto}.igx-drop-down__inner>div{display:flex;align-items:center;gap:.5rem}.igx-drop-down__content{display:flex;width:100%;align-items:center;gap:.5rem}.igx-drop-down__item--focused{background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__item--selected{background:var(--selected-item-background);color:var(--selected-item-text-color)}.igx-drop-down__item--selected igx-icon{color:var(--selected-item-icon-color)}.igx-drop-down__item--selected:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused{background:var(--selected-focus-item-background);color:var(--selected-focus-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--disabled{background:var(--disabled-item-background);color:var(--disabled-item-text-color);cursor:default;pointer-events:none}.igx-drop-down__item--disabled igx-icon{color:var(--disabled-item-text-color)}.igx-drop-down__group{pointer-events:auto}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-drop-down .igx-drop-down__header,.igx-drop-down .igx-drop-down__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));padding-inline: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))))}.igx-drop-down .igx-drop-down__header igx-icon,.igx-drop-down .igx-drop-down__item igx-icon{--component-size: inherit}.igx-drop-down{padding:.1875rem}.igx-drop-down__item{margin-block:.125rem}.igx-drop-down__item:first-of-type,.igx-drop-down__item:last-of-type{margin-block:initial}.igx-drop-down__item--focused{outline:.125rem solid var(--focused-item-border-color);outline-offset:-.125rem}.igx-drop-down__header{margin-block-end:.125rem;padding-block: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(.375rem,-1 * .375rem)*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))))}.igx-drop-down__group label{padding-inline: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))));padding-block: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(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));margin-block-end:.125rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-drop-down__item--focused{outline:.0625rem solid var(--border-color);outline-offset:-.0625rem}.igx-drop-down__header{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-drop-down__group{pointer-events:auto}.igx-drop-down__group label{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}\n"], dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxComboDropDownComponent, isStandalone: true, selector: "igx-combo-drop-down", inputs: { singleMode: ["singleMode", "singleMode", booleanAttribute] }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down\" [style.width]=\"width\"\n    igxToggle\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n    (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" [attr.role]=\"role\" [attr.aria-labelledby]=\"labelledBy\"\n        [style.height]=\"height\"\n        [style.maxHeight]=\"maxHeight\">\n        @if (!collapsed) {\n            <ng-content></ng-content>\n        }\n    </div>\n</div>\n", styles: ["@layer ig.base{.igx-drop-down__group label,.igx-drop-down__header,.igx-drop-down__item{display:flex;justify-content:flex-start;align-items:center;width:100%;white-space:nowrap;position:relative;height:var(--size);color:var(--item-text-color)}.igx-drop-down__group label igx-divider,.igx-drop-down__header igx-divider,.igx-drop-down__item igx-divider{position:absolute;width:100%;inset-inline-start:0;bottom:0}.igx-drop-down__group label igx-icon,.igx-drop-down__header igx-icon,.igx-drop-down__item igx-icon{--component-size: 1;justify-content:center}.igx-drop-down__group label,.igx-drop-down__header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--header-text-color);pointer-events:none;padding-inline: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(.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))))}.igx-drop-down{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);width:-moz-max-content;width:max-content;overflow:hidden;border-radius:var(--border-radius);background:var(--background-color);box-shadow:var(--elevation);min-width:8rem;border:var(--border-width) solid var(--border-color)}.igx-drop-down__list-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.igx-drop-down__list-scroll .igx-display-container--scrollbar{padding-inline-end:var(--vhelper-scrollbar-size)}.igx-drop-down__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--dropdown-size);cursor:pointer;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:var(--item-border-radius)}.igx-drop-down__item igx-icon{color:var(--item-icon-color)}.igx-drop-down__item:hover{background:var(--hover-item-background);color:var(--hover-item-text-color)}.igx-drop-down__item:hover igx-icon{color:var(--hover-item-icon-color)}.igx-drop-down__item:focus{outline:0;outline-color:#0000;background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__inner{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;align-items:center;gap:.5rem;margin-inline-end:auto}.igx-drop-down__inner>div{display:flex;align-items:center;gap:.5rem}.igx-drop-down__content{display:flex;width:100%;align-items:center;gap:.5rem}.igx-drop-down__item--focused{background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__item--selected{background:var(--selected-item-background);color:var(--selected-item-text-color)}.igx-drop-down__item--selected igx-icon{color:var(--selected-item-icon-color)}.igx-drop-down__item--selected:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused{background:var(--selected-focus-item-background);color:var(--selected-focus-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--disabled{background:var(--disabled-item-background);color:var(--disabled-item-text-color);cursor:default;pointer-events:none}.igx-drop-down__item--disabled igx-icon{color:var(--disabled-item-text-color)}.igx-drop-down__group{pointer-events:auto}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-drop-down .igx-drop-down__header,.igx-drop-down .igx-drop-down__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));padding-inline: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))))}.igx-drop-down .igx-drop-down__header igx-icon,.igx-drop-down .igx-drop-down__item igx-icon{--component-size: inherit}.igx-drop-down{padding:.1875rem}.igx-drop-down__item{margin-block:.125rem}.igx-drop-down__item:first-of-type,.igx-drop-down__item:last-of-type{margin-block:initial}.igx-drop-down__item--focused{outline:.125rem solid var(--focused-item-border-color);outline-offset:-.125rem}.igx-drop-down__header{margin-block-end:.125rem;padding-block: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(.375rem,-1 * .375rem)*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))))}.igx-drop-down__group label{padding-inline: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))));padding-block: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(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));margin-block-end:.125rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-drop-down__item--focused{outline:.0625rem solid var(--border-color);outline-offset:-.0625rem}.igx-drop-down__header{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-drop-down__group{pointer-events:auto}.igx-drop-down__group label{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}\n"], dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo-drop-down', encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxToggleDirective], template: "<div class=\"igx-drop-down\" [style.width]=\"width\"\n    igxToggle\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n    (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" [attr.role]=\"role\" [attr.aria-labelledby]=\"labelledBy\"\n        [style.height]=\"height\"\n        [style.maxHeight]=\"maxHeight\">\n        @if (!collapsed) {\n            <ng-content></ng-content>\n        }\n    </div>\n</div>\n", styles: ["@layer ig.base{.igx-drop-down__group label,.igx-drop-down__header,.igx-drop-down__item{display:flex;justify-content:flex-start;align-items:center;width:100%;white-space:nowrap;position:relative;height:var(--size);color:var(--item-text-color)}.igx-drop-down__group label igx-divider,.igx-drop-down__header igx-divider,.igx-drop-down__item igx-divider{position:absolute;width:100%;inset-inline-start:0;bottom:0}.igx-drop-down__group label igx-icon,.igx-drop-down__header igx-icon,.igx-drop-down__item igx-icon{--component-size: 1;justify-content:center}.igx-drop-down__group label,.igx-drop-down__header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);color:var(--header-text-color);pointer-events:none;padding-inline: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(.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))))}.igx-drop-down{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);width:-moz-max-content;width:max-content;overflow:hidden;border-radius:var(--border-radius);background:var(--background-color);box-shadow:var(--elevation);min-width:8rem;border:var(--border-width) solid var(--border-color)}.igx-drop-down__list-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}.igx-drop-down__list-scroll .igx-display-container--scrollbar{padding-inline-end:var(--vhelper-scrollbar-size)}.igx-drop-down__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--dropdown-size);cursor:pointer;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.25rem,-1 * 1.25rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:var(--item-border-radius)}.igx-drop-down__item igx-icon{color:var(--item-icon-color)}.igx-drop-down__item:hover{background:var(--hover-item-background);color:var(--hover-item-text-color)}.igx-drop-down__item:hover igx-icon{color:var(--hover-item-icon-color)}.igx-drop-down__item:focus{outline:0;outline-color:#0000;background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__inner{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;align-items:center;gap:.5rem;margin-inline-end:auto}.igx-drop-down__inner>div{display:flex;align-items:center;gap:.5rem}.igx-drop-down__content{display:flex;width:100%;align-items:center;gap:.5rem}.igx-drop-down__item--focused{background:var(--focused-item-background);color:var(--focused-item-text-color)}.igx-drop-down__item--selected{background:var(--selected-item-background);color:var(--selected-item-text-color)}.igx-drop-down__item--selected igx-icon{color:var(--selected-item-icon-color)}.igx-drop-down__item--selected:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused{background:var(--selected-focus-item-background);color:var(--selected-focus-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover{background:var(--selected-hover-item-background);color:var(--selected-hover-item-text-color)}.igx-drop-down__item--selected.igx-drop-down__item--focused:hover igx-icon{color:var(--selected-hover-item-icon-color)}.igx-drop-down__item--disabled{background:var(--disabled-item-background);color:var(--disabled-item-text-color);cursor:default;pointer-events:none}.igx-drop-down__item--disabled igx-icon{color:var(--disabled-item-text-color)}.igx-drop-down__group{pointer-events:auto}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-drop-down .igx-drop-down__header,.igx-drop-down .igx-drop-down__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));padding-inline: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))))}.igx-drop-down .igx-drop-down__header igx-icon,.igx-drop-down .igx-drop-down__item igx-icon{--component-size: inherit}.igx-drop-down{padding:.1875rem}.igx-drop-down__item{margin-block:.125rem}.igx-drop-down__item:first-of-type,.igx-drop-down__item:last-of-type{margin-block:initial}.igx-drop-down__item--focused{outline:.125rem solid var(--focused-item-border-color);outline-offset:-.125rem}.igx-drop-down__header{margin-block-end:.125rem;padding-block: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(.375rem,-1 * .375rem)*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))))}.igx-drop-down__group label{padding-inline: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))));padding-block: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(.375rem,-1 * .375rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));margin-block-end:.125rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-drop-down__item--focused{outline:.0625rem solid var(--border-color);outline-offset:-.0625rem}.igx-drop-down__header{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-drop-down__group{pointer-events:auto}.igx-drop-down__group label{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}\n"] }]
         }], propDecorators: { singleMode: [{
@@ -1880,7 +1977,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 args: [IgxComboItemComponent, { descendants: true }]
             }] } });
 
-/** @hidden */
+/**
+ * @hidden @internal
+ * Keeps the loaded records inside the remote total without changing their indices.
+ * Runs before grouping, so headers do not count against the number of remote records.
+ */
+class IgxComboRecordWindowPipe {
+    transform(collection, totalItemCount, startIndex) {
+        const remaining = Math.max(0, totalItemCount - startIndex);
+        return totalItemCount > 0 && collection.length > remaining
+            ? collection.slice(0, remaining)
+            : collection;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboRecordWindowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxComboRecordWindowPipe, isStandalone: true, name: "comboRecordWindow" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboRecordWindowPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'comboRecordWindow'
+                }]
+        }] });
+/**
+ * @hidden @internal
+ * The items the drop-down has and where they sit in the collection they came from. Pure, so
+ * the window keeps its identity while its inputs do.
+ */
+class IgxComboDataWindowPipe {
+    transform(collection, totalItemCount, startIndex) {
+        if (!(totalItemCount > 0)) {
+            return { items: collection, startIndex: 0, totalCount: collection.length };
+        }
+        // An empty page has no position of its own, and anchoring one would stretch the
+        // collection to reach it.
+        return { items: collection, startIndex: collection.length ? startIndex : 0, totalCount: totalItemCount };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboDataWindowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxComboDataWindowPipe, isStandalone: true, name: "comboDataWindow" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboDataWindowPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'comboDataWindow',
+                    standalone: true
+                }]
+        }] });
 class IgxComboFilteringPipe {
     transform(collection, searchValue, displayKey, filteringOptions, filterFunction = defaultFilterFunction, disableFiltering = false) {
         if (!collection) {
@@ -1892,10 +2033,10 @@ class IgxComboFilteringPipe {
         filteringOptions.filteringKey = filteringOptions.filteringKey ?? displayKey;
         return filterFunction(collection, searchValue, filteringOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxComboFilteringPipe, isStandalone: true, name: "comboFiltering" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxComboFilteringPipe, isStandalone: true, name: "comboFiltering" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'comboFiltering',
@@ -1930,10 +2071,10 @@ class IgxComboGroupingPipe {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxComboGroupingPipe, isStandalone: true, name: "comboGrouping" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxComboGroupingPipe, isStandalone: true, name: "comboGrouping" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'comboGrouping',
@@ -2097,9 +2238,13 @@ class IgxComboComponent extends IgxComboBaseDirective {
     }
     /** @hidden @internal */
     ngDoCheck() {
-        if (this.data?.length && this.selection.length) {
-            this._displayValue = this._displayText || this.createDisplayText(this.selection, []);
-            this._value = this.valueKey ? this.selection.map(item => item[this.valueKey]) : this.selection;
+        if (!this.data?.length) {
+            return;
+        }
+        const selection = this.selection;
+        if (selection.length) {
+            this._displayValue = this._displayText || this.createDisplayText(selection, []);
+            this._value = this.valueKey ? selection.map(item => item[this.valueKey]) : selection;
         }
     }
     /**
@@ -2314,14 +2459,14 @@ class IgxComboComponent extends IgxComboBaseDirective {
             selection.join(', ');
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging", selectionChanged: "selectionChanged" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.Escape": "onEscape($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging", selectionChanged: "selectionChanged" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.Escape": "onEscape($event)" } }, providers: [
             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        <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-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data!\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize, scrollOrientation: 'vertical';\"\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        </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]=\"virtualScrollContainer.igxForOf!.length\">\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 .igx-vhelper--vertical{position:relative}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.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: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "chunkSizeChange", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { 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" }], 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<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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo', encapsulation: ViewEncapsulation.None, providers: [
                         IgxComboAPIService,
@@ -2337,15 +2482,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxIconComponent,
                         IgxComboDropDownComponent,
                         IgxDropDownItemNavigationDirective,
-                        IgxForOfDirective,
+                        IgxVirtualScrollComponent,
+                        IgxVirtualItemDirective,
                         IgxComboItemComponent,
                         IgxComboAddItemComponent,
                         IgxButtonDirective,
                         IgxRippleDirective,
                         IgxReadOnlyInputDirective,
                         IgxComboFilteringPipe,
-                        IgxComboGroupingPipe
-                    ], 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        <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-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data!\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize, scrollOrientation: 'vertical';\"\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        </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]=\"virtualScrollContainer.igxForOf!.length\">\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 .igx-vhelper--vertical{position:relative}.igx-combo__content{position:relative;overflow:hidden;max-height:calc(var(--size)*var(--item-count))}.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"] }]
+                        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"] }]
         }], ctorParameters: () => [], propDecorators: { autoFocusSearch: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2391,11 +2539,11 @@ const IGX_COMBO_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxComboModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxComboModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxComboModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2411,5 +2559,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { IGX_COMBO_COMPONENT, IGX_COMBO_DIRECTIVES, IgxComboAPIService, IgxComboAddItemComponent, IgxComboAddItemDirective, IgxComboBaseDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboDropDownComponent, IgxComboEmptyDirective, IgxComboFilteringPipe, IgxComboFooterDirective, IgxComboGroupingPipe, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemComponent, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, comboIgnoreDiacriticsFilter };
+export { IGX_COMBO_COMPONENT, IGX_COMBO_DIRECTIVES, IgxComboAPIService, IgxComboAddItemComponent, IgxComboAddItemDirective, IgxComboBaseDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboDataWindowPipe, IgxComboDropDownComponent, IgxComboEmptyDirective, IgxComboFilteringPipe, IgxComboFooterDirective, IgxComboGroupingPipe, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemComponent, IgxComboItemDirective, IgxComboModule, IgxComboRecordWindowPipe, IgxComboToggleIconDirective, comboIgnoreDiacriticsFilter };
 //# sourceMappingURL=igniteui-angular-combo.mjs.map