Merge remote-tracking branch 'origin/master' into sstoychev/update-to-20

Author: ChronosSF

.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'
 

angular.json

@@ -191,6 +191,17 @@
               "zone.js/testing",
               "hammerjs"
             ],
+            "styles": [
+              "src/styles/styles.scss"
+            ],
+            "assets": [
+              "projects/igniteui-angular/src/assets"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules"
+              ]
+            },
             "tsConfig": "projects/igniteui-angular/tsconfig.spec.json",
             "karmaConfig": "projects/igniteui-angular/karma.conf.js"
           }

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^17.2.0",
+    "igniteui-theming": "^18.0.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
@@ -135,7 +135,7 @@
     "postcss": "^8.5.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.3.3",
-    "puppeteer": "^24.4.0",
+    "puppeteer": "^24.5.0",
     "sass-embedded": "^1.83.4",
     "sass-true": "^8.1.0",
     "sassdoc": "^2.7.4",

package.json

@@ -447,7 +447,7 @@ export var registerConfig = [
   {
     component: IgxGridToolbarAdvancedFilteringComponent,
     selector: "igc-grid-toolbar-advanced-filtering",
-    parents: [IgxGridToolbarComponent],
+    parents: [IgxGridToolbarComponent, IgxGridToolbarActionsComponent],
     contentQueries: [],
     additionalProperties: [],
     methods: [],
@@ -472,7 +472,7 @@ export var registerConfig = [
   {
     component: IgxGridToolbarExporterComponent,
     selector: "igc-grid-toolbar-exporter",
-    parents: [IgxGridToolbarComponent],
+    parents: [IgxGridToolbarComponent, IgxGridToolbarActionsComponent],
     contentQueries: [],
     additionalProperties: [],
     methods: ["export"],
@@ -481,7 +481,7 @@ export var registerConfig = [
   {
     component: IgxGridToolbarHidingComponent,
     selector: "igc-grid-toolbar-hiding",
-    parents: [IgxGridToolbarComponent],
+    parents: [IgxGridToolbarComponent, IgxGridToolbarActionsComponent],
     contentQueries: [],
     additionalProperties: [],
     methods: ["checkAll", "uncheckAll"],
@@ -491,7 +491,7 @@ export var registerConfig = [
   {
     component: IgxGridToolbarPinningComponent,
     selector: "igc-grid-toolbar-pinning",
-    parents: [IgxGridToolbarComponent],
+    parents: [IgxGridToolbarComponent, IgxGridToolbarActionsComponent],
     contentQueries: [],
     additionalProperties: [],
     methods: ["checkAll", "uncheckAll"],

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';
@@ -51,6 +52,47 @@ describe('Elements: ', () => {
             const gridComponent = (await gridEl.ngElementStrategy[ComponentRefKey]).instance as IgxGridComponent;
             const columnComponent = (await columnEl.ngElementStrategy[ComponentRefKey]).instance as IgxColumnComponent;
             expect(gridComponent.columnList.toArray()).toContain(columnComponent);
+
+            columnEl.remove();
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY: DESTROY + QUERY */ * 3));
+            expect(gridComponent.columnList.toArray()).toEqual([]);
+        });
+
+        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");
         });
     });
 
@@ -103,6 +145,29 @@ describe('Elements: ', () => {
             expect(paginator.totalRecords).toEqual(gridEl.data.length);
         });
 
+        it(`should correctly apply column template when set through event`, async () => {
+            const gridEl = document.createElement("igc-grid");
+
+            const columnID = document.createElement("igc-column");
+            columnID.setAttribute("field", "ProductID");
+            gridEl.appendChild(columnID);
+            const columnName = document.createElement("igc-column");
+            columnName.setAttribute("field", "ProductName");
+            gridEl.appendChild(columnName);
+
+            gridEl.data = SampleTestData.foodProductData();
+            gridEl.addEventListener("columnInit", (args: CustomEvent<any>) => {
+                args.detail.headerTemplate = (ctx) => html`<span>Templated ${args.detail.field}</span>`;
+            });
+            testContainer.appendChild(gridEl);
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+
+            const header = document.getElementsByTagName("igx-grid-header").item(0) as HTMLElement;
+            expect(header.innerText).toEqual('Templated ProductID');
+        });
+
         it(`should initialize pivot grid with state persistence component`, async () => {
             const gridEl = document.createElement("igc-pivot-grid");