Merge branch 'master' into simeonoff/fix-15412-19.2.x

simeonoff · web-flow · commit d29c10527c7a · 2025-03-18T09:23:40.000+02:00
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -2,21 +2,25 @@
 
 # Current Milestone
 
-## Milestone 36,  version 19.1 (Due by Feb, 2025)
+## Milestone 37,  version 19.2 (Due by Mar, 2025)
 
-1. Query Builder multi-table query support [#14979](https://github.com/IgniteUI/igniteui-angular/issues/14979)
-2. IgxBannerComponent - Support collapsed input [#14890](https://github.com/IgniteUI/igniteui-angular/issues/14890)
-3. Carousel component vertical orientation support [#15025](https://github.com/IgniteUI/igniteui-angular/issues/15025)
+1. Tile Manager - layout component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
+2. SSR Grid Improvements - [15202](https://github.com/IgniteUI/igniteui-angular/issues/15202)
 
 ## Going down the road
 
 1. Provide an option to modify the default enter edit mode conditions, to e.g. allow edit mode start on a single click [#14658](https://github.com/IgniteUI/igniteui-angular/issues/14658)
 2. Provide an excel-like navigation mode for editing where all arrow keys navigate the cell in edit mode. [#14659](https://github.com/IgniteUI/igniteui-angular/issues/14659)
 3. Extend the 18.2 editorOptions property to allow modifying numeric editors to not change the value on up/down arrow press [#14660](https://github.com/IgniteUI/igniteui-angular/issues/14660)
-4. Tile Manager - layout component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
 
 # Previous Milestone
 
+## Milestone 36,  version 19.1 (Released Feb 27th, 2025)
+
+1. **[DONE]** Query Builder multi-table query support [#14979](https://github.com/IgniteUI/igniteui-angular/issues/14979)
+2. **[DONE]** IgxBannerComponent - Support collapsed input [#14890](https://github.com/IgniteUI/igniteui-angular/issues/14890)
+3. **[DONE]** Carousel component vertical orientation support [#15025](https://github.com/IgniteUI/igniteui-angular/issues/15025)
+
 ## Milestone 35, version 19.0 (Released Nov 25th, 2024)
 
 1. Angular 19 support
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, TemplateRef } from '@angular/core';
+import { Component, ViewChild, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
 import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
@@ -1143,7 +1143,8 @@ class CarouselTestComponent {
             <igx-slide><h3>Slide4</h3></igx-slide>
         </igx-carousel>
     `,
-    imports: [IgxCarouselComponent, IgxSlideComponent]
+    imports: [IgxCarouselComponent, IgxSlideComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 class CarouselAnimationsComponent {
     @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent;
@@ -1224,7 +1225,7 @@ class CarouselTemplateSetInTypescriptTestComponent {
 @Component({
     template: `
         <igx-carousel #carousel [loop]="loop" [animationType]="'none'">
-            @for (slide of slides; track slide) {
+            @for (slide of slides; track slide.text) {
                 <igx-slide [active]="slide.active">
                     <igx-slide><h3>{{slide.text}}</h3></igx-slide>
                 </igx-slide>
@@ -1240,10 +1241,6 @@ class CarouselDynamicSlidesComponent {
     public slides = [];
 
     constructor() {
-        this.addNewSlide();
-    }
-
-    public addNewSlide() {
         this.slides.push(
             { text: 'Slide 1', active: false },
             { text: 'Slide 2', active: false },
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
@@ -1048,6 +1048,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
             }
             this.slideChanged.emit({ carousel: this, slide });
             this.restartInterval();
+            this.cdr.markForCheck();
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts
@@ -2107,13 +2107,13 @@ class TestDragDropStrategiesComponent extends TestDragDropLinkedSingleComponent
                 <igx-icon igxDragHandle>drag_indicator</igx-icon>
                 <span>Movies list</span>
             </div>
-            @for (category of categoriesNotes; track category) {
+            @for (category of categoriesNotes; track category.text) {
                 <div class="movieListItem" igxDrag [ghost]="false">
                     <div>
                         <igx-icon igxDragHandle>drag_indicator</igx-icon>
                         <span>{{category.text}}</span>
                     </div>
-                    @for (note of getCategoryMovies(category.text); track note) {
+                    @for (note of getCategoryMovies(category.text); track note.text) {
                         <div class="movieListItem" igxDrag [ghost]="false">
                             <div>
                                 <igx-icon igxDragHandle>drag_indicator</igx-icon>
@@ -2128,11 +2128,11 @@ class TestDragDropStrategiesComponent extends TestDragDropLinkedSingleComponent
     imports: [IgxIconComponent, IgxDragDirective, IgxDragHandleDirective]
 })
 class TestDragDropNestedComponent extends TestDragDropComponent {
-    public categoriesNotes = [
+    protected categoriesNotes = [
         { text: 'Action', dragged: false },
         { text: 'Fantasy', dragged: false }
     ];
-    public listNotes = [
+    protected listNotes = [
         { text: 'Avengers: Endgame', category: 'Action', dragged: false },
         { text: 'Avatar', category: 'Fantasy', dragged: false },
         { text: 'Titanic', category: 'Drama', dragged: false },
@@ -2142,7 +2142,7 @@ class TestDragDropNestedComponent extends TestDragDropComponent {
         { text: 'The Avengers', category: 'Action', dragged: false }
     ];
 
-    public getCategoryMovies(inCategory: string){
+    protected getCategoryMovies(inCategory: string){
         return this.listNotes.filter(item => item.category === inCategory);
     }
  }
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -1,4 +1,5 @@
 import { Subject } from 'rxjs';
+import { isEqual } from 'lodash-es';
 import {
     AfterContentInit,
     ChangeDetectorRef,
@@ -1090,12 +1091,16 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      *
      * @memberof IgxColumnComponent
      */
+    @WatchColumnChanges()
     @Input()
     public get disabledSummaries(): string[] {
         return this._disabledSummaries;
     }
 
     public set disabledSummaries(value: string[]) {
+        if (isEqual(this._disabledSummaries, value)) {
+            return;
+        }
         this._disabledSummaries = value;
         if (this.grid) {
             this.grid.summaryService.removeSummariesCachePerColumn(this.field);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -15,12 +15,13 @@ import {
     IgxGridAdvancedFilteringComponent,
     IgxGridExternalAdvancedFilteringComponent,
     IgxGridAdvancedFilteringBindingComponent,
-    IgxGridAdvancedFilteringDynamicColumnsComponent
+    IgxGridAdvancedFilteringDynamicColumnsComponent,
+    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';
@@ -37,7 +38,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
                 IgxGridExternalAdvancedFilteringComponent,
                 IgxGridAdvancedFilteringBindingComponent,
                 IgxHierGridExternalAdvancedFilteringComponent,
-                IgxGridAdvancedFilteringDynamicColumnsComponent
+                IgxGridAdvancedFilteringDynamicColumnsComponent,
+                IgxGridAdvancedFilteringWithToolbarComponent
             ]
         });
     }));
@@ -1194,6 +1196,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);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
@@ -160,9 +160,6 @@ describe('IgxGrid - Summaries #grid', () => {
 
                 const column = grid.getColumnByName('UnitsInStock');
 
-                column.disabledSummaries = [];
-                fixture.detectChanges();
-                tick();
                 GridSummaryFunctions.verifyColumnSummaries(
                     GridSummaryFunctions.getRootSummaryRow(fixture), 3,
                     ['Count', 'Min', 'Max', 'Sum', 'Avg'],
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts
@@ -1085,6 +1085,40 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             expect(childGrid1.columns[0].editable).toBeTrue();
             expect(childGrid1.columns[1].editable).toBeTrue();
         });
+
+        it('should update the row island summary UI when disabledSummaries is changed at runtime', fakeAsync(() => {
+            const masterRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(masterRow.expander);
+            fixture.detectChanges();
+
+            const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent;
+            fixture.detectChanges();
+
+            childGrid.columns.forEach(c => c.hasSummary = true);
+            fixture.detectChanges();
+            tick();
+
+            const column = childGrid.columns.find(c => c.field === 'ProductName');
+            expect(column).toBeDefined();
+            fixture.detectChanges();
+            tick();
+
+            const summaryCells = childGrid.nativeElement.querySelectorAll('igx-grid-summary-cell');
+            const summaryCell = summaryCells[1];
+
+            expect(summaryCell).toBeDefined();
+            expect(summaryCell.textContent.trim().length).toBeGreaterThan(0);
+
+            const getterSpy = spyOnProperty(column, 'disabledSummaries', 'get').and.callThrough();
+
+            column.disabledSummaries = ['count'];
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            expect(getterSpy).toHaveBeenCalledTimes(7);
+            expect(summaryCell.textContent.trim()).toEqual('');
+        }));
     });
 
     describe('IgxHierarchicalGrid Children Sizing #hGrid', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts b/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 { AfterViewInit, 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[] {
diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts
@@ -3053,7 +3053,7 @@ class IgxSelectTemplateFormComponent {
                 <igx-icon>alarm</igx-icon>
             </igx-prefix>
             <igx-select-item>None</igx-select-item>
-            @for (item of items; track item) {
+            @for (item of items; track item.field) {
                 <igx-select-item [value]="item.field">
                     {{ item.field }}
                 </igx-select-item>
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts b/projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts
@@ -493,7 +493,7 @@ describe('IgxTabs', () => {
             expect(tabs.items.length).toBe(2);
             expect(tabs.selectedIndex).toBe(0);
 
-            fixture.componentInstance.addTab(3);
+            fixture.componentInstance.addTab();
             fixture.detectChanges();
             tick(100);
 
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/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>
diff --git a/projects/igniteui-angular/src/lib/test-utils/tabs-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tabs-components.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1048,6 +1048,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On`
`1048`	`1048`	`}`
`1049`	`1049`	`this.slideChanged.emit({ carousel: this, slide });`
`1050`	`1050`	`this.restartInterval();`
	`1051`	`+ this.cdr.markForCheck();`
`1051`	`1052`	`}`
`1052`	`1053`	`}`
`1053`	`1054`