igniteui-angular 16.1.6 → 16.1.8

package/fesm2022/igniteui-angular.mjs

@@ -8682,7 +8682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 type: Input
             }] } });
 
-let NEXT_ID$v = 0;
+let NEXT_ID$w = 0;
 /**
  * An abstract class, defining a drop-down component, with:
  * Properties for display styles and classes
@@ -8793,7 +8793,7 @@ class IgxDropDownBaseDirective extends DisplayDensityBase {
          */
         this.cssClass = true;
         this._focusedItem = null;
-        this._id = `igx-drop-down-${NEXT_ID$v++}`;
+        this._id = `igx-drop-down-${NEXT_ID$w++}`;
     }
     /** Keydown Handler */
     onItemActionKey(key, event) {
@@ -9670,14 +9670,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 args: ['change', ['$event']]
             }] } });
 
-let NEXT_ID$u = 0;
+let NEXT_ID$v = 0;
 class IgxLabelDirective {
     constructor() {
         this.defaultClass = true;
         /**
          * @hidden
          */
-        this.id = `igx-label-${NEXT_ID$u++}`;
+        this.id = `igx-label-${NEXT_ID$v++}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: IgxLabelDirective, isStandalone: true, selector: "[igxLabel]", inputs: { id: "id" }, host: { properties: { "class.igx-input-group__label": "this.defaultClass", "attr.id": "this.id" } }, ngImport: i0 }); }
@@ -11639,7 +11639,7 @@ const IgxDividerType = mkenum({
     SOLID: 'solid',
     DASHED: 'dashed'
 });
-let NEXT_ID$t = 0;
+let NEXT_ID$u = 0;
 class IgxDividerDirective {
     constructor() {
         /**
@@ -11652,7 +11652,7 @@ class IgxDividerDirective {
          * let dividerId =  this.divider.id;
          * ```
          */
-        this.id = `igx-divider-${NEXT_ID$t++}`;
+        this.id = `igx-divider-${NEXT_ID$u++}`;
         /**
          * An @Input property that sets the value of `role` attribute.
          * If not the default value of `separator` will be used.
@@ -19380,7 +19380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-let NEXT_ID$s = 0;
+let NEXT_ID$t = 0;
 /**
  * **Ignite UI for Angular Tooltip** -
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)
@@ -19430,7 +19430,7 @@ class IgxTooltipDirective extends IgxToggleDirective {
          * let tooltipId = this.tooltip.id;
          * ```
          */
-        this.id = `igx-tooltip-${NEXT_ID$s++}`;
+        this.id = `igx-tooltip-${NEXT_ID$t++}`;
         /**
          * @hidden
          * Returns whether close time out has started
@@ -22644,7 +22644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                     args: [IgxAngularAnimationService]
                 }] }]; } });
 
-let NEXT_ID$r = 0;
+let NEXT_ID$s = 0;
 class IgxExpansionPanelComponent extends ToggleAnimationPlayer {
     /**
      * Sets/gets the animation settings of the expansion panel component
@@ -22717,7 +22717,7 @@ class IgxExpansionPanelComponent extends ToggleAnimationPlayer {
          *
          * @memberof IgxExpansionPanelComponent
          */
-        this.id = `igx-expansion-panel-${NEXT_ID$r++}`;
+        this.id = `igx-expansion-panel-${NEXT_ID$s++}`;
         /**
          * @hidden
          */
@@ -22940,7 +22940,7 @@ const IGX_EXPANSION_PANEL_DIRECTIVES = [
     IgxExpansionPanelIconDirective
 ];
 
-let NEXT_ID$q = 0;
+let NEXT_ID$r = 0;
 /**
  * IgxAccordion is a container-based component that contains that can house multiple expansion panels.
  *
@@ -23033,7 +23033,7 @@ class IgxAccordionComponent {
          * const accordionId = this.accordion.id;
          * ```
          */
-        this.id = `igx-accordion-${NEXT_ID$q++}`;
+        this.id = `igx-accordion-${NEXT_ID$r++}`;
         /** @hidden @internal **/
         this.cssClass = 'igx-accordion';
         /** @hidden @internal **/
@@ -23571,7 +23571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 }]
         }] });
 
-let NEXT_ID$p = 0;
+let NEXT_ID$q = 0;
 /**
  * The `<igx-drop-down-item>` is a container intended for row items in
  * a `<igx-drop-down>` container.
@@ -23610,7 +23610,7 @@ class IgxDropDownGroupComponent {
          * **NOTE:** All items inside of a disabled drop down group will be treated as disabled
          */
         this.disabled = false;
-        this._id = NEXT_ID$p++;
+        this._id = NEXT_ID$q++;
     }
     /**
      * @hidden @internal
@@ -23658,7 +23658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 type: Input
             }] } });
 
-let NEXT_ID$o = 0;
+let NEXT_ID$p = 0;
 /**
  * An abstract class defining a drop-down item:
  * With properties / styles for selection, highlight, height
@@ -23818,7 +23818,7 @@ class IgxDropDownItemBaseDirective {
          *
          * @memberof IgxSelectItemComponent
          */
-        this.id = `igx-drop-down-item-${NEXT_ID$o++}`;
+        this.id = `igx-drop-down-item-${NEXT_ID$p++}`;
         /**
          * @hidden
          */
@@ -28633,7 +28633,7 @@ const IGX_GRID_ACTION_STRIP_DIRECTIVES = [
     IgxGridActionButtonComponent
 ];
 
-let NEXT_ID$n = 0;
+let NEXT_ID$o = 0;
 const IgxAvatarSize = mkenum({
     SMALL: 'small',
     MEDIUM: 'medium',
@@ -28811,7 +28811,7 @@ class IgxAvatarComponent {
          * <igx-avatar id="my-first-avatar"></igx-avatar>
          * ```
          */
-        this.id = `igx-avatar-${NEXT_ID$n++}`;
+        this.id = `igx-avatar-${NEXT_ID$o++}`;
         /**
          * Sets square, rounded or circular shape to the avatar.
          * By default the shape of the avatar is square.
@@ -28926,7 +28926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 args: ['style.--component-size']
             }] } });
 
-let NEXT_ID$m = 0;
+let NEXT_ID$n = 0;
 /**
  * Determines the igxBadge type
  */
@@ -28972,7 +28972,7 @@ class IgxBadgeComponent {
          * <igx-badge id="igx-badge-2"></igx-badge>
          * ```
          */
-        this.id = `igx-badge-${NEXT_ID$m++}`;
+        this.id = `igx-badge-${NEXT_ID$n++}`;
         /**
          * Sets/gets the type of the badge.
          *
@@ -29409,7 +29409,7 @@ const ButtonGroupAlignment = mkenum({
     horizontal: 'horizontal',
     vertical: 'vertical'
 });
-let NEXT_ID$l = 0;
+let NEXT_ID$m = 0;
 /**
  * **Ignite UI for Angular Button Group** -
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)
@@ -29579,7 +29579,7 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
          *  <igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
          * ```
          */
-        this.id = `igx-buttongroup-${NEXT_ID$l++}`;
+        this.id = `igx-buttongroup-${NEXT_ID$m++}`;
         /**
          * @hidden
          */
@@ -31222,7 +31222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 type: Input
             }] } });
 
