fix(core): shellbar context area should allow ngIf (#13510)

* fix(core): shellbar context area should allow ngIf

* fix(core): add event that is fired when context area item is shown/hidden

* fix(core): use output signal and inject for new changes

Author: mikerodonnell89

libs/core/shellbar/shellbar-context-area/shellbar-context-area.component.ts

@@ -1,4 +1,15 @@
-import { ChangeDetectionStrategy, Component, ElementRef, inject } from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    DestroyRef,
+    ElementRef,
+    inject,
+    output
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ResizeObserverService } from '@fundamental-ngx/cdk/utils';
+import { isEqual, sortBy } from 'lodash-es';
 import { FD_SHELLBAR_COMPONENT } from '../tokens';
 
 /**
@@ -22,24 +33,56 @@ import { FD_SHELLBAR_COMPONENT } from '../tokens';
         `
     ]
 })
-export class ShellbarContextAreaComponent {
+export class ShellbarContextAreaComponent implements AfterViewInit {
+    /** Event emitted when items in the context area are hidden or shown. Event parameter is an array of all the items that are hidden. */
+    contentItemVisibilityChange = output<HTMLElement[]>();
+
+    /** @hidden */
+    el: ElementRef = inject(ElementRef);
+
     /** @hidden */
     private readonly _shellbar = inject(FD_SHELLBAR_COMPONENT);
 
     /** @hidden */
-    constructor(public el: ElementRef) {}
+    private _resizeObserverService = inject(ResizeObserverService);
+
+    /** @hidden */
+    private readonly _destroyRef = inject(DestroyRef);
+
+    /** @hidden */
+    private _hiddenItems: HTMLElement[];
+
+    /** @hidden */
+    ngAfterViewInit(): void {
+        this._resizeObserverService
+            .observe(this.el.nativeElement)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+                this.showElements();
+                this.hideElementsIfNeeded();
+            });
+    }
 
     /**
      * Iteratively hides elements if the end of the actions exceed the end of the shellbar.
      */
     hideElementsIfNeeded(): void {
-        const elements: { el: HTMLElement; priority: number }[] = this._getElementsWithPriority();
+        const newHiddenItems: HTMLElement[] = [];
+        const contextAreaItems: { el: HTMLElement; priority: number }[] = this._getContextAreaItemsWithPriority();
         while (this._shellbar._actionsExceedShellbarWidth()) {
-            const shownElements = elements.filter((el) => el.el.style.display !== 'none');
+            const shownElements = contextAreaItems.filter((item) => item?.el?.style?.display !== 'none');
             if (shownElements.length === 0) {
                 break;
             }
-            shownElements[shownElements.length - 1].el.style.display = 'none';
+            const lastItem = shownElements[shownElements.length - 1];
+            if (lastItem?.el?.style) {
+                newHiddenItems.push(lastItem.el);
+                lastItem.el.style.display = 'none';
+            }
+        }
+        if (!isEqual(sortBy(this._hiddenItems), sortBy(newHiddenItems))) {
+            this._hiddenItems = newHiddenItems;
+            this.contentItemVisibilityChange.emit(newHiddenItems);
         }
     }
 
@@ -48,8 +91,10 @@ export class ShellbarContextAreaComponent {
      * to exceed the end of th eshellbar.
      */
     showElements(): void {
-        this._getElementsWithPriority().forEach((el) => {
-            el.el.style.display = '';
+        this._getContextAreaItemsWithPriority().forEach((item) => {
+            if (item?.el?.style) {
+                item.el.style.display = '';
+            }
         });
     }
 
@@ -58,8 +103,8 @@ export class ShellbarContextAreaComponent {
      * The elements are sorted based on their priority, with elements having
      * higher priority shown first.
      */
-    private _getElementsWithPriority(): { el: HTMLElement; priority: number }[] {
-        return [...this.el.nativeElement.childNodes]
+    private _getContextAreaItemsWithPriority(): { el: HTMLElement; priority: number }[] {
+        return [...this.el.nativeElement.children]
             .map((element: HTMLElement, index) => {
                 const hasPriorityAttribute = element.hasAttribute && element.hasAttribute('fdShellbarHidePriority');
                 const priority = hasPriorityAttribute

libs/docs/core/shellbar/examples/shellbar-branding-context-area-example/shellbar-branding-context-area-example.component.html

@@ -11,7 +11,7 @@
         <fd-shellbar-title> Corporate Portal </fd-shellbar-title>
     </fd-shellbar-branding>
 
-    <fd-shellbar-context-area>
+    <fd-shellbar-context-area (contentItemVisibilityChange)="itemVisibilityChanged($event)">
         <fd-shellbar-separator fdShellbarHidePriority="1"></fd-shellbar-separator>
         <span
             fdShellbarHidePriority="2"
@@ -28,7 +28,9 @@
         >
         </fd-product-menu>
         <span fdShellbarHidePriority="4" fd-button label="Button priority 4"></span>
-        <span fdShellbarHidePriority="3" fd-button label="Button priority 3"></span>
+        @if (showButtonWithPriority3) {
+            <span fdShellbarHidePriority="3" fd-button label="Button priority 3"></span>
+        }
     </fd-shellbar-context-area>
 
     <fdp-search-field
@@ -187,3 +189,7 @@ <h5 fd-panel-title id="panel-expandable-title-1">Other Accounts</h5>
         </fd-user-menu>
     </fd-shellbar-actions>
 </fd-shellbar>
+
+<br />
+
+<button fd-button (click)="toggleButton3()">Toggle display of button with priority 3</button>

libs/docs/core/shellbar/examples/shellbar-branding-context-area-example/shellbar-branding-context-area-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ClickedDirective } from '@fundamental-ngx/cdk';
 import { AvatarComponent } from '@fundamental-ngx/core/avatar';
@@ -12,7 +12,13 @@ import { PanelModule } from '@fundamental-ngx/core/panel';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
 import { ProductSwitchItem, ProductSwitchModule } from '@fundamental-ngx/core/product-switch';
 import { SegmentedButtonComponent } from '@fundamental-ngx/core/segmented-button';
-import { ShellbarMenuItem, ShellbarModule, ShellbarUser, ShellbarUserMenu } from '@fundamental-ngx/core/shellbar';
+import {
+    ShellbarComponent,
+    ShellbarMenuItem,
+    ShellbarModule,
+    ShellbarUser,
+    ShellbarUserMenu
+} from '@fundamental-ngx/core/shellbar';
 import {
     UserMenuBodyComponent,
     UserMenuComponent,
@@ -74,6 +80,9 @@ export class ShellbarBrandingContextAreaExampleComponent {
     @ViewChild(UserMenuComponent)
     userMenuComponent: UserMenuComponent;
 
+    @ViewChild(ShellbarComponent, { read: ElementRef })
+    shellbar: ElementRef;
+
     expanded = true;
 
     isOpen = false;
@@ -82,6 +91,8 @@ export class ShellbarBrandingContextAreaExampleComponent {
 
     inputText = '';
 
+    showButtonWithPriority3 = true;
+
     suggestions: SuggestionItem[] = [
         {
             value: 'Apple'
@@ -342,4 +353,12 @@ export class ShellbarBrandingContextAreaExampleComponent {
             duration: 5000
         });
     }
+
+    toggleButton3(): void {
+        this.showButtonWithPriority3 = !this.showButtonWithPriority3;
+    }
+
+    itemVisibilityChanged(event: any): void {
+        console.log(event);
+    }
 }