Mass Merge 18.1.x to master

package.json

@@ -80,7 +80,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^10.0.0",
+    "igniteui-theming": "^11.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

projects/bundle-test/src/app/app.config.ts

@@ -1,9 +1,16 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { NavigationError, provideRouter, withNavigationErrorHandler } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideClientHydration()]
+  providers: [
+    provideRouter(
+      routes,
+      // force failed routes to throw & fail the SSG part of the build
+      withNavigationErrorHandler((e: NavigationError) => { throw e; })
+    ),
+    provideClientHydration()
+  ]
 };

projects/igniteui-angular-elements/src/app/app.module.ts

@@ -31,20 +31,22 @@ import { registerConfig } from "../analyzer/elements.config";
 import { createIgxCustomElement } from './create-custom-element';
 import { IgxGridStateComponent } from '../lib/state.component';
 import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils';
+import { IgxIconBroadcastService } from '../lib/icon.broadcast.service';
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule
   ],
   providers: [
-    { provide: ELEMENTS_TOKEN, useValue: true }
+    { provide: ELEMENTS_TOKEN, useValue: true },
+    IgxIconBroadcastService
   ],
 //   bootstrap: []
 })
 export class AppModule {
 
-  constructor(private injector: Injector) {}
+  constructor(private injector: Injector, private _iconBroadcast: IgxIconBroadcastService) {}
 
   ngDoBootstrap() {
 
@@ -123,5 +125,6 @@ declare global {
       'igc-grid': NgElement & WithProperties<GridType>;
       'igc-tree-grid': NgElement & WithProperties<IgxTreeGridElement>;
       'igc-paginator': NgElement & WithProperties<IgxPaginatorComponent>;
+      'igc-grid-state':  NgElement & WithProperties<IgxGridStateComponent>;
     }
   }

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

@@ -3,14 +3,15 @@ import { ApplicationRef, importProvidersFrom } from '@angular/core';
 import { createApplication } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserTestingModule } from '@angular/platform-browser/testing';
-import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent } from 'igniteui-angular';
+import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxPivotGridComponent } from 'igniteui-angular';
 import { firstValueFrom, fromEvent, skip, timer } from 'rxjs';
 import { registerConfig } from '../analyzer/elements.config';
 import { createIgxCustomElement } from './create-custom-element';
 import { ComponentRefKey, IgcNgElement } from './custom-strategy';
 import hgridData from '../assets/data/projects-hgrid.js';
 import { SampleTestData } from 'igniteui-angular/src/lib/test-utils/sample-test-data.spec';
 import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils';
+import { IgxGridStateComponent } from '../lib/state.component';
 
 describe('Elements: ', () => {
     let testContainer: HTMLDivElement;
@@ -28,8 +29,13 @@ describe('Elements: ', () => {
         customElements.define("igc-grid", grid);
         const hgrid = createIgxCustomElement<IgxHierarchicalGridComponent>(IgxHierarchicalGridComponent, { injector: appRef.injector, registerConfig });
         customElements.define("igc-hierarchical-grid", hgrid);
+        const pivotGrid = createIgxCustomElement<IgxPivotGridComponent>(IgxPivotGridComponent, { injector: appRef.injector, registerConfig });
+        customElements.define("igc-pivot-grid", pivotGrid);
         const paginator = createIgxCustomElement<IgxPaginatorComponent>(IgxPaginatorComponent, { injector: appRef.injector, registerConfig });
         customElements.define("igc-paginator", paginator);
+        const stateComponent = createIgxCustomElement<IgxGridStateComponent>(IgxGridStateComponent, { injector: appRef.injector, registerConfig });
+        customElements.define("igc-grid-state", stateComponent);
+
     });
 
     beforeEach(async () => {
@@ -111,5 +117,19 @@ describe('Elements: ', () => {
             expect(gridEl.dataView.length).toEqual(3);
             expect(paginator.totalRecords).toEqual(gridEl.data.length);
         });
+
+        it(`should initialize pivot grid with state persistence component`, async () => {
+            const gridEl = document.createElement("igc-pivot-grid");
+
+            const stateComponent = document.createElement("igc-grid-state");
+
+            gridEl.appendChild(stateComponent);
+
+            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));
+            expect(() => stateComponent.getStateAsString()).not.toThrow();
+        });
     });
 });

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

