@ifsworld/granite-components 18.0.2-beta.1 → 18.1.0-beta.1

package/fesm2022/ifsworld-granite-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, ChangeDetectionStrategy, Component, Input, ContentChildren, HostBinding, NgModule, Renderer2, InjectionToken, HostAttributeToken, HostListener, Directive, EventEmitter, ChangeDetectorRef, QueryList, TemplateRef, ContentChild, Output, ViewChild, ViewContainerRef, NgZone, Injectable, Optional, Pipe } from '@angular/core';
+import { inject, ElementRef, ChangeDetectionStrategy, Component, Input, ContentChildren, HostBinding, NgModule, Renderer2, InjectionToken, Injectable, HostAttributeToken, HostListener, Directive, EventEmitter, ChangeDetectorRef, QueryList, TemplateRef, ContentChild, Output, ViewChild, ViewContainerRef, NgZone, Optional, Pipe } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -665,55 +665,51 @@ const graniteMenuTouchAnimations = {
 const GRANITE_MENU_PANEL = new InjectionToken('GRANITE_MENU_PANEL');
 
 /**
- * Utility class to manage a stack of open menus for touch devices.
- * This ensures that when clicking outside or closing, only the topmost menu closes.
+ * Stack of open touch menus so outside-click / close affects only the top
+ * panel.
  */
-class MenuStack {
-    static { this.stack = []; }
-    /**
-     * Push a menu onto the stack when it opens
-     */
-    static push(menu) {
-        const index = this.stack.indexOf(menu);
+class GraniteMenuStackService {
+    constructor() {
+        this.stack = [];
+    }
+    /** Push a menu onto the stack when it opens */
+    push(menu) {
+        const index = this.stack.findIndex((m) => m.panelId === menu.panelId);
         if (index === -1) {
             this.stack.push(menu);
         }
     }
-    /**
-     * Remove a menu from the stack when it closes
-     */
-    static pop(menu) {
-        const index = this.stack.indexOf(menu);
+    /** Remove a menu from the stack when it closes */
+    pop(menu) {
+        const index = this.stack.findIndex((m) => m.panelId === menu.panelId);
         if (index !== -1) {
             this.stack.splice(index, 1);
         }
     }
-    /**
-     * Get the topmost menu in the stack
-     */
-    static getTop() {
+    /** Topmost menu in the stack */
+    getTop() {
         return this.stack.length > 0 ? this.stack[this.stack.length - 1] : null;
     }
-    /**
-     * Check if a menu is the topmost one
-     */
-    static isTop(menu) {
+    /** Whether the menu is the topmost one */
+    isTop(menu) {
         const top = this.getTop();
         return top !== null && top.panelId === menu.panelId;
     }
-    /**
-     * Clear the entire stack (useful for cleanup)
-     */
-    static clear() {
+    /** Clear the stack (e.g. tests) */
+    clear() {
         this.stack = [];
     }
-    /**
-     * Get the current stack size
-     */
-    static size() {
+    /** Current stack depth */
+    size() {
         return this.stack.length;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuStackService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuStackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
  * @license
@@ -967,6 +963,7 @@ class _MenuBaseComponent {
         /** Emits whenever an animation on the menu completes. */
         this._animationDone = new Subject();
         this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._menuStack = inject(GraniteMenuStackService);
         this._menuEmpty$ = new BehaviorSubject(false);
         // eslint-disable-next-line @typescript-eslint/member-ordering
         this._isMenuEmpty$ = combineLatest([
@@ -1211,7 +1208,7 @@ class _MenuBaseComponent {
         //#region --- Touch device customizations ---
         if (this._clientOutput?.device === 'touch') {
             event?.stopPropagation();
-            if (!MenuStack.isTop(this)) {
+            if (!this._menuStack.isTop(this)) {
                 return;
             }
         }
@@ -1428,6 +1425,7 @@ class GraniteMenuTriggerForDirective {
         });
         this._dir = inject(Directionality, { optional: true });
         this._focusMonitor = inject(FocusMonitor);
+        this._menuStack = inject(GraniteMenuStackService);
         this._touchTouchingElement = false;
         /**
          * Handles touch start events on the trigger.
@@ -1546,7 +1544,7 @@ class GraniteMenuTriggerForDirective {
             this.removeOverlayListeners();
             // Remove from stack on destroy
             if (this.menu && this._clientOutput?.device === 'touch') {
-                MenuStack.pop(this.menu);
+                this._menuStack.pop(this.menu);
             }
             //#endregion --- Touch device customizations ---
             this._overlayRef.dispose();
@@ -1572,7 +1570,7 @@ class GraniteMenuTriggerForDirective {
                 // Get rid of the menu and tell any parent to restore its position
                 if (this._clientOutput.device === 'touch') {
                     // Remove from stack when closing
-                    MenuStack.pop(this.menu);
+                    this._menuStack.pop(this.menu);
                     // First we wait for any running animation to complete
                     const runningAnimationDone = this.menu._isAnimating
                         ? this.menu._animationDone
@@ -1687,7 +1685,7 @@ class GraniteMenuTriggerForDirective {
         //#region --- Touch device customizations ---
         // Add menu to stack when opening on touch devices
         if (this._clientOutput.device === 'touch') {
-            MenuStack.push(this.menu);
+            this._menuStack.push(this.menu);
         }
         //#endregion --- Touch device customizations ---
         this._setIsMenuOpen(true);
@@ -1954,7 +1952,7 @@ class GraniteMenuTriggerForDirective {
         const outsideClick = this._clientOutput.device === 'touch'
             ? fromEvent(this._document, 'click').pipe(filter((e) => e.target !== this._element.nativeElement &&
                 e.target.closest('.granite-menu') === null &&
-                MenuStack.isTop(this.menu)), filter(() => !this.menu._isAnimating))
+                this._menuStack.isTop(this.menu)), filter(() => !this.menu._isAnimating))
             : !this._parentMenu
                 ? fromEvent(this._document, 'click').pipe(filter((e) => e.target !== this._element.nativeElement &&
                     e.target.closest('.granite-menu') === null), filter(() => !this.menu._isAnimating))