Merge remote-tracking branch 'origin/19.1.x' into mcherkasov/filtering-15500-19.1

Author: damyanpetev

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -380,14 +380,17 @@
         } @else {
             min-height: 100% !important;
         }
+
         transition: color $transition-timing, background $transition-timing;
 
-        @if $material-theme {
-            padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
-        } @else if $indigo-theme {
-            padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
-        } @else {
-            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        &:not(:empty) {
+            @if $material-theme {
+                padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
+            } @else if $indigo-theme {
+                padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
+            } @else {
+                padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+            }
         }
     }
 
@@ -816,16 +819,16 @@
             %form-group-bundle-start {
                 border-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %igx-input-group__filler {
                 border-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %igx-input-group__notch {
                 border-block-start-color: var-get($theme, 'hover-border-color');
                 border-block-end-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %form-group-bundle-end {
                 border-color: var-get($theme, 'hover-border-color');
             }
@@ -1009,8 +1012,8 @@
     }
 
     %form-group-label--focused-border:not(:is(
-        %form-group-border--error, 
-        %form-group-border--warning, 
+        %form-group-border--error,
+        %form-group-border--warning,
         %form-group-border--success))
     {
         &:hover {
@@ -1887,7 +1890,9 @@
     %form-group-suffix-fluent,
     %form-group-prefix-fluent-search,
     %form-group-suffix-fluent-search {
-        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        &:not(:empty) {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
     }
 
     %fluent-upload-button {

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

@@ -9,16 +9,16 @@
         (keydown)="onInputKeyDown($event)"
         [placeholder]="esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder"
         autocomplete="off"/>
-    <igx-suffix>
         @if (searchValue || searchValue === 0) {
-            <igx-icon
-                family="default"
-                name="input_clear"
-                (click)="clearInput()"
-                tabindex="0">
-            </igx-icon>
+            <igx-suffix>
+                <igx-icon
+                    family="default"
+                    name="input_clear"
+                    (click)="clearInput()"
+                    tabindex="0">
+                </igx-icon>
+            </igx-suffix>
         }
-    </igx-suffix>
 </igx-input-group>
 
 @if (!isHierarchical()) {

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -16,12 +16,13 @@ import {
     IgxGridExternalAdvancedFilteringComponent,
     IgxGridAdvancedFilteringBindingComponent,
     IgxGridAdvancedFilteringDynamicColumnsComponent,
-    IgxGridAdvancedFilteringSerializedTreeComponent
+    IgxGridAdvancedFilteringSerializedTreeComponent,
+    IgxGridAdvancedFilteringWithToolbarComponent
 } from '../../test-utils/grid-samples.spec';
 import { FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IgxHierGridExternalAdvancedFilteringComponent } from '../../test-utils/hierarchical-grid-components.spec';
 import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api';
-import { IFilteringEventArgs } from '../public_api';
+import { IFilteringEventArgs, IgxGridToolbarAdvancedFilteringComponent } from '../public_api';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { QueryBuilderFunctions } from '../../query-builder/query-builder-functions.spec';
 import { By } from '@angular/platform-browser';
@@ -38,7 +39,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
                 IgxGridExternalAdvancedFilteringComponent,
                 IgxGridAdvancedFilteringBindingComponent,
                 IgxHierGridExternalAdvancedFilteringComponent,
-                IgxGridAdvancedFilteringDynamicColumnsComponent
+                IgxGridAdvancedFilteringDynamicColumnsComponent,
+                IgxGridAdvancedFilteringWithToolbarComponent
             ]
         });
     }));
@@ -1195,6 +1197,65 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
         }));
     });
 
