@seniorsistemas/angular-components 19.8.0 → 19.9.0

package/fesm2022/seniorsistemas-angular-components-tiered-menu.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, Component, Input, HostListener, ApplicationRef, ComponentFactoryResolver, Injector, ChangeDetectorRef, Output, ElementRef, Directive, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, Component, Input, HostListener, ElementRef, Injector, ChangeDetectorRef, Output, Directive, NgModule } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { disableScroll, enableScroll } from '@seniorsistemas/angular-components/utils';
-import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 class TieredMenuService {
     currentItem = null;
@@ -70,6 +72,7 @@ class TieredMenuEventService {
     incrementCurrentItemEvent = new EventEmitter();
     decrementCurrentItemEvent = new EventEmitter();
     closeAllMenusEvent = new EventEmitter();
+    restoreFocusEvent = new EventEmitter();
     selectItemEvent = new EventEmitter();
     openItemMenuEvent = new EventEmitter();
     closeItemMenuEvent = new EventEmitter();
@@ -117,11 +120,11 @@ class TieredMenuItemComponent {
         window.clearTimeout(this._showTimeout);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuItemComponent, isStandalone: true, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuItemComponent, isStandalone: true, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px;white-space:nowrap}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tiered-menu-item', standalone: true, imports: [NgClass], template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"] }]
+            args: [{ selector: 's-tiered-menu-item', standalone: true, imports: [NgClass], template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px;white-space:nowrap}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"] }]
         }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
@@ -159,16 +162,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class TieredMenuNestedComponent {
     tieredMenuService = inject(TieredMenuService);
     _tieredMenuEventService = inject(TieredMenuEventService);
+    _elementRef = inject(ElementRef);
+    _focusTrapFactory = inject(FocusTrapFactory);
     items;
-    top = 0;
-    left = 0;
-    // public maxHeight = 0;
     // Saves the last opened item to close it when a new one is opened
     _lastOpenItem;
+    _focusTrap = null;
     _unsubscribe$ = new Subject();
-    onResize() {
-        this._tieredMenuEventService.closeAllMenusEvent.emit();
-    }
     onDocumentClick(event) {
         // Closing menu when clicked outside.
         const target = event.target;
@@ -180,6 +180,7 @@ class TieredMenuNestedComponent {
     onKeydownHandler(event) {
         switch (event.key) {
             case 'Escape':
+                this._tieredMenuEventService.restoreFocusEvent.emit();
                 this._tieredMenuEventService.closeAllMenusEvent.emit();
                 break;
             case ' ':
@@ -199,17 +200,37 @@ class TieredMenuNestedComponent {
             case 'ArrowDown':
                 this._tieredMenuEventService.incrementCurrentItemEvent.emit();
                 break;
+            case 'Tab':
+                // Move focus between items instead of letting Tab escape the (trapped) menu.
+                if (event.shiftKey) {
+                    this._tieredMenuEventService.decrementCurrentItemEvent.emit();
+                }
+                else {
+                    this._tieredMenuEventService.incrementCurrentItemEvent.emit();
+                }
+                event.preventDefault();
+                break;
         }
     }
     ngOnInit() {
         this.tieredMenuService.currentItems = this.items;
+        this.tieredMenuService.currentItem = this.items[0] ?? null;
         this._subscribeEvents();
-        disableScroll();
+        this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+        requestAnimationFrame(() => {
+            this._focusCurrentItem();
+        });
     }
     ngOnDestroy() {
         this._unsubscribe$.next();
         this._unsubscribe$.complete();
-        enableScroll();
+        this._focusTrap?.destroy();
+    }
+    _focusCurrentItem() {
+        const id = this.tieredMenuService.currentItem?.id;
+        if (!id)
+            return;
+        document.getElementById(id)?.focus();
     }
     _incrementCurItem() {
         if (!this.tieredMenuService.currentItem) {
@@ -268,9 +289,11 @@ class TieredMenuNestedComponent {
     _subscribeEvents() {
         this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._incrementCurItem();
+            this._focusCurrentItem();
         });
         this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._decrementCurItem();
+            this._focusCurrentItem();
         });
         this._tieredMenuEventService.selectItemEvent
             .pipe(takeUntil(this._unsubscribe$))
@@ -305,15 +328,12 @@ class TieredMenuNestedComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuNestedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuNestedComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuNestedComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"menu menu--nested\">\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:flex;flex-direction:column;width:calc(100vw - 8px);padding:4px 0;overflow:auto}.menu .submenu{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuNestedComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgStyle, NgTemplateOutlet, TieredMenuItemComponent, TieredMenuDividerComponent], template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"] }]
-        }], propDecorators: { onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }], onDocumentClick: [{
+            args: [{ standalone: true, imports: [NgTemplateOutlet, TieredMenuItemComponent, TieredMenuDividerComponent], template: "<div class=\"menu menu--nested\">\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:flex;flex-direction:column;width:calc(100vw - 8px);padding:4px 0;overflow:auto}.menu .submenu{margin-left:24px}\n"] }]
+        }], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onKeydownHandler: [{
@@ -322,25 +342,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 class TieredMenuComponent {
-    _appRef = inject(ApplicationRef);
-    _componentFactoryResolver = inject(ComponentFactoryResolver);
+    _overlay = inject(Overlay);
+    _elementRef = inject(ElementRef);
     _injector = inject(Injector);
+    _focusTrapFactory = inject(FocusTrapFactory);
     _changeDetectorRef = inject(ChangeDetectorRef);
     tieredMenuService = inject(TieredMenuService);
     _tieredMenuEventService = inject(TieredMenuEventService);
     ariaLabel;
     items = [];
-    top = 0;
-    left = 0;
     menuTriggerEvent = 'hover';
     isSubmenu = false;
+    _overlayRef = null;
     _componentRef = null;
-    _menuDivElement = null;
+    _focusTrap = null;
     _unsubscribe$ = new Subject();
     destroyRequest = new EventEmitter();
-    onResize() {
-        this._tieredMenuEventService.closeAllMenusEvent.emit();
-    }
     onDocumentClick(event) {
         // Closing menu when clicked outside.
         const target = event.target;
@@ -352,12 +369,10 @@ class TieredMenuComponent {
     onKeydownHandler(event) {
         switch (event.key) {
             case 'Escape':
+                this._tieredMenuEventService.restoreFocusEvent.emit();
                 this._tieredMenuEventService.closeAllMenusEvent.emit();
                 event.preventDefault();
                 break;
-            case 'Tab':
-                this._tieredMenuEventService.closeAllMenusEvent.emit();
-                break;
             case ' ':
             case 'Enter':
                 if (this.tieredMenuService.currentItem &&
@@ -377,6 +392,17 @@ class TieredMenuComponent {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 break;
+            case 'Tab':
+                // Move focus between items instead of letting Tab escape the (trapped) menu.
+                if (event.shiftKey) {
+                    this._tieredMenuEventService.decrementCurrentItemEvent.emit();
+                }
+                else {
+                    this._tieredMenuEventService.incrementCurrentItemEvent.emit();
+                }
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                break;
             case 'ArrowLeft':
                 if (this.tieredMenuService.currentItem && this.items.includes(this.tieredMenuService.currentItem)) {
                     this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem);
@@ -397,11 +423,11 @@ class TieredMenuComponent {
     }
     ngOnInit() {
         this._subscribeEvents();
+        this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
         // Submenus have their focus managed by the openItemMenuEvent handler.
         if (!this.isSubmenu) {
             this.tieredMenuService.currentItems = this.items;
             this.tieredMenuService.currentItem = this.items[0] ?? null;
-            disableScroll();
             requestAnimationFrame(() => {
                 this._focusCurrentItem();
             });
@@ -410,6 +436,7 @@ class TieredMenuComponent {
     ngOnDestroy() {
         this._unsubscribe$.next();
         this._unsubscribe$.complete();
+        this._focusTrap?.destroy();
     }
     _focusCurrentItem() {
         const id = this.tieredMenuService.currentItem?.id;
@@ -459,66 +486,74 @@ class TieredMenuComponent {
             this._decrementCurItem();
         }
     }
-    _createMenu(items, position) {
-        if (!this._componentRef && items) {
-            const componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent);
-            this._componentRef = componentFactory.create(this._injector);
-            this._appRef.attachView(this._componentRef.hostView);
-            const domElem = this._componentRef.hostView.rootNodes[0];
-            document.body.appendChild(domElem);
+    static SUBMENU_POSITIONS = [
+        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+        { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+        { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+    ];
+    _createMenu(items, itemEl) {
+        if (!this._overlayRef && items) {
+            const positionStrategy = this._overlay
+                .position()
+                .flexibleConnectedTo(itemEl)
+                .withPositions(TieredMenuComponent.SUBMENU_POSITIONS)
+                .withFlexibleDimensions(false)
+                .withPush(false);
+            this._overlayRef = this._overlay.create({
+                positionStrategy,
+                scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            });
+            const componentRef = this._overlayRef.attach(new ComponentPortal(TieredMenuComponent, null, this._injector));
+            this._componentRef = componentRef;
             // Setting the menu items.
-            this._componentRef.instance.items = items;
-            this._componentRef.instance.isSubmenu = true;
+            componentRef.instance.items = items;
+            componentRef.instance.isSubmenu = true;
+            // Render synchronously so item elements are queryable right away (needed by restoreOpenChain()).
+            componentRef.changeDetectorRef.detectChanges();
             // Subscribe menu events.
-            this._componentRef.instance.destroyRequest.subscribe((propagate) => {
+            componentRef.instance.destroyRequest.subscribe((propagate) => {
                 this._destroy(propagate);
             });
-            this._menuDivElement = domElem.querySelector('.menu');
-            this._setMenuPosition(position);
         }
     }
+    /**
+     * Recreates the flyout chain for whichever item is currently marked `isOpen` in `items`,
+     * recursively — used when switching from the nested/mobile menu back to desktop, where the
+     * open state lives on the shared item data but each tier is a separate overlay that must be
+     * explicitly recreated to match it.
+     */
+    restoreOpenChain() {
+        const openItem = this.items.find((item) => item.isOpen && item.submenu);
+        if (!openItem)
+            return;
+        const itemEl = document.querySelector(`#${openItem.id}`);
+        if (!itemEl)
+            return;
+        this._createMenu(openItem.submenu, itemEl);
+        this._componentRef?.instance.restoreOpenChain();
+    }
+    /**
+     * Disposes this tier's own submenu overlay chain (if any) without touching `isOpen` state —
+     * used when switching from desktop to nested, where the open state must survive but the
+     * flyout overlays themselves need to go away.
+     */
+    disposeChain() {
+        this._componentRef?.instance.disposeChain();
+        this._overlayRef?.dispose();
+        this._overlayRef = null;
+        this._componentRef = null;
+    }
     _destroy(propagate = true) {
-        if (this._componentRef !== null) {
-            this._appRef.detachView(this._componentRef.hostView);
-            this._componentRef.destroy();
+        if (this._overlayRef !== null) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
             this._componentRef = null;
-            this._menuDivElement = null;
         }
         if (propagate) {
             this.destroyRequest.emit();
         }
     }
-    _setMenuPosition(position) {
-        const ITEM_HEIGHT = 37;
-        const DIVIDER_HEIGHT = 5;
-        const PADDING = 8;
-        if (this._componentRef !== null) {
-            const { top, right, bottom, left } = position;
-            const itemsCount = this._componentRef.instance.items?.reduce((count, item) => {
-                return !item.divider ? count + 1 : count;
-            }, 0);
-            const dividersCount = this._componentRef.instance.items?.reduce((count, item) => {
-                return item.divider ? count + 1 : count;
-            }, 0);
-            // I need to calculate the height of the component because the internal elements have not been created yet.
-            const menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + 8;
-            const menuWidth = this._menuDivElement?.getBoundingClientRect().width ?? 0;
-            const rightFreeSpace = window.innerWidth - right;
-            const bottomFreeSpace = window.innerHeight - bottom;
-            if (rightFreeSpace > menuWidth) {
-                this._componentRef.instance.left = right;
-            }
-            else {
-                this._componentRef.instance.left = left - menuWidth;
-            }
-            if (bottomFreeSpace <= menuHeight) {
-                this._componentRef.instance.top = Math.max(window.innerHeight - menuHeight, window.scrollY);
-            }
-            else {
-                this._componentRef.instance.top = window.scrollY + top;
-            }
-        }
-    }
     _subscribeEvents() {
         // Increment current item event.
         this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
@@ -550,7 +585,6 @@ class TieredMenuComponent {
             this.tieredMenuService.currentItem = null;
             this.tieredMenuService.currentItems = this.tieredMenuService.items;
             this.tieredMenuService.markAllItemsAsClosed(this.tieredMenuService.items);
-            enableScroll();
         });
         // Open item menu event.
         this._tieredMenuEventService.openItemMenuEvent
@@ -581,9 +615,7 @@ class TieredMenuComponent {
                 const itemEl = document.querySelector(`#${item.id}`);
                 if (!itemEl)
                     return;
-                const { top, right, left, bottom } = itemEl.getBoundingClientRect();
-                const position = { top, right, left, bottom };
-                this._createMenu(item.submenu, position);
+                this._createMenu(item.submenu, itemEl);
                 this.tieredMenuService.currentItems = item.submenu;
                 this.tieredMenuService.currentItem = item.submenu[0];
                 item.isOpen = true;
@@ -602,9 +634,6 @@ class TieredMenuComponent {
                 if (item.parent) {
                     item.parent.isOpen = false;
                 }
-                else {
-                    enableScroll();
-                }
                 this.tieredMenuService.currentItems = item?.parent?.parent?.submenu || this.tieredMenuService.items;
                 this.tieredMenuService.currentItem = item.parent;
                 this.destroyRequest.emit(false);
@@ -615,18 +644,15 @@ class TieredMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, isStandalone: true, selector: "s-tiered-menu", inputs: { ariaLabel: "ariaLabel" }, outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\r\n    class=\"menu\"\r\n    role=\"application\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [ngStyle]=\"{\r\n        left: left + 'px',\r\n        top: top + 'px',\r\n    }\"\r\n>\r\n    @for (item of items; track $index) {\r\n        @if (item.visible && !item.divider) {\r\n            <s-tiered-menu-item\r\n                [item]=\"item\"\r\n                [focused]=\"item === tieredMenuService.currentItem\"\r\n                [highlight]=\"item.isOpen\"\r\n                fieldUtils.triggerEvent=\"hover\"\r\n                [closeOnClick]=\"false\"\r\n            />\r\n        }\r\n        @if (item.divider) {\r\n            <s-tiered-menu-divider />\r\n        }\r\n    }\r\n</div>\r\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, isStandalone: true, selector: "s-tiered-menu", inputs: { ariaLabel: "ariaLabel" }, outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\r\n    class=\"menu\"\r\n    role=\"application\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n>\r\n    @for (item of items; track $index) {\r\n        @if (item.visible && !item.divider) {\r\n            <s-tiered-menu-item\r\n                [item]=\"item\"\r\n                [focused]=\"item === tieredMenuService.currentItem\"\r\n                [highlight]=\"item.isOpen\"\r\n                fieldUtils.triggerEvent=\"hover\"\r\n                [closeOnClick]=\"false\"\r\n            />\r\n        }\r\n        @if (item.divider) {\r\n            <s-tiered-menu-divider />\r\n        }\r\n    }\r\n</div>\r\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:200px;padding:4px 0;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tiered-menu', standalone: true, imports: [NgStyle, TieredMenuItemComponent, TieredMenuDividerComponent], template: "<div\r\n    class=\"menu\"\r\n    role=\"application\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [ngStyle]=\"{\r\n        left: left + 'px',\r\n        top: top + 'px',\r\n    }\"\r\n>\r\n    @for (item of items; track $index) {\r\n        @if (item.visible && !item.divider) {\r\n            <s-tiered-menu-item\r\n                [item]=\"item\"\r\n                [focused]=\"item === tieredMenuService.currentItem\"\r\n                [highlight]=\"item.isOpen\"\r\n                fieldUtils.triggerEvent=\"hover\"\r\n                [closeOnClick]=\"false\"\r\n            />\r\n        }\r\n        @if (item.divider) {\r\n            <s-tiered-menu-divider />\r\n        }\r\n    }\r\n</div>\r\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"] }]
+            args: [{ selector: 's-tiered-menu', standalone: true, imports: [TieredMenuItemComponent, TieredMenuDividerComponent], template: "<div\r\n    class=\"menu\"\r\n    role=\"application\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n>\r\n    @for (item of items; track $index) {\r\n        @if (item.visible && !item.divider) {\r\n            <s-tiered-menu-item\r\n                [item]=\"item\"\r\n                [focused]=\"item === tieredMenuService.currentItem\"\r\n                [highlight]=\"item.isOpen\"\r\n                fieldUtils.triggerEvent=\"hover\"\r\n                [closeOnClick]=\"false\"\r\n            />\r\n        }\r\n        @if (item.divider) {\r\n            <s-tiered-menu-divider />\r\n        }\r\n    }\r\n</div>\r\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:200px;padding:4px 0;overflow-y:auto}\n"] }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
             }], destroyRequest: [{
                 type: Output
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize']
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -650,8 +676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class TieredMenuDirective {
     _elementRef = inject(ElementRef);
-    _appRef = inject(ApplicationRef);
-    _componentFactoryResolver = inject(ComponentFactoryResolver);
+    _overlay = inject(Overlay);
     _injector = inject(Injector);
     _tieredMenuEventService = inject(TieredMenuEventService);
     _tieredMenuService = inject(TieredMenuService);
@@ -679,6 +704,7 @@ class TieredMenuDirective {
     ariaLabel;
     tieredMenuOpened = new EventEmitter();
     tieredMenuClosed = new EventEmitter();
+    _overlayRef = null;
     _componentRef = null;
     _showTimeout;
     _isNested = false;
@@ -687,10 +713,6 @@ class TieredMenuDirective {
     _lastActiveElement;
     _previousItems = [];
     _itemsAreValid;
-    _resizeObserver = new ResizeObserver(() => {
-        this._setMenuPosition();
-        this._componentRef?.hostView.detectChanges();
-    });
     ngOnInit() {
         this._itemsAreValid = !!this.items?.length;
         if (!this._itemsAreValid)
@@ -739,6 +761,28 @@ class TieredMenuDirective {
             event.stopPropagation();
         }
     }
+    onWindowResize() {
+        if (!this._overlayRef)
+            return;
+        const isNestedNow = document.body.clientWidth < 600;
+        if (isNestedNow === this._isNested)
+            return;
+        // Crossing the 600px breakpoint while open switches between the desktop (flyout) and
+        // nested (fullscreen accordion) menu components. Unlike a real close, this must preserve
+        // which items are currently open — _disposeOverlay() only tears down the CDK overlay(s),
+        // it doesn't touch `isOpen` state or emit closeAllMenusEvent (which would reset it).
+        this._isNested = isNestedNow;
+        this._disposeOverlay();
+        this._isNested ? this._createNestedMenu() : this._createTieredMenu();
+    }
+    _disposeOverlay() {
+        if (this._componentRef?.instance instanceof TieredMenuComponent) {
+            this._componentRef.instance.disposeChain();
+        }
+        this._overlayRef?.dispose();
+        this._overlayRef = null;
+        this._componentRef = null;
+    }
     _createMenu() {
         this._updateServiceItems();
         if (!this._componentRef && this._tieredMenuService.items?.length > 0) {
@@ -751,102 +795,92 @@ class TieredMenuDirective {
             this._isNested ? this._createNestedMenu() : this._createTieredMenu();
         }
     }
+    static DESKTOP_POSITIONS = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+    ];
+    // Single position, no flip fallback: the nested/mobile panel can accumulate several
+    // simultaneously open branches (restored from desktop mode) and grow much taller than the
+    // trigger's surroundings. Falling back to a "top" position in that case just misplaces the
+    // panel; instead it always opens below the trigger and relies on `withFlexibleDimensions` +
+    // `.menu`'s own `overflow: auto` to scroll internally when it doesn't fit.
+    static NESTED_POSITIONS = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    ];
     _createTieredMenu() {
-        if (!this._componentRef && this._tieredMenuService.items?.length > 0) {
-            this._componentRef = this._createComponent(TieredMenuComponent);
-            this._appRef.attachView(this._componentRef.hostView);
-            const domElem = this._componentRef.location.nativeElement;
-            document.body.appendChild(domElem);
+        if (!this._overlayRef && this._tieredMenuService.items?.length > 0) {
+            const positionStrategy = this._overlay
+                .position()
+                .flexibleConnectedTo(this._elementRef)
+                .withPositions(TieredMenuDirective.DESKTOP_POSITIONS)
+                .withFlexibleDimensions(false)
+                .withPush(false);
+            this._overlayRef = this._overlay.create({
+                positionStrategy,
+                scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            });
+            const componentRef = this._overlayRef.attach(new ComponentPortal(TieredMenuComponent, null, this._injector));
+            this._componentRef = componentRef;
             this._setMenuComponentProperties();
-            this._componentRef.instance.destroyRequest.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
+            componentRef.instance.ariaLabel = this.ariaLabel;
+            // Render synchronously so item elements are queryable right away, then recreate any
+            // flyout chain that was already open (e.g. coming from nested/mobile mode via resize).
+            componentRef.changeDetectorRef.detectChanges();
+            componentRef.instance.restoreOpenChain();
+            componentRef.instance.destroyRequest.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
                 this._destroy();
             });
-            this._setMenuPosition();
         }
     }
     _createNestedMenu() {
-        if (!this._componentRef && this._tieredMenuService.items?.length > 0) {
-            const componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuNestedComponent);
-            this._componentRef = componentFactory.create(this._injector);
-            this._appRef.attachView(this._componentRef.hostView);
-            const domElem = this._componentRef.hostView.rootNodes[0];
-            document.body.appendChild(domElem);
+        if (!this._overlayRef && this._tieredMenuService.items?.length > 0) {
+            // The nested/mobile panel is near full-width (see .menu--nested CSS), so it doesn't
+            // need to flip horizontally like the desktop menu — `withPush` clamps it into the
+            // viewport instead. `withFlexibleDimensions(true)` lets it shrink to the remaining
+            // viewport space below the trigger (scrolling internally via `.menu`'s own
+            // `overflow: auto`) instead of flipping above it, which would misplace a panel that's
+            // taller than the trigger's surroundings.
+            const positionStrategy = this._overlay
+                .position()
+                .flexibleConnectedTo(this._elementRef)
+                .withPositions(TieredMenuDirective.NESTED_POSITIONS)
+                .withFlexibleDimensions(true)
+                .withPush(true);
+            this._overlayRef = this._overlay.create({
+                positionStrategy,
+                scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            });
+            this._componentRef = this._overlayRef.attach(new ComponentPortal(TieredMenuNestedComponent, null, this._injector));
             this._setMenuComponentProperties();
-            this._setMenuPosition();
         }
     }
-    _createComponent(componentClass) {
-        const componentFactory = this._componentFactoryResolver.resolveComponentFactory(componentClass);
-        const _componentRef = componentFactory.create(this._injector);
-        this._resizeObserver.observe(_componentRef.location.nativeElement.querySelector('.menu'));
-        _componentRef.onDestroy(() => {
-            this._resizeObserver.disconnect();
-        });
-        return _componentRef;
-    }
     _destroy() {
-        if (this._componentRef) {
+        if (this._overlayRef) {
             this._isOpen = false;
             this.tieredMenuClosed.emit();
             window.clearTimeout(this._showTimeout);
-            this._appRef.detachView(this._componentRef.hostView);
-            this._componentRef.destroy();
+            this._overlayRef.dispose();
+            this._overlayRef = null;
             this._componentRef = null;
             this._tieredMenuService.currentItems = this._tieredMenuService.items;
             this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
             this._tieredMenuEventService.closeAllMenusEvent.emit();
         }
     }
-    _setMenuPosition() {
-        if (!this._componentRef) {
-            return;
-        }
-        this._changeDetectorRef.detectChanges();
-        const ITEM_HEIGHT = 37;
-        const ITEM_WIDTH = this._componentRef.location.nativeElement?.querySelector('.menu')?.clientWidth || 176;
-        const DIVIDER_HEIGHT = 5;
-        const PADDING = 8;
-        const MARGIN = 4;
-        this._componentRef.instance.top = 8;
-        let { bottom, left, right } = this._elementRef.nativeElement.getBoundingClientRect();
-        const itemsCount = this._componentRef.instance.items?.reduce((count, item) => {
-            return !item.divider ? count + 1 : count;
-        }, 0);
-        const dividersCount = this._componentRef.instance.items?.reduce((count, item) => {
-            return item.divider ? count + 1 : count;
-        }, 0);
-        const menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + MARGIN;
-        const rightFreeSpace = window.innerWidth - right;
-        const bottomFreeSpace = window.innerHeight - bottom;
-        this._componentRef.instance.top = bottom;
-        this._componentRef.instance.left = left;
-        if (bottomFreeSpace <= menuHeight) {
-            this._componentRef.instance.top = Math.max(scrollY + bottom - menuHeight, 0);
-        }
-        else {
-            this._componentRef.instance.top = window.scrollY + bottom + MARGIN;
-        }
-        if (rightFreeSpace > 176) {
-            this._componentRef.instance.left = window.scrollX + left;
-        }
-        else {
-            this._componentRef.instance.left = window.scrollX + right - ITEM_WIDTH;
-        }
-        if (this._isNested) {
-            this._componentRef.instance.left = MARGIN;
-        }
-    }
     _setMenuComponentProperties() {
         if (this._componentRef != null) {
             this._componentRef.instance.items = this._tieredMenuService.items;
-            this._componentRef.instance.ariaLabel = this.ariaLabel;
         }
     }
     _subscribeEvents() {
         this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._tieredMenuService.items = this._tieredMenuService.markAllItemsAsClosed(this._tieredMenuService.items);
             this._destroy();
-            enableScroll();
+        });
+        this._tieredMenuEventService.restoreFocusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
+            this._lastActiveElement?.focus();
         });
     }
     _compareItems(item1, item2) {
@@ -863,7 +897,7 @@ class TieredMenuDirective {
                 this._tieredMenuService.items[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDirective, isStandalone: true, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent", ariaLabel: "ariaLabel" }, outputs: { tieredMenuOpened: "tieredMenuOpened", tieredMenuClosed: "tieredMenuClosed" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDirective, isStandalone: true, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent", ariaLabel: "ariaLabel" }, outputs: { tieredMenuOpened: "tieredMenuOpened", tieredMenuClosed: "tieredMenuClosed" }, host: { listeners: { "click": "onClick($event)", "window:resize": "onWindowResize()" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, decorators: [{
             type: Directive,
@@ -887,6 +921,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class TieredMenuModule {