@@ -73,6 +73,7 @@ <h3 class="ig-typography__h6">Flat Grid (column groups, toolbar, paginator, row
             <igc-toggle-button value="medium">Medium</igc-toggle-button>
             <igc-toggle-button value="large" selected>Large</igc-toggle-button>
         </igc-button-group>
+        <button id="toggleIcon">Change Filter Icon</button>
     </div>
 
     <h3 class="ig-typography__h6">Standalone paginator</h3>
@@ -112,10 +113,18 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
     import { html, nothing } from "/lit-html.js";
     import { Directive, directive } from "/directive.js";
 
-    import { defineComponents, IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent } from "igniteui-webcomponents";
+    import { defineComponents, IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent, registerIconFromText, setIconRef  } from "igniteui-webcomponents";
     // import "igniteui-webcomponents/themes/light/bootstrap.css";
 
     defineComponents(IgcSelectComponent, IgcComboComponent, IgcButtonComponent, IgcButtonGroupComponent);
+
+
+    const buildIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
+  const thumbUpIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
+    let icon = thumbUpIcon;
+
     const grid1 = document.getElementById('grid1');
     const grid2 = document.getElementById('grid2');
     const buttonGroup = document.querySelector('igc-button-group');
@@ -196,6 +205,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
 
         document.getElementById("saveState").addEventListener("click", saveState);
         document.getElementById("restoreState").addEventListener("click", restoreState);
+        document.getElementById("toggleIcon").addEventListener("click", toggleIcon);
         const stateComponent = document.getElementById('state');
         stateComponent.options = {
             paging: false
@@ -220,6 +230,25 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
             stateComponent.applyState(obj);
         }
     }
+
+    function toggleIcon() {
+        if (icon !== thumbUpIcon) {
+            icon = thumbUpIcon;
+            registerIconFromText("filter_list", thumbUpIcon, "customSet");
+            setIconRef('filter_list', 'default', {
+                name: 'filter_list',
+                collection: 'customSet',
+            });
+
+        } else {
+            icon = buildIcon;
+            registerIconFromText("filter_list", buildIcon, "customSet2");
+            setIconRef('filter_list', 'default', {
+                name: 'filter_list',
+                collection: 'customSet2',
+            });
+        }
+    }
   </script>
 
   <!-- IgxTreeGridComponent -->

projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts

@@ -0,0 +1,115 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon,  } from './icon.broadcast.service';
+import { Component, SecurityContext } from '@angular/core';
+import { IconMeta, IgxIconService } from 'igniteui-angular';
+import { wait } from 'igniteui-angular/src/lib/test-utils/ui-interactions.spec';
+
+describe('Icon broadcast service', () => {
+    let fixture: ComponentFixture<BroadcastServiceComponent>;
+    let broadcastChannel: BroadcastChannel;
+    let events: BroadcastIconsChangeMessage[] = [];
+    const buildIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+        imports: [],
+        providers: [IgxIconBroadcastService]
+        })
+        .compileComponents();
+      });
+
+      beforeEach(() => {
+        broadcastChannel = new BroadcastChannel("ignite-ui-icon-channel");
+        broadcastChannel.onmessage = (e: MessageEvent<BroadcastIconsChangeMessage>) => {
+            events.push(e.data);
+        }
+        fixture = TestBed.createComponent(BroadcastServiceComponent);
+      });
+
+      afterEach(() => {
+        events = [];
+        broadcastChannel.close();
+      });
+
+    describe('Broadcast Events', () => {
+      it('should correctly process event of icons registering on channel.', async() => {
+        // simulate a new icon being registered on channel
+        const icons: Map<string, Map<string, SvgIcon>> = new Map();
+        const icon: Map<string, SvgIcon> = new Map()
+        icon.set("customIcon", { svg: buildIcon });
+        icons.set("customCollection", icon);
+        const message: BroadcastIconsChangeMessage = {
+            actionType: ActionType.RegisterIcon,
+            collections: icons
+        };
+        broadcastChannel.postMessage(message);
+        fixture.detectChanges();
+        await wait(50);
+        fixture.detectChanges();
+        const iconService = fixture.componentInstance.iconService;
+        const svg = iconService.getSvgIcon("customIcon", "customCollection");
+        expect(svg).not.toBeUndefined();
+      });
+
+      it('should correctly process event of setting an icon reference on channel.', async() => {
+        const refs: Map<string, Map<string, IconMeta>> = new Map();
+        const ref: Map<string, IconMeta> = new Map()
+        ref.set("customIcon", {name: "customIcon", family: "customCollection" });
+        refs.set("customCollection", ref);
+        const message: BroadcastIconsChangeMessage = {
+            actionType: ActionType.RegisterIcon,
+            references: refs
+        };
+        broadcastChannel.postMessage(message);
+        fixture.detectChanges();
+        await wait(50);
+        fixture.detectChanges();
+
+        const iconService = fixture.componentInstance.iconService;
+        const serviceRef = iconService.getIconRef("customIcon", "customCollection");
+        expect(serviceRef.family).toBe("customCollection");
+        expect(serviceRef.name).toBe("customIcon");
+      });
+
+      it('should send a request to sync state from any peer already on the channel on init.', async() => {
+        await wait(50);
+        expect(events.length).toBe(1);
+        expect(events[0].actionType).toBe(ActionType.SyncState);
+      });
+
+      it('should correctly process event of synching full state of icons on channel.', async() => {
+        const icons: Map<string, Map<string, SvgIcon>> = new Map();
+        const icon: Map<string, SvgIcon> = new Map()
+        icon.set("customIcon", { svg: buildIcon });
+        icons.set("customCollection", icon);
+        const refs: Map<string, Map<string, IconMeta>> = new Map();
+        const ref: Map<string, IconMeta> = new Map()
+        ref.set("customIcon", {name: "customIcon", family: "customCollection" });
+        refs.set("customCollection", ref);
+        const message: BroadcastIconsChangeMessage = {
+            actionType: ActionType.SyncState,
+            collections: icons,
+            references: refs
+        };
+        broadcastChannel.postMessage(message);
+        await wait(50);
+        const iconService = fixture.componentInstance.iconService;
+        const svg = iconService.getSvgIcon("customIcon", "customCollection");
+        expect(svg).not.toBeUndefined();
+        const serviceRef = iconService.getIconRef("customIcon", "customCollection");
+        expect(serviceRef.family).toBe("customCollection");
+        expect(serviceRef.name).toBe("customIcon");
+      });
+    })
+});
+
+@Component({
+    template: `
+    `,
+    standalone: true,
+    providers: [IgxIconBroadcastService, IgxIconService]
+})
+export class BroadcastServiceComponent {
+    constructor(public iconBroadcast: IgxIconBroadcastService, public iconService: IgxIconService) {}
+}

projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts

@@ -0,0 +1,83 @@
+import { Injectable, Optional } from '@angular/core';
+import { PlatformUtil } from '../../../igniteui-angular/src/lib/core/utils';
+import { IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service';
+import { IconMeta } from '../../../igniteui-angular/src/lib/icon/public_api';
+
+
+export interface SvgIcon {
+    svg: string;
+    title?: string;
+  }
+
+  export type Collection<T, U> = Map<T, U>;
+
+  export enum ActionType {
+    SyncState = 0,
+    RegisterIcon = 1,
+    UpdateIconReference = 2,
+  }
+
+  export interface BroadcastIconsChangeMessage {
+    actionType: ActionType;
+    collections?: Collection<string, Map<string, SvgIcon>>;
+    references?: Collection<string, Map<string, IconMeta>>;
+  }
+
+/** @hidden @internal **/
+@Injectable()
+export class IgxIconBroadcastService {
+    private iconBroadcastChannel: BroadcastChannel;
+    constructor(
+        protected _iconService: IgxIconService,
+        @Optional() private _platformUtil: PlatformUtil
+    ) {
+        if (this._platformUtil?.isBrowser) {
+            // open broadcast channel for sync with wc icon service.
+            this.iconBroadcastChannel = new BroadcastChannel("ignite-ui-icon-channel");
+            this.iconBroadcastChannel.onmessage = (event) => {
+                const message = event.data as BroadcastIconsChangeMessage;
+                if (message.actionType === ActionType.SyncState ||
+                     message.actionType === ActionType.RegisterIcon) {
+                    this.updateIconsFromCollection(message.collections);
+                }
+
+                if (message.actionType === ActionType.SyncState ||
+                     message.actionType === ActionType.UpdateIconReference) {
+                    this.updateRefsFromCollection(message.references);
+                }
+              };
+            // send message to sync state
+            this.iconBroadcastChannel.postMessage({
+                actionType: ActionType.SyncState
+            });
+        }
+    }
+
+    private updateIconsFromCollection(collections: Collection<string, Map<string, SvgIcon>>) {
+        if (!collections) return;
+        const collectionKeys = collections.keys();
+        for (const collectionKey of collectionKeys) {
+            const collection = collections.get(collectionKey);
+            for (const iconKey of collection.keys()) {
+                const value = collection.get(iconKey).svg;
+                this._iconService.addSvgIconFromText(iconKey, value, collectionKey);
+            }
+        }
+    }
+
+    private updateRefsFromCollection(collections: Collection<string, Map<string, any>>) {
+        if (!collections) return;
+        const collectionKeys = collections.keys();
+        for (const collectionKey of collectionKeys) {
+            const collection = collections.get(collectionKey);
+            for (const iconKey of collection.keys()) {
+                const collectionName = collection.get(iconKey).collection;
+                this._iconService.setIconRef(iconKey, 'default', {
+                    family: collectionName,
+                    name: iconKey
+                });
+            }
+        }
+    }
+
+}