igniteui-angular 22.1.3 → 22.2.0-rc.0

package/fesm2022/igniteui-angular-drop-down.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, InjectionToken, inject, ElementRef, EventEmitter, HostListener, Output, Directive, ChangeDetectorRef, DOCUMENT, ViewChild, ContentChild, ContentChildren, forwardRef, ViewEncapsulation, NgModule } from '@angular/core';
+import { booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, InjectionToken, inject, ElementRef, EventEmitter, HostListener, Output, Directive, ChangeDetectorRef, DOCUMENT, Injector, afterNextRender, effect, ViewChild, ContentChildren, forwardRef, ViewEncapsulation, NgModule } from '@angular/core';
 import { IgxSelectionAPIService, ConnectedPositioningStrategy, AutoPositionStrategy, AbsoluteScrollStrategy } from 'igniteui-angular/core';
 import { IgxToggleDirective, IgxForOfToken } from 'igniteui-angular/directives';
-import { Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { Subject, merge } from 'rxjs';
+import { IgxVirtualScrollComponent } from 'igniteui-angular/virtual-scroll';
+import { outputToObservable } from '@angular/core/rxjs-interop';
+import { takeUntil, take } from 'rxjs/operators';
 import { NgModel, FormControlName } from '@angular/forms';
 import { IgxInputGroupComponent } from 'igniteui-angular/input-group';
 
@@ -57,13 +59,13 @@ class IgxDropDownGroupComponent {
     get labelledBy() {
         return this.labelId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.1", type: IgxDropDownGroupComponent, isStandalone: true, selector: "igx-drop-down-item-group", inputs: { disabled: ["disabled", "disabled", booleanAttribute], label: "label" }, host: { properties: { "attr.aria-labelledby": "this.labelledBy", "attr.role": "this.role", "class.igx-drop-down__group": "this.groupClass", "attr.aria-disabled": "this.disabled", "class.igx-drop-down__group--disabled": "this.disabled" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", type: IgxDropDownGroupComponent, isStandalone: true, selector: "igx-drop-down-item-group", inputs: { disabled: ["disabled", "disabled", booleanAttribute], label: "label" }, host: { properties: { "attr.aria-labelledby": "this.labelledBy", "attr.role": "this.role", "class.igx-drop-down__group": "this.groupClass", "attr.aria-disabled": "this.disabled", "class.igx-drop-down__group--disabled": "this.disabled" } }, ngImport: i0, template: `
         <label id="{{labelId}}">{{ label }}</label>
         <ng-content select="igx-drop-down-item"></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-drop-down-item-group',
@@ -330,10 +332,10 @@ class IgxDropDownItemBaseDirective {
             focusedItem.element.nativeElement.focus({ preventScroll: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownItemBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxDropDownItemBaseDirective, isStandalone: true, selector: "[igxDropDownItemBase]", inputs: { id: "id", ariaLabel: "ariaLabel", index: "index", value: "value", selected: ["selected", "selected", booleanAttribute], isHeader: ["isHeader", "isHeader", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], role: "role" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "clicked($event)", "mousedown": "handleMousedown($event)" }, properties: { "attr.id": "this.id", "attr.aria-label": "this.ariaLabel", "class.igx-drop-down__item": "this.itemStyle", "attr.aria-selected": "this.selected", "class.igx-drop-down__item--selected": "this.selected", "class.igx-drop-down__item--focused": "this.focused", "class.igx-drop-down__header": "this.isHeader", "attr.aria-disabled": "this.disabled", "class.igx-drop-down__item--disabled": "this.disabled", "attr.role": "this.role" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownItemBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxDropDownItemBaseDirective, isStandalone: true, selector: "[igxDropDownItemBase]", inputs: { id: "id", ariaLabel: "ariaLabel", index: "index", value: "value", selected: ["selected", "selected", booleanAttribute], isHeader: ["isHeader", "isHeader", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], role: "role" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "clicked($event)", "mousedown": "handleMousedown($event)" }, properties: { "attr.id": "this.id", "attr.aria-label": "this.ariaLabel", "class.igx-drop-down__item": "this.itemStyle", "attr.aria-selected": "this.selected", "class.igx-drop-down__item--selected": "this.selected", "class.igx-drop-down__item--focused": "this.focused", "class.igx-drop-down__header": "this.isHeader", "attr.aria-disabled": "this.disabled", "class.igx-drop-down__item--disabled": "this.disabled", "attr.role": "this.role" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownItemBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownItemBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDropDownItemBase]',
@@ -481,10 +483,10 @@ class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective {
             this.dropDown.selectItem(this, event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxDropDownItemComponent, isStandalone: true, selector: "igx-drop-down-item", host: { properties: { "attr.tabindex": "this.setTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"igx-drop-down__content\">\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n    <span class=\"igx-drop-down__inner\">\n        <ng-content></ng-content>\n    </span>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n    <ng-content select=\"igx-divider\"></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxDropDownItemComponent, isStandalone: true, selector: "igx-drop-down-item", host: { properties: { "attr.tabindex": "this.setTabIndex" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"igx-drop-down__content\">\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n    <span class=\"igx-drop-down__inner\">\n        <ng-content></ng-content>\n    </span>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n    <ng-content select=\"igx-divider\"></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-drop-down-item', changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<span class=\"igx-drop-down__content\">\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n    <span class=\"igx-drop-down__inner\">\n        <ng-content></ng-content>\n    </span>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n    <ng-content select=\"igx-divider\"></ng-content>\n</span>\n" }]
         }], propDecorators: { setTabIndex: [{
@@ -615,10 +617,10 @@ class IgxDropDownItemNavigationDirective {
     onHomeKeyDown() {
         this.target.navigateFirst();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownItemNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxDropDownItemNavigationDirective, isStandalone: true, selector: "[igxDropDownItemNavigation]", inputs: { target: ["igxDropDownItemNavigation", "target"] }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownItemNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDropDownItemNavigationDirective, isStandalone: true, selector: "[igxDropDownItemNavigation]", inputs: { target: ["igxDropDownItemNavigation", "target"] }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownItemNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownItemNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDropDownItemNavigation]',
@@ -865,10 +867,10 @@ class IgxDropDownBaseDirective {
             return -1;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxDropDownBaseDirective, isStandalone: true, inputs: { width: "width", height: "height", id: "id", maxHeight: "maxHeight" }, outputs: { selectionChanging: "selectionChanging" }, host: { properties: { "attr.id": "this.id", "style.maxHeight": "this.maxHeight" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDropDownBaseDirective, isStandalone: true, inputs: { width: "width", height: "height", id: "id", maxHeight: "maxHeight" }, outputs: { selectionChanging: "selectionChanging" }, host: { properties: { "attr.id": "this.id", "style.maxHeight": "this.maxHeight" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { selectionChanging: [{
                 type: Output
@@ -888,6 +890,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 args: ['style.maxHeight']
             }] } });
 
+/** The virtualization a drop-down was given, or `null` when its items are all rendered. */
+function createDropDownVirtualization(forOf, virtualScroll, virtualScrollRef) {
+    if (virtualScroll && virtualScrollRef) {
+        return new VirtualScrollVirtualization(virtualScroll, virtualScrollRef);
+    }
+    return forOf ? new ForOfVirtualization(forOf) : null;
+}
+/** Items virtualized by a projected `igx-virtual-scroll`, which is itself the scrolling element. */
+class VirtualScrollVirtualization {
+    constructor(_scroll, _ref) {
+        this._scroll = _scroll;
+        this._ref = _ref;
+        this._disconnect = new Subject();
+    }
+    get length() {
+        const window = this._scroll.dataWindow();
+        return window
+            ? Math.max(window.totalCount, this.startIndex + (window.items?.length ?? 0))
+            : (this._scroll.data() ?? []).length;
+    }
+    get startIndex() {
+        return this._scroll.dataWindow()?.startIndex ?? 0;
+    }
+    get scrollElement() {
+        return this._ref.nativeElement;
+    }
+    get scrollPosition() {
+        return this.scrollElement.scrollTop;
+    }
+    set scrollPosition(value) {
+        this.scrollElement.scrollTop = value ?? 0;
+    }
+    itemAt(index) {
+        const window = this._scroll.dataWindow();
+        return window
+            ? window.items?.[index - this.startIndex]
+            : (this._scroll.data() ?? [])[index];
+    }
+    findIndex(predicate) {
+        const window = this._scroll.dataWindow();
+        const items = (window ? window.items : this._scroll.data()) ?? [];
+        const found = items.findIndex(predicate);
+        return found < 0 ? -1 : found + this.startIndex;
+    }
+    /** `stateChange` reports the range wanted, which reaches past the rows that arrived. */
+    isIndexRendered(index) {
+        return !!this._ref.nativeElement.querySelector(`[data-index="${index}"]`);
+    }
+    isIndexLoaded(index) {
+        const window = this._scroll.dataWindow();
+        const count = window ? (window.items?.length ?? 0) : (this._scroll.data() ?? []).length;
+        return Number.isInteger(index)
+            && index >= this.startIndex
+            && index < this.startIndex + count;
+    }
+    /** `'nearest'` leaves the offset alone when the item is already fully in view. */
+    scrollToIndex(index, _direction, onRendered) {
+        const wasRendered = this.isIndexRendered(index);
+        const scrolled = this._scroll.scrollToIndex(index, { block: 'nearest' });
+        if (wasRendered) {
+            onRendered();
+            return;
+        }
+        void scrolled.then(onRendered);
+    }
+    alignToIndex(index) {
+        void this._scroll.scrollToIndex(index, { block: 'center' });
+    }
+    onWindowChange(callback) {
+        outputToObservable(this._scroll.stateChange)
+            .pipe(takeUntil(this._disconnect))
+            .subscribe(() => callback());
+    }
+    disconnect() {
+        this._disconnect.next();
+        this._disconnect.complete();
+    }
+}
+/** Items virtualized by a projected `*igxFor`, which keeps a scrollbar of its own. */
+class ForOfVirtualization {
+    constructor(_forOf) {
+        this._forOf = _forOf;
+        this._disconnect = new Subject();
+        /** `*igxFor` is bound to the whole collection, so it always starts at its beginning. */
+        this.startIndex = 0;
+    }
+    get length() {
+        return this._forOf.totalItemCount || this._items.length;
+    }
+    get scrollElement() {
+        return this._forOf.getScroll();
+    }
+    get scrollPosition() {
+        return this._forOf.scrollPosition;
+    }
+    set scrollPosition(value) {
+        this._forOf.scrollPosition = value;
+    }
+    itemAt(index) {
+        return this._items[index];
+    }
+    findIndex(predicate) {
+        return this._items.findIndex(predicate);
+    }
+    isIndexRendered(index) {
+        const { startIndex, chunkSize } = this._forOf.state;
+        return index >= startIndex && index < startIndex + chunkSize;
+    }
+    isIndexLoaded(index) {
+        return Number.isInteger(index) && index >= 0 && index < this._items.length;
+    }
+    scrollToIndex(index, direction, onRendered) {
+        if (!this._needsScroll(index, direction)) {
+            onRendered();
+            return;
+        }
+        this._forOf.scrollTo(index);
+        this._forOf.chunkLoad.pipe(take(1)).subscribe(() => onRendered());
+    }
+    alignToIndex(index) {
+        const itemSize = this._forOf.igxForItemSize;
+        const itemsInView = this._forOf.igxForContainerSize / itemSize;
+        this._forOf.getScroll().scrollTop =
+            this._forOf.getScrollForIndex(index) - (itemsInView / 2 - 1) * itemSize;
+    }
+    onWindowChange(callback) {
+        this._forOf.chunkLoad.pipe(takeUntil(this._disconnect)).subscribe(() => callback());
+    }
+    disconnect() {
+        this._disconnect.next();
+        this._disconnect.complete();
+    }
+    /** `*igxFor` is bound to the whole collection, so its indices are already global. */
+    get _items() {
+        return this._forOf.igxForOf ?? [];
+    }
+    /** Whether `index` is outside the loaded chunk, or inside it but off screen. */
+    _needsScroll(index, direction) {
+        const currentPosition = this._forOf.getScroll().scrollTop;
+        const itemPosition = this._forOf.getScrollForIndex(index, direction === Navigate.Down);
+        const offScreen = direction === Navigate.Down
+            ? currentPosition < itemPosition
+            : currentPosition > itemPosition;
+        return !this.isIndexRendered(index) || offScreen;
+    }
+}
+
 /**
  * **Ignite UI for Angular DropDown** -
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down)
@@ -908,7 +1057,15 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
     constructor() {
         super(...arguments);
         this.selection = inject(IgxSelectionAPIService);
+        this._reconcileInjector = inject(Injector);
         this._activeDescendantId = null;
+        /**
+         * The direction of a navigation whose header skip waits for its row to render.
+         * Focusing an item by any other means drops it.
+         */
+        this._pendingSkip = null;
+        /** Watches the data the projected virtual scroll renders from. */
+        this._renderedItems = null;
         /**
          * Emitted before the dropdown is opened
          *
@@ -968,13 +1125,15 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
          * ```
          */
         this.role = 'listbox';
+        /** Set from the projected content in `ngAfterViewInit`, and again if that content changes. */
+        this.virtualization = null;
         this.destroy$ = new Subject();
     }
     /**
      * @hidden @internal
      */
     get focusedItem() {
-        if (this.virtDir) {
+        if (this.virtualization) {
             return this._focusedItem && this._focusedItem.index !== -1 ?
                 (this.children.find(e => e.index === this._focusedItem.index) || null) :
                 null;
@@ -982,6 +1141,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         return this._focusedItem;
     }
     set focusedItem(value) {
+        this._pendingSkip = null;
         if (!value) {
             this.selection.clear(`${this.id}-active`);
             this._focusedItem = null;
@@ -989,7 +1149,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
             return;
         }
         this._focusedItem = value;
-        if (this.virtDir) {
+        if (this.virtualization) {
             this._focusedItem = {
                 value: value.value,
                 index: value.index
@@ -998,7 +1158,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         this.selection.set(`${this.id}-active`, new Set([this._focusedItem]));
     }
     get activeDescendant() {
-        if (this.virtDir) {
+        if (this.virtualization) {
             return this._activeDescendantId;
         }
         return super.activeDescendant;
@@ -1046,8 +1206,8 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         return this.scrollContainerRef.nativeElement;
     }
     get collectionLength() {
-        if (this.virtDir) {
-            return this.virtDir.totalItemCount || this.virtDir.igxForOf.length;
+        if (this.virtualization) {
+            return this.virtualization.length;
         }
     }
     /**
@@ -1103,20 +1263,22 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @param index of the item to select; If the drop down uses *igxFor, pass the index in data
      */
     setSelectedItem(index) {
-        if (index < 0 || index >= this.items.length) {
-            return;
-        }
-        let newSelection;
-        if (this.virtDir) {
-            newSelection = {
-                value: this.virtDir.igxForOf[index],
+        if (this.virtualization) {
+            // A virtualized index addresses the whole collection. Any record loaded for it
+            // can be selected, which is more than the rows that happen to be rendered.
+            if (!this.virtualization.isIndexLoaded(index)) {
+                return;
+            }
+            this.selectItem({
+                value: this.virtualization.itemAt(index),
                 index
-            };
+            });
+            return;
         }
-        else {
-            newSelection = this.items[index];
+        if (index < 0 || index >= this.items.length) {
+            return;
         }
-        this.selectItem(newSelection);
+        this.selectItem(this.items[index]);
     }
     /**
      * Navigates to the item on the specified index
@@ -1125,28 +1287,19 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @param newIndex number
      */
     navigateItem(index) {
-        if (this.virtDir) {
+        if (this.virtualization) {
             if (index === -1 || index >= this.collectionLength) {
                 return;
             }
             const direction = index > (this.focusedItem ? this.focusedItem.index : -1) ? Navigate.Down : Navigate.Up;
-            const subRequired = this.isIndexOutOfBounds(index, direction);
             this.focusedItem = {
-                value: this.virtDir.igxForOf[index],
+                value: this.virtualization.itemAt(index),
                 index
             };
-            if (subRequired) {
-                this.virtDir.scrollTo(index);
-            }
-            if (subRequired) {
-                this.virtDir.chunkLoad.pipe(take(1)).subscribe(() => {
-                    this.skipHeader(direction);
-                });
-            }
-            else {
-                this._activeDescendantId = this.children.find(e => e.index === index)?.id ?? null;
-                this.skipHeader(direction);
-            }
+            // Naming a row that has not rendered would point assistive technology at nothing.
+            this.refreshActiveDescendant();
+            this._pendingSkip = direction;
+            this.virtualization.scrollToIndex(index, direction, () => this.settleFocus());
         }
         else {
             super.navigateItem(index);
@@ -1160,18 +1313,14 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @hidden @internal
      */
     updateScrollPosition() {
-        if (!this.virtDir) {
+        if (!this.virtualization) {
             return;
         }
         if (!this.selectedItem) {
-            this.virtDir.scrollTo(0);
+            this.virtualization.scrollPosition = 0;
             return;
         }
-        let targetScroll = this.virtDir.getScrollForIndex(this.selectedItem.index);
-        // TODO: This logic _cannot_ be right, those are optional user-provided inputs that can be strings with units, refactor:
-        const itemsInView = this.virtDir.igxForContainerSize / this.virtDir.igxForItemSize;
-        targetScroll -= (itemsInView / 2 - 1) * this.virtDir.igxForItemSize;
-        this.virtDir.getScroll().scrollTop = targetScroll;
+        this.virtualization.alignToIndex(this.selectedItem.index);
     }
     /**
      * @hidden @internal
@@ -1183,15 +1332,15 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         if (e.cancel) {
             return;
         }
-        if (this.virtDir) {
-            this.virtDir.scrollPosition = this._scrollPosition;
+        if (this.virtualization) {
+            this.virtualization.scrollPosition = this._scrollPosition;
         }
     }
     /**
      * @hidden @internal
      */
     onToggleContentAppended(_event) {
-        if (!this.virtDir && this.selectedItem) {
+        if (!this.virtualization && this.selectedItem) {
             this.scrollToItem(this.selectedItem);
         }
     }
@@ -1212,8 +1361,8 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         if (e.cancel) {
             return;
         }
-        if (this.virtDir) {
-            this._scrollPosition = this.virtDir.scrollPosition;
+        if (this.virtualization) {
+            this._scrollPosition = this.virtualization.scrollPosition;
         }
     }
     /**
@@ -1227,6 +1376,8 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @hidden @internal
      */
     ngOnDestroy() {
+        this._renderedItems?.destroy();
+        this.virtualization?.disconnect();
         this.destroy$.next(true);
         this.destroy$.complete();
         this.selection.delete(this.id);
@@ -1256,16 +1407,95 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         }
     }
     ngAfterViewInit() {
-        if (this.virtDir) {
-            this.virtDir.igxForItemSize = 28;
-            this.virtDir.chunkLoad.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                const item = this._focusedItem
-                    ? this.children.find(e => e.index === this._focusedItem.index)
-                    : null;
-                this._activeDescendantId = item?.id ?? null;
-                this.cdr.markForCheck();
-            });
+        this.connectVirtualization();
+        merge(this._forOfQuery.changes, this._virtualScrollQuery.changes, this._virtualScrollRefQuery.changes)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.connectVirtualization());
+        // A sliding window reuses its items, so only the adapter reports it; a page
+        // arriving or the list emptying builds or drops them, which reaches this query.
+        // The query settles inside the pass that rendered them, and the element it names
+        // was already checked in it, so the write waits for the render to finish.
+        this.children.changes
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => afterNextRender(() => this.settleFocus(), { injector: this._reconcileInjector }));
+    }
+    /**
+     * Rebuilds the adapter for the projected content, dropping the previous one first.
+     * The component and element queries can refresh separately, so the pair is taken as one.
+     */
+    connectVirtualization() {
+        const forOf = this._forOfQuery.first;
+        const scroll = this._virtualScrollQuery.first;
+        const element = this._virtualScrollRefQuery.first;
+        // Re-applied whenever the projection reports, not only when the adapter is built:
+        // the directive recomputes its sizes as chunks load.
+        if (forOf) {
+            forOf.igxForItemSize = 28;
+        }
+        if (scroll && !element) {
+            return;
+        }
+        if (this._connectedForOf === forOf
+            && this._connectedScroll === scroll
+            && this._connectedElement === element) {
+            return;
+        }
+        this.virtualization?.disconnect();
+        this._connectedForOf = forOf;
+        this._connectedScroll = scroll;
+        this._connectedElement = element;
+        this.virtualization = createDropDownVirtualization(forOf, scroll, element);
+        // Rows a window renders reach the item query only once this view is checked.
+        this.virtualization?.onWindowChange(() => {
+            this.cdr.markForCheck();
+            this.refreshActiveDescendant();
+        });
+        this.watchRenderedItems(scroll);
+    }
+    /**
+     * Keeps the item query in step with the rows a projected `igx-virtual-scroll` renders.
+     * The query collects them only while the view that declares them is checked, and a
+     * page arriving dirties the scroll rather than that view. Asking for the check is all
+     * it takes; `children.changes` reports the rest.
+     */
+    watchRenderedItems(scroll) {
+        this._renderedItems?.destroy();
+        this._renderedItems = null;
+        if (!scroll) {
+            return;
         }
+        this._renderedItems = effect(() => {
+            scroll.data();
+            scroll.dataWindow();
+            this.cdr.markForCheck();
+        }, { ...(ngDevMode ? { debugName: "_renderedItems" } : /* istanbul ignore next */ {}), injector: this._reconcileInjector });
+    }
+    /** Points `aria-activedescendant` at the item the focused index renders as, if any. */
+    refreshActiveDescendant() {
+        const index = this._focusedItem?.index;
+        const item = index !== undefined && index !== -1
+            ? this.children?.find(e => e.index === index)
+            : null;
+        const id = item?.id ?? null;
+        if (id === this._activeDescendantId) {
+            return;
+        }
+        this._activeDescendantId = id;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Names the row the focused index renders as and, once that row exists, moves off a
+     * header or a disabled item. The row can be missing when the scroll settles, because
+     * its page has not arrived; the item query reports it when it does.
+     */
+    settleFocus() {
+        this.refreshActiveDescendant();
+        const direction = this._pendingSkip;
+        if (direction === null || !this.focusedItem) {
+            return;
+        }
+        this._pendingSkip = null;
+        this.skipHeader(direction);
     }
     /** Keydown Handler */
     onItemActionKey(key, event) {
@@ -1278,7 +1508,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @hidden @internal
      */
     navigateFirst() {
-        if (this.virtDir) {
+        if (this.virtualization) {
             this.navigateItem(0);
         }
         else {
@@ -1289,8 +1519,8 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @hidden @internal
      */
     navigateLast() {
-        if (this.virtDir) {
-            this.navigateItem(this.virtDir.totalItemCount ? this.virtDir.totalItemCount - 1 : this.virtDir.igxForOf.length - 1);
+        if (this.virtualization) {
+            this.navigateItem(this.virtualization.length - 1);
         }
         else {
             super.navigateLast();
@@ -1300,7 +1530,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @hidden @internal
      */
     navigateNext() {
-        if (this.virtDir) {
+        if (this.virtualization) {
             this.navigateItem(this._focusedItem ? this._focusedItem.index + 1 : 0);
         }
         else {
@@ -1311,7 +1541,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * @hidden @internal
      */
     navigatePrev() {
-        if (this.virtDir) {
+        if (this.virtualization) {
             this.navigateItem(this._focusedItem ? this._focusedItem.index - 1 : 0);
         }
         else {
@@ -1338,7 +1568,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         if (newSelection instanceof IgxDropDownItemBaseDirective && newSelection.isHeader) {
             return;
         }
-        if (this.virtDir) {
+        if (this.virtualization) {
             newSelection = {
                 value: newSelection.value,
                 index: newSelection.index
@@ -1351,7 +1581,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         if (!args.cancel) {
             if (this.isSelectionValid(args.newSelection)) {
                 this.selection.set(this.id, new Set([args.newSelection]));
-                if (!this.virtDir) {
+                if (!this.virtualization) {
                     if (oldSelection) {
                         oldSelection.selected = false;
                     }
@@ -1392,7 +1622,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      */
     isSelectionValid(selection) {
         return selection === null
-            || (this.virtDir && selection.hasOwnProperty('value') && selection.hasOwnProperty('index'))
+            || (!!this.virtualization && selection.hasOwnProperty('value') && selection.hasOwnProperty('index'))
             || (selection instanceof IgxDropDownItemComponent && !selection.isHeader);
     }
     scrollToItem(item) {
@@ -1426,19 +1656,10 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
             }
         }
     }
-    isIndexOutOfBounds(index, direction) {
-        const virtState = this.virtDir.state;
-        const currentPosition = this.virtDir.getScroll().scrollTop;
-        const itemPosition = this.virtDir.getScrollForIndex(index, direction === Navigate.Down);
-        const indexOutOfChunk = index < virtState.startIndex || index > virtState.chunkSize + virtState.startIndex;
-        const scrollNeeded = direction === Navigate.Down ? currentPosition < itemPosition : currentPosition > itemPosition;
-        const subRequired = indexOutOfChunk || scrollNeeded;
-        return subRequired;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxDropDownComponent, isStandalone: true, selector: "igx-drop-down", inputs: { allowItemsFocus: ["allowItemsFocus", "allowItemsFocus", booleanAttribute], labelledBy: "labelledBy", role: "role" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], queries: [{ propertyName: "virtDir", first: true, predicate: IgxForOfToken, descendants: true }, { propertyName: "children", predicate: i0.forwardRef(() => IgxDropDownItemComponent), descendants: true }], viewQueries: [{ propertyName: "toggleDirective", first: true, predicate: IgxToggleDirective, descendants: true, static: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: 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: IgxDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxDropDownComponent, isStandalone: true, selector: "igx-drop-down", inputs: { allowItemsFocus: ["allowItemsFocus", "allowItemsFocus", booleanAttribute], labelledBy: "labelledBy", role: "role" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], queries: [{ propertyName: "children", predicate: i0.forwardRef(() => IgxDropDownItemComponent), descendants: true }, { propertyName: "_forOfQuery", predicate: IgxForOfToken, descendants: true }, { propertyName: "_virtualScrollQuery", predicate: IgxVirtualScrollComponent, descendants: true }, { propertyName: "_virtualScrollRefQuery", predicate: IgxVirtualScrollComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "toggleDirective", first: true, predicate: IgxToggleDirective, descendants: true, static: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: 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: IgxDropDownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-drop-down', encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], 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: { children: [{
@@ -1459,9 +1680,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 type: Input
             }], role: [{
                 type: Input
-            }], virtDir: [{
-                type: ContentChild,
-                args: [IgxForOfToken]
+            }], _forOfQuery: [{
+                type: ContentChildren,
+                args: [IgxForOfToken, { descendants: true }]
+            }], _virtualScrollQuery: [{
+                type: ContentChildren,
+                args: [IgxVirtualScrollComponent, { descendants: true }]
+            }], _virtualScrollRefQuery: [{
+                type: ContentChildren,
+                args: [IgxVirtualScrollComponent, { read: ElementRef, descendants: true }]
             }], toggleDirective: [{
                 type: ViewChild,
                 args: [IgxToggleDirective, { static: true }]
@@ -1729,10 +1956,10 @@ class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective {
         this.target.navigateFirst();
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAutocompleteDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxAutocompleteDirective, isStandalone: true, selector: "[igxAutocomplete]", inputs: { target: ["igxAutocomplete", "target"], autocompleteSettings: ["igxAutocompleteSettings", "autocompleteSettings"], disabled: ["igxAutocompleteDisabled", "disabled", booleanAttribute] }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "input": "onInput()", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.ArrowUp": "onArrowDown($event)", "keydown.Alt.ArrowUp": "onArrowDown($event)", "keydown.Tab": "onTab()", "keydown.Shift.Tab": "onTab()" }, properties: { "attr.autocomplete": "this.autofill", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.hasPopUp", "attr.aria-owns": "this.ariaOwns", "attr.aria-activedescendant": "this.ariaActiveDescendant", "attr.aria-autocomplete": "this.ariaAutocomplete" } }, exportAs: ["igxAutocomplete"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAutocompleteDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxAutocompleteDirective, isStandalone: true, selector: "[igxAutocomplete]", inputs: { target: ["igxAutocomplete", "target"], autocompleteSettings: ["igxAutocompleteSettings", "autocompleteSettings"], disabled: ["igxAutocompleteDisabled", "disabled", booleanAttribute] }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "input": "onInput()", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.ArrowUp": "onArrowDown($event)", "keydown.Alt.ArrowUp": "onArrowDown($event)", "keydown.Tab": "onTab()", "keydown.Shift.Tab": "onTab()" }, properties: { "attr.autocomplete": "this.autofill", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.hasPopUp", "attr.aria-owns": "this.ariaOwns", "attr.aria-activedescendant": "this.ariaActiveDescendant", "attr.aria-autocomplete": "this.ariaAutocomplete" } }, exportAs: ["igxAutocomplete"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAutocompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxAutocomplete]',
@@ -1805,11 +2032,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxAutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxAutocompleteModule, imports: [IgxAutocompleteDirective], exports: [IgxAutocompleteDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAutocompleteModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxAutocompleteModule, imports: [IgxAutocompleteDirective], exports: [IgxAutocompleteDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAutocompleteModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxAutocompleteDirective],
@@ -1830,11 +2057,11 @@ const IGX_DROP_DOWN_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxDropDownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownModule, imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent, IgxDropDownItemNavigationDirective], exports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent, IgxDropDownItemNavigationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownModule, imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent, IgxDropDownItemNavigationDirective], exports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent, IgxDropDownItemNavigationDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [