igniteui-angular 21.0.4 → 21.0.6

package/fesm2022/igniteui-angular-chips.mjs

@@ -670,10 +670,10 @@ class IgxChipComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-chip', imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n" }]
         }], propDecorators: { variant: [{
@@ -1071,10 +1071,10 @@ class IgxChipsAreaComponent {
             owner: this
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxChipsAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChipsAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-chips-area', standalone: true, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [], propDecorators: { role: [{
@@ -1122,11 +1122,11 @@ const IGX_CHIPS_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxChipsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxChipsModule, imports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective], exports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxChipsModule, imports: [IgxChipComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxChipsModule, imports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective], exports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChipsModule, imports: [IgxChipComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [

package/fesm2022/igniteui-angular-combo.mjs

@@ -61,10 +61,10 @@ class IgxComboAPIService {
     is_item_selected(itemID) {
         return this.combo.isItemSelected(itemID);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboAPIService, decorators: [{
             type: Injectable
         }] });
 
@@ -153,10 +153,10 @@ class IgxComboItemComponent extends IgxDropDownItemComponent {
     disableCheck(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo-item', 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: [{
@@ -191,10 +191,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * </igx-combo>
  */
 class IgxComboHeaderDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboHeaderDirective, isStandalone: true, selector: "[igxComboHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboHeaderDirective, isStandalone: true, selector: "[igxComboHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboHeader]',
@@ -218,10 +218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * </igx-combo>
  */
 class IgxComboFooterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboFooterDirective, isStandalone: true, selector: "[igxComboFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboFooterDirective, isStandalone: true, selector: "[igxComboFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboFooter]',
@@ -247,10 +247,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
   * </igx-combo>
  */
 class IgxComboItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboItemDirective, isStandalone: true, selector: "[igxComboItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboItemDirective, isStandalone: true, selector: "[igxComboItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboItem]',
@@ -275,10 +275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  *  </igx-combo>
  */
 class IgxComboEmptyDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboEmptyDirective, isStandalone: true, selector: "[igxComboEmpty]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboEmptyDirective, isStandalone: true, selector: "[igxComboEmpty]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboEmptyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboEmptyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboEmpty]',
@@ -301,10 +301,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  *  </igx-combo>
  */
 class IgxComboHeaderItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboHeaderItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboHeaderItemDirective, isStandalone: true, selector: "[igxComboHeaderItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboHeaderItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboHeaderItemDirective, isStandalone: true, selector: "[igxComboHeaderItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboHeaderItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboHeaderItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboHeaderItem]',
@@ -331,10 +331,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  *  </igx-combo>
  */
 class IgxComboAddItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboAddItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboAddItemDirective, isStandalone: true, selector: "[igxComboAddItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboAddItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboAddItemDirective, isStandalone: true, selector: "[igxComboAddItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboAddItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboAddItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboAddItem]',
@@ -357,10 +357,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  *  </igx-combo>
  */
 class IgxComboToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboToggleIconDirective, isStandalone: true, selector: "[igxComboToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboToggleIconDirective, isStandalone: true, selector: "[igxComboToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboToggleIcon]',
@@ -383,10 +383,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  *  </igx-combo>
  */
 class IgxComboClearIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboClearIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxComboClearIconDirective, isStandalone: true, selector: "[igxComboClearIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboClearIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxComboClearIconDirective, isStandalone: true, selector: "[igxComboClearIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboClearIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboClearIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxComboClearIcon]',
@@ -1446,10 +1446,10 @@ class IgxComboBaseDirective {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", 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], 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 }], 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: "21.0.8", ngImport: i0, type: IgxComboBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", 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], 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 }], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { showSearchCaseIcon: [{
                 type: Input,
@@ -1598,10 +1598,10 @@ class IgxComboAddItemComponent extends IgxComboItemComponent {
         this.comboAPI.disableTransitions = false;
         this.comboAPI.add_custom_item();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-combo-add-item',
@@ -1794,10 +1794,10 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
             this.focusedItem = this.items[this.items.length - 1];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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__list\" [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", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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__list\" [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", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], imports: [IgxToggleDirective], template: "<div class=\"igx-drop-down__list\" [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" }]
         }], propDecorators: { singleMode: [{
@@ -1820,10 +1820,10 @@ class IgxComboFilteringPipe {
         filteringOptions.filteringKey = filteringOptions.filteringKey ?? displayKey;
         return filterFunction(collection, searchValue, filteringOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxComboFilteringPipe, isStandalone: true, name: "comboFiltering" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxComboFilteringPipe, isStandalone: true, name: "comboFiltering" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'comboFiltering',
@@ -1858,10 +1858,10 @@ class IgxComboGroupingPipe {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxComboGroupingPipe, isStandalone: true, name: "comboGrouping" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxComboGroupingPipe, isStandalone: true, name: "comboGrouping" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'comboGrouping',
@@ -2242,14 +2242,14 @@ class IgxComboComponent extends IgxComboBaseDirective {
             selection.join(', ');
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($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) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n            (click)=\"handleClearItems($event)\" (keydown)=\"handleClearKeyDown($event)\" [tabindex]=\"disabled ? -1 : 0\" role=\"button\">\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-combo__toggle-button\" (keydown)=\"handleToggleKeyDown($event)\" [tabindex]=\"disabled ? -1 : 0\" role=\"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    @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 (click)=\"toggleCaseSensitive()\">\n                        <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                            <igx-icon\n                                family=\"default\"\n                                name=\"case_sensitive\"\n                                [active]=\"filteringOptions.caseSensitive\">\n                            </igx-icon>\n                        </span>\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    @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</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", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "igx-suffix,[igxSuffix],[igxEnd]" }, { 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", "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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo', providers: [
                         IgxComboAPIService,
@@ -2314,11 +2314,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: "21.0.2", ngImport: i0, type: IgxComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", 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: "21.0.2", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", 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: "21.0.8", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxComboModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxComboModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [