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

package/fesm2022/ifsworld-granite-components.mjs

@@ -962,6 +962,8 @@ 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);
@@ -1208,7 +1210,7 @@ class _MenuBaseComponent {
         //#region --- Touch device customizations ---
         if (this._clientOutput?.device === 'touch') {
             event?.stopPropagation();
-            if (!this._menuStack.isTop(this)) {
+            if (this._usesMenuStack && !this._menuStack.isTop(this)) {
                 return;
             }
         }
@@ -1401,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;
@@ -1542,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') {
+            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();
@@ -1569,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
-                    this._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
@@ -1588,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);
@@ -1614,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) {
@@ -1645,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();
@@ -1672,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) {
@@ -1683,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') {
+        // 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);
@@ -1949,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 &&
-                this._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));
     }