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

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
@@ -966,7 +962,10 @@ class _MenuBaseComponent {
         this._transformMenu = new BehaviorSubject(transformMenuDefault);
         /** Emits whenever an animation on the menu completes. */
         this._animationDone = new Subject();
+        /** Whether this menu participates in the menu stack. */
+        this._usesMenuStack = false;
         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 +1210,7 @@ class _MenuBaseComponent {
         //#region --- Touch device customizations ---
         if (this._clientOutput?.device === 'touch') {
             event?.stopPropagation();
-            if (!MenuStack.isTop(this)) {
+            if (this._usesMenuStack && !this._menuStack.isTop(this)) {
                 return;
             }
         }
@@ -1404,6 +1403,7 @@ class GraniteMenuTriggerForDirective {
         // Tracking input type is necessary so it's possible to only auto-focus
         // the first item of the list when the menu is opened via the keyboard
         this.openedBy = null;
+        this._isInCustomTemplate = false;
         this._hoverSubscription = Subscription.EMPTY;
         this._menuCloseSubscription = Subscription.EMPTY;
         this._closingActionsSubscription = Subscription.EMPTY;
@@ -1428,6 +1428,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.
@@ -1544,9 +1545,11 @@ class GraniteMenuTriggerForDirective {
         if (this._overlayRef) {
             //#region --- Touch device customizations ---
             this.removeOverlayListeners();
-            // Remove from stack on destroy
-            if (this.menu && this._clientOutput?.device === 'touch') {
-                MenuStack.pop(this.menu);
+            if (this.menu &&
+                this._clientOutput?.device === 'touch' &&
+                this._isInCustomTemplate) {
+                this._menuStack.pop(this.menu);
+                this.menu._usesMenuStack = false;
             }
             //#endregion --- Touch device customizations ---
             this._overlayRef.dispose();
@@ -1571,8 +1574,10 @@ class GraniteMenuTriggerForDirective {
                 this.menu._isClosing = true;
                 // 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);
+                    if (this._isInCustomTemplate) {
+                        this._menuStack.pop(this.menu);
+                        this.menu._usesMenuStack = false;
+                    }
                     // First we wait for any running animation to complete
                     const runningAnimationDone = this.menu._isAnimating
                         ? this.menu._animationDone
@@ -1590,11 +1595,11 @@ class GraniteMenuTriggerForDirective {
                     //#endregion --- Touch device customizations ---
                     this._destroyMenu();
                 }
-                // If a click closed the menu, we should close the entire chain of nested menus.
-                // For touch devices, only propagate if it's not an outside click (handled by stack)
-                const shouldPropagate = this._clientOutput.device !== 'touch' &&
-                    (reason === 'click' || reason === 'tab') &&
-                    this._parentMenu;
+                const isTouch = this._clientOutput.device === 'touch';
+                const shouldPropagate = this._parentMenu &&
+                    (isTouch
+                        ? !this._isInCustomTemplate && reason !== 'keydown'
+                        : reason === 'click' || reason === 'tab');
                 if (shouldPropagate) {
                     if (!this.menu.preventParentClose) {
                         this._parentMenu.closed.emit(reason);
@@ -1616,12 +1621,11 @@ class GraniteMenuTriggerForDirective {
         this.menu.parentMenu = this.triggersSubmenu()
             ? this._parentMenu
             : undefined;
-        // Check if the menu is in a custom template
-        if (this._parentMenu && this._viewContainerRef?.element?.nativeElement) {
-            const isInCustomTemplate = this._viewContainerRef.element.nativeElement.closest('.granite-menu-custom-template');
-            if (isInCustomTemplate) {
-                this.menu.preventParentClose = true;
-            }
+        const isInCustomTemplate = !!(this._parentMenu &&
+            this._viewContainerRef?.element?.nativeElement?.closest('.granite-menu-custom-template'));
+        this._isInCustomTemplate = isInCustomTemplate;
+        if (isInCustomTemplate) {
+            this.menu.preventParentClose = true;
         }
         this.menu.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
         if (this._parentMenu) {
@@ -1647,6 +1651,12 @@ class GraniteMenuTriggerForDirective {
         if (this._clientOutput.device === 'touch') {
             panelClass.push('granite-overlay-pane-fill-width-bottom');
         }
+        if (isInCustomTemplate) {
+            panelClass.push('from-custom-template');
+        }
+        if (this.menu.customTemplate) {
+            panelClass.push('has-custom-template');
+        }
         // setting scrollStrategy options to overlay
         const scrollStrategy = this.setScrollStrategyToOverylay(this._clientOutput.device, this.menu.scrollStrategy);
         const hasBackdrop = this._clientOutput.device === 'touch' && !this.triggersSubmenu();
@@ -1674,6 +1684,18 @@ class GraniteMenuTriggerForDirective {
             if (this._clientOutput.device === 'touch') {
                 this.menu._panelAnimationState = 'void';
             }
+            if (isInCustomTemplate) {
+                this._overlayRef.addPanelClass('from-custom-template');
+            }
+            else {
+                this._overlayRef.removePanelClass('from-custom-template');
+            }
+            if (this.menu.customTemplate) {
+                this._overlayRef.addPanelClass('has-custom-template');
+            }
+            else {
+                this._overlayRef.removePanelClass('has-custom-template');
+            }
         }
         // Create portal from associated menu's template
         if (!this._portal || this._portal.templateRef !== this.menu.templateRef) {
@@ -1685,9 +1707,10 @@ class GraniteMenuTriggerForDirective {
         this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
         this.animateOpenMenu();
         //#region --- Touch device customizations ---
-        // Add menu to stack when opening on touch devices
-        if (this._clientOutput.device === 'touch') {
-            MenuStack.push(this.menu);
+        // Add menu to stack when opening on touch devices from custom template
+        if (this._clientOutput.device === 'touch' && isInCustomTemplate) {
+            this._menuStack.push(this.menu);
+            this.menu._usesMenuStack = true;
         }
         //#endregion --- Touch device customizations ---
         this._setIsMenuOpen(true);
@@ -1951,13 +1974,20 @@ class GraniteMenuTriggerForDirective {
         // root menu only.
         // For touch devices, handle outside clicks for all menus (not just root)
         // but only close the topmost menu in the stack
-        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))
+        const isTouchCustom = this._clientOutput.device === 'touch' && this._isInCustomTemplate;
+        const outsideClick = isTouchCustom
+            ? fromEvent(this._document, 'click').pipe(filter((e) => {
+                const el = e.target;
+                return (el !== this._element.nativeElement &&
+                    el.closest('.granite-menu') === null &&
+                    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))
+                ? fromEvent(this._document, 'click').pipe(filter((e) => {
+                    const el = e.target;
+                    return (el !== this._element.nativeElement &&
+                        el.closest('.granite-menu') === null);
+                }), filter(() => !this.menu._isAnimating), filter(() => !this.menu.customTemplate || this._menuStack.size() === 0))
                 : of(null);
         return merge(detachments, hover, parentClose, outsideClick).pipe(filter((event) => event !== null));
     }