Merge branch '19.2.x' into ttonev/fix-14970-master

Author: tishko0

.github/workflows/codeql-analysis.yml

@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ master, 19.1.x, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
+    branches: [ master, 19.2.x, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master, 19.1.x, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
+    branches: [ master, 19.2.x, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
   schedule:
     - cron: '33 4 * * 4'
 

CHANGELOG.md

@@ -11,6 +11,16 @@ All notable changes for each version of this project will be documented in this
     - **Deprecation** - `tabIndex` has been deprecated and will be removed in a future version.
 - `IgxGrid`, `IgxHierarchicalGrid`, `IgxTreeGrid`
     - A column's `minWidth` and `maxWidth` constrain the user-specified `width` so that it cannot go outside their bounds.
+    - In SSR mode grid with height 100% or with no height will render on the server with % size and with no data. The grid will show either the empty grid template or the loading indicator (if isLoading is true).
+    - In SSR mode grid with width 100% or with no width will render on the server with % size and with all columns.
+    - The `pagingMode` property can now be set as simple strings `'local'` and `'remote'` and does not require importing the `GridPagingMode` enum.
+- `IgxHierarchicalGrid`
+    - Introduced a new advanced filtering capability that enables top-level records to be dynamically refined based on the attributes or data of their associated child records.
+    - Added a new `schema` input property that can be used to pass collection of `EntityType` objects. This property is required for remote data scenarios.
+- `IgxQueryBuilderComponent`, `IgxAdvancedFilteringDialogComponent`
+    - Added support for entities with hierarchical structure.
+- `EntityType`
+    - A new optional property called `childEntities` has been introduced that can be used to create nested entities.
 
 ## 19.1.1
 ### New Features
@@ -28,7 +38,7 @@ All notable changes for each version of this project will be documented in this
     - Introduced a new `expanded` input property, enabling dynamic control over the banner's state. The banner can now be programmatically set to expanded (visible) or collapsed (hidden) both initially and at runtime. Animations will trigger during runtime updates — the **open animation** plays when `expanded` is set to `true`, and the **close animation** plays when set to `false`. However, no animations will trigger when the property is set initially.
     - The banner's event lifecycle (`opening`, `opened`, `closing`, `closed`) only triggers through **user interactions** (e.g., clicking to open/close). Programmatic updates using the `expanded` property will not fire any events.
     - If the `expanded` property changes during an ongoing animation, the current animation will **stop** and the opposite animation will begin from the **point where the previous animation left off**. For instance, if the open animation (10 seconds) is interrupted at 6 seconds and `expanded` is set to `false`, the close animation (5 seconds) will start from its 3rd second.
-- `IgxQueryBuilder` has new design that comes with updated appearance and new functionality
+- `IgxQueryBuilder` has a new design that comes with an updated appearance and new functionality
     - `IgxQueryBuilderComponent`
         - Introduced the ability to create nested queries by specifying IN/NOT IN operators.
         - Introduced the ability to reposition condition chips by dragging or using `Arrow Up/Down`.

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^17.0.0",
+    "igniteui-theming": "^17.2.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -7,20 +7,20 @@ import {
 } from "../../../igniteui-angular/src/public_api";
 import { IgxPaginatorComponent } from "../../../igniteui-angular/src/lib/paginator/paginator.component";
 import { IgxPaginatorToken } from "../../../igniteui-angular/src/lib/paginator/token";
-import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component";
-import { IgxActionStripToken } from "../../../igniteui-angular/src/lib/action-strip/token";
-import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
-import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
-import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component";
-import { IgxColumnComponent } from "../../../igniteui-angular/src/lib/grids/columns/column.component";
-import { IgxColumnGroupComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-group.component";
-import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
 import { IgxGridToolbarTitleComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/common";
 import { IgxGridToolbarActionsComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/common";
 import { IgxGridToolbarAdvancedFilteringComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component";
 import { IgxGridToolbarComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component";
 import { IgxToolbarToken } from "../../../igniteui-angular/src/lib/grids/toolbar/token";
+import { IgxColumnComponent } from "../../../igniteui-angular/src/lib/grids/columns/column.component";
+import { IgxColumnGroupComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-group.component";
 import { IgxRowIslandComponent } from "../../../igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component";
+import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component";
+import { IgxActionStripToken } from "../../../igniteui-angular/src/lib/action-strip/token";
+import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
+import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
+import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component";
+import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
 import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component";
 import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component";
 import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component";

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -1,4 +1,5 @@
 import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent } from 'igniteui-angular';
+import { html } from 'lit-html';
 import { firstValueFrom, fromEvent, skip, timer } from 'rxjs';
 import { ComponentRefKey, IgcNgElement } from './custom-strategy';
 import hgridData from '../assets/data/projects-hgrid.js';
@@ -52,6 +53,43 @@ describe('Elements: ', () => {
             const columnComponent = (await columnEl.ngElementStrategy[ComponentRefKey]).instance as IgxColumnComponent;
             expect(gridComponent.columnList.toArray()).toContain(columnComponent);
         });
+
+        it(`should keep IgcNgElement instance in template of another IgcNgElement #15678`, async () => {
+            const gridEl = document.createElement("igc-grid");
+            testContainer.appendChild(gridEl);
+            const columnEl = document.createElement("igc-column") as IgcNgElement;
+            gridEl.appendChild(columnEl);
+            gridEl.primaryKey = 'id';
+            gridEl.data = [{ id: '1' }];
+            (gridEl as any).detailTemplate = (ctx) => {
+                return html`<div>
+                    <igc-grid id="child${ctx.implicit.id}"></igc-grid>
+                </div>`;
+            }
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+
+            // sigh (。﹏。*)
+            (gridEl as any).toggleRow('1');
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+
+            let detailGrid = document.querySelector<IgcNgElement>('#child1');
+            expect(detailGrid).toBeDefined();
+            let detailGridComponent = (await detailGrid?.ngElementStrategy[ComponentRefKey])?.instance as IgxGridComponent;
+            expect(detailGridComponent).toBeDefined();
+
+            // close and re-expand row detail:
+            (gridEl as any).toggleRow('1');
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            (gridEl as any).toggleRow('1');
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+
+            detailGrid = document.querySelector<IgcNgElement>('#child1');
+            expect(detailGrid).toBeDefined();
+            detailGridComponent = (await detailGrid?.ngElementStrategy[ComponentRefKey])?.instance as IgxGridComponent;
+            expect(detailGridComponent).toBeDefined("Detail child grid was destroyed on re-expand");
+        });
     });
 
     describe('Grid integration scenarios.', () => {

projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts

@@ -1,4 +1,5 @@
-import { ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, Injector, OnChanges, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
+import { ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, DestroyRef, Injector, OnChanges, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgElement } from '@angular/elements';
 import { fromEvent } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -48,6 +49,14 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         return this._templateWrapper;
     }
 
+    private _configSelectors: string;
+    public get configSelectors(): string {
+        if (!this._configSelectors) {
+            this._configSelectors = this.config.map(x => x.selector).join(',');
+        }
+        return this._configSelectors;
+    }
+
     constructor(private _componentFactory: ComponentFactory<any>, private _injector: Injector, private config: ComponentConfig[]) {
         super(_componentFactory, _injector);
     }
@@ -233,6 +242,14 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             }
             value = this.templateWrapper.addTemplate(value);
             // TODO: discard oldValue
+
+            // check template for any angular-element components
+            this.templateWrapper.templateRendered.pipe(takeUntilDestroyed(componentRef.injector.get(DestroyRef))).subscribe((element) => {
+                element.querySelectorAll<IgcNgElement>(this.configSelectors)?.forEach((c) => {
+                    // tie to angularParent lifecycle for cached scenarios like detailTemplate:
+                    c.ngElementStrategy.angularParent = componentRef;
+                });
+            });
         }
         if (componentRef && componentConfig?.boolProps?.includes(property)) {
             // bool coerce:

projects/igniteui-angular-elements/src/app/custom-strategy.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } from '@angular/core';
+import { Subject } from 'rxjs';
 import { TemplateRefWrapper } from './template-ref-wrapper';
 
 import { render, TemplateResult } from 'lit-html';
@@ -14,6 +15,7 @@ type TemplateFunction = (arg: any) => TemplateResult;
 export class TemplateWrapperComponent {
 
     public templateFunctions: TemplateFunction[] = [];
+    public templateRendered = new Subject<HTMLElement>();
 
     /**
      * All template refs
@@ -27,6 +29,7 @@ export class TemplateWrapperComponent {
 
     public litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
         render(templateFunc(arg), container);
+        this.templateRendered.next(container);
     }
 
     public addTemplate(templateFunc: TemplateFunction): TemplateRef<any> {

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -195,7 +195,11 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
             <igc-combo ${ref(focusCallback)} style="width:100%; height:100%" .data=${northwindProducts} value-key="ProductName" @igcChange=${(e) => ctx.cell.editValue = e.detail.newValue} single-select>
             </igc-combo>
         `;
-        grid1.detailTemplate = (ctx) => html`<div><span class="categoryStyle">Stock: ${ctx.implicit.InStock}</span></div>`;
+        grid1.detailTemplate = (ctx) => {
+            return html`<div>
+            <igc-grid auto-generate="true"></igc-grid>
+        </div>`;
+        }
 
         grid2.querySelector('igc-column[field="ProductName"]').inlineEditorTemplate = (ctx) =>
             html`

projects/igniteui-angular-elements/src/index.html

@@ -708,47 +708,4 @@ export class CsvExportComponent {
             )
         ).toEqual(expectedContent);
     });
-
-    it('should update GridPagingMode enum from lowerCase to TitleCase', async () => {
-        appTree.create(
-            '/testSrc/appPrefix/component/paging-test.component.ts',
-`import { Component } from '@angular/core';
-import { GridPagingMode } from "igniteui-angular";
-
-@Component({
-    selector: "app-paging-test",
-    styleUrls: ["./paging-test.component.scss"],
-    templateUrl: "./paging-test.component.html"
-})
-export class PagingComponent {
-    public pagingLocal: GridPagingMode = GridPagingMode.local;
-    public pagingRemote: GridPagingMode = GridPagingMode.remote;
-    constructor(){}
-}
-`);
-
-        const tree = await runner
-            .runSchematic('migration-19', {}, appTree);
-
-        const expectedContent =
-`import { Component } from '@angular/core';
-import { GridPagingMode } from "igniteui-angular";
-
-@Component({
-    selector: "app-paging-test",
-    styleUrls: ["./paging-test.component.scss"],
-    templateUrl: "./paging-test.component.html"
-})
-export class PagingComponent {
-    public pagingLocal: GridPagingMode = GridPagingMode.Local;
-    public pagingRemote: GridPagingMode = GridPagingMode.Remote;
-    constructor(){}
-}
-`;
-        expect(
-            tree.readContent(
-                '/testSrc/appPrefix/component/paging-test.component.ts'
-            )
-        ).toEqual(expectedContent);
-    });
 });