feat(esf): selected style on filter condition & number of filter oper…

…ands #14188
IgniteUI · Jun 10, 2024 · db46f9e · db46f9e
1 parent b72fc10
commit db46f9e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/...angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html b/...angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html
@@ -8,7 +8,7 @@
         aria-haspopup="true"
         [attr.aria-controls]="this.subMenu.listId"
         [attr.aria-activedescendant]="!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null">
-        <span>{{ subMenuText }}</span>
+        <span>{{ subMenuText }} <ng-container *ngIf="filterNumber > 0">({{filterNumber}})</ng-container></span>
         <igx-icon>keyboard_arrow_right</igx-icon>
     </div>
 
@@ -20,13 +20,15 @@
         <div>
             <igx-drop-down-item
             *ngFor="let condition of conditions"
+            [selected]="getSelectedCondition(condition)"
             [value]="condition">
                 <div class="igx-grid__filtering-dropdown-items">
                     <igx-icon family="imx-icons" [name]="getCondition(condition).iconName"></igx-icon>
                     <span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
                 </div>
             </igx-drop-down-item>
-            <igx-drop-down-item *ngIf="showCustomFilterItem()">
+            <igx-drop-down-item *ngIf="showCustomFilterItem()"
+            [selected]="getSelectedCondition('custom')" >
                 <div class="igx-grid__filtering-dropdown-items">
                     <igx-icon>filter_list</igx-icon>
                     <span class="igx-grid__filtering-dropdown-text">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>

diff --git a/...i-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/...i-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts
@@ -40,6 +40,10 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
     @ViewChild('subMenu', { read: IgxDropDownComponent })
     public subMenu: IgxDropDownComponent;
 
+    public get filterNumber() {
+        return this.esf.expressionsList.length;
+    }
+
     private shouldOpenSubMenu = true;
     private destroy$ = new Subject<boolean>();
 
@@ -117,6 +121,17 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
         return this.esf.column.filters.condition(value);
     }
 
+    /**
+     * @hidden @internal
+     */
+    public getSelectedCondition(condition: string): boolean {
+        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
      */