Merge branch 'dmdimitrov/query-builder-improvements' of https://github.com/IgniteUI/igniteui-angular into dmdimitrov/query-builder-improvements

Author: igdmdimitrov

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

@@ -7,49 +7,68 @@ 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 type Collection<T, U> = Map<T, U>;
 
-  export enum ActionType {
+export enum ActionType {
     SyncState = 0,
     RegisterIcon = 1,
     UpdateIconReference = 2,
-  }
+}
 
-  export interface BroadcastIconsChangeMessage {
+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;
+    private iconBroadcastChannel: BroadcastChannel | null;
+
     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.create();
+
+            globalThis.addEventListener('pageshow', () => this.create())
+            globalThis.addEventListener('pagehide', () => this.dispose())
+        }
+    }
+
+    public handleEvent({ data }: MessageEvent<BroadcastIconsChangeMessage>) {
+        const { actionType, collections, references } = data;
+
+        if (actionType === ActionType.SyncState || ActionType.RegisterIcon) {
+            this.updateIconsFromCollection(collections);
+        }
+
+        if (actionType === ActionType.SyncState || ActionType.UpdateIconReference) {
+            this.updateRefsFromCollection(references);
+        }
+    }
+
+    private create() {
+        if (!this.iconBroadcastChannel) {
+            this.iconBroadcastChannel = new BroadcastChannel('ignite-ui-icon-channel');
+            this.iconBroadcastChannel.addEventListener('message', this);
+
+            // sync state
             this.iconBroadcastChannel.postMessage({
                 actionType: ActionType.SyncState
-            });
+            })
+        }
+    }
+
+    private dispose() {
+        if (this.iconBroadcastChannel) {
+            this.iconBroadcastChannel.removeEventListener('message', this);
+            this.iconBroadcastChannel.close();
+            this.iconBroadcastChannel = null;
         }
     }
 

projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts

@@ -83,7 +83,7 @@ export class QueryBuilderFunctions {
 
     public static getQueryBuilderHeaderText(fix: ComponentFixture<any>) {
         const header = QueryBuilderFunctions.getQueryBuilderHeader(fix);
-        const title = header.querySelector('.ig-typography__h6');
+        const title = header.querySelector('.igx-query-builder__title');
         return title.textContent;
     }
 

projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts

@@ -1680,12 +1680,12 @@ describe('IgxQueryBuilder', () => {
                 (item.querySelector('.igx-filter-tree__expression-condition') as HTMLElement).innerText == 'Not In'
             )[0];
             const toggleBtn = expandableItem.querySelector('.igx-filter-tree__details-button') as HTMLElement;
-            expect((toggleBtn.querySelector('igx-icon') as HTMLElement).innerText).toBe('unfold_less');
+            expect((toggleBtn.querySelector('igx-icon') as HTMLElement).innerText).toBe('unfold_more');
             toggleBtn.click();
             tick(100);
             fix.detectChanges();
 
-            expect((toggleBtn.querySelector('igx-icon') as HTMLElement).innerText).toBe('unfold_more');
+            expect((toggleBtn.querySelector('igx-icon') as HTMLElement).innerText).toBe('unfold_less');
             expect(fix.debugElement.query(By.css(`.${QueryBuilderConstants.QUERY_BUILDER_TREE}--level-1`)).nativeElement.checkVisibility()).toBeTrue();
         }));
 
@@ -2114,8 +2114,8 @@ describe('IgxQueryBuilder', () => {
             expect(dialogOutlet).toBeDefined();
 
             expect(dialogOutlet.querySelector('.igx-dialog__window-title').textContent.trim()).toBe('My Confirmation');
-            expect(dialogOutlet.querySelector('.igx-dialog__window-content').children[0].textContent.trim()).toBe('My changing entity message');
-            expect(dialogOutlet.querySelector('.igx-dialog__window-content').children[1].textContent.trim()).toBe('My do not show this dialog again');
+            expect(dialogOutlet.querySelector('.igx-query-builder-dialog').children[0].textContent.trim()).toBe('My changing entity message');
+            expect(dialogOutlet.querySelector('.igx-query-builder-dialog').children[1].textContent.trim()).toBe('My do not show this dialog again');
             expect(dialogOutlet.querySelector('.igx-dialog__window-actions').children[0].textContent.trim()).toBe('My Cancel');
             expect(dialogOutlet.querySelector('.igx-dialog__window-actions').children[1].textContent.trim()).toBe('My Confirm');
 
@@ -2217,10 +2217,10 @@ export class IgxQueryBuilderSampleTestComponent implements OnInit {
     template: `
      <igx-query-builder #queryBuilder [entities]="this.entities" [expressionTree]="this.expressionTree">
          <igx-query-builder-header [title]="'Custom Title'" [showLegend]="showLegend"></igx-query-builder-header>
-         <ng-template #searchValueTemplate 
-                        igxQueryBuilderSearchValue 
+         <ng-template #searchValueTemplate
+                        igxQueryBuilderSearchValue
                         let-searchValue
-                        let-selectedField = "selectedField" 
+                        let-selectedField = "selectedField"
                         let-selectedCondition = "selectedCondition"
                         let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
             <input type="text" class="custom-class" required [(ngModel)]="searchValue.value"/>