@ifsworld/granite-components 18.0.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';
@@ -664,6 +664,53 @@ const graniteMenuTouchAnimations = {
  */
 const GRANITE_MENU_PANEL = new InjectionToken('GRANITE_MENU_PANEL');
 
+/**
+ * Stack of open touch menus so outside-click / close affects only the top
+ * panel.
+ */
+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 */
+    pop(menu) {
+        const index = this.stack.findIndex((m) => m.panelId === menu.panelId);
+        if (index !== -1) {
+            this.stack.splice(index, 1);
+        }
+    }
+    /** Topmost menu in the stack */
+    getTop() {
+        return this.stack.length > 0 ? this.stack[this.stack.length - 1] : null;
+    }
+    /** Whether the menu is the topmost one */
+    isTop(menu) {
+        const top = this.getTop();
+        return top !== null && top.panelId === menu.panelId;
+    }
+    /** Clear the stack (e.g. tests) */
+    clear() {
+        this.stack = [];
+    }
+    /** 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
  * Copyright Google LLC All Rights Reserved.
@@ -916,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([
@@ -1153,9 +1201,18 @@ class _MenuBaseComponent {
     }
     /**
      * Handle click on the close button by emitting on the `closed` emitter
-     * without any particular reason
+     * without any particular reason.
+     * For touch devices, only closes if this is the topmost menu in the stack.
      */
-    _handleCloseClick() {
+    _handleCloseClick(event) {
+        //#region --- Touch device customizations ---
+        if (this._clientOutput?.device === 'touch') {
+            event?.stopPropagation();
+            if (!this._menuStack.isTop(this)) {
+                return;
+            }
+        }
+        //#endregion --- Touch device customizations ---
         this.closed.emit();
     }
     /**
@@ -1309,7 +1366,7 @@ class GraniteMenuComponent extends _MenuBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GraniteMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: GraniteMenuComponent, isStandalone: false, selector: "granite-menu", providers: [
             { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
-        ], exportAs: ["graniteMenu"], usesInheritance: true, ngImport: i0, template: "<!--\n  Using separate template part for desktop and touch output, because of\n  animation triggers and slightly different content.\n-->\n<ng-template>\n  <!-- Desktop -->\n  <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n    <div\n      #menu\n      class=\"granite-menu\"\n      [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuDesktop]=\"_transformMenu | async\"\n      (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n      (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n      [style]=\"styles\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Touch -->\n  <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n    <div\n      #menu\n      class=\"granite-menu granite-device-output-touch\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [style]=\"touchStyles\"\n      [@transformMenuTouch]=\"_transformMenu | async\"\n      (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n      (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <div *ngIf=\"showTitle\" class=\"header-container\">\n          <button\n            [disabled]=\"!showBackButton\"\n            graniteMenuTouchTitleItem\n            (click)=\"_handleBackClick($event)\"\n          >\n            {{ title }}\n          </button>\n        </div>\n\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n        <div class=\"footer-container\"></div>\n      </div>\n    </div>\n\n    <!-- Close button -->\n    <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n      <button\n        *ngIf=\"showCloseButton\"\n        graniteMenuTouchCloseItem\n        (click)=\"_handleCloseClick()\"\n      >\n        {{ closeLabel }}\n      </button>\n    </div>\n  </ng-container>\n\n  <!--\n    Content template shared between desktop and touch parts, as <ng-content>\n    can't be used in two places in the same template\n  -->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu-custom-template{display:block}.granite-menu-custom-template:not(button){cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", exportAs: ["graniteMenuTouchCloseItem"] }, { kind: "component", type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", exportAs: ["graniteMenuTouchTitleItem"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
+        ], exportAs: ["graniteMenu"], usesInheritance: true, ngImport: i0, template: "<!--\n  Using separate template part for desktop and touch output, because of\n  animation triggers and slightly different content.\n-->\n<ng-template>\n  <!-- Desktop -->\n  <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n    <div\n      #menu\n      class=\"granite-menu\"\n      [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuDesktop]=\"_transformMenu | async\"\n      (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n      (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n      [style]=\"styles\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Touch -->\n  <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n    <div\n      #menu\n      class=\"granite-menu granite-device-output-touch\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [style]=\"touchStyles\"\n      [@transformMenuTouch]=\"_transformMenu | async\"\n      (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n      (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <div *ngIf=\"showTitle\" class=\"header-container\">\n          <button\n            [disabled]=\"!showBackButton\"\n            graniteMenuTouchTitleItem\n            (click)=\"_handleBackClick($event)\"\n          >\n            {{ title }}\n          </button>\n        </div>\n\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n        <div class=\"footer-container\"></div>\n      </div>\n    </div>\n\n    <!-- Close button -->\n    <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n      <button\n        *ngIf=\"showCloseButton\"\n        graniteMenuTouchCloseItem\n        (click)=\"_handleCloseClick($event)\"\n      >\n        {{ closeLabel }}\n      </button>\n    </div>\n  </ng-container>\n\n  <!--\n    Content template shared between desktop and touch parts, as <ng-content>\n    can't be used in two places in the same template\n  -->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu-custom-template{display:block}.granite-menu-custom-template:not(button){cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", exportAs: ["graniteMenuTouchCloseItem"] }, { kind: "component", type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", exportAs: ["graniteMenuTouchTitleItem"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
             graniteMenuDesktopAnimations.transformMenuDesktop,
             graniteMenuTouchAnimations.transformMenuTouch,
             graniteMenuTouchAnimations.transformCloseButton,
@@ -1323,7 +1380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         graniteMenuTouchAnimations.transformCloseButton,
                     ], providers: [
                         { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
-                    ], template: "<!--\n  Using separate template part for desktop and touch output, because of\n  animation triggers and slightly different content.\n-->\n<ng-template>\n  <!-- Desktop -->\n  <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n    <div\n      #menu\n      class=\"granite-menu\"\n      [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuDesktop]=\"_transformMenu | async\"\n      (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n      (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n      [style]=\"styles\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Touch -->\n  <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n    <div\n      #menu\n      class=\"granite-menu granite-device-output-touch\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [style]=\"touchStyles\"\n      [@transformMenuTouch]=\"_transformMenu | async\"\n      (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n      (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <div *ngIf=\"showTitle\" class=\"header-container\">\n          <button\n            [disabled]=\"!showBackButton\"\n            graniteMenuTouchTitleItem\n            (click)=\"_handleBackClick($event)\"\n          >\n            {{ title }}\n          </button>\n        </div>\n\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n        <div class=\"footer-container\"></div>\n      </div>\n    </div>\n\n    <!-- Close button -->\n    <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n      <button\n        *ngIf=\"showCloseButton\"\n        graniteMenuTouchCloseItem\n        (click)=\"_handleCloseClick()\"\n      >\n        {{ closeLabel }}\n      </button>\n    </div>\n  </ng-container>\n\n  <!--\n    Content template shared between desktop and touch parts, as <ng-content>\n    can't be used in two places in the same template\n  -->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu-custom-template{display:block}.granite-menu-custom-template:not(button){cursor:default}\n"] }]
+                    ], template: "<!--\n  Using separate template part for desktop and touch output, because of\n  animation triggers and slightly different content.\n-->\n<ng-template>\n  <!-- Desktop -->\n  <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n    <div\n      #menu\n      class=\"granite-menu\"\n      [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [@transformMenuDesktop]=\"_transformMenu | async\"\n      (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n      (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n      [style]=\"styles\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Touch -->\n  <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n    <div\n      #menu\n      class=\"granite-menu granite-device-output-touch\"\n      tabindex=\"-1\"\n      [id]=\"panelId\"\n      [style]=\"touchStyles\"\n      [@transformMenuTouch]=\"_transformMenu | async\"\n      (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n      (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n      (click)=\"_handleClick($event)\"\n      (keydown)=\"_handleKeydown($event)\"\n    >\n      <div class=\"granite-menu-content\">\n        <div *ngIf=\"showTitle\" class=\"header-container\">\n          <button\n            [disabled]=\"!showBackButton\"\n            graniteMenuTouchTitleItem\n            (click)=\"_handleBackClick($event)\"\n          >\n            {{ title }}\n          </button>\n        </div>\n\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n        <div class=\"footer-container\"></div>\n      </div>\n    </div>\n\n    <!-- Close button -->\n    <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n      <button\n        *ngIf=\"showCloseButton\"\n        graniteMenuTouchCloseItem\n        (click)=\"_handleCloseClick($event)\"\n      >\n        {{ closeLabel }}\n      </button>\n    </div>\n  </ng-container>\n\n  <!--\n    Content template shared between desktop and touch parts, as <ng-content>\n    can't be used in two places in the same template\n  -->\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;box-shadow:var(--granite-shadow-l);border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu-custom-template{display:block}.granite-menu-custom-template:not(button){cursor:default}\n"] }]
         }] });
 
 /** Options for binding a passive event listener. */
@@ -1368,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.
@@ -1484,6 +1542,10 @@ class GraniteMenuTriggerForDirective {
         if (this._overlayRef) {
             //#region --- Touch device customizations ---
             this.removeOverlayListeners();
+            // Remove from stack on destroy
+            if (this.menu && this._clientOutput?.device === 'touch') {
+                this._menuStack.pop(this.menu);
+            }
             //#endregion --- Touch device customizations ---
             this._overlayRef.dispose();
             this._overlayRef = null;
@@ -1507,6 +1569,8 @@ 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);
                     // First we wait for any running animation to complete
                     const runningAnimationDone = this.menu._isAnimating
                         ? this.menu._animationDone
@@ -1525,7 +1589,11 @@ class GraniteMenuTriggerForDirective {
                     this._destroyMenu();
                 }
                 // If a click closed the menu, we should close the entire chain of nested menus.
-                if ((reason === 'click' || reason === 'tab') && this._parentMenu) {
+                // 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;
+                if (shouldPropagate) {
                     if (!this.menu.preventParentClose) {
                         this._parentMenu.closed.emit(reason);
                     }
@@ -1614,6 +1682,12 @@ class GraniteMenuTriggerForDirective {
         // Subscribe to stream that emits whenever an action that should close the menu occurs
         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') {
+            this._menuStack.push(this.menu);
+        }
+        //#endregion --- Touch device customizations ---
         this._setIsMenuOpen(true);
         this.menu.focusFirstItem(this.openedBy || 'program');
     }
@@ -1873,10 +1947,16 @@ class GraniteMenuTriggerForDirective {
         // Note: Quick fix. Feature reportedly exists in CDK for Angular 10
         // Filter to prevent closing when animating added though. Applied to
         // root menu only.
-        const outsideClick = !this._parentMenu
+        // 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), filter(() => !this.menu._isAnimating))
-            : of(null);
+                e.target.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))
+                : of(null);
         return merge(detachments, hover, parentClose, outsideClick).pipe(filter((event) => event !== null));
     }
     /**