-let NEXT_ID$k = 0;
+let NEXT_ID$l = 0;
 class IgxMonthsViewComponent {
     /**
      * Gets/sets the selected date of the months view.
@@ -31324,7 +31324,7 @@ class IgxMonthsViewComponent {
          *
          * @memberof IgxMonthsViewComponent
          */
-        this.id = `igx-months-view-${NEXT_ID$k++}`;
+        this.id = `igx-months-view-${NEXT_ID$l++}`;
         /**
          * Gets/sets whether the view should be rendered
          * according to the locale and monthFormat, if any.
@@ -32228,7 +32228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
             type: Injectable
         }] });
 
-let NEXT_ID$j = 0;
+let NEXT_ID$k = 0;
 class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     /**
      * @hidden
@@ -32257,7 +32257,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
          * let daysViewId =  this.daysView.id;
          * ```
          */
-        this.id = `igx-days-view-${NEXT_ID$j++}`;
+        this.id = `igx-days-view-${NEXT_ID$k++}`;
         /**
          * @hidden
          */
@@ -32672,7 +32672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let NEXT_ID$i = 0;
+let NEXT_ID$j = 0;
 /**
  * Calendar provides a way to display date information.
  *
@@ -32708,7 +32708,7 @@ class IgxCalendarComponent extends IgxMonthPickerBaseDirective {
          * ```
          * @memberof IgxCalendarComponent
          */
-        this.id = `igx-calendar-${NEXT_ID$i++}`;
+        this.id = `igx-calendar-${NEXT_ID$j++}`;
         /**
          * Sets/gets whether the calendar has header.
          * Default value is `true`.
@@ -33599,7 +33599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 args: ['document:mouseup', ['$event']]
             }] } });
 
-let NEXT_ID$h = 0;
+let NEXT_ID$i = 0;
 class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     constructor() {
         super(...arguments);
@@ -33607,7 +33607,7 @@ class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
          * Sets/gets the `id` of the month picker.
          * If not set, the `id` will have value `"igx-month-picker-0"`.
          */
-        this.id = `igx-month-picker-${NEXT_ID$h++}`;
+        this.id = `igx-month-picker-${NEXT_ID$i++}`;
         /**
          * The default css class applied to the component.
          *
@@ -33881,7 +33881,7 @@ const IGX_CALENDAR_DIRECTIVES = [
     IgxCalendarSubheaderTemplateDirective
 ];
 
-let NEXT_ID$g = 0;
+let NEXT_ID$h = 0;
 /**
  * IgxCardMedia is container for the card media section.
  * Use it to wrap images and videos.
@@ -34140,7 +34140,7 @@ class IgxCardComponent {
          * let cardId =  this.card.id;
          * ```
          */
-        this.id = `igx-card-${NEXT_ID$g++}`;
+        this.id = `igx-card-${NEXT_ID$h++}`;
         /**
          * An @Input property that sets the value of the `role` attribute of the card.
          * By default the value is set to `group`.
@@ -34649,7 +34649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 type: Output
             }] } });
 
-let NEXT_ID$f = 0;
+let NEXT_ID$g = 0;
 const CarouselIndicatorsOrientation = mkenum({
     bottom: 'bottom',
     top: 'top'
@@ -34845,7 +34845,7 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
          *
          * @memberof IgxCarouselComponent
          */
-        this.id = `igx-carousel-${NEXT_ID$f++}`;
+        this.id = `igx-carousel-${NEXT_ID$g++}`;
         /**
          * Returns the `role` attribute of the carousel.
          * ```typescript
@@ -37118,7 +37118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
         }] });
 
 const IGX_COMBO_COMPONENT = new InjectionToken('IgxComboComponentToken');
-let NEXT_ID$e = 0;
+let NEXT_ID$f = 0;
 /**
  * @hidden
  * The default number of items that should be in the combo's
@@ -37517,7 +37517,7 @@ class IgxComboBaseDirective extends DisplayDensityBase {
          * <igx-combo [id]='combo1'></igx-combo>
          * ```
          */
-        this.id = `igx-combo-${NEXT_ID$e++}`;
+        this.id = `igx-combo-${NEXT_ID$f++}`;
         /**
          * Controls whether custom values can be added to the collection
          *
@@ -39118,8 +39118,6 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         /** @hidden @internal */
         this.composing = false;
         this._updateInput = true;
-        // stores the last filtered value - move to common?
-        this._internalFilter = '';
         this._collapsing = false;
         this.findAllMatches = (element) => {
             const value = this.displayKey ? element[this.displayKey] : element;
@@ -39179,9 +39177,9 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         const oldSelection = this.selection;
         this.selectionService.select_items(this.id, this.isValid(value) ? [value] : [], true);
         this.cdr.markForCheck();
-        this._displayValue = this.createDisplayText(this.selection, oldSelection);
-        this._value = this.valueKey ? this.selection.map(item => item[this.valueKey]) : this.selection;
-        this.filterValue = this._internalFilter = this._displayValue?.toString();
+        this._displayValue = this.createDisplayText(super.selection, oldSelection);
+        this._value = this.valueKey ? super.selection.map(item => item[this.valueKey]) : super.selection;
+        this.filterValue = this._displayValue?.toString() || '';
     }
     /** @hidden @internal */
     ngAfterViewInit() {
@@ -39218,7 +39216,6 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             if (this.composing) {
                 this.comboInput.focus();
             }
-            this._internalFilter = this.comboInput.value;
         });
         this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe((args) => {
             if (args.cancel) {
@@ -39233,9 +39230,6 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             }
             this.comboInput.focus();
         });
-        this.dropdown.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.filterValue = this._internalFilter = this.comboInput.value;
-        });
         // in reactive form the control is not present initially
         // and sets the selection to an invalid value in writeValue method
         if (!this.isValid(this.selectedItem)) {
@@ -39255,7 +39249,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     /** @hidden @internal */
     handleInputChange(event) {
         if (event !== undefined) {
-            this.filterValue = this._internalFilter = this.searchValue = typeof event === 'string' ? event : event.target.value;
+            this.filterValue = this.searchValue = typeof event === 'string' ? event : event.target.value;
         }
         this._onChangeCallback(this.searchValue);
         if (this.collapsed && this.comboInput.focused) {
@@ -39297,7 +39291,6 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             this.close();
             // manually trigger text selection as it will not be triggered during editing
             this.textSelection.trigger();
-            this.filterValue = this.getElementVal(filtered);
             return;
         }
         if (event.key === this.platformUtil.KEYMAP.BACKSPACE
@@ -39348,10 +39341,6 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         super.onBlur();
     }
     /** @hidden @internal */
-    onFocus() {
-        this._internalFilter = this.comboInput.value || '';
-    }
-    /** @hidden @internal */
     getEditElement() {
         return this.comboInput.nativeElement;
     }
@@ -39430,7 +39419,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             this.selectionService.select_items(this.id, argsSelection, true);
             this._value = argsSelection;
             if (this._updateInput) {
-                this.comboInput.value = this._internalFilter = this._displayValue = this.searchValue = displayText !== args.displayText
+                this.comboInput.value = this._displayValue = this.searchValue = displayText !== args.displayText
                     ? args.displayText
                     : this.createDisplayText(this.selection, [args.oldSelection]);
             }
@@ -39500,7 +39489,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     }
     clear() {
         this.clearSelection(true);
-        this.comboInput.value = this._internalFilter = this._displayValue = this.searchValue = '';
+        this.comboInput.value = this._displayValue = this.searchValue = '';
     }
     isValid(value) {
         return this.required
@@ -39512,7 +39501,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue[0]\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ 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: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { 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", "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", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue[0]\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ 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: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { 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", "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", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
             type: Component,
@@ -39520,7 +39509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-                    ], standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, NgIf, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue[0]\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
+                    ], standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, NgIf, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue[0]\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -39959,7 +39948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 args: [IgxInputGroupComponent]
             }] } });
 
-let NEXT_ID$d = 0;
+let NEXT_ID$e = 0;
 /**
  * Date Picker displays a popup calendar that lets users select a single date.
  *
@@ -40119,7 +40108,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
          * <igx-date-picker [id]="'igx-date-picker-3'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
          * ```
          */
-        this.id = `igx-date-picker-${NEXT_ID$d++}`;
+        this.id = `igx-date-picker-${NEXT_ID$e++}`;
         /** @hidden @internal */
         this.readOnly = false;
         /**
@@ -41374,7 +41363,7 @@ const IGX_DROP_DOWN_DIRECTIVES = [
     IgxDropDownItemNavigationDirective
 ];
 
-let NEXT_ID$c = 0;
+let NEXT_ID$d = 0;
 /**
  * Providing reference to `IgxColumnActionsComponent`:
  * ```typescript
@@ -41469,7 +41458,7 @@ class IgxColumnActionsComponent {
         /**
          * @hidden @internal
          */
-        this._id = `igx-column-actions-${NEXT_ID$c++}`;
+        this._id = `igx-column-actions-${NEXT_ID$d++}`;
         /**
          * @hidden @internal
          */
@@ -47031,7 +47020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                     args: [IGX_TIME_PICKER_COMPONENT]
                 }] }]; } });
 
