Merge branch '19.2.x' into gedinakova/fix-activate-highlight-15735-19.2

Author: gedinakova

README.md

@@ -108,6 +108,7 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
 |stepper|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper)|13.0.0|
 |switch|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/switch/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch)|2.0.0|||||
 |tabs|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/tabs/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)|5.1.0||||
+|tile manager|:white_check_mark:||[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tile-manager)|19.2.0||||
 |time picker|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker)|5.3.0||||
 |toast|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/toast/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)|5.1.0||||
 |tree|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tree/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree)|12.0.0||||
@@ -162,6 +163,8 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
 |18.1.0|22-Jul-24|[Milestone #33](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-33-due-by-jul-2024)|
 |18.2.0|25-Oct-24|[Milestone #34](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-34-version-182-released-oct-25th-2024)|
 |19.0.0|25-Nov-24|[Milestone #35](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-35-version-190-released-nov-25th-2024)|
+|19.1.0|27-Feb-25|[Milestone #36](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-36--version-191-released-feb-27th-2025)|
+|19.2.0|16-Apr-25|[Milestone #37]()|
 
 
 ### Components available in [igniteui-angular-charts](https://www.npmjs.com/package/igniteui-angular-charts)

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

@@ -58,17 +58,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.3",
-    "@angular/common": "^19.2.3",
-    "@angular/compiler": "^19.2.3",
-    "@angular/core": "^19.2.3",
-    "@angular/elements": "^19.2.3",
-    "@angular/forms": "^19.2.3",
-    "@angular/platform-browser": "^19.2.3",
-    "@angular/platform-browser-dynamic": "^19.2.3",
-    "@angular/platform-server": "^19.2.3",
-    "@angular/router": "^19.2.3",
-    "@angular/ssr": "^19.2.4",
+    "@angular/animations": "^19.2.5",
+    "@angular/common": "^19.2.5",
+    "@angular/compiler": "^19.2.5",
+    "@angular/core": "^19.2.5",
+    "@angular/elements": "^19.2.5",
+    "@angular/forms": "^19.2.5",
+    "@angular/platform-browser": "^19.2.5",
+    "@angular/platform-browser-dynamic": "^19.2.5",
+    "@angular/platform-server": "^19.2.5",
+    "@angular/router": "^19.2.5",
+    "@angular/ssr": "^19.2.6",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
@@ -82,16 +82,16 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.4",
-    "@angular-devkit/schematics": "^19.2.4",
+    "@angular-devkit/build-angular": "^19.2.6",
+    "@angular-devkit/schematics": "^19.2.6",
     "@angular-eslint/builder": "^19.3.0",
     "@angular-eslint/eslint-plugin": "^19.3.0",
     "@angular-eslint/eslint-plugin-template": "^19.3.0",
     "@angular-eslint/schematics": "^19.3.0",
     "@angular-eslint/template-parser": "^19.3.0",
-    "@angular/cli": "^19.2.4",
-    "@angular/compiler-cli": "^19.2.3",
-    "@angular/language-service": "^19.2.3",
+    "@angular/cli": "^19.2.6",
+    "@angular/compiler-cli": "^19.2.5",
+    "@angular/language-service": "^19.2.5",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",
@@ -131,11 +131,11 @@
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",
     "lit-html": "^3.2.1",
-    "ng-packagr": "^19.2.0",
+    "ng-packagr": "^19.2.1",
     "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

@@ -141,6 +141,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");
 

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

@@ -1,8 +1,8 @@
-import { ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, DestroyRef, Injector, OnChanges, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
+import { ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, DestroyRef, EventEmitter, 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';
+import { NgElement, NgElementStrategyEvent } from '@angular/elements';
+import { fromEvent, Observable } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 import { ComponentConfig, ContentQueryMeta } from './component-config';
 
 import { ComponentNgElementStrategy, ComponentNgElementStrategyFactory, extractProjectableNodes, isFunction } from './ng-element-strategy';
@@ -29,6 +29,8 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
     /** Cached child instances per query prop. Used for dynamic components's child templates that normally persist in Angular runtime */
     protected cachedChildComponents: Map<string, ComponentRef<any>[]> = new Map();
     private setComponentRef: (value: ComponentRef<any>) => void;
+    /** The maximum depth at which event arguments are processed and angular components wrapped with Proxies, that handle template set */
+    private maxEventProxyDepth = 3;
 
     /**
      * Resolvable component reference.
@@ -405,6 +407,94 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             super.disconnect();
         }
     }
+
+    //#region Handle event args that return reference to components, since they return angular ref and not custom elements.
+    /** Sets up listeners for the component's outputs so that the events stream emits the events. */
+    protected override initializeOutputs(componentRef: ComponentRef<any>): void {
+        const eventEmitters: Observable<NgElementStrategyEvent>[] = this._componentFactory.outputs.map(
+            ({ propName, templateName }) => {
+                const emitter: EventEmitter<any> = componentRef.instance[propName];
+                return emitter.pipe(map((value: any) => ({ name: templateName, value: this.patchOutputComponents(propName, value) })));
+            },
+        );
+
+        (this as any).eventEmitters.next(eventEmitters);
+    }
+
+    protected patchOutputComponents(eventName: string, eventArgs: any) {
+        // Single out only `columnInit` event for now. If more events pop up will require a config generation.
+        if (eventName !== "columnInit") {
+            return eventArgs;
+        }
+        return this.createProxyForComponentValue(eventArgs, 1).value;
+    }
+
+    /**
+     * Nested search of event args that contain angular components and replace them with proxies.
+     * If event args are array of angular component instances should return array of proxies of each of those instances.
+     * If event args are object that has a single property being angular component should return same object except the angular component being a proxy of itself.
+     */
+    protected createProxyForComponentValue(value: any, depth: number): { value: any, hasProxies: boolean } {
+        if (depth > this.maxEventProxyDepth) {
+            return { value, hasProxies: false };
+        }
+
+        let hasProxies = false;
+        // TO DO!: Not very reliable as it is a very internal API and could be subject to change. If something comes up, should be changed.
+        if (value?.__ngContext__) {
+            const componentConfig = this.config.find((info: ComponentConfig) => value.constructor === info.component);
+            if (componentConfig?.templateProps) {
+                return { value: this.createElementsComponentProxy(value, componentConfig), hasProxies: true };
+            }
+        } else if (Array.isArray(value)) {
+            if (!value[0]) {
+                return { value, hasProxies: false };
+            } else {
+                // For array limit their parsing to first level and check if first item has created proxy inside.
+                const firstItem = this.createProxyForComponentValue(value[0], this.maxEventProxyDepth);
+                if (firstItem.hasProxies) {
+                    const mappedArray = value.slice(1, value.length).map(item => this.createProxyForComponentValue(item, depth + 1));
+                    mappedArray.unshift(firstItem);
+                    return { value: mappedArray, hasProxies: true };
+                }
+            }
+        } else if (typeof value === "object" && Object.entries(value).length && !(value instanceof Event)) {
+            for (const [key, item] of Object.entries(value)) {
+                if (!item) {
+                    value[key] = item;
+                } else {
+                    const parsedItem = this.createProxyForComponentValue(item, depth + 1);
+                    value[key] = parsedItem.value;
+                    hasProxies = parsedItem.hasProxies || hasProxies;
+                }
+            }
+        }
+
+        return { value, hasProxies };
+    }
+
+    /** Create proxy for a component that handles setting template props, making sure it provides correct TemplateRef and not Lit template */
+    protected createElementsComponentProxy(component: any, config: ComponentConfig) {
+        const parentThis = this;
+        return new Proxy(component, {
+            set(target: any, prop: string, newValue: any) {
+                // For now handle only template props
+                if (config.templateProps.includes(prop)) {
+                    const oldRef = target[prop];
+                    const oldValue = oldRef && parentThis.templateWrapper.getTemplateFunction(oldRef);
+                    if (oldValue === newValue) {
+                        newValue = oldRef;
+                    } else {
+                        newValue = parentThis.templateWrapper.addTemplate(newValue);
+                    }
+                }
+                target[prop] = newValue;
+
+                return true;
+            }
+        });
+    }
+    //#endregion
 }
 
 /**

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

@@ -324,7 +324,9 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
   <igc-pivot-grid id="pivotgrid1" default-expand-state="true" row-selection="single"></igc-pivot-grid>
 
   <script src="assets/data/pivot-data.js"></script>
-  <script>
+  <script type="module">
+    import { html, nothing } from "/lit-html.js";
+
     document.addEventListener('DOMContentLoaded', () => {
         const clear = (el) => el === 0 || Boolean(el);
         pivotgrid1.pivotConfiguration = {
@@ -413,6 +415,10 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
         };
     });
     pivotgrid1.data = pivotData;
+    pivotgrid1.addEventListener("columnInit", (args) => {
+        const col = args.detail;
+        col.headerTemplate = (ctx) => html`<span>${col.field}_</span>`;
+    });
   </script>
   <!-- END IgxPivotGridComponent -->
 

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

@@ -10,8 +10,7 @@ module.exports = function (config) {
     files: [
       { pattern: '../../node_modules/hammerjs/hammer.min.js', watched: false },
       { pattern: '../../node_modules/hammer-simulator/index.js', watched: false },
-      { pattern: './test.css', watched: false },
-      { pattern: '../../dist/igniteui-angular/styles/igniteui-angular.css', watched: false }
+      { pattern: './test.css', watched: false }
     ],
     plugins: [
       'karma-parallel',

projects/igniteui-angular/karma.conf.js

@@ -8,8 +8,7 @@ module.exports = function (config) {
     files: [
       { pattern: '../../node_modules/hammerjs/hammer.min.js', watched: false },
       { pattern: '../../node_modules/hammer-simulator/index.js', watched: false },
-      { pattern: './test.css', watched: false },
-      { pattern: '../../dist/igniteui-angular/styles/igniteui-angular.css', watched: false }
+      { pattern: './test.css', watched: false }
     ],
     plugins: [
         'karma-jasmine',