igniteui-angular 18.0.3 → 18.0.5

package/fesm2022/igniteui-angular.mjs

@@ -1435,8 +1435,8 @@ class FilteringExpressionsTree {
             if ((expr instanceof FilteringExpressionsTree)) {
                 return this.isFilteringExpressionsTreeForColumn(expr, fieldName);
             }
-            else {
-                return expr.fieldName === fieldName;
+            else if (expr.fieldName === fieldName) {
+                return true;
             }
         }
         return false;
@@ -3413,7 +3413,7 @@ class ExcelStrings {
     }
     static getStyles() {
         return ExcelStrings.XML_STRING +
-            '<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac x16r2" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:x16r2="http://schemas.microsoft.com/office/spreadsheetml/2015/02/main"><numFmts count="5"><numFmt numFmtId="164" formatCode="&quot;$&quot;#,##0.00"/><numFmt numFmtId="165" formatCode="[$£-809]#,##0.00"/><numFmt numFmtId="166" formatCode="[$¥-804]#,##0.00"/><numFmt numFmtId="167" formatCode="#,##0.00\ [$€-1]"/><numFmt numFmtId="168" formatCode="[$¥-411]#,##0.00"/></numFmts><fonts count="2" x14ac:knownFonts="1"><font><sz val="11"/><color theme="1"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font><font><sz val="11"/><color rgb="FFB7B7B7"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font></fonts><fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor rgb="FF0D1822"/><bgColor indexed="64"/></patternFill></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="13"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="14" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="0" fontId="1" fillId="2" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyAlignment="1"><alignment horizontal="center" vertical="center"/></xf><xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="165" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="166" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="167" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="168" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="21" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="22" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="10" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/></cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles><dxfs count="0"/><tableStyles count="0" defaultTableStyle="TableStyleMedium2" defaultPivotStyle="PivotStyleLight16"/><extLst><ext uri="{EB79DEF2-80B8-43e5-95BD-54CBDDF9020C}" xmlns:x14="http://schemas.microsoft.com/office/spreadsheetml/2009/9/main"><x14:slicerStyles defaultSlicerStyle="SlicerStyleLight1"/></ext><ext uri="{9260A510-F301-46a8-8635-F512D64BE5F5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:timelineStyles defaultTimelineStyle="TimeSlicerStyleLight1"/></ext></extLst></styleSheet>';
+            '<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac x16r2" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:x16r2="http://schemas.microsoft.com/office/spreadsheetml/2015/02/main"><numFmts count="5"><numFmt numFmtId="164" formatCode="&quot;$&quot;#,##0.00"/><numFmt numFmtId="165" formatCode="[$£-809]#,##0.00"/><numFmt numFmtId="166" formatCode="[$¥-804]#,##0.00"/><numFmt numFmtId="167" formatCode="#,##0.00\ [$€-1]"/><numFmt numFmtId="168" formatCode="[$¥-411]#,##0.00"/></numFmts><fonts count="2" x14ac:knownFonts="1"><font><sz val="11"/><color theme="1"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font><font><b/><sz val="11"/><color theme="0"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font></fonts><fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor theme="4"/><bgColor indexed="64"/></patternFill></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="13"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="14" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="0" fontId="1" fillId="2" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyAlignment="1"><alignment horizontal="center" vertical="center"/></xf><xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="165" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="166" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="167" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="168" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="21" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="22" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="10" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/></cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles><dxfs count="0"/><tableStyles count="0" defaultTableStyle="TableStyleMedium2" defaultPivotStyle="PivotStyleLight16"/><extLst><ext uri="{EB79DEF2-80B8-43e5-95BD-54CBDDF9020C}" xmlns:x14="http://schemas.microsoft.com/office/spreadsheetml/2009/9/main"><x14:slicerStyles defaultSlicerStyle="SlicerStyleLight1"/></ext><ext uri="{9260A510-F301-46a8-8635-F512D64BE5F5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:timelineStyles defaultTimelineStyle="TimeSlicerStyleLight1"/></ext></extLst></styleSheet>';
     }
     static getWorkbook(worksheetName) {
         return ExcelStrings.XML_STRING + `<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x15" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><fileVersion appName="xl" lastEdited="6" lowestEdited="6" rupBuild="14420"/><workbookPr filterPrivacy="1" defaultThemeVersion="164011"/><bookViews><workbookView xWindow="0" yWindow="0" windowWidth="22260" windowHeight="12645"/></bookViews><sheets><sheet name="${worksheetName}" sheetId="1" r:id="rId1"/></sheets><calcPr calcId="162913"/><extLst><ext uri="{140A7094-0E35-4892-8432-C4D2E57EDEB5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:workbookPr chartTrackingRefBase="1"/></ext></extLst></workbook>`;
@@ -7323,7 +7323,7 @@ class IgxDropDownBaseDirective {
      * @param newSelection the item selected
      * @param event the event that triggered the call
      */
-    selectItem(newSelection, event) {
+    selectItem(newSelection, event, emit = true) {
         this.selectionChanging.emit({
             newSelection,
             oldSelection: null,
@@ -11104,6 +11104,10 @@ class IgxDragDirective {
     }
     /** Method setting transformation to the base draggable element. */
     setTransformXY(x, y) {
+        if (x === 0 && y === 0) {
+            this.element.nativeElement.style.transform = '';
+            return;
+        }
         this.element.nativeElement.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px)';
     }
     /**
@@ -13321,13 +13325,13 @@ class IgxForOfDirective extends IgxForOfToken {
                 const currDiff = newVal - oldVal;
                 diffs.push(currDiff);
                 totalDiff += currDiff;
-                this.sizesCache[index + 1] += totalDiff;
+                this.sizesCache[index + 1] = (this.sizesCache[index] || 0) + newVal;
             }
         }
         // update cache
         if (Math.abs(totalDiff) > 0) {
             for (let j = this.state.startIndex + this.state.chunkSize + 1; j < this.sizesCache.length; j++) {
-                this.sizesCache[j] += totalDiff;
+                this.sizesCache[j] = (this.sizesCache[j] || 0) + totalDiff;
             }
             // update scrBar heights/widths
             const reducer = (acc, val) => acc + val;
@@ -22392,12 +22396,12 @@ class IgxDropDownItemBaseDirective {
         if (this._selected) {
             const dropDownSelectedItem = this.dropDown.selectedItem;
             if (!dropDownSelectedItem) {
-                this.dropDown.selectItem(this);
+                this.dropDown.selectItem(this, undefined, false);
             }
             else if (this.hasIndex
                 ? this._index !== dropDownSelectedItem.index || this.value !== dropDownSelectedItem.value :
                 this !== dropDownSelectedItem) {
-                this.dropDown.selectItem(this);
+                this.dropDown.selectItem(this, undefined, false);
             }
         }
     }
@@ -22741,9 +22745,20 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * ```
      */
     open(overlaySettings) {
-        this.toggleDirective.open(overlaySettings);
+        const settings = overlaySettings || this.getDefaultOverlaySettings();
+        this.toggleDirective.open(settings);
         this.updateScrollPosition();
     }
+    /**
+   * @hidden @internal
+   */
+    getDefaultOverlaySettings() {
+        return {
+            closeOnOutsideClick: true,
+            modal: false,
+            positionStrategy: new ConnectedPositioningStrategy()
+        };
+    }
     /**
      * Closes the dropdown
      *
@@ -22983,14 +22998,15 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
         }
     }
     /**
-     * Handles the `selectionChanging` emit and the drop down toggle when selection changes
-     *
-     * @hidden
-     * @internal
-     * @param newSelection
-     * @param event
-     */
-    selectItem(newSelection, event) {
+ * Handles the `selectionChanging` emit and the drop down toggle when selection changes
+ *
+ * @hidden
+ * @internal
+ * @param newSelection
+ * @param event
+ * @param emit
+ */
+    selectItem(newSelection, event, emit = true) {
         const oldSelection = this.selectedItem;
         if (!newSelection) {
             newSelection = this.focusedItem;
@@ -23008,7 +23024,9 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
             };
         }
         const args = { oldSelection, newSelection, cancel: false, owner: this };
-        this.selectionChanging.emit(args);
+        if (emit) {
+            this.selectionChanging.emit(args);
+        }
         if (!args.cancel) {
             if (this.isSelectionValid(args.newSelection)) {
                 this.selection.set(this.id, new Set([args.newSelection]));
@@ -27802,8 +27820,7 @@ class IgxButtonGroupComponent {
                 if (updatedButtons.length > 0) {
                     updatedButtons.forEach((button) => {
                         const index = this.buttons.map((b) => b.nativeElement).indexOf(button);
-                        const args = { owner: this, button: this.buttons[index], index };
-                        this.updateButtonSelectionState(index, args);
+                        this.updateButtonSelectionState(index);
                     });
                 }
                 // Watch for changes again
@@ -27821,14 +27838,12 @@ class IgxButtonGroupComponent {
         }, updated);
         return updated;
     }
-    updateButtonSelectionState(index, args) {
+    updateButtonSelectionState(index) {
         if (this.buttons[index].selected) {
             this.updateSelected(index);
-            this.selected.emit(args);
         }
         else {
             this.updateDeselected(index);
-            this.deselected.emit(args);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IgxButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -35511,6 +35526,39 @@ const ItemHeights = {
     "1": 28
 };
 class IgxComboBaseDirective {
+    /**
+     * Gets/gets combo id.
+     *
+     * ```typescript
+     * // get
+     * let id = this.combo.id;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-combo [id]='combo1'></igx-combo>
+     * ```
+     */
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        if (!value) {
+            return;
+        }
+        const selection = this.selectionService.get(this._id);
+        this._id = value;
+        if (selection) {
+            this.selectionService.set(this._id, selection);
+        }
+        if (this.dropdown.open) {
+            this.dropdown.close();
+        }
+        if (this.inputGroup?.isFocused) {
+            this.inputGroup.element.nativeElement.blur();
+            this.inputGroup.isFocused = false;
+        }
+    }
     /**
      * Configures the drop down list height
      *
@@ -35863,20 +35911,6 @@ class IgxComboBaseDirective {
          * ```
          */
         this.overlaySettings = null;
-        /**
-         * Gets/gets combo id.
-         *
-         * ```typescript
-         * // get
-         * let id = this.combo.id;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [id]='combo1'></igx-combo>
-         * ```
-         */
-        this.id = `igx-combo-${NEXT_ID$f++}`;
         /**
          * Controls whether custom values can be added to the collection
          *
@@ -36158,6 +36192,7 @@ class IgxComboBaseDirective {
         this._onTouchedCallback = noop;
         this._onChangeCallback = noop;
         this.compareCollator = new Intl.Collator();
+        this._id = `igx-combo-${NEXT_ID$f++}`;
         this._type = null;
         this._dataType = '';
         this._itemHeight = null;
@@ -48219,14 +48254,19 @@ class IgxExcelStyleCustomDialogComponent {
         this.expressionDateComponents.forEach(x => x.cdr.markForCheck());
     }
     createInitialExpressionUIElement() {
-        this.expressionsList = [];
-        const firstExprUI = new ExpressionUI();
-        firstExprUI.expression = {
-            condition: this.createCondition(this.selectedOperator),
-            fieldName: this.column.field,
-            ignoreCase: this.column.filteringIgnoreCase,
-            searchVal: null
-        };
+        let firstExprUI = new ExpressionUI();
+        if (this.expressionsList.length == 1 && this.expressionsList[0].expression.condition.name === this.selectedOperator) {
+            firstExprUI = this.expressionsList.pop();
+        }
+        else {
+            this.expressionsList = [];
+            firstExprUI.expression = {
+                condition: this.createCondition(this.selectedOperator),
+                fieldName: this.column.field,
+                ignoreCase: this.column.filteringIgnoreCase,
+                searchVal: null
+            };
+        }
         firstExprUI.afterOperator = FilteringLogic.And;
         this.expressionsList.push(firstExprUI);
         const secondExprUI = new ExpressionUI();
@@ -48284,6 +48324,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
  * A component used for presenting Excel style conditional filter UI.
  */
 class IgxExcelStyleConditionalFilterComponent {
+    get filterNumber() {
+        return this.esf.expressionsList.length;
+    }
     constructor(esf, platform) {
         this.esf = esf;
         this.platform = platform;
@@ -48353,6 +48396,16 @@ class IgxExcelStyleConditionalFilterComponent {
     getCondition(value) {
         return this.esf.column.filters.condition(value);
     }
+    /**
+     * @hidden @internal
+     */
+    getSelectedCondition(condition) {
+        const expressions = this.esf.expressionsList;
+        if (expressions.length < 1) {
+            return false;
+        }
+        return expressions.length === 1 ? expressions[0].expression.condition.name === condition : condition === 'custom';
+    }
     /**
      * @hidden @internal
      */
@@ -48419,11 +48472,11 @@ class IgxExcelStyleConditionalFilterComponent {
         return this.esf.column.filters.conditionList();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [{ token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        [attr.aria-controls]=\"this.subMenu.listId\"\n        [attr.aria-activedescendant]=\"!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null\">\n        <span>{{ subMenuText }}</span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: IgxExcelStyleConditionalFilterComponent, isStandalone: true, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        [ngClass]=\"filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        [attr.aria-controls]=\"this.subMenu.listId\"\n        [attr.aria-activedescendant]=\"!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null\">\n        <span class=\"igx-excel-filter__filter-number\">{{ subMenuText }} <ng-container *ngIf=\"filterNumber > 0\">({{filterNumber}})</ng-container></span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [selected]=\"getSelectedCondition(condition)\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\"\n            [selected]=\"getSelectedCondition('custom')\" >\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-conditional-filter', standalone: true, imports: [NgIf, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent], template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        [attr.aria-controls]=\"this.subMenu.listId\"\n        [attr.aria-activedescendant]=\"!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null\">\n        <span>{{ subMenuText }}</span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n" }]
+            args: [{ selector: 'igx-excel-style-conditional-filter', standalone: true, imports: [NgIf, NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent], template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        [ngClass]=\"filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        [attr.aria-controls]=\"this.subMenu.listId\"\n        [attr.aria-activedescendant]=\"!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null\">\n        <span class=\"igx-excel-filter__filter-number\">{{ subMenuText }} <ng-container *ngIf=\"filterNumber > 0\">({{filterNumber}})</ng-container></span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [selected]=\"getSelectedCondition(condition)\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\"\n            [selected]=\"getSelectedCondition('custom')\" >\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: BaseFilteringComponent }, { type: PlatformUtil }], propDecorators: { customDialog: [{
                 type: ViewChild,
                 args: ['customDialog', { read: IgxExcelStyleCustomDialogComponent }]
@@ -54237,7 +54290,7 @@ class IgxGridHeaderComponent {
         return this.sortDirection !== SortingDirection.None;
     }
     get filterIconClassName() {
-        return this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
+        return this.column.filteringExpressionsTree || this.isAdvancedFilterApplied() ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
     }
     get selectable() {
         return this.grid.columnSelection !== GridSelectionMode.none &&
@@ -54339,6 +54392,12 @@ class IgxGridHeaderComponent {
         const expr = this.grid.sortingExpressions.find((x) => x.fieldName === this.column.field);
         this.sortDirection = expr ? expr.dir : SortingDirection.None;
     }
+    isAdvancedFilterApplied() {
+        if (!this.grid.advancedFilteringExpressionsTree) {
+            return false;
+        }
+        return !!this.grid.advancedFilteringExpressionsTree.find(this.column.field);
+    }
     triggerSort() {
         const groupingExpr = this.grid.groupingExpressions ?
             this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) :
@@ -55516,8 +55575,11 @@ class IgxGridHeaderGroupComponent {
      * @hidden
      */
     onMouseDown(event) {
-        // hack for preventing text selection in IE and Edge while dragging the resize element
-        event.preventDefault();
+        if (!this.grid.allowFiltering ||
+            (event.composedPath().findIndex(el => el.tagName?.toLowerCase() === 'igx-grid-filtering-cell') < 1)) {
+            // Hack for preventing text selection in IE and Edge while dragging the resize element
+            event.preventDefault();
+        }
     }
     /**
      * @hidden
@@ -72929,6 +72991,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
     set superCompactMode(value) {
         this._superCompactMode = value;
     }
+    /** @hidden @internal */
     get gridSize() {
         if (this.superCompactMode) {
             return Size.Small;
@@ -75017,7 +75080,7 @@ class IgxGridStateDirective {
                             Object.assign(ref1.instance, colState);
                             ref1.instance.grid = context.currGrid;
                             if (ref1.instance.parent) {
-                                const columnGroup = newColumns.find(e => e.header === ref1.instance.parent);
+                                const columnGroup = newColumns.find(e => e.header === ref1.instance.parent && e.columnGroup);
                                 columnGroup.children.reset([...columnGroup.children.toArray(), ref1.instance]);
                                 ref1.instance.parent = columnGroup;
                             }
@@ -75029,7 +75092,7 @@ class IgxGridStateDirective {
                             Object.assign(ref.instance, colState);
                             ref.instance.grid = context.currGrid;
                             if (ref.instance.parent) {
-                                const columnGroup = newColumns.find(e => e.header === ref.instance.parent);
+                                const columnGroup = newColumns.find(e => e.header === ref.instance.parent && e.columnGroup);
                                 if (columnGroup) {
                                     ref.instance.parent = columnGroup;
                                     columnGroup.children.reset([...columnGroup.children.toArray(), ref.instance]);
@@ -75633,13 +75696,36 @@ class IgxGridToolbarAdvancedFilteringComponent {
     }
     constructor(toolbar) {
         this.toolbar = toolbar;
+        this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
+            this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
+        });
+    }
+    /**
+     * @hidden
+     */
+    ngAfterViewInit() {
+        this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0;
+    }
+    extractUniqueFieldNamesFromFilterTree(filteringTree) {
+        const columnNames = [];
+        if (!filteringTree)
+            return columnNames;
+        filteringTree.filteringOperands.forEach((expr) => {
+            if (expr instanceof FilteringExpressionsTree) {
+                columnNames.push(...this.extractUniqueFieldNamesFromFilterTree(expr));
+            }
+            else {
+                columnNames.push(expr.fieldName);
+            }
+        });
+        return [...new Set(columnNames)];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [{ token: IgxToolbarToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: IgxGridToolbarAdvancedFilteringComponent, isStandalone: true, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    class=\"igx-grid-toolbar__adv-filter\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n    <span class=\"igx-adv-filter--column-number\" *ngIf=\"grid?.advancedFilteringExpressionsTree\"> ({{ numberOfColumns }}) </span>\n</button>\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, NgClass, IgxIconComponent, NgIf], template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n" }]
+            args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, NgClass, IgxIconComponent, NgIf], template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    class=\"igx-grid-toolbar__adv-filter\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n    <span class=\"igx-adv-filter--column-number\" *ngIf=\"grid?.advancedFilteringExpressionsTree\"> ({{ numberOfColumns }}) </span>\n</button>\n" }]
         }], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
                     type: Inject,
                     args: [IgxToolbarToken]