-let NEXT_ID$b = 0;
+let NEXT_ID$c = 0;
 class IgxTimePickerComponent extends PickerBaseDirective {
     /**
      * The minimum value the picker will accept.
@@ -47281,7 +47270,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
          * <igx-time-picker [id]="'igx-time-picker-5'" [displayFormat]="h:mm tt" ></igx-time-picker>
          * ```
          */
-        this.id = `igx-time-picker-${NEXT_ID$b++}`;
+        this.id = `igx-time-picker-${NEXT_ID$c++}`;
         /**
          * The expected user input format and placeholder.
          *
@@ -49603,6 +49592,11 @@ class ExpressionUI {
         this.isVisible = true;
     }
 }
+/**
+ * @hidden @internal
+ */
+class ActiveElement {
+}
 function generateExpressionsList(expressions, operator, expressionsUIs) {
     generateExpressionsListRecursive(expressions, operator, expressionsUIs);
     // The beforeOperator of the first expression and the afterOperator of the last expression should be null
@@ -52751,7 +52745,7 @@ class IgxListItemComponent {
         this.lastPanDir = IgxListPanState.NONE;
     }
     /**
-     * Gets the `role` attribute of the `list item`.
+     * Gets/Sets the `role` attribute of the `list item`.
      * ```typescript
      * let itemRole =  this.listItem.role;
      * ```
@@ -52759,7 +52753,10 @@ class IgxListItemComponent {
      * @memberof IgxListItemComponent
      */
     get role() {
-        return this.isHeader ? 'separator' : 'listitem';
+        return this._role ? this._role : this.isHeader ? 'separator' : 'listitem';
+    }
+    set role(val) {
+        this._role = val;
     }
     /**
      * Indicates whether `list item` should have header style.
@@ -52950,7 +52947,7 @@ class IgxListItemComponent {
         this.hideLeftAndRightPanTemplates();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxListItemComponent, deps: [{ token: IgxListBaseDirective }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxListItemComponent, isStandalone: true, selector: "igx-list-item", inputs: { isHeader: "isHeader", hidden: "hidden", index: "index" }, host: { listeners: { "click": "clicked($event)", "panstart": "panStart()", "pancancel": "panCancel()", "panmove": "panMove($event)", "panend": "panEnd()" }, properties: { "attr.aria-label": "this.ariaLabel", "style.touch-action": "this.touchAction", "attr.role": "this.role", "class.igx-list__header": "this.headerStyle", "class.igx-list__item-base": "this.innerStyle", "style.display": "this.display" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "leftPanningTemplateElement", first: true, predicate: ["leftPanningTmpl"], descendants: true }, { propertyName: "rightPanningTemplateElement", first: true, predicate: ["rightPanningTmpl"], descendants: true }], ngImport: i0, template: "\n<div *ngIf=\"!isHeader && list.listItemLeftPanningTemplate\" #leftPanningTmpl class=\"igx-list__item-right\"\n    [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n    <ng-container *ngTemplateOutlet=\"list.listItemLeftPanningTemplate.template; context: context\">\n    </ng-container>\n</div>\n\n<div *ngIf=\"!isHeader && list.listItemRightPanningTemplate\" #rightPanningTmpl class=\"igx-list__item-left\"\n    [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n    <ng-container *ngTemplateOutlet=\"list.listItemRightPanningTemplate.template; context: context\">\n    </ng-container>\n</div>\n\n<ng-template #itemsContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemThumbnails>\n    <div class=\"igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], igx-list__item-thumbnail, igx-avatar\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemLines>\n    <div class=\"igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list__item-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"isHeader\">\n    <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!isHeader\">\n    <div class=\"igx-list__item-content\">\n        <ng-container *ngTemplateOutlet=\"itemThumbnails\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemLines\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemActions\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxListItemComponent, isStandalone: true, selector: "igx-list-item", inputs: { isHeader: "isHeader", hidden: "hidden", index: "index", role: "role" }, host: { listeners: { "click": "clicked($event)", "panstart": "panStart()", "pancancel": "panCancel()", "panmove": "panMove($event)", "panend": "panEnd()" }, properties: { "attr.aria-label": "this.ariaLabel", "style.touch-action": "this.touchAction", "attr.role": "this.role", "class.igx-list__header": "this.headerStyle", "class.igx-list__item-base": "this.innerStyle", "style.display": "this.display" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "leftPanningTemplateElement", first: true, predicate: ["leftPanningTmpl"], descendants: true }, { propertyName: "rightPanningTemplateElement", first: true, predicate: ["rightPanningTmpl"], descendants: true }], ngImport: i0, template: "\n<div *ngIf=\"!isHeader && list.listItemLeftPanningTemplate\" #leftPanningTmpl class=\"igx-list__item-right\"\n    [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n    <ng-container *ngTemplateOutlet=\"list.listItemLeftPanningTemplate.template; context: context\">\n    </ng-container>\n</div>\n\n<div *ngIf=\"!isHeader && list.listItemRightPanningTemplate\" #rightPanningTmpl class=\"igx-list__item-left\"\n    [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n    <ng-container *ngTemplateOutlet=\"list.listItemRightPanningTemplate.template; context: context\">\n    </ng-container>\n</div>\n\n<ng-template #itemsContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemThumbnails>\n    <div class=\"igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], igx-list__item-thumbnail, igx-avatar\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemLines>\n    <div class=\"igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list__item-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-container *ngIf=\"isHeader\">\n    <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!isHeader\">\n    <div class=\"igx-list__item-content\">\n        <ng-container *ngTemplateOutlet=\"itemThumbnails\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemLines\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemActions\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxListItemComponent, decorators: [{
             type: Component,
@@ -52976,6 +52973,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }, {
+                type: Input
             }], headerStyle: [{
                 type: HostBinding,
                 args: ['class.igx-list__header']
@@ -53002,7 +53001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 args: ['panend']
             }] } });
 
-let NEXT_ID$a = 0;
+let NEXT_ID$b = 0;
 /**
  * igxListThumbnail is container for the List media
  * Use it to wrap anything you want to be used as a thumbnail.
@@ -53164,7 +53163,7 @@ class IgxListComponent extends IgxListBaseDirective {
          * let listId = this.list.id;
          * ```
          */
-        this.id = `igx-list-${NEXT_ID$a++}`;
+        this.id = `igx-list-${NEXT_ID$b++}`;
         /**
          * Sets/gets whether the left panning of an item is allowed.
          *
@@ -53297,6 +53296,7 @@ class IgxListComponent extends IgxListBaseDirective {
          */
         this.itemClicked = new EventEmitter();
         this._resourceStrings = CurrentResourceStrings.ListResStrings;
+        this._role = 'list';
     }
     /**
      * @hidden
@@ -53310,7 +53310,7 @@ class IgxListComponent extends IgxListBaseDirective {
         return null;
     }
     /**
-     * Gets the `role` attribute value.
+     * Gets/Sets the `role` attribute value.
      *
      * @example
      * ```typescript
@@ -53318,7 +53318,10 @@ class IgxListComponent extends IgxListBaseDirective {
      * ```
      */
     get role() {
-        return 'list';
+        return this._role;
+    }
+    set role(val) {
+        this._role = val;
     }
     /**
      * Gets a boolean indicating if the list is empty.
@@ -53416,7 +53419,7 @@ class IgxListComponent extends IgxListBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxListComponent, deps: [{ token: i0.ElementRef }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxListComponent, isStandalone: true, selector: "igx-list", inputs: { panEndTriggeringThreshold: "panEndTriggeringThreshold", id: "id", allowLeftPanning: "allowLeftPanning", allowRightPanning: "allowRightPanning", isLoading: "isLoading", resourceStrings: "resourceStrings" }, outputs: { leftPan: "leftPan", rightPan: "rightPan", startPan: "startPan", endPan: "endPan", resetPan: "resetPan", panStateChange: "panStateChange", itemClicked: "itemClicked" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-list--empty": "this.isListEmpty", "class.igx-list": "this.cssClass", "style.--component-size": "this.componentSize" } }, providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], queries: [{ propertyName: "emptyListTemplate", first: true, predicate: IgxEmptyListTemplateDirective, descendants: true, read: IgxEmptyListTemplateDirective }, { propertyName: "dataLoadingTemplate", first: true, predicate: IgxDataLoadingTemplateDirective, descendants: true, read: IgxDataLoadingTemplateDirective }, { propertyName: "listItemLeftPanningTemplate", first: true, predicate: IgxListItemLeftPanningTemplateDirective, descendants: true, read: IgxListItemLeftPanningTemplateDirective }, { propertyName: "listItemRightPanningTemplate", first: true, predicate: IgxListItemRightPanningTemplateDirective, descendants: true, read: IgxListItemRightPanningTemplateDirective }, { propertyName: "children", predicate: i0.forwardRef(function () { return IgxListItemComponent; }), descendants: true }], viewQueries: [{ propertyName: "defaultEmptyListTemplate", first: true, predicate: ["defaultEmptyList"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDataLoadingTemplate", first: true, predicate: ["defaultDataLoading"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #defaultEmptyList>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_no_items}}\n    </article>\n</ng-template>\n\n<ng-template #defaultDataLoading>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_loading}}\n    </article>\n</ng-template>\n\n<ng-container *ngIf=\"!children || children.length === 0 || isLoading\">\n    <ng-container *ngTemplateOutlet=\"template; context: context\">\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxListComponent, isStandalone: true, selector: "igx-list", inputs: { panEndTriggeringThreshold: "panEndTriggeringThreshold", id: "id", allowLeftPanning: "allowLeftPanning", allowRightPanning: "allowRightPanning", isLoading: "isLoading", resourceStrings: "resourceStrings", role: "role" }, outputs: { leftPan: "leftPan", rightPan: "rightPan", startPan: "startPan", endPan: "endPan", resetPan: "resetPan", panStateChange: "panStateChange", itemClicked: "itemClicked" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-list--empty": "this.isListEmpty", "class.igx-list": "this.cssClass", "style.--component-size": "this.componentSize" } }, providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], queries: [{ propertyName: "emptyListTemplate", first: true, predicate: IgxEmptyListTemplateDirective, descendants: true, read: IgxEmptyListTemplateDirective }, { propertyName: "dataLoadingTemplate", first: true, predicate: IgxDataLoadingTemplateDirective, descendants: true, read: IgxDataLoadingTemplateDirective }, { propertyName: "listItemLeftPanningTemplate", first: true, predicate: IgxListItemLeftPanningTemplateDirective, descendants: true, read: IgxListItemLeftPanningTemplateDirective }, { propertyName: "listItemRightPanningTemplate", first: true, predicate: IgxListItemRightPanningTemplateDirective, descendants: true, read: IgxListItemRightPanningTemplateDirective }, { propertyName: "children", predicate: i0.forwardRef(function () { return IgxListItemComponent; }), descendants: true }], viewQueries: [{ propertyName: "defaultEmptyListTemplate", first: true, predicate: ["defaultEmptyList"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDataLoadingTemplate", first: true, predicate: ["defaultDataLoading"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #defaultEmptyList>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_no_items}}\n    </article>\n</ng-template>\n\n<ng-template #defaultDataLoading>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_loading}}\n    </article>\n</ng-template>\n\n<ng-container *ngIf=\"!children || children.length === 0 || isLoading\">\n    <ng-container *ngTemplateOutlet=\"template; context: context\">\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxListComponent, decorators: [{
             type: Component,
@@ -53479,6 +53482,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }, {
+                type: Input
             }], isListEmpty: [{
                 type: HostBinding,
                 args: ['class.igx-list--empty']
@@ -53507,6 +53512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                     standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+let NEXT_ID$a = 0;
 /**
  * A component used for presenting Excel style search UI.
  */
@@ -53586,6 +53592,9 @@ class IgxExcelStyleSearchComponent {
          * @hidden @internal
          */
         this.displayedListData = [];
+        this.activeDescendant = '';
+        this._id = `igx-excel-style-search-${NEXT_ID$a++}`;
+        this._focusedItem = null;
         this.destroy$ = new Subject();
         /**
          * @hidden @internal
@@ -53678,7 +53687,6 @@ class IgxExcelStyleSearchComponent {
                 selectAllBtn.indeterminate = true;
             }
         }
-        eventArgs.checkbox.nativeCheckbox.nativeElement.blur();
     }
     /**
      * @hidden @internal
@@ -53742,6 +53750,24 @@ class IgxExcelStyleSearchComponent {
         // an igxForContainerSize = undefined, thus assigns the chunkSize to the igxForOf.length which leads to performance issues.
         return 0;
     }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value;
+    }
+    getItemId(index) {
+        return `${this.id}-item-${index}`;
+    }
+    setActiveDescendant() {
+        this.activeDescendant = this.focusedItem?.id || '';
+    }
+    get focusedItem() {
+        return this._focusedItem;
+    }
+    set focusedItem(val) {
+        this._focusedItem = val;
+    }
     /**
      * @hidden @internal
      */
@@ -53936,6 +53962,54 @@ class IgxExcelStyleSearchComponent {
         }
         this.esf.closeDropdown();
     }
+    handleKeyDown(event) {
+        if (event) {
+            const key = event.key.toLowerCase();
+            const navKeys = ['space', 'spacebar', ' ',
+                'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
+            if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            switch (key) {
+                case 'arrowup':
+                case 'up':
+                    this.onArrowUpKeyDown();
+                    break;
+                case 'arrowdown':
+                case 'down':
+                    this.onArrowDownKeyDown();
+                    break;
+                case 'home':
+                    this.onHomeKeyDown();
+                    break;
+                case 'end':
+                    this.onEndKeyDown();
+                    break;
+                case 'space':
+                case 'spacebar':
+                case ' ':
+                    this.onActionKeyDown();
+                    break;
+                default:
+                    return;
+            }
+        }
+    }
+    onFocus() {
+        const firstIndexInView = this.virtDir.state.startIndex;
+        this.focusedItem = {
+            id: this.getItemId(firstIndexInView),
+            index: firstIndexInView,
+            checked: this.virtDir.igxForOf[firstIndexInView].isSelected
+        };
+        this.setActiveDescendant();
+    }
+    onFocusOut() {
+        this.focusedItem = null;
+        this.setActiveDescendant();
+    }
     /**
      * @hidden @internal
      */
@@ -54027,18 +54101,82 @@ class IgxExcelStyleSearchComponent {
             this.searchValue = this.searchInput.value;
         }
     }
+    onArrowUpKeyDown() {
+        if (this.focusedItem && this.focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+            this.searchInput.focus();
+            this.onFocusOut();
+        }
+        else {
+            this.navigateItem(this.focusedItem ? this.focusedItem.index - 1 : 0);
+        }
+        this.setActiveDescendant();
+    }
+    onArrowDownKeyDown() {
+        const lastIndex = this.virtDir.igxForOf.length - 1;
+        if (this.focusedItem && this.focusedItem.index === lastIndex) {
+            this.cancelButton.nativeElement.focus();
+            this.onFocusOut();
+        }
+        else {
+            this.navigateItem(this.focusedItem ? this.focusedItem.index + 1 : 0);
+        }
+        this.setActiveDescendant();
+    }
+    onHomeKeyDown() {
+        this.navigateItem(0);
+        this.setActiveDescendant();
+    }
+    onEndKeyDown() {
+        this.navigateItem(this.virtDir.igxForOf.length - 1);
+        this.setActiveDescendant();
+    }
+    onActionKeyDown() {
+        const dataItem = this.displayedListData[this.focusedItem.index];
+        const args = {
+            checked: !dataItem.isSelected,
+            checkbox: this.checkboxes.find(x => x.value === dataItem)
+        };
+        this.onCheckboxChange(args);
+    }
+    navigateItem(index) {
+        if (index === -1 || index >= this.virtDir.igxForOf.length) {
+            return;
+        }
+        const direction = index > (this.focusedItem ? this.focusedItem.index : -1) ? Navigate.Down : Navigate.Up;
+        const scrollRequired = this.isIndexOutOfBounds(index, direction);
+        this.focusedItem = {
+            id: this.getItemId(index),
+            index: index,
+            checked: this.virtDir.igxForOf[index].isSelected
+        };
+        if (scrollRequired) {
+            this.virtDir.scrollTo(index);
+        }
+    }
+    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: "16.2.8", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\"\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", inputs: { id: "id" }, host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: IgxButtonDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }, { propertyName: "checkboxes", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list role=\"listbox\" [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n[attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\" \n        *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-search', standalone: true, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective], template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\"\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n" }]
+            args: [{ selector: 'igx-excel-style-search', standalone: true, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective], template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list role=\"listbox\" [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n[attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\" \n        *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: BaseFilteringComponent }, { type: PlatformUtil }]; }, propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter__menu-main']
             }], searchInput: [{
                 type: ViewChild,
                 args: ['input', { read: IgxInputDirective, static: true }]
+            }], cancelButton: [{
+                type: ViewChild,
+                args: ['cancelButton', { read: IgxButtonDirective, static: true }]
             }], list: [{
                 type: ViewChild,
                 args: ['list', { read: IgxListComponent, static: false }]
@@ -54053,10 +54191,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                 args: ['tree', { read: IgxTreeComponent, static: false }]
             }], virtDir: [{
                 type: ViewChild,
-                args: [IgxForOfDirective, { static: true }]
+                args: [IgxForOfDirective]
             }], defaultExcelStyleLoadingValuesTemplate: [{
                 type: ViewChild,
                 args: ['defaultExcelStyleLoadingValuesTemplate', { read: TemplateRef }]
+            }], checkboxes: [{
+                type: ViewChildren,
+                args: [IgxCheckboxComponent]
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
             }] } });
 
 /**
@@ -54736,7 +54882,7 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: PlatformUtil }, { token: DOCUMENT }, { token: IGX_GRID_BASE, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxGridExcelStyleFilteringComponent, isStandalone: true, selector: "igx-grid-excel-style-filtering", inputs: { column: "column", minHeight: "minHeight", maxHeight: "maxHeight" }, outputs: { loadingStart: "loadingStart", loadingEnd: "loadingEnd", initialized: "initialized", sortingChanged: "sortingChanged", columnChange: "columnChange", listDataLoaded: "listDataLoaded" }, host: { properties: { "class.igx-excel-filter": "this.defaultClass", "class.igx-excel-filter--inline": "this.inline", "style.max-height": "this.maxHeight" } }, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], queries: [{ propertyName: "excelColumnOperationsDirective", first: true, predicate: IgxExcelStyleColumnOperationsTemplateDirective, descendants: true, read: IgxExcelStyleColumnOperationsTemplateDirective }, { propertyName: "excelFilterOperationsDirective", first: true, predicate: IgxExcelStyleFilterOperationsTemplateDirective, descendants: true, read: IgxExcelStyleFilterOperationsTemplateDirective }], viewQueries: [{ propertyName: "mainDropdown", first: true, predicate: ["mainDropdown"], descendants: true, read: ElementRef }, { propertyName: "defaultExcelColumnOperations", first: true, predicate: ["defaultExcelColumnOperations"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultExcelFilterOperations", first: true, predicate: ["defaultExcelFilterOperations"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"grid?.moving\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n", dependencies: [{ kind: "component", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: ["showPinning", "showSelecting", "showHiding"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting" }, { kind: "component", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving" }, { kind: "component", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning" }, { kind: "component", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding" }, { kind: "component", type: IgxExcelStyleSelectingComponent, selector: "igx-excel-style-selecting" }, { kind: "component", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters" }, { kind: "component", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxGridExcelStyleFilteringComponent, isStandalone: true, selector: "igx-grid-excel-style-filtering", inputs: { column: "column", minHeight: "minHeight", maxHeight: "maxHeight" }, outputs: { loadingStart: "loadingStart", loadingEnd: "loadingEnd", initialized: "initialized", sortingChanged: "sortingChanged", columnChange: "columnChange", listDataLoaded: "listDataLoaded" }, host: { properties: { "class.igx-excel-filter": "this.defaultClass", "class.igx-excel-filter--inline": "this.inline", "style.max-height": "this.maxHeight" } }, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], queries: [{ propertyName: "excelColumnOperationsDirective", first: true, predicate: IgxExcelStyleColumnOperationsTemplateDirective, descendants: true, read: IgxExcelStyleColumnOperationsTemplateDirective }, { propertyName: "excelFilterOperationsDirective", first: true, predicate: IgxExcelStyleFilterOperationsTemplateDirective, descendants: true, read: IgxExcelStyleFilterOperationsTemplateDirective }], viewQueries: [{ propertyName: "mainDropdown", first: true, predicate: ["mainDropdown"], descendants: true, read: ElementRef }, { propertyName: "defaultExcelColumnOperations", first: true, predicate: ["defaultExcelColumnOperations"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultExcelFilterOperations", first: true, predicate: ["defaultExcelFilterOperations"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"grid?.moving\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n", dependencies: [{ kind: "component", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: ["showPinning", "showSelecting", "showHiding"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting" }, { kind: "component", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving" }, { kind: "component", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning" }, { kind: "component", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding" }, { kind: "component", type: IgxExcelStyleSelectingComponent, selector: "igx-excel-style-selecting" }, { kind: "component", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters" }, { kind: "component", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
             type: Component,
@@ -73248,7 +73394,7 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         dropdown.open(this._subMenuOverlaySettings);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxPivotHeaderRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                <div #pivotFilterContainer *ngIf=\"grid.showPivotConfigurationUI\"\n                     class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                     [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                     igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Filter area -->\n                    <igx-chips-area #filterArea droppable='true'>\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [displayDensity]=\"grid.displayDensity\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>\n                                {{filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon #filterIcon (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFiltersAreaDropdownClick($event)'>filter_list</igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area' (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                     (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.showPivotConfigurationUI\" class=\"igx-grid__tr-pivot\"\n                     (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                    <!-- Columns area -->\n                    <igx-chips-area #colArea droppable='true'>\n                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [displayDensity]=\"grid.displayDensity\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                <igx-icon igxPrefix>view_column</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>\n                                {{col.memberName}}\n                                <igx-icon *ngIf=\"col.sortDirection\" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.showPivotConfigurationUI\" class=\"igx-grid__tr-pivot\"\n                     (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                     (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                    <!-- Value area -->\n                    <igx-chips-area #valueArea droppable='true'>\n                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(valueArea)'></span>\n                            <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                     (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                     (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                    <igx-icon>functions</igx-icon>\n                                    <igx-icon>arrow_drop_down</igx-icon>\n                                </div>\n                                <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                 [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                 (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                <!-- Row area -->\n                <igx-chips-area #rowArea droppable='true'>\n                    <ng-container *ngIf=\"grid.showPivotConfigurationUI\">\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                        *ngIf=\"grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                    <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(rowArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [displayDensity]=\"grid.displayDensity\" [data]=\"{ pivotArea: 'row' }\"\n                                      [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                      (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                      (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, row)\">\n                                <igx-icon igxPrefix>table_rows</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>\n                                {{ row.memberName}}\n                                <igx-icon *ngIf=\"row.sortDirection\" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(rowArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                        </igx-chip>\n                    </ng-container>\n                </igx-chips-area>\n            </div>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight'>\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>\n                    <ng-template igxGridFor #headerVirtualContainer let-column\n                                 [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]=\"grid.parentVirtDir\"\n                                 [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                                 [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                        <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                               [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'\n                                               [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                               [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'\n                                               [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'\n                        >\n                        </igx-grid-header-group>\n                    </ng-template>\n                </div>\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.memberName}}\n            </igx-chip>\n        </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        <igx-chip *ngFor=\"let filter of grid.filterDimensions\" [id]=\"filter.memberName\" [draggable]=\"true\"\n            [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\">\n            <igx-icon igxPrefix>filter_list</igx-icon>\n            {{filter.memberName}}\n        </igx-chip>\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                <div #pivotFilterContainer *ngIf=\"grid.showPivotConfigurationUI\"\n                     class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                     [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                     igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Filter area -->\n                    <igx-chips-area #filterArea droppable='true'>\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [displayDensity]=\"grid.displayDensity\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>\n                                {{filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon #filterIcon (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFiltersAreaDropdownClick($event)'>filter_list</igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area' (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                     (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.showPivotConfigurationUI\" class=\"igx-grid__tr-pivot\"\n                     (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                    <!-- Columns area -->\n                    <igx-chips-area #colArea droppable='true'>\n                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [displayDensity]=\"grid.displayDensity\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                <igx-icon igxPrefix>view_column</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>\n                                {{col.memberName}}\n                                <igx-icon *ngIf=\"col.sortDirection\" igxSuffix> {{ col.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.showPivotConfigurationUI\" class=\"igx-grid__tr-pivot\"\n                     (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                     (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                    <!-- Value area -->\n                    <igx-chips-area #valueArea droppable='true'>\n                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(valueArea)'></span>\n                            <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                     (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                     (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                    <igx-icon>functions</igx-icon>\n                                    <igx-icon>arrow_drop_down</igx-icon>\n                                </div>\n                                <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                 [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                 (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                <!-- Row area -->\n                <igx-chips-area #rowArea droppable='true'>\n                    <ng-container *ngIf=\"grid.showPivotConfigurationUI\">\n                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                        *ngIf=\"grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                    <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(rowArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [displayDensity]=\"grid.displayDensity\" [data]=\"{ pivotArea: 'row' }\"\n                                      [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                      (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                      (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, row)\">\n                                <igx-icon igxPrefix>table_rows</igx-icon>\n                                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'\n                                          (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>\n                                {{ row.memberName}}\n                                <igx-icon *ngIf=\"row.sortDirection\" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'\n                                    : 'arrow_downward' }}</igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(rowArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'\n                                  [displayDensity]=\"grid.displayDensity\">\n                            {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                        </igx-chip>\n                    </ng-container>\n                </igx-chips-area>\n            </div>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight'>\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>\n                    <ng-template igxGridFor #headerVirtualContainer let-column\n                                 [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]=\"grid.parentVirtDir\"\n                                 [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                                 [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                        <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                               [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'\n                                               [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                               [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'\n                                               [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'\n                        >\n                        </igx-grid-header-group>\n                    </ng-template>\n                </div>\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.memberName}}\n            </igx-chip>\n        </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        <igx-chip *ngFor=\"let filter of grid.filterDimensions\" [id]=\"filter.memberName\" [draggable]=\"true\"\n            [displayDensity]=\"grid.displayDensity\" [removable]=\"true\" (remove)=\"filterRemoved($event)\">\n            <igx-icon igxPrefix>filter_list</igx-icon>\n            {{filter.memberName}}\n        </igx-chip>\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
@@ -76214,7 +76360,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             IgxPivotColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService
-        ], queries: [{ propertyName: "valueChipTemplateDirective", first: true, predicate: IgxPivotValueChipTemplateDirective, descendants: true, read: IgxPivotValueChipTemplateDirective }], viewQueries: [{ propertyName: "theadRow", first: true, predicate: IgxPivotHeaderRowComponent, descendants: true, static: true }, { propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "resizeLine", first: true, predicate: IgxPivotGridColumnResizerComponent, descendants: true }, { propertyName: "defaultEmptyPivotGridTemplate", first: true, predicate: ["emptyPivotGridTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, descendants: true, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "rowDimensionContentCollection", predicate: IgxPivotRowDimensionContentComponent, descendants: true }, { propertyName: "verticalRowDimScrollContainers", predicate: ["verticalRowDimScrollContainer"], descendants: true, read: IgxGridForOfDirective }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Grid table head row area -->\n<igx-pivot-header-row class=\"igx-grid-thead igx-grid-thead--pivot\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n>\n</igx-pivot-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"pivotContentCalcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridAutoTransform:pivotConfiguration:pipeTrigger\n        | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger\n        | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxGridForOfVariableSizes]=\"false\"\n            #verticalScrollContainer>\n            <ng-template\n                [igxTemplateOutlet]=\"recordTemplate\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData>\n            <igx-pivot-row [style.height.px]=\"renderedRowHeight\" [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\" isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"pivotUnpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\" [hidden]=\"pivotPinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n<igx-pivot-grid-column-resizer [restrictResizerTop]=\"theadRow.nativeElement.clientHeight\" *ngIf=\"colResizingService.showResizer\"></igx-pivot-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n\n<ng-template #headerTemplate let-column>\n    <div class=\"igx-grid__tr--header\">\n        <igx-icon [attr.draggable]=\"false\"\n                  (click)=\"toggleColumn(column)\">\n                  {{getColumnGroupExpandState(column) ? \"chevron_right\" : \"expand_more\"}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    <div tabindex=\"0\" [style.height.px]=\"totalHeight\" *ngFor=\"let dim of rowDimensions; let dimIndex = index;\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"dataView\n        | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                     let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n                     [igxForContainerSize]=\"calcHeight\"\n                     [igxForItemSize]=\"renderedRowHeight\"\n                     [igxForSizePropName]=\"'height'\"\n                     #verticalRowDimScrollContainer>\n            <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n                                             [dimension]=\"rowData.dimensions[dimIndex]\"\n                                             [rootDimension]=\"dim\"\n                                             [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                                             [rowIndex]=\"rowIndex\" [rowData]=\"rowData\"\n                                             [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(dim)\">\n            </igx-pivot-row-dimension-content>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" *ngIf=\"columnDimensions.length > 0 || values.length > 0\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n            [dimension]=\"emptyRowDimension\"\n            [rootDimension]=\"emptyRowDimension\"\n            [rowIndex]=\"0\" [rowData]=\"dataView[0]\"\n            [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n        </igx-pivot-row-dimension-content>\n    </div>\n</ng-template>\n\n<ng-template #emptyPivotGridTemplate>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{resourceStrings.igx_grid_pivot_empty_message}}</span>\n    </span>\n</ng-template>\n\n<div [hidden]=\"true\">\n    <igx-grid-excel-style-filtering [maxHeight]=\"excelStyleFilterMaxHeight\" [minHeight]=\"excelStyleFilterMinHeight\">\n        <div igxExcelStyleColumnOperations [hidden]=\"true\"></div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxPivotHeaderRowComponent, selector: "igx-pivot-header-row" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxPivotRowComponent, selector: "igx-pivot-row", inputs: ["selected", "data"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPivotGridColumnResizerComponent, selector: "igx-pivot-grid-column-resizer" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: ["rowIndex", "dimension", "rootDimension", "rowData"] }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxPivotRowPipe, name: "pivotGridRow" }, { kind: "pipe", type: IgxPivotRowExpansionPipe, name: "pivotGridRowExpansion" }, { kind: "pipe", type: IgxPivotAutoTransform, name: "pivotGridAutoTransform" }, { kind: "pipe", type: IgxPivotColumnPipe, name: "pivotGridColumn" }, { kind: "pipe", type: IgxPivotGridFilterPipe, name: "pivotGridFilter" }, { kind: "pipe", type: IgxPivotGridSortingPipe, name: "pivotGridSort" }, { kind: "pipe", type: IgxPivotGridColumnSortingPipe, name: "pivotGridColumnSort" }, { kind: "pipe", type: IgxPivotCellMergingPipe, name: "pivotGridCellMerging" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "valueChipTemplateDirective", first: true, predicate: IgxPivotValueChipTemplateDirective, descendants: true, read: IgxPivotValueChipTemplateDirective }], viewQueries: [{ propertyName: "theadRow", first: true, predicate: IgxPivotHeaderRowComponent, descendants: true, static: true }, { propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "resizeLine", first: true, predicate: IgxPivotGridColumnResizerComponent, descendants: true }, { propertyName: "defaultEmptyPivotGridTemplate", first: true, predicate: ["emptyPivotGridTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, descendants: true, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "rowDimensionContentCollection", predicate: IgxPivotRowDimensionContentComponent, descendants: true }, { propertyName: "verticalRowDimScrollContainers", predicate: ["verticalRowDimScrollContainer"], descendants: true, read: IgxGridForOfDirective }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Grid table head row area -->\n<igx-pivot-header-row class=\"igx-grid-thead igx-grid-thead--pivot\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n>\n</igx-pivot-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <ng-container *ngTemplateOutlet=\"rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this\"></ng-container>\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"pivotContentCalcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger\n        | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger\n        | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridColumn:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions\n        | pivotGridAutoTransform:pivotConfiguration:pipeTrigger\n        | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger\n        | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxGridForOfVariableSizes]=\"false\"\n            #verticalScrollContainer>\n            <ng-template\n                [igxTemplateOutlet]=\"recordTemplate\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData>\n            <igx-pivot-row [style.height.px]=\"renderedRowHeight\" [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-pivot-row>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\" isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"pivotUnpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pivotPinnedWidth\" [style.min-width.px]=\"pivotPinnedWidth\" [hidden]=\"pivotPinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" #tfoot>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n    </span>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n<igx-pivot-grid-column-resizer [restrictResizerTop]=\"theadRow.nativeElement.clientHeight\" *ngIf=\"colResizingService.showResizer\"></igx-pivot-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n\n<ng-template #headerTemplate let-column>\n    <div class=\"igx-grid__tr--header\">\n        <igx-icon [attr.draggable]=\"false\"\n                  (click)=\"toggleColumn(column)\">\n                  {{getColumnGroupExpandState(column) ? \"chevron_right\" : \"expand_more\"}}</igx-icon>\n        {{column.header}}\n    </div>\n</ng-template>\n\n<ng-template #defaultRowDimensionsTemplate>\n    <div tabindex=\"0\" [style.height.px]=\"totalHeight\" *ngFor=\"let dim of rowDimensions; let dimIndex = index;\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"dataView\n        | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger\"\n                     let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n                     [igxForContainerSize]=\"calcHeight\"\n                     [igxForItemSize]=\"renderedRowHeight\"\n                     [igxForSizePropName]=\"'height'\"\n                     #verticalRowDimScrollContainer>\n            <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n                                             [dimension]=\"rowData.dimensions[dimIndex]\"\n                                             [rootDimension]=\"dim\"\n                                             [style.height.px]=\"renderedRowHeight * (rowData.rowSpan || 1)\"\n                                             [rowIndex]=\"rowIndex\" [rowData]=\"rowData\"\n                                             [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(dim)\">\n            </igx-pivot-row-dimension-content>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #emptyRowDimensionsTemplate>\n    <div tabindex=\"0\" *ngIf=\"columnDimensions.length > 0 || values.length > 0\" #rowDimensionContainer role=\"rowgroup\" class=\"igx-grid__tbody-pivot-dimension\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\">\n        <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\" [grid]=\"this\"\n            [dimension]=\"emptyRowDimension\"\n            [rootDimension]=\"emptyRowDimension\"\n            [rowIndex]=\"0\" [rowData]=\"dataView[0]\"\n            [density]=\"displayDensity\" [width]=\"rowDimensionWidthToPixels(emptyRowDimension)\">\n        </igx-pivot-row-dimension-content>\n    </div>\n</ng-template>\n\n<ng-template #emptyPivotGridTemplate>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{resourceStrings.igx_grid_pivot_empty_message}}</span>\n    </span>\n</ng-template>\n\n<div [hidden]=\"true\">\n    <igx-grid-excel-style-filtering [maxHeight]=\"excelStyleFilterMaxHeight\" [minHeight]=\"excelStyleFilterMinHeight\">\n        <div igxExcelStyleColumnOperations [hidden]=\"true\"></div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxPivotHeaderRowComponent, selector: "igx-pivot-header-row" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxPivotRowComponent, selector: "igx-pivot-row", inputs: ["selected", "data"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPivotGridColumnResizerComponent, selector: "igx-pivot-grid-column-resizer" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxPivotRowDimensionContentComponent, selector: "igx-pivot-row-dimension-content", inputs: ["rowIndex", "dimension", "rootDimension", "rowData"] }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxPivotRowPipe, name: "pivotGridRow" }, { kind: "pipe", type: IgxPivotRowExpansionPipe, name: "pivotGridRowExpansion" }, { kind: "pipe", type: IgxPivotAutoTransform, name: "pivotGridAutoTransform" }, { kind: "pipe", type: IgxPivotColumnPipe, name: "pivotGridColumn" }, { kind: "pipe", type: IgxPivotGridFilterPipe, name: "pivotGridFilter" }, { kind: "pipe", type: IgxPivotGridSortingPipe, name: "pivotGridSort" }, { kind: "pipe", type: IgxPivotGridColumnSortingPipe, name: "pivotGridColumnSort" }, { kind: "pipe", type: IgxPivotCellMergingPipe, name: "pivotGridCellMerging" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     WatchChanges()
@@ -76722,7 +76868,8 @@ class IgxGridStateDirective {
                         selectable: c.selectable,
                         parent: c.parent ? c.parent.header : null,
                         columnGroup: c.columnGroup,
-                        disableHiding: c.disableHiding
+                        disableHiding: c.disableHiding,
+                        disablePinning: c.disablePinning
                     }));
                     return { columns: gridColumns };
                 },
@@ -78162,7 +78309,7 @@ class IgxPivotDataSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxPivotDataSelectorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxPivotDataSelectorComponent, isStandalone: true, selector: "igx-pivot-data-selector", inputs: { columnsExpanded: "columnsExpanded", rowsExpanded: "rowsExpanded", filtersExpanded: "filtersExpanded", valuesExpanded: "valuesExpanded", grid: "grid" }, outputs: { columnsExpandedChange: "columnsExpandedChange", rowsExpandedChange: "rowsExpandedChange", filtersExpandedChange: "filtersExpandedChange", valuesExpandedChange: "valuesExpandedChange" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n    <igx-input-group type=\"box\" [displayDensity]=\"displayDensity\">\n        <igx-icon igxPrefix>search</igx-icon>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            placeholder=\"Search\"\n            autocomplete=\"off\"\n        />\n    </igx-input-group>\n    <igx-list [displayDensity]=\"displayDensity\">\n        <igx-list-item\n            *ngFor=\"\n                let item of dims\n                    | filterPivotItems: input.value:grid?.pipeTrigger\n            \"\n            [id]=\"item.memberName\"\n        >\n            <igx-checkbox\n                [aria-labelledby]=\"item.memberName\"\n                [disableRipple]=\"true\"\n                [checked]=\"item.enabled\"\n                (click)=\"toggleItem(item)\"\n            ></igx-checkbox>\n            <span>{{ item.memberName }}</span>\n        </igx-list-item>\n        <igx-list-item\n            *ngFor=\"\n                let item of values\n                    | filterPivotItems: input.value:grid?.pipeTrigger\n            \"\n            [id]=\"item.member\"\n        >\n            <igx-checkbox\n                [aria-labelledby]=\"item.member\"\n                [disableRipple]=\"true\"\n                [checked]=\"item.enabled\"\n                (click)=\"toggleItem(item)\"\n            ></igx-checkbox>\n            <span>{{ item.displayName || item.member }}</span>\n        </igx-list-item>\n    </igx-list>\n</div>\n\n<igx-accordion>\n    <igx-expansion-panel\n        *ngFor=\"let panel of _panels\"\n        [animationSettings]=\"animationSettings\"\n        [collapsed]=\"getPanelCollapsed(panel.type)\"\n        (collapsedChange)=\"onCollapseChange($event, panel.type)\"\n    >\n        <igx-expansion-panel-header\n            iconPosition=\"left\"\n            [disabled]=\"false\"\n            igxDrop\n            (enter)=\"onPanelEntry($event, panel.name)\"\n            (dropped)=\"onItemDropped($event, panel.type)\"\n        >\n            <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n                <h6 class=\"igx-pivot-data-selector__header-title\">\n                    {{ grid?.resourceStrings[panel.i18n] }}\n                </h6>\n                <div class=\"igx-pivot-data-selector__header-extra\">\n                    <igx-icon>{{ panel.icon }}</igx-icon>\n                    <igx-chip>{{ this.grid ? this.grid[panel.dataKey].length : 0 }}</igx-chip>\n                </div>\n            </igx-expansion-panel-title>\n        </igx-expansion-panel-header>\n        <igx-expansion-panel-body\n            igxDrop\n            (enter)=\"onPanelEntry($event, panel.name)\"\n            (dropped)=\"onItemDropped($event, panel.type)\"\n        >\n            <igx-list\n                *ngIf=\"this.grid && this.grid[panel.dataKey].length > 0\"\n                [displayDensity]=\"displayDensity\"\n            >\n                <igx-list-item\n                    igxDrop\n                    [igxDrag]=\"{ gridID: grid.id, selectorChannels: panel.dragChannels }\"\n                    [ghostTemplate]=\"itemGhost\"\n                    (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n                    (over)=\"onItemDragOver($event)\"\n                    (leave)=\"onItemDragLeave($event)\"\n                    (dragMove)=\"onItemDragMove($event)\"\n                    (dragEnd)=\"onItemDragEnd($event)\"\n                    (dropped)=\"onItemDropped($event, panel.type)\"\n                    *ngFor=\"\n                        let item of this.grid[panel.dataKey];\n                        let index\n                    \"\n                    [id]=\"item[panel.itemKey]\"\n                >\n                    <div class=\"igx-pivot-data-selector__item\">\n                        <div\n                            class=\"igx-pivot-data-selector__item-start\"\n                            (click)=\"onItemSort($event, item, panel.type)\"\n                            [class.igx-pivot-data-selector__action-sort]=\"\n                                panel.sortable\n                            \"\n                        >\n                            <div class=\"igx-pivot-data-selector__item-text\">\n                                <span *ngIf=\"panel.type === null\">{{\n                                    item.aggregate.key\n                                }}</span>\n                                <span *ngIf=\"panel.type === null\">(</span>\n                                <span>{{ item[panel.displayKey] || item[panel.itemKey] }}</span>\n                                <span *ngIf=\"panel.type === null\">)</span>\n                            </div>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-sort\"\n                                *ngIf=\"panel.sortable && item.sortDirection\"\n                            >\n                                {{\n                                    item.sortDirection < 2\n                                        ? \"arrow_upward\"\n                                        : \"arrow_downward\"\n                                }}\n                            </igx-icon>\n                        </div>\n                        <div class=\"igx-pivot-data-selector__item-end\">\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-filter\"\n                                *ngIf=\"panel.type !== null\"\n                                (pointerdown)=\"\n                                    onFilteringIconPointerDown($event)\n                                \"\n                                (click)=\"onFilteringIconClick($event, item)\"\n                                >filter_list\n                            </igx-icon>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-summary\"\n                                *ngIf=\"panel.type === null\"\n                                (click)=\"onSummaryClick($event, item, dropdown)\"\n                                [igxDropDownItemNavigation]=\"dropdown\"\n                            >\n                                functions\n                            </igx-icon>\n                            <igx-icon\n                                igxDragHandle\n                                class=\"igx-pivot-data-selector__action-move\"\n                                *ngIf=\"panel.dragChannels.length > 0\"\n                                >drag_handle</igx-icon\n                            >\n                        </div>\n                    </div>\n                </igx-list-item>\n            </igx-list>\n            <div\n                class=\"igx-pivot-data-selector__empty\"\n                *ngIf=\"this.grid && this.grid[panel.dataKey].length === 0\"\n            >\n                {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n            </div>\n        </igx-expansion-panel-body>\n    </igx-expansion-panel>\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n    <igx-drop-down-item\n        *ngFor=\"let item of aggregateList\"\n        [selected]=\"isSelected(item)\"\n        [value]=\"item\"\n    >\n        {{ item.label }}\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #itemGhost>\n    <div\n        class=\"igx-pivot-data-selector__item-ghost\"\n        [style.width.px]=\"ghostWidth\"\n        [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n    >\n        <div class=\"igx-pivot-data-selector__item-ghost-text\">\n            <igx-icon>unfold_more</igx-icon>\n            <span>{{ ghostText }}</span>\n        </div>\n        <igx-icon>drag_handle</igx-icon>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxAccordionComponent, selector: "igx-accordion", inputs: ["id", "animationSettings", "singleBranchExpand"], outputs: ["panelExpanding", "panelExpanded", "panelCollapsing", "panelCollapsed"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "pipe", type: IgxFilterPivotItemsPipe, name: "filterPivotItems" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxPivotDataSelectorComponent, isStandalone: true, selector: "igx-pivot-data-selector", inputs: { columnsExpanded: "columnsExpanded", rowsExpanded: "rowsExpanded", filtersExpanded: "filtersExpanded", valuesExpanded: "valuesExpanded", grid: "grid" }, outputs: { columnsExpandedChange: "columnsExpandedChange", rowsExpandedChange: "rowsExpandedChange", filtersExpandedChange: "filtersExpandedChange", valuesExpandedChange: "valuesExpandedChange" }, host: { properties: { "class.igx-pivot-data-selector": "this.cssClass" } }, ngImport: i0, template: "<div class=\"igx-pivot-data-selector__filter\">\n    <igx-input-group type=\"box\" [displayDensity]=\"displayDensity\">\n        <igx-icon igxPrefix>search</igx-icon>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            placeholder=\"Search\"\n            autocomplete=\"off\"\n        />\n    </igx-input-group>\n    <igx-list [displayDensity]=\"displayDensity\">\n        <igx-list-item\n            *ngFor=\"\n                let item of dims\n                    | filterPivotItems: input.value:grid?.pipeTrigger\n            \"\n            [id]=\"item.memberName\"\n        >\n            <igx-checkbox\n                [aria-labelledby]=\"item.memberName\"\n                [disableRipple]=\"true\"\n                [checked]=\"item.enabled\"\n                (click)=\"toggleItem(item)\"\n            ></igx-checkbox>\n            <span>{{ item.memberName }}</span>\n        </igx-list-item>\n        <igx-list-item\n            *ngFor=\"\n                let item of values\n                    | filterPivotItems: input.value:grid?.pipeTrigger\n            \"\n            [id]=\"item.member\"\n        >\n            <igx-checkbox\n                [aria-labelledby]=\"item.member\"\n                [disableRipple]=\"true\"\n                [checked]=\"item.enabled\"\n                (click)=\"toggleItem(item)\"\n            ></igx-checkbox>\n            <span>{{ item.displayName || item.member }}</span>\n        </igx-list-item>\n    </igx-list>\n</div>\n\n<igx-accordion>\n    <igx-expansion-panel\n        *ngFor=\"let panel of _panels\"\n        [animationSettings]=\"animationSettings\"\n        [collapsed]=\"getPanelCollapsed(panel.type)\"\n        (collapsedChange)=\"onCollapseChange($event, panel.type)\"\n    >\n        <igx-expansion-panel-header\n            iconPosition=\"left\"\n            [disabled]=\"false\"\n            igxDrop\n            (enter)=\"onPanelEntry($event, panel.name)\"\n            (dropped)=\"onItemDropped($event, panel.type)\"\n        >\n            <igx-expansion-panel-title class=\"igx-pivot-data-selector__header\">\n                <h6 class=\"igx-pivot-data-selector__header-title\">\n                    {{ grid?.resourceStrings[panel.i18n] }}\n                </h6>\n                <div class=\"igx-pivot-data-selector__header-extra\">\n                    <igx-icon>{{ panel.icon }}</igx-icon>\n                    <igx-chip>{{ this.grid ? this.grid[panel.dataKey].length : 0 }}</igx-chip>\n                </div>\n            </igx-expansion-panel-title>\n        </igx-expansion-panel-header>\n        <igx-expansion-panel-body\n            igxDrop\n            (enter)=\"onPanelEntry($event, panel.name)\"\n            (dropped)=\"onItemDropped($event, panel.type)\"\n        >\n            <igx-list\n                *ngIf=\"this.grid && this.grid[panel.dataKey].length > 0\"\n                [displayDensity]=\"displayDensity\"\n            >\n                <igx-list-item\n                    igxDrop\n                    [igxDrag]=\"{ gridID: grid.id, selectorChannels: panel.dragChannels }\"\n                    [ghostTemplate]=\"itemGhost\"\n                    (ghostCreate)=\"ghostCreated($event, item[panel.itemKey])\"\n                    (over)=\"onItemDragOver($event)\"\n                    (leave)=\"onItemDragLeave($event)\"\n                    (dragMove)=\"onItemDragMove($event)\"\n                    (dragEnd)=\"onItemDragEnd($event)\"\n                    (dropped)=\"onItemDropped($event, panel.type)\"\n                    *ngFor=\"\n                        let item of this.grid[panel.dataKey];\n                        let index\n                    \"\n                    [id]=\"item[panel.itemKey]\"\n                >\n                    <div class=\"igx-pivot-data-selector__item\">\n                        <div\n                            class=\"igx-pivot-data-selector__item-start\"\n                            (click)=\"onItemSort($event, item, panel.type)\"\n                            [class.igx-pivot-data-selector__action-sort]=\"\n                                panel.sortable\n                            \"\n                        >\n                            <div class=\"igx-pivot-data-selector__item-text\">\n                                <span *ngIf=\"panel.type === null\">{{\n                                    item.aggregate.key\n                                }}</span>\n                                <span *ngIf=\"panel.type === null\">(</span>\n                                <span>{{ item[panel.displayKey] || item[panel.itemKey] }}</span>\n                                <span *ngIf=\"panel.type === null\">)</span>\n                            </div>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-sort\"\n                                *ngIf=\"panel.sortable && item.sortDirection\"\n                            >\n                                {{\n                                    item.sortDirection < 2\n                                        ? \"arrow_upward\"\n                                        : \"arrow_downward\"\n                                }}\n                            </igx-icon>\n                        </div>\n                        <div class=\"igx-pivot-data-selector__item-end\">\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-filter\"\n                                *ngIf=\"panel.type !== null\"\n                                (pointerdown)=\"\n                                    onFilteringIconPointerDown($event)\n                                \"\n                                (click)=\"onFilteringIconClick($event, item)\"\n                                >filter_list\n                            </igx-icon>\n                            <igx-icon\n                                class=\"igx-pivot-data-selector__action-summary\"\n                                *ngIf=\"panel.type === null\"\n                                (click)=\"onSummaryClick($event, item, dropdown)\"\n                                [igxDropDownItemNavigation]=\"dropdown\"\n                            >\n                                functions\n                            </igx-icon>\n                            <igx-icon\n                                igxDragHandle\n                                class=\"igx-pivot-data-selector__action-move\"\n                                *ngIf=\"panel.dragChannels.length > 0\"\n                                >drag_handle</igx-icon\n                            >\n                        </div>\n                    </div>\n                </igx-list-item>\n            </igx-list>\n            <div\n                class=\"igx-pivot-data-selector__empty\"\n                *ngIf=\"this.grid && this.grid[panel.dataKey].length === 0\"\n            >\n                {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}\n            </div>\n        </igx-expansion-panel-body>\n    </igx-expansion-panel>\n</igx-accordion>\n\n<igx-drop-down #dropdown (selectionChanging)=\"onAggregationChange($event)\">\n    <igx-drop-down-item\n        *ngFor=\"let item of aggregateList\"\n        [selected]=\"isSelected(item)\"\n        [value]=\"item\"\n    >\n        {{ item.label }}\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #itemGhost>\n    <div\n        class=\"igx-pivot-data-selector__item-ghost\"\n        [style.width.px]=\"ghostWidth\"\n        [class.igx-pivot-data-selector__item-ghost--no-drop]=\"!dropAllowed\"\n    >\n        <div class=\"igx-pivot-data-selector__item-ghost-text\">\n            <igx-icon>unfold_more</igx-icon>\n            <span>{{ ghostText }}</span>\n        </div>\n        <igx-icon>drag_handle</igx-icon>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxAccordionComponent, selector: "igx-accordion", inputs: ["id", "animationSettings", "singleBranchExpand"], outputs: ["panelExpanding", "panelExpanded", "panelCollapsing", "panelCollapsed"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelHeaderComponent, selector: "igx-expansion-panel-header", inputs: ["lv", "role", "iconPosition", "disabled"], outputs: ["interaction"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxExpansionPanelTitleDirective, selector: "igx-expansion-panel-title" }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "pipe", type: IgxFilterPivotItemsPipe, name: "filterPivotItems" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxPivotDataSelectorComponent, decorators: [{
             type: Component,