Merge branch '18.0.x' into ikitanov/fix-#14297-18.0.x

Author: IvanKitanov17

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss

@@ -38,10 +38,6 @@
             @extend %igx-grid-toolbar__progress-bar !optional;
         }
 
-        @include e(adv-filter, $m: 'filtered') {
-            @extend %igx-grid-toolbar__adv-filter--filtered !optional;
-        }
-
         @include e(dropdown){
             @extend %igx-grid-toolbar__dropdown !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -250,21 +250,6 @@
         }
     }
 
-    %igx-grid-toolbar__adv-filter--filtered {
-        border-color: color($color: 'secondary') !important;
-
-        @if $bootstrap-theme {
-            border-width: rem(2px);
-            border-color: color($color: 'primary', $variant: 800) !important;
-            color: color($color: 'primary', $variant: 800);
-
-            &:hover,
-            &:focus {
-                background: color($color: 'primary', $variant: 800);
-            }
-        }
-    }
-
     %igx-grid-toolbar__dropdown {
         position: relative;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss

@@ -110,6 +110,11 @@
             @extend %grid-excel-actions__action !optional;
         }
 
+        @include e(actions-filter, $m: active) {
+            @extend %grid-excel-actions__action !optional;
+            @extend %grid-excel-actions__action--active !optional;
+        }
+
         @include e(actions-clear) {
             @extend %grid-excel-actions__action !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -309,6 +309,11 @@
         }
     }
 
+    %grid-excel-actions__action--active {
+        background: color($color: 'gray', $variant: 100);
+        color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+    }
+
     %grid-excel-actions__action--disabled {
         color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
         pointer-events: none;

projects/igniteui-angular/src/lib/data-operations/filtering-expressions-tree.ts

@@ -150,11 +150,10 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree {
         for (const expr of expressionsTree.filteringOperands) {
             if ((expr instanceof FilteringExpressionsTree)) {
                 return this.isFilteringExpressionsTreeForColumn(expr, fieldName);
-            } else {
-                return (expr as IFilteringExpression).fieldName === fieldName;
+            } else if ((expr as IFilteringExpression).fieldName === fieldName) {
+                return true;
             }
         }
-
         return false;
     }
 }

projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

@@ -1,5 +1,5 @@
 import { IDropDownBase, IGX_DROPDOWN_BASE } from './drop-down.common';
-import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, DoCheck, Output, EventEmitter, booleanAttribute } from '@angular/core';
+import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, Output, EventEmitter, booleanAttribute, DoCheck } from '@angular/core';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxDropDownGroupComponent } from './drop-down-group.component';
 
@@ -287,11 +287,11 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
         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);
             }
         }
     }

projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts

@@ -193,7 +193,7 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
         @Inject(DOCUMENT) public document: any) {}
 
     public ngOnInit(): void {
-        this.computedStyles = this.document.defaultView.getComputedStyle(this.elementRef.nativeElement); 
+        this.computedStyles = this.document.defaultView.getComputedStyle(this.elementRef.nativeElement);
     }
 
     /** Keydown Handler */
@@ -214,7 +214,7 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
      * @param newSelection the item selected
      * @param event the event that triggered the call
      */
-    public selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event) {  // eslint-disable-line
+    public selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event,  emit = true) {  // eslint-disable-line
         this.selectionChanging.emit({
             newSelection,
             oldSelection: null,

projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts

@@ -75,6 +75,6 @@ export interface IDropDownBase extends IDropDownList, IToggleView {
     closed: EventEmitter<IBaseEventArgs>;
     allowItemsFocus?: boolean;
     setSelectedItem(index: number): void;
-    selectItem(item: IgxDropDownItemBaseDirective, event?: Event): void;
+    selectItem(item: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void;
 }
 

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -513,15 +513,16 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         }
     }
 
-    /**
+        /**
      * Handles the `selectionChanging` emit and the drop down toggle when selection changes
      *
      * @hidden
      * @internal
      * @param newSelection
      * @param event
+     * @param emit
      */
-    public override selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event) {
+    public override selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event, emit = true) {
         const oldSelection = this.selectedItem;
         if (!newSelection) {
             newSelection = this.focusedItem;
@@ -539,7 +540,10 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
             } as IgxDropDownItemBaseDirective;
         }
         const args: ISelectionEventArgs = { oldSelection, newSelection, cancel: false, owner: this };
-        this.selectionChanging.emit(args);
+
+        if (emit) {
+            this.selectionChanging.emit(args);
+        }
 
         if (!args.cancel) {
             if (this.isSelectionValid(args.newSelection)) {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html

@@ -1,14 +1,15 @@
 <ng-container *ngIf="esf.column">
     <div tabindex="0"
         class="igx-excel-filter__actions-filter"
+        [ngClass]="filterNumber > 0 ? 'igx-excel-filter__actions-filter--active' : ''"
         (keydown)="onTextFilterKeyDown($event)"
         (click)="onTextFilterClick($event)"
         [igxDropDownItemNavigation]="subMenu"
         role="menuitem"
         aria-haspopup="true"
         [attr.aria-controls]="this.subMenu.listId"
         [attr.aria-activedescendant]="!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null">
-        <span>{{ subMenuText }}</span>
+        <span class="igx-excel-filter__filter-number">{{ subMenuText }} <ng-container *ngIf="filterNumber > 0">({{filterNumber}})</ng-container></span>
         <igx-icon>keyboard_arrow_right</igx-icon>
     </div>
 
@@ -20,13 +21,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>