igniteui-angular 16.1.4 → 16.1.6

package/fesm2022/igniteui-angular.mjs

@@ -7154,7 +7154,7 @@ class IgxOverlayService {
             // TODO: update attach
         }
         this.updateSize(info);
-        info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, document, true, info.settings.target);
+        info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
         this.addModalClasses(info);
         if (info.settings.positionStrategy.settings.openAnimation) {
             // TODO: should we build players again. This was already done in attach!!!
@@ -9827,6 +9827,7 @@ const GridResourceStringsEN = {
     igx_grid_excel_currency_filter: 'Currency filter',
     igx_grid_excel_custom_filter: 'Custom filter...',
     igx_grid_excel_no_matches: 'No matches',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Advanced Filtering',
     igx_grid_advanced_filter_and_group: '"And" Group',
     igx_grid_advanced_filter_or_group: '"Or" Group',
@@ -15361,6 +15362,9 @@ class IgxForOfDirective {
      * Clears focus inside the virtualized container on small scroll swaps.
      */
     scrollFocus(node) {
+        if (!node) {
+            return;
+        }
         const document = node.getRootNode();
         const activeElement = document.activeElement;
         // Remove focus in case the the active element is inside the view container.
@@ -29761,26 +29765,22 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
      */
     _clickHandler(index) {
         const button = this.buttons[index];
-        const args = { cancel: false, owner: this, button, index };
+        const args = { owner: this, button, index };
         if (this.selectionMode !== 'multi') {
             this.buttons.forEach((b, i) => {
                 if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                    this.deselected.emit({ cancel: false, owner: this, button: b, index: i });
+                    this.deselected.emit({ owner: this, button: b, index: i });
                 }
             });
         }
         if (this.selectedIndexes.indexOf(index) === -1) {
+            this.selectButton(index);
             this.selected.emit(args);
-            if (!args.cancel) {
-                this.selectButton(index);
-            }
         }
         else {
             if (this.selectionMode !== 'singleRequired') {
+                this.deselectButton(index);
                 this.deselected.emit(args);
-                if (!args.cancel) {
-                    this.deselectButton(index);
-                }
             }
         }
     }
@@ -30390,7 +30390,7 @@ class Calendar {
         // if the week number is greater than week 52
         if (weekNumber > 52) {
             // next year
-            let nextYear = new Date(date.getFullYear() + 1, 0, 1);
+            const nextYear = new Date(date.getFullYear() + 1, 0, 1);
             // first day of the next year
             let nextYearFirstDay = nextYear.getDay() - weekStart;
             nextYearFirstDay = nextYearFirstDay >= 0 ? nextYearFirstDay : nextYearFirstDay + 7;
@@ -53808,6 +53808,7 @@ class IgxExcelStyleSearchComponent {
                 }
             }
             selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all;
+            this.matchesCount = this.displayedListData.length - 1;
             this.cdr.detectChanges();
             return;
         }
@@ -53837,6 +53838,12 @@ class IgxExcelStyleSearchComponent {
                 this.displayedListData = [];
             }
         }
+        if (this.displayedListData.length > 2) {
+            this.matchesCount = this.displayedListData.length - 2;
+        }
+        else {
+            this.matchesCount = 0;
+        }
         selectAllBtn.indeterminate = false;
         selectAllBtn.isSelected = true;
         selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all_search_results;
@@ -54021,11 +54028,11 @@ class IgxExcelStyleSearchComponent {
         }
     }
     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</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", 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"] }] }); }
 }
 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</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 [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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: BaseFilteringComponent }, { type: PlatformUtil }]; }, propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter__menu-main']
@@ -59092,6 +59099,12 @@ class IgxGridHeaderRowComponent {
     ngDoCheck() {
         this.cdr.markForCheck();
     }
+    /**
+     * @hidden @internal
+     */
+    scroll(event) {
+        this.grid.preventHeaderScroll(event);
+    }
     headerRowSelection(event) {
         if (!this.grid.isMultiRowSelectionEnabled) {
             return;
@@ -59104,11 +59117,11 @@ class IgxGridHeaderRowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [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\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { 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: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [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\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { 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: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', standalone: true, imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [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\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', standalone: true, imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\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\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [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\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { grid: [{
                 type: Input
             }], pinnedColumnCollection: [{
@@ -62865,7 +62878,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     set sortingOptions(value) {
-        this.clearSort();
+        if (!this._init) {
+            // clear sort only if option is changed runtime. No need to clear on initial load.
+            this.clearSort();
+        }
         this._sortingOptions = Object.assign(this._sortingOptions, value);
     }
     get sortingOptions() {
@@ -67760,13 +67776,13 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                 }
                 const cells = this._dataRowList.map(x => x.cells.find(c => c.column === col));
                 cells.forEach((cell) => cellsContentWidths.push(cell?.nativeElement?.offsetWidth || 0));
+                const header = this.headerCellList.find(x => x.column === col);
+                cellsContentWidths.push(header.nativeElement.offsetWidth);
                 const max = Math.max(...cellsContentWidths);
                 if (max === 0) {
                     // cells not in DOM yet...
                     continue;
                 }
-                const header = this.headerCellList.find(x => x.column === col);
-                cellsContentWidths.push(header.nativeElement.offsetWidth);
                 let maxSize = Math.ceil(Math.max(...cellsContentWidths)) + 1;
                 if (col.maxWidth && maxSize > col.maxWidthPx) {
                     maxSize = col.maxWidthPx;
@@ -73869,7 +73885,7 @@ class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowComponent {
     }
     extractFromDimension(dim, rowData) {
         const field = dim.memberName;
-        const header = rowData.dimensionValues.get(field);
+        const header = rowData?.dimensionValues.get(field);
         const col = this._createColComponent(field, header, dim);
         return col;
     }