+    describe('Advanced filtering with toolbar', () => {
+        let fix: ComponentFixture<IgxGridAdvancedFilteringWithToolbarComponent>;
+        let grid: IgxGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridAdvancedFilteringWithToolbarComponent);
+            grid = fix.componentInstance.grid;
+            fix.detectChanges();
+        }));
+
+        it('Should update toolbar when advancedFilteringExpressionsTreeChange emits a new value', fakeAsync(() => {
+            // Set initial filtering expressions tree
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'ProductName',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                searchVal: 'angular',
+                ignoreCase: true
+            });
+
+            // Apply the initial filtering tree
+            grid.advancedFilteringExpressionsTree = tree;
+            fix.detectChanges();
+
+            // Create a new filtering tree with more filters
+            const updatedTree = new FilteringExpressionsTree(FilteringLogic.And);
+            updatedTree.filteringOperands.push({
+                fieldName: 'Downloads',
+                condition: IgxStringFilteringOperand.instance().condition('equals'),
+                searchVal: 10,
+                ignoreCase: true
+            });
+            updatedTree.filteringOperands.push({
+                fieldName: 'ProductName',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                searchVal: 'angular',
+                ignoreCase: true
+            });
+            updatedTree.filteringOperands.push({
+                fieldName: 'Category',
+                condition: IgxStringFilteringOperand.instance().condition('equals'),
+                searchVal: 'electronics',
+                ignoreCase: false
+            });
+
+            // Update the filtering expressions tree
+            grid.advancedFilteringExpressionsTree = updatedTree;
+            fix.detectChanges();
+
+            // Verify the correct number of filters
+            const toolbarDebugElement = fix.debugElement.query(By.directive(IgxGridToolbarAdvancedFilteringComponent));
+            const toolbarComponent = toolbarDebugElement.componentInstance as IgxGridToolbarAdvancedFilteringComponent;
+            const numberOfFilters = (toolbarComponent as any).numberOfColumns;
+
+            expect(grid.advancedFilteringExpressionsTree.filteringOperands.length).toEqual(3);
+            expect(numberOfFilters).toEqual(3);
+        }));
+    })
+
     describe('Localization - ', () => {
         it('Should correctly change resource strings for Advanced Filtering dialog.', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxGridAdvancedFilteringComponent);

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Inject, Input } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { IgxToolbarToken } from './token';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IgxIconComponent } from '../../icon/icon.component';
@@ -31,7 +31,7 @@ import { isTree } from '../../data-operations/expressions-tree-util';
     templateUrl: './grid-toolbar-advanced-filtering.component.html',
     imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
-export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit {
+export class IgxGridToolbarAdvancedFilteringComponent implements OnInit {
     protected numberOfColumns: number;
     /**
      * Returns the grid containing this component.
@@ -44,17 +44,19 @@ export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit {
     @Input()
     public overlaySettings: OverlaySettings;
 
-    constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) {
-        this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
-            this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
-        });
-    }
+    constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { }
 
     /**
      * @hidden
      */
-    public ngAfterViewInit(): void {
+    public ngOnInit(): void {
+        // Initial value
         this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0;
+
+        // Subscribing for future updates
+        this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
+            this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
+        });
     }
 
     protected extractUniqueFieldNamesFromFilterTree(filteringTree?: IFilteringExpressionsTree) : string[] {

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1121,6 +1121,29 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="false">
+        <igx-grid-toolbar >
+            <igx-grid-toolbar-actions>
+                <igx-grid-toolbar-advanced-filtering>Really advanced filtering</igx-grid-toolbar-advanced-filtering>
+            </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
+        <igx-column width="100px" [field]="'ID'" [header]="'HeaderID'" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
+        <igx-column width="100px" [field]="'Downloads'" dataType="number" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
+        <igx-column width="100px" [field]="'ReleaseDate'" dataType="date" headerClasses="header-release-date"></igx-column>
+        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" dataType="string" [filters]="customFilter">
+        <igx-column width="100px" [field]="'ReleaseTime'" dataType="time"></igx-column>
+        </igx-column>
+    </igx-grid>`,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent]
+})
+export class IgxGridAdvancedFilteringWithToolbarComponent extends BasicGridComponent {
+    public customFilter = CustomFilter.instance();
+    public override data = SampleTestData.excelFilteringData();
+}
+
 @Component({
     template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true">
         <igx-grid-toolbar></igx-grid-toolbar>