primeng 16.0.2 → 16.2.0

package/fesm2022/primeng-tieredmenu.mjs

@@ -1,8 +1,8 @@
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Inject, Input, ViewChild, Output, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Inject, Input, Output, ViewChild, signal, effect, PLATFORM_ID, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i5 from 'primeng/api';
@@ -13,7 +13,7 @@ import * as i3 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i4 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { ZIndexUtils } from 'primeng/utils';
+import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 
 class TieredMenuSub {
     document;
@@ -21,32 +21,25 @@ class TieredMenuSub {
     renderer;
     cd;
     tieredMenu;
-    item;
-    root;
+    items;
+    root = false;
     autoDisplay;
     autoZIndex = true;
     baseZIndex = 0;
-    mobileActive;
     popup;
-    get parentActive() {
-        return this._parentActive;
-    }
-    set parentActive(value) {
-        if (!this.root) {
-            this._parentActive = value;
-            if (!value)
-                this.activeItem = null;
-            else
-                this.positionSubmenu();
-        }
-    }
+    menuId;
+    ariaLabel;
+    ariaLabelledBy;
+    level = 0;
+    focusedItemId;
+    activeItemPath;
+    tabindex = 0;
+    itemClick = new EventEmitter();
+    itemMouseEnter = new EventEmitter();
+    menuFocus = new EventEmitter();
+    menuBlur = new EventEmitter();
+    menuKeydown = new EventEmitter();
     sublistViewChild;
-    leafClick = new EventEmitter();
-    keydownItem = new EventEmitter();
-    _parentActive;
-    documentClickListener;
-    menuHoverActive = false;
-    activeItem;
     constructor(document, el, renderer, cd, tieredMenu) {
         this.document = document;
         this.el = el;
@@ -54,101 +47,6 @@ class TieredMenuSub {
         this.cd = cd;
         this.tieredMenu = tieredMenu;
     }
-    onItemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-        if (!item.url && !item.routerLink) {
-            event.preventDefault();
-        }
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-        if (item.items) {
-            if (this.activeItem && item === this.activeItem) {
-                this.activeItem = null;
-                this.unbindDocumentClickListener();
-            }
-            else {
-                this.activeItem = item;
-                if (this.root) {
-                    this.bindDocumentClickListener();
-                }
-            }
-        }
-        if (!item.items) {
-            this.onLeafClick();
-        }
-    }
-    onItemMouseEnter(event, item) {
-        if (item.disabled || this.mobileActive) {
-            event.preventDefault();
-            return;
-        }
-        if (this.root) {
-            if (this.activeItem || this.autoDisplay || this.popup) {
-                this.activeItem = item;
-                this.bindDocumentClickListener();
-            }
-        }
-        else {
-            this.activeItem = item;
-            this.bindDocumentClickListener();
-        }
-    }
-    onLeafClick() {
-        this.activeItem = null;
-        if (this.root) {
-            this.unbindDocumentClickListener();
-        }
-        this.leafClick.emit();
-    }
-    onItemKeyDown(event, item) {
-        let listItem = event.currentTarget.parentElement;
-        switch (event.key) {
-            case 'ArrowDown':
-                const nextItem = this.findNextItem(listItem);
-                if (nextItem) {
-                    nextItem.children[0].focus();
-                }
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                const prevItem = this.findPrevItem(listItem);
-                if (prevItem) {
-                    prevItem.children[0].focus();
-                }
-                event.preventDefault();
-                break;
-            case 'ArrowRight':
-                if (item.items) {
-                    this.activeItem = item;
-                    if (this.root) {
-                        this.bindDocumentClickListener();
-                    }
-                    setTimeout(() => {
-                        (listItem?.children[1].children[0].children[0].children[0]).focus();
-                    }, 50);
-                }
-                event.preventDefault();
-                break;
-            case 'Enter':
-                if (!item.routerLink) {
-                    this.onItemClick(event, item);
-                }
-                break;
-            default:
-                break;
-        }
-        this.keydownItem.emit({
-            originalEvent: event,
-            element: listItem
-        });
-    }
     positionSubmenu() {
         let sublist = this.sublistViewChild && this.sublistViewChild.nativeElement;
         if (sublist) {
@@ -162,225 +60,352 @@ class TieredMenuSub {
             }
         }
     }
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-        if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
+    getItemProp(processedItem, name, params = null) {
+        return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
     }
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-        if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
+    getItemId(processedItem) {
+        return `${this.menuId}_${processedItem.key}`;
     }
-    onChildItemKeyDown(event) {
-        if (event.key === 'ArrowLeft') {
-            this.activeItem = null;
-            if (this.root) {
-                this.unbindDocumentClickListener();
-            }
-            if (event.target) {
-                const parent = event.target.parentElement;
-                if (parent && parent.parentElement && parent.parentElement.parentElement) {
-                    parent.parentElement.parentElement.children[0].focus();
-                }
-            }
-        }
+    getItemKey(processedItem) {
+        return this.getItemId(processedItem);
     }
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => {
-                if (this.el && !this.el.nativeElement.contains(event.target)) {
-                    this.activeItem = null;
-                    this.cd.markForCheck();
-                    this.unbindDocumentClickListener();
-                }
-            });
+    getItemClass(processedItem) {
+        return {
+            ...this.getItemProp(processedItem, 'class'),
+            'p-menuitem': true,
+            'p-highlight': this.isItemActive(processedItem),
+            'p-menuitem-active': this.isItemActive(processedItem),
+            'p-focus': this.isItemFocused(processedItem),
+            'p-disabled': this.isItemDisabled(processedItem)
+        };
+    }
+    getItemLabel(processedItem) {
+        return this.getItemProp(processedItem, 'label');
+    }
+    getSeparatorItemClass(processedItem) {
+        return {
+            ...this.getItemProp(processedItem, 'class'),
+            'p-menuitem-separator': true
+        };
+    }
+    getAriaSetSize() {
+        return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
+    }
+    getAriaPosInset(index) {
+        return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
+    }
+    isItemVisible(processedItem) {
+        return this.getItemProp(processedItem, 'visible') !== false;
+    }
+    isItemActive(processedItem) {
+        if (this.activeItemPath) {
+            return this.activeItemPath.some((path) => path.key === processedItem.key);
         }
     }
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            this.documentClickListener();
-            this.documentClickListener = null;
+    isItemDisabled(processedItem) {
+        return this.getItemProp(processedItem, 'disabled');
+    }
+    isItemFocused(processedItem) {
+        return this.focusedItemId === this.getItemId(processedItem);
+    }
+    isItemGroup(processedItem) {
+        return ObjectUtils.isNotEmpty(processedItem.items);
+    }
+    onItemMouseEnter(param) {
+        if (this.autoDisplay) {
+            const { event, processedItem } = param;
+            this.itemMouseEnter.emit({ originalEvent: event, processedItem });
         }
     }
-    ngOnDestroy() {
-        this.unbindDocumentClickListener();
+    onItemClick(event, processedItem) {
+        this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
+        this.itemClick.emit({ originalEvent: event, processedItem, isFocus: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TieredMenuSub, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TieredMenu }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: { item: "item", root: "root", autoDisplay: "autoDisplay", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", mobileActive: "mobileActive", popup: "popup", parentActive: "parentActive" }, outputs: { leafClick: "leafClick", keydownItem: "keydownItem" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true }], ngImport: i0, template: `
-        <ul #sublist [ngClass]="{ 'p-submenu-list': !root }">
-            <ng-template ngFor let-child [ngForOf]="root ? item : item?.items">
-                <li *ngIf="child.separator" class="p-menu-separator" [ngClass]="{ 'p-hidden': child.visible === false }"></li>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TieredMenuSub, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TieredMenu }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: { items: "items", root: "root", autoDisplay: "autoDisplay", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", popup: "popup", menuId: "menuId", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", level: "level", focusedItemId: "focusedItemId", activeItemPath: "activeItemPath", tabindex: "tabindex" }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true, static: true }], ngImport: i0, template: `
+        <ul
+            #sublist
+            role="menu"
+            [ngClass]="{ 'p-submenu-list': !root, 'p-tieredmenu-root-list': root }"
+            [id]="menuId + '_list'"
+            [tabindex]="tabindex"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledBy]="ariaLabelledBy"
+            [attr.aria-aria-activedescendant]="focusedItemId"
+            [attr.aria-orientation]="'vertical'"
+            [attr.data-pc-section]="'menu'"
+            (keydown)="menuKeydown.emit($event)"
+            (focus)="menuFocus.emit($event)"
+            (blur)="menuBlur.emit($event)"
+        >
+            <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
+                <li
+                    *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                    [id]="getItemId(processedItem)"
+                    [style]="getItemProp(processedItem, 'style')"
+                    [ngClass]="getSeparatorItemClass(processedItem)"
+                    role="separator"
+                    [attr.data-pc-section]="'separator'"
+                ></li>
                 <li
-                    *ngIf="!child.separator"
                     #listItem
-                    [ngClass]="{ 'p-menuitem': true, 'p-menuitem-active': child === activeItem, 'p-hidden': child.visible === false }"
-                    [ngStyle]="child.style"
-                    [class]="child.styleClass"
+                    *ngIf="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
+                    role="menuitem"
+                    [id]="getItemId(processedItem)"
+                    [attr.data-pc-section]="'menuitem'"
+                    [attr.data-p-highlight]="isItemActive(processedItem)"
+                    [attr.data-p-focused]="isItemFocused(processedItem)"
+                    [attr.data-p-disabled]="isItemDisabled(processedItem)"
+                    [attr.aria-label]="getItemLabel(processedItem)"
+                    [attr.aria-disabled]="isItemDisabled(processedItem) || undefined"
+                    [attr.aria-haspopup]="isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined"
+                    [attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
+                    [attr.aria-level]="level + 1"
+                    [attr.aria-setsize]="getAriaSetSize()"
+                    [attr.aria-posinset]="getAriaPosInset(index)"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
+                    [ngClass]="getItemClass(processedItem)"
+                    [class]="getItemProp(processedItem, 'styleClass')"
                     pTooltip
-                    [tooltipOptions]="child.tooltipOptions"
+                    [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 >
-                    <a
-                        *ngIf="!child.routerLink"
-                        (keydown)="onItemKeyDown($event, child)"
-                        [attr.href]="child.url"
-                        [attr.data-automationid]="child.automationId"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        (click)="onItemClick($event, child)"
-                        (mouseenter)="onItemMouseEnter($event, child)"
-                        [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': child.disabled }"
-                        [attr.tabindex]="child.disabled ? null : '0'"
-                        [attr.aria-haspopup]="item.items != null"
-                        [attr.aria-expanded]="item === activeItem"
-                        pRipple
-                    >
-                        <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon" [ngStyle]="child.iconStyle"></span>
-                        <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{ child.label }}</span>
-                        <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
-                        <span class="p-menuitem-badge" *ngIf="child.badge" [ngClass]="child.badgeStyleClass">{{ child.badge }}</span>
-                        <ng-container *ngIf="child.items">
-                            <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
-                    <a
-                        *ngIf="child.routerLink"
-                        (keydown)="onItemKeyDown($event, child)"
-                        [routerLink]="child.routerLink"
-                        [attr.data-automationid]="child.automationId"
-                        [queryParams]="child.queryParams"
-                        [routerLinkActive]="'p-menuitem-link-active'"
-                        [routerLinkActiveOptions]="child.routerLinkActiveOptions || { exact: false }"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        [attr.tabindex]="child.disabled ? null : '0'"
-                        role="menuitem"
-                        (click)="onItemClick($event, child)"
-                        (mouseenter)="onItemMouseEnter($event, child)"
-                        [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': child.disabled }"
-                        [fragment]="child.fragment"
-                        [queryParamsHandling]="child.queryParamsHandling"
-                        [preserveFragment]="child.preserveFragment"
-                        [skipLocationChange]="child.skipLocationChange"
-                        [replaceUrl]="child.replaceUrl"
-                        [state]="child.state"
-                        pRipple
-                    >
-                        <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon" [ngStyle]="child.iconStyle"></span>
-                        <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlRouteLabel">{{ child.label }}</span>
-                        <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
-                        <span class="p-menuitem-badge" *ngIf="child.badge" [ngClass]="child.badgeStyleClass">{{ child.badge }}</span>
-                        <ng-container *ngIf="child.items">
-                            <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
+                    <div [attr.data-pc-section]="'content'" class="p-menuitem-content" (click)="onItemClick($event, processedItem)" (mouseenter)="onItemMouseEnter({$event, processedItem})">
+                        <a
+                            *ngIf="!getItemProp(processedItem, 'routerLink')"
+                            [attr.href]="getItemProp(processedItem, 'url')"
+                            [attr.aria-hidden]="true"
+                            [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                            [attr.data-pc-section]="'action'"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                            [attr.tabindex]="-1"
+                            pRipple
+                        >
+                            <span
+                                *ngIf="getItemProp(processedItem, 'icon')"
+                                class="p-menuitem-icon"
+                                [ngClass]="getItemProp(processedItem, 'icon')"
+                                [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                [attr.data-pc-section]="'icon'"
+                                [attr.aria-hidden]="true"
+                                [attr.tabindex]="-1"
+                            >
+                            </span>
+                            <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
+                                {{ getItemLabel(processedItem) }}
+                            </span>
+                            <ng-template #htmlLabel>
+                                <span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
+                            </ng-template>
+                            <span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ child.badge }}</span>
+
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                            </ng-container>
+                        </a>
+                        <a
+                            *ngIf="getItemProp(processedItem, 'routerLink')"
+                            [routerLink]="getItemProp(processedItem, 'routerLink')"
+                            [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                            [attr.tabindex]="-1"
+                            [attr.aria-hidden]="true"
+                            [attr.data-pc-section]="'action'"
+                            [queryParams]="getItemProp(processedItem, 'queryParams')"
+                            [routerLinkActive]="'p-menuitem-link-active'"
+                            [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                            [fragment]="getItemProp(processedItem, 'fragment')"
+                            [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
+                            [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
+                            [skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
+                            [replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
+                            [state]="getItemProp(processedItem, 'state')"
+                            pRipple
+                        >
+                            <span
+                                *ngIf="getItemProp(processedItem, 'icon')"
+                                class="p-menuitem-icon"
+                                [ngClass]="getItemProp(processedItem, 'icon')"
+                                [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                [attr.data-pc-section]="'icon'"
+                                [attr.aria-hidden]="true"
+                                [attr.tabindex]="-1"
+                            >
+                            </span>
+                            <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
+                                {{ getItemLabel(processedItem) }}
+                            </span>
+                            <ng-template #htmlLabel>
+                                <span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
+                            </ng-template>
+                            <span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ child.badge }}</span>
+
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                            </ng-container>
+                        </a>
+                    </div>
+
                     <p-tieredMenuSub
-                        (keydownItem)="onChildItemKeyDown($event)"
-                        [parentActive]="child === activeItem"
-                        [item]="child"
-                        *ngIf="child.items"
-                        [mobileActive]="mobileActive"
+                        *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                        [items]="processedItem.items"
                         [autoDisplay]="autoDisplay"
-                        (leafClick)="onLeafClick()"
-                        [popup]="popup"
+                        [menuId]="menuId"
+                        [activeItemPath]="activeItemPath"
+                        [focusedItemId]="focusedItemId"
+                        [level]="level + 1"
+                        (itemClick)="itemClick.emit($event)"
+                        (itemMouseEnter)="onItemMouseEnter($event)"
                     ></p-tieredMenuSub>
                 </li>
             </ng-template>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Ripple; }), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return AngleRightIcon; }), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return TieredMenuSub; }), selector: "p-tieredMenuSub", inputs: ["item", "root", "autoDisplay", "autoZIndex", "baseZIndex", "mobileActive", "popup", "parentActive"], outputs: ["leafClick", "keydownItem"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Ripple; }), selector: "[pRipple]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return AngleRightIcon; }), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return TieredMenuSub; }), selector: "p-tieredMenuSub", inputs: ["items", "root", "autoDisplay", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TieredMenuSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TieredMenuSub, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tieredMenuSub',
                     template: `
-        <ul #sublist [ngClass]="{ 'p-submenu-list': !root }">
-            <ng-template ngFor let-child [ngForOf]="root ? item : item?.items">
-                <li *ngIf="child.separator" class="p-menu-separator" [ngClass]="{ 'p-hidden': child.visible === false }"></li>
+        <ul
+            #sublist
+            role="menu"
+            [ngClass]="{ 'p-submenu-list': !root, 'p-tieredmenu-root-list': root }"
+            [id]="menuId + '_list'"
+            [tabindex]="tabindex"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledBy]="ariaLabelledBy"
+            [attr.aria-aria-activedescendant]="focusedItemId"
+            [attr.aria-orientation]="'vertical'"
+            [attr.data-pc-section]="'menu'"
+            (keydown)="menuKeydown.emit($event)"
+            (focus)="menuFocus.emit($event)"
+            (blur)="menuBlur.emit($event)"
+        >
+            <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
+                <li
+                    *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                    [id]="getItemId(processedItem)"
+                    [style]="getItemProp(processedItem, 'style')"
+                    [ngClass]="getSeparatorItemClass(processedItem)"
+                    role="separator"
+                    [attr.data-pc-section]="'separator'"
+                ></li>
                 <li
-                    *ngIf="!child.separator"
                     #listItem
-                    [ngClass]="{ 'p-menuitem': true, 'p-menuitem-active': child === activeItem, 'p-hidden': child.visible === false }"
-                    [ngStyle]="child.style"
-                    [class]="child.styleClass"
+                    *ngIf="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
+                    role="menuitem"
+                    [id]="getItemId(processedItem)"
+                    [attr.data-pc-section]="'menuitem'"
+                    [attr.data-p-highlight]="isItemActive(processedItem)"
+                    [attr.data-p-focused]="isItemFocused(processedItem)"
+                    [attr.data-p-disabled]="isItemDisabled(processedItem)"
+                    [attr.aria-label]="getItemLabel(processedItem)"
+                    [attr.aria-disabled]="isItemDisabled(processedItem) || undefined"
+                    [attr.aria-haspopup]="isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined"
+                    [attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
+                    [attr.aria-level]="level + 1"
+                    [attr.aria-setsize]="getAriaSetSize()"
+                    [attr.aria-posinset]="getAriaPosInset(index)"
+                    [ngStyle]="getItemProp(processedItem, 'style')"
+                    [ngClass]="getItemClass(processedItem)"
+                    [class]="getItemProp(processedItem, 'styleClass')"
                     pTooltip
-                    [tooltipOptions]="child.tooltipOptions"
+                    [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 >
-                    <a
-                        *ngIf="!child.routerLink"
-                        (keydown)="onItemKeyDown($event, child)"
-                        [attr.href]="child.url"
-                        [attr.data-automationid]="child.automationId"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        (click)="onItemClick($event, child)"
-                        (mouseenter)="onItemMouseEnter($event, child)"
-                        [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': child.disabled }"
-                        [attr.tabindex]="child.disabled ? null : '0'"
-                        [attr.aria-haspopup]="item.items != null"
-                        [attr.aria-expanded]="item === activeItem"
-                        pRipple
-                    >
-                        <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon" [ngStyle]="child.iconStyle"></span>
-                        <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{ child.label }}</span>
-                        <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
-                        <span class="p-menuitem-badge" *ngIf="child.badge" [ngClass]="child.badgeStyleClass">{{ child.badge }}</span>
-                        <ng-container *ngIf="child.items">
-                            <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
-                    <a
-                        *ngIf="child.routerLink"
-                        (keydown)="onItemKeyDown($event, child)"
-                        [routerLink]="child.routerLink"
-                        [attr.data-automationid]="child.automationId"
-                        [queryParams]="child.queryParams"
-                        [routerLinkActive]="'p-menuitem-link-active'"
-                        [routerLinkActiveOptions]="child.routerLinkActiveOptions || { exact: false }"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        [attr.tabindex]="child.disabled ? null : '0'"
-                        role="menuitem"
-                        (click)="onItemClick($event, child)"
-                        (mouseenter)="onItemMouseEnter($event, child)"
-                        [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': child.disabled }"
-                        [fragment]="child.fragment"
-                        [queryParamsHandling]="child.queryParamsHandling"
-                        [preserveFragment]="child.preserveFragment"
-                        [skipLocationChange]="child.skipLocationChange"
-                        [replaceUrl]="child.replaceUrl"
-                        [state]="child.state"
-                        pRipple
-                    >
-                        <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon" [ngStyle]="child.iconStyle"></span>
-                        <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlRouteLabel">{{ child.label }}</span>
-                        <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
-                        <span class="p-menuitem-badge" *ngIf="child.badge" [ngClass]="child.badgeStyleClass">{{ child.badge }}</span>
-                        <ng-container *ngIf="child.items">
-                            <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
+                    <div [attr.data-pc-section]="'content'" class="p-menuitem-content" (click)="onItemClick($event, processedItem)" (mouseenter)="onItemMouseEnter({$event, processedItem})">
+                        <a
+                            *ngIf="!getItemProp(processedItem, 'routerLink')"
+                            [attr.href]="getItemProp(processedItem, 'url')"
+                            [attr.aria-hidden]="true"
+                            [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                            [attr.data-pc-section]="'action'"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                            [attr.tabindex]="-1"
+                            pRipple
+                        >
+                            <span
+                                *ngIf="getItemProp(processedItem, 'icon')"
+                                class="p-menuitem-icon"
+                                [ngClass]="getItemProp(processedItem, 'icon')"
+                                [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                [attr.data-pc-section]="'icon'"
+                                [attr.aria-hidden]="true"
+                                [attr.tabindex]="-1"
+                            >
+                            </span>
+                            <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
+                                {{ getItemLabel(processedItem) }}
+                            </span>
+                            <ng-template #htmlLabel>
+                                <span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
+                            </ng-template>
+                            <span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ child.badge }}</span>
+
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                            </ng-container>
+                        </a>
+                        <a
+                            *ngIf="getItemProp(processedItem, 'routerLink')"
+                            [routerLink]="getItemProp(processedItem, 'routerLink')"
+                            [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                            [attr.tabindex]="-1"
+                            [attr.aria-hidden]="true"
+                            [attr.data-pc-section]="'action'"
+                            [queryParams]="getItemProp(processedItem, 'queryParams')"
+                            [routerLinkActive]="'p-menuitem-link-active'"
+                            [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [ngClass]="{ 'p-menuitem-link': true, 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                            [fragment]="getItemProp(processedItem, 'fragment')"
+                            [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
+                            [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
+                            [skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
+                            [replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
+                            [state]="getItemProp(processedItem, 'state')"
+                            pRipple
+                        >
+                            <span
+                                *ngIf="getItemProp(processedItem, 'icon')"
+                                class="p-menuitem-icon"
+                                [ngClass]="getItemProp(processedItem, 'icon')"
+                                [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                [attr.data-pc-section]="'icon'"
+                                [attr.aria-hidden]="true"
+                                [attr.tabindex]="-1"
+                            >
+                            </span>
+                            <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" class="p-menuitem-text" [attr.data-pc-section]="'label'">
+                                {{ getItemLabel(processedItem) }}
+                            </span>
+                            <ng-template #htmlLabel>
+                                <span class="p-menuitem-text" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span>
+                            </ng-template>
+                            <span class="p-menuitem-badge" *ngIf="getItemProp(processedItem, 'badge')" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ child.badge }}</span>
+
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <AngleRightIcon *ngIf="!tieredMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="tieredMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                            </ng-container>
+                        </a>
+                    </div>
+
                     <p-tieredMenuSub
-                        (keydownItem)="onChildItemKeyDown($event)"
-                        [parentActive]="child === activeItem"
-                        [item]="child"
-                        *ngIf="child.items"
-                        [mobileActive]="mobileActive"
+                        *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                        [items]="processedItem.items"
                         [autoDisplay]="autoDisplay"
-                        (leafClick)="onLeafClick()"
-                        [popup]="popup"
+                        [menuId]="menuId"
+                        [activeItemPath]="activeItemPath"
+                        [focusedItemId]="focusedItemId"
+                        [level]="level + 1"
+                        (itemClick)="itemClick.emit($event)"
+                        (itemMouseEnter)="onItemMouseEnter($event)"
                     ></p-tieredMenuSub>
                 </li>
             </ng-template>
@@ -394,7 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: TieredMenu }]; }, propDecorators: { item: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: TieredMenu }]; }, propDecorators: { items: [{
                 type: Input
             }], root: [{
                 type: Input
@@ -404,19 +429,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], baseZIndex: [{
                 type: Input
-            }], mobileActive: [{
-                type: Input
             }], popup: [{
                 type: Input
-            }], parentActive: [{
+            }], menuId: [{
                 type: Input
-            }], sublistViewChild: [{
-                type: ViewChild,
-                args: ['sublist']
-            }], leafClick: [{
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], focusedItemId: [{
+                type: Input
+            }], activeItemPath: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], itemMouseEnter: [{
+                type: Output
+            }], menuFocus: [{
+                type: Output
+            }], menuBlur: [{
                 type: Output
-            }], keydownItem: [{
+            }], menuKeydown: [{
                 type: Output
+            }], sublistViewChild: [{
+                type: ViewChild,
+                args: ['sublist', { static: true }]
             }] } });
 /**
  * TieredMenu displays submenus in nested overlays.
@@ -424,6 +465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
  */
 class TieredMenu {
     document;
+    platformId;
     el;
     renderer;
     cd;
@@ -433,7 +475,13 @@ class TieredMenu {
      * An array of menuitems.
      * @group Props
      */
-    model;
+    set model(value) {
+        this._model = value;
+        this._processedItems = this.createProcessedItems(this._model || []);
+    }
+    get model() {
+        return this._model;
+    }
     /**
      * Defines if menu would displayed as a popup.
      * @group Props
@@ -466,9 +514,10 @@ class TieredMenu {
     baseZIndex = 0;
     /**
      * Whether to show a root submenu on mouse over.
+     * @defaultValue true
      * @group Props
      */
-    autoDisplay;
+    autoDisplay = true;
     /**
      * Transition options of the show animation.
      * @group Props
@@ -479,6 +528,31 @@ class TieredMenu {
      * @group Props
      */
     hideTransitionOptions = '.1s linear';
+    /**
+     * Current id state as a string.
+     * @group Props
+     */
+    id;
+    /**
+     * Defines a string value that labels an interactive element.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Identifier of the underlying input element.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @group Props
+     */
+    disabled = false;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = 0;
     /**
      * Callback to invoke when overlay menu is shown.
      * @group Emits
@@ -490,25 +564,64 @@ class TieredMenu {
      */
     onHide = new EventEmitter();
     templates;
+    rootmenu;
+    containerViewChild;
     submenuIconTemplate;
-    parentActive;
     container;
-    documentClickListener;
-    documentResizeListener;
-    preventDocumentDefault;
+    outsideClickListener;
+    resizeListener;
     scrollHandler;
     target;
+    relatedTarget;
     visible;
     relativeAlign;
     window;
-    constructor(document, el, renderer, cd, config, overlayService) {
+    dirty = false;
+    focused = false;
+    activeItemPath = signal([]);
+    number = signal(0);
+    focusedItemInfo = signal({ index: -1, level: 0, parentKey: '' });
+    searchValue = '';
+    searchTimeout;
+    _processedItems;
+    _model;
+    get visibleItems() {
+        const processedItem = this.activeItemPath().find((p) => p.key === this.focusedItemInfo().parentKey);
+        return processedItem ? processedItem.items : this.processedItems;
+    }
+    get processedItems() {
+        if (!this._processedItems || !this._processedItems.length) {
+            this._processedItems = this.createProcessedItems(this.model || []);
+        }
+        return this._processedItems;
+    }
+    get focusedItemId() {
+        const focusedItemInfo = this.focusedItemInfo();
+        return focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null;
+    }
+    constructor(document, platformId, el, renderer, cd, config, overlayService) {
         this.document = document;
+        this.platformId = platformId;
         this.el = el;
         this.renderer = renderer;
         this.cd = cd;
         this.config = config;
         this.overlayService = overlayService;
         this.window = this.document.defaultView;
+        effect(() => {
+            const path = this.activeItemPath();
+            if (ObjectUtils.isNotEmpty(path)) {
+                this.bindOutsideClickListener();
+                this.bindResizeListener();
+            }
+            else {
+                this.unbindOutsideClickListener();
+                this.unbindResizeListener();
+            }
+        });
+    }
+    ngOnInit() {
+        this.id = this.id || UniqueComponentId();
     }
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
@@ -519,30 +632,56 @@ class TieredMenu {
             }
         });
     }
-    /**
-     * Toggles the visibility of the popup menu.
-     * @param {Event} event - Browser event.
-     * @group Method
-     */
-    toggle(event) {
-        if (this.visible)
-            this.hide();
-        else
-            this.show(event);
-        this.preventDocumentDefault = true;
+    createProcessedItems(items, level = 0, parent = {}, parentKey = '') {
+        const processedItems = [];
+        items &&
+            items.forEach((item, index) => {
+                const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                const newItem = {
+                    item,
+                    index,
+                    level,
+                    key,
+                    parent,
+                    parentKey
+                };
+                newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key);
+                processedItems.push(newItem);
+            });
+        return processedItems;
     }
-    /**
-     * Displays the popup menu.
-     * @param {Event} even - Browser event.
-     * @group Method
-     */
-    show(event) {
-        this.target = event.currentTarget;
-        this.relativeAlign = event.relativeAlign;
-        this.visible = true;
-        this.parentActive = true;
-        this.preventDocumentDefault = true;
-        this.cd.markForCheck();
+    getItemProp(item, name) {
+        return item ? ObjectUtils.getItemValue(item[name]) : undefined;
+    }
+    getProccessedItemLabel(processedItem) {
+        return processedItem ? this.getItemLabel(processedItem.item) : undefined;
+    }
+    getItemLabel(item) {
+        return this.getItemProp(item, 'label');
+    }
+    isProcessedItemGroup(processedItem) {
+        return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
+    }
+    isSelected(processedItem) {
+        return this.activeItemPath().some((p) => p.key === processedItem.key);
+    }
+    isValidSelectedItem(processedItem) {
+        return this.isValidItem(processedItem) && this.isSelected(processedItem);
+    }
+    isValidItem(processedItem) {
+        return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+    }
+    isItemDisabled(item) {
+        return this.getItemProp(item, 'disabled');
+    }
+    isItemSeparator(item) {
+        return this.getItemProp(item, 'separator');
+    }
+    isItemMatched(processedItem) {
+        return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
+    }
+    isProccessedItemGroup(processedItem) {
+        return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
     }
     onOverlayClick(event) {
         if (this.popup) {
@@ -551,7 +690,191 @@ class TieredMenu {
                 target: this.el.nativeElement
             });
         }
-        this.preventDocumentDefault = true;
+    }
+    onItemClick(event) {
+        const { originalEvent, processedItem } = event;
+        const grouped = this.isProcessedItemGroup(processedItem);
+        const root = ObjectUtils.isEmpty(processedItem.parent);
+        const selected = this.isSelected(processedItem);
+        if (selected) {
+            const { index, key, level, parentKey } = processedItem;
+            this.activeItemPath.set(this.activeItemPath().filter((p) => key !== p.key && key.startsWith(p.key)));
+            this.focusedItemInfo.set({ index, level, parentKey });
+            this.dirty = true;
+            DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+        }
+        else {
+            if (grouped) {
+                this.onItemChange(event);
+            }
+            else {
+                const rootProcessedItem = root ? processedItem : this.activeItemPath().find((p) => p.parentKey === '');
+                this.hide(originalEvent);
+                this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
+                DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+            }
+        }
+    }
+    onItemMouseEnter(event) {
+        if (!DomHandler.isTouchDevice()) {
+            if (this.dirty) {
+                this.onItemChange(event);
+            }
+        }
+    }
+    onKeyDown(event) {
+        const metaKey = event.metaKey || event.ctrlKey;
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onArrowDownKey(event);
+                break;
+            case 'ArrowUp':
+                this.onArrowUpKey(event);
+                break;
+            case 'ArrowLeft':
+                this.onArrowLeftKey(event);
+                break;
+            case 'ArrowRight':
+                this.onArrowRightKey(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            case 'Space':
+                this.onSpaceKey(event);
+                break;
+            case 'Enter':
+                this.onEnterKey(event);
+                break;
+            case 'Escape':
+                this.onEscapeKey(event);
+                break;
+            case 'Tab':
+                this.onTabKey(event);
+                break;
+            case 'PageDown':
+            case 'PageUp':
+            case 'Backspace':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
+                break;
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    this.searchItems(event, event.key);
+                }
+                break;
+        }
+    }
+    onArrowDownKey(event) {
+        const itemIndex = this.focusedItemInfo().index !== -1 ? this.findNextItemIndex(this.focusedItemInfo().index) : this.findFirstFocusedItemIndex();
+        this.changeFocusedItemIndex(event, itemIndex);
+        event.preventDefault();
+    }
+    onArrowRightKey(event) {
+        const processedItem = this.visibleItems[this.focusedItemInfo().index];
+        const grouped = this.isProccessedItemGroup(processedItem);
+        if (grouped) {
+            this.onItemChange({ originalEvent: event, processedItem });
+            this.focusedItemInfo.set({ index: -1, parentKey: processedItem.key });
+            this.searchValue = '';
+            this.onArrowDownKey(event);
+        }
+        event.preventDefault();
+    }
+    onArrowUpKey(event) {
+        if (event.altKey) {
+            if (this.focusedItemInfo().index !== -1) {
+                const processedItem = this.visibleItems[this.focusedItemInfo().index];
+                const grouped = this.isProccessedItemGroup(processedItem);
+                !grouped && this.onItemChange({ originalEvent: event, processedItem });
+            }
+            this.popup && this.hide(event, true);
+            event.preventDefault();
+        }
+        else {
+            const itemIndex = this.focusedItemInfo().index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo().index) : this.findLastFocusedItemIndex();
+            this.changeFocusedItemIndex(event, itemIndex);
+            event.preventDefault();
+        }
+    }
+    onArrowLeftKey(event) {
+        const processedItem = this.visibleItems[this.focusedItemInfo().index];
+        const parentItem = this.activeItemPath().find((p) => p.key === processedItem.parentKey);
+        const root = ObjectUtils.isEmpty(processedItem.parent);
+        if (!root) {
+            this.focusedItemInfo.set({ index: -1, parentKey: parentItem ? parentItem.parentKey : '' });
+            this.searchValue = '';
+            this.onArrowDownKey(event);
+        }
+        const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== this.focusedItemInfo().parentKey);
+        this.activeItemPath.set(activeItemPath);
+        event.preventDefault();
+    }
+    onHomeKey(event) {
+        this.changeFocusedItemIndex(event, this.findFirstItemIndex());
+        event.preventDefault();
+    }
+    onEndKey(event) {
+        this.changeFocusedItemIndex(event, this.findLastItemIndex());
+        event.preventDefault();
+    }
+    onSpaceKey(event) {
+        this.onEnterKey(event);
+    }
+    onEscapeKey(event) {
+        this.hide(event, true);
+        this.focusedItemInfo().index = this.findFirstFocusedItemIndex();
+        event.preventDefault();
+    }
+    onTabKey(event) {
+        if (this.focusedItemInfo().index !== -1) {
+            const processedItem = this.visibleItems[this.focusedItemInfo().index];
+            const grouped = this.isProccessedItemGroup(processedItem);
+            !grouped && this.onItemChange({ originalEvent: event, processedItem });
+        }
+        this.hide();
+    }
+    onEnterKey(event) {
+        if (this.focusedItemInfo().index !== -1) {
+            const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
+            const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+            anchorElement ? anchorElement.click() : element && element.click();
+            const processedItem = this.visibleItems[this.focusedItemInfo().index];
+            if (!this.popup) {
+                const processedItem = this.visibleItems[this.focusedItemInfo().index];
+                const grouped = this.isProccessedItemGroup(processedItem);
+                !grouped && (this.focusedItemInfo().index = this.findFirstFocusedItemIndex());
+            }
+        }
+        event.preventDefault();
+    }
+    onItemChange(event) {
+        const { processedItem, isFocus } = event;
+        if (ObjectUtils.isEmpty(processedItem))
+            return;
+        const { index, key, level, parentKey, items } = processedItem;
+        const grouped = ObjectUtils.isNotEmpty(items);
+        const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+        grouped && activeItemPath.push(processedItem);
+        this.focusedItemInfo.set({ index, level, parentKey });
+        this.activeItemPath.set(activeItemPath);
+        grouped && (this.dirty = true);
+        isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+    }
+    onMenuFocus(event) {
+        this.focused = true;
+        const focusedItemInfo = this.focusedItemInfo().index !== -1 ? this.focusedItemInfo() : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+        this.focusedItemInfo.set(focusedItemInfo);
+    }
+    onMenuBlur(event) {
+        this.focused = false;
+        this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' });
+        this.searchValue = '';
+        this.dirty = false;
     }
     onOverlayAnimationStart(event) {
         switch (event.toState) {
@@ -562,9 +885,11 @@ class TieredMenu {
                     this.onShow.emit({});
                     this.appendOverlay();
                     this.alignOverlay();
-                    this.bindDocumentClickListener();
-                    this.bindDocumentResizeListener();
+                    this.bindOutsideClickListener();
+                    this.bindResizeListener();
                     this.bindScrollListener();
+                    DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+                    this.scrollInView();
                 }
                 break;
             case 'void':
@@ -608,56 +933,117 @@ class TieredMenu {
      * Hides the popup menu.
      * @group Method
      */
-    hide() {
-        this.visible = false;
-        this.relativeAlign = false;
-        this.parentActive = false;
-        this.cd.markForCheck();
-    }
-    onWindowResize() {
-        if (this.visible && !DomHandler.isTouchDevice()) {
-            this.hide();
+    hide(event, isFocus) {
+        if (this.popup) {
+            this.onHide.emit({});
+            this.visible = false;
         }
+        this.activeItemPath.set([]);
+        this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' });
+        isFocus && DomHandler.focus(this.relatedTarget || this.target || this.rootmenu.sublistViewChild.nativeElement);
+        this.dirty = false;
     }
-    onLeafClick() {
+    /**
+     * Toggles the visibility of the popup menu.
+     * @param {Event} event - Browser event.
+     * @group Method
+     */
+    toggle(event) {
+        this.visible ? this.hide(event, true) : this.show(event);
+    }
+    /**
+     * Displays the popup menu.
+     * @param {Event} even - Browser event.
+     * @group Method
+     */
+    show(event, isFocus) {
         if (this.popup) {
-            this.hide();
+            this.visible = true;
+            this.target = this.target || event.currentTarget;
+            this.relatedTarget = event.relatedTarget || null;
+            this.relativeAlign = event?.relativeAlign || null;
         }
-        this.unbindDocumentClickListener();
-    }
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-            this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => {
-                if (!this.preventDocumentDefault && this.popup) {
-                    this.hide();
-                }
-                this.preventDocumentDefault = false;
-            });
+        this.focusedItemInfo.set({ index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' });
+        if (!this.popup) {
+            isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
         }
+        this.cd.markForCheck();
+        this.dirty = true;
     }
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            this.documentClickListener();
-            this.documentClickListener = null;
+    searchItems(event, char) {
+        this.searchValue = (this.searchValue || '') + char;
+        let itemIndex = -1;
+        let matched = false;
+        if (this.focusedItemInfo().index !== -1) {
+            itemIndex = this.visibleItems.slice(this.focusedItemInfo().index).findIndex((processedItem) => this.isItemMatched(processedItem));
+            itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo().index).findIndex((processedItem) => this.isItemMatched(processedItem)) : itemIndex + this.focusedItemInfo().index;
+        }
+        else {
+            itemIndex = this.visibleItems.findIndex((processedItem) => this.isItemMatched(processedItem));
+        }
+        if (itemIndex !== -1) {
+            matched = true;
+        }
+        if (itemIndex === -1 && this.focusedItemInfo().index === -1) {
+            itemIndex = this.findFirstFocusedItemIndex();
         }
+        if (itemIndex !== -1) {
+            this.changeFocusedItemIndex(event, itemIndex);
+        }
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+        }
+        this.searchTimeout = setTimeout(() => {
+            this.searchValue = '';
+            this.searchTimeout = null;
+        }, 500);
+        return matched;
+    }
+    findLastFocusedItemIndex() {
+        const selectedIndex = this.findSelectedItemIndex();
+        return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
+    }
+    findLastItemIndex() {
+        return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
+    }
+    findPrevItemIndex(index) {
+        const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1;
+        return matchedItemIndex > -1 ? matchedItemIndex : index;
+    }
+    findNextItemIndex(index) {
+        const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1;
+        return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
+    }
+    findFirstFocusedItemIndex() {
+        const selectedIndex = this.findSelectedItemIndex();
+        return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex;
+    }
+    findFirstItemIndex() {
+        return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem));
     }
-    bindDocumentResizeListener() {
-        if (!this.documentResizeListener) {
-            this.documentResizeListener = this.renderer.listen(this.window, 'resize', this.onWindowResize.bind(this));
+    findSelectedItemIndex() {
+        return this.visibleItems.findIndex((processedItem) => this.isValidSelectedItem(processedItem));
+    }
+    changeFocusedItemIndex(event, index) {
+        if (this.focusedItemInfo().index !== index) {
+            this.focusedItemInfo.mutate((value) => {
+                value.index = index;
+            });
+            this.scrollInView();
         }
     }
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            this.documentResizeListener();
-            this.documentResizeListener = null;
+    scrollInView(index = -1) {
+        const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
+        const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`);
+        if (element) {
+            element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
         }
     }
     bindScrollListener() {
         if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, (event) => {
                 if (this.visible) {
-                    this.hide();
+                    this.hide(event, true);
                 }
             });
         }
@@ -666,13 +1052,49 @@ class TieredMenu {
     unbindScrollListener() {
         if (this.scrollHandler) {
             this.scrollHandler.unbindScrollListener();
+            this.scrollHandler = null;
+        }
+    }
+    bindResizeListener() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.resizeListener) {
+                this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => {
+                    if (!DomHandler.isTouchDevice()) {
+                        this.hide(event, true);
+                    }
+                });
+            }
+        }
+    }
+    bindOutsideClickListener() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
+                    const isOutsideContainer = this.containerViewChild && !this.containerViewChild.nativeElement.contains(event.target);
+                    const isOutsideTarget = this.popup ? !(this.target && (this.target === event.target || this.target.contains(event.target))) : true;
+                    if (isOutsideContainer && isOutsideTarget) {
+                        this.hide();
+                    }
+                });
+            }
+        }
+    }
+    unbindOutsideClickListener() {
+        if (this.outsideClickListener) {
+            this.outsideClickListener();
+            this.outsideClickListener = null;
+        }
+    }
+    unbindResizeListener() {
+        if (this.resizeListener) {
+            this.resizeListener();
+            this.resizeListener = null;
         }
     }
     onOverlayHide() {
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
+        this.unbindOutsideClickListener();
+        this.unbindResizeListener();
         this.unbindScrollListener();
-        this.preventDocumentDefault = false;
         if (!this.cd.destroyed) {
             this.target = null;
         }
@@ -690,9 +1112,13 @@ class TieredMenu {
             this.onOverlayHide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TieredMenu, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.PrimeNGConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: TieredMenu, selector: "p-tieredMenu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", autoDisplay: "autoDisplay", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TieredMenu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.PrimeNGConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TieredMenu, selector: "p-tieredMenu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", autoDisplay: "autoDisplay", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", tabindex: "tabindex" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
         <div
+            #container
+            [attr.data-pc-section]="'root'"
+            [attr.data-pc-name]="'tieredmenu'"
+            [id]="id"
             [ngClass]="{ 'p-tieredmenu p-component': true, 'p-tieredmenu-overlay': popup }"
             [class]="styleClass"
             [ngStyle]="style"
@@ -703,14 +1129,37 @@ class TieredMenu {
             (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
             *ngIf="!popup || visible"
         >
-            <p-tieredMenuSub [item]="model" root="root" [parentActive]="parentActive" [baseZIndex]="baseZIndex" [autoZIndex]="autoZIndex" (leafClick)="onLeafClick()" [autoDisplay]="autoDisplay" [popup]="popup"></p-tieredMenuSub>
+            <p-tieredMenuSub
+                #rootmenu
+                [root]="true"
+                [items]="processedItems"
+                [menuId]="id"
+                [tabindex]="!disabled ? tabindex : -1"
+                [ariaLabel]="ariaLabel"
+                [ariaLabelledBy]="ariaLabelledBy"
+                [baseZIndex]="baseZIndex"
+                [autoZIndex]="autoZIndex"
+                [autoDisplay]="autoDisplay"
+                [popup]="popup"
+                [focusedItemId]="focused ? focusedItemId : undefined"
+                [activeItemPath]="activeItemPath()"
+                (itemClick)="onItemClick($event)"
+                (menuFocus)="onMenuFocus($event)"
+                (menuBlur)="onMenuBlur($event)"
+                (menuKeydown)="onKeyDown($event)"
+                (itemMouseEnter)="onItemMouseEnter($event)"
+            ></p-tieredMenuSub>
         </div>
-    `, isInline: true, styles: [".p-tieredmenu-overlay{position:absolute;top:0;left:0}.p-tieredmenu ul{margin:0;padding:0;list-style:none}.p-tieredmenu .p-submenu-list{position:absolute;min-width:100%;z-index:1;display:none}.p-tieredmenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-tieredmenu .p-menuitem-text{line-height:1}.p-tieredmenu .p-menuitem{position:relative}.p-tieredmenu .p-menuitem-link .p-submenu-icon:not(svg){margin-left:auto}.p-tieredmenu .p-menuitem-link .p-icon-wrapper{margin-left:auto}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list{display:block;left:100%;top:0}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list.p-submenu-list-flipped{left:-100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: ["item", "root", "autoDisplay", "autoZIndex", "baseZIndex", "mobileActive", "popup", "parentActive"], outputs: ["leafClick", "keydownItem"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".p-tieredmenu-overlay{position:absolute;top:0;left:0}.p-tieredmenu ul{margin:0;padding:0;list-style:none}.p-tieredmenu .p-submenu-list{position:absolute;min-width:100%;z-index:1;display:none}.p-tieredmenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-tieredmenu .p-menuitem-text{line-height:1}.p-tieredmenu .p-menuitem{position:relative}.p-tieredmenu .p-menuitem-link .p-submenu-icon:not(svg){margin-left:auto}.p-tieredmenu .p-menuitem-link .p-icon-wrapper{margin-left:auto}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list{display:block;left:100%;top:0}.p-tieredmenu .p-menuitem-active>p-tieredmenusub>.p-submenu-list.p-submenu-list-flipped{left:-100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuSub, selector: "p-tieredMenuSub", inputs: ["items", "root", "autoDisplay", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TieredMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TieredMenu, decorators: [{
             type: Component,
             args: [{ selector: 'p-tieredMenu', template: `
         <div
+            #container
+            [attr.data-pc-section]="'root'"
+            [attr.data-pc-name]="'tieredmenu'"
+            [id]="id"
             [ngClass]="{ 'p-tieredmenu p-component': true, 'p-tieredmenu-overlay': popup }"
             [class]="styleClass"
             [ngStyle]="style"
@@ -721,7 +1170,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
             *ngIf="!popup || visible"
         >
-            <p-tieredMenuSub [item]="model" root="root" [parentActive]="parentActive" [baseZIndex]="baseZIndex" [autoZIndex]="autoZIndex" (leafClick)="onLeafClick()" [autoDisplay]="autoDisplay" [popup]="popup"></p-tieredMenuSub>
+            <p-tieredMenuSub
+                #rootmenu
+                [root]="true"
+                [items]="processedItems"
+                [menuId]="id"
+                [tabindex]="!disabled ? tabindex : -1"
+                [ariaLabel]="ariaLabel"
+                [ariaLabelledBy]="ariaLabelledBy"
+                [baseZIndex]="baseZIndex"
+                [autoZIndex]="autoZIndex"
+                [autoDisplay]="autoDisplay"
+                [popup]="popup"
+                [focusedItemId]="focused ? focusedItemId : undefined"
+                [activeItemPath]="activeItemPath()"
+                (itemClick)="onItemClick($event)"
+                (menuFocus)="onMenuFocus($event)"
+                (menuBlur)="onMenuBlur($event)"
+                (menuKeydown)="onKeyDown($event)"
+                (itemMouseEnter)="onItemMouseEnter($event)"
+            ></p-tieredMenuSub>
         </div>
     `, animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'p-element'
@@ -729,6 +1197,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
                 }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.PrimeNGConfig }, { type: i5.OverlayService }]; }, propDecorators: { model: [{
                 type: Input
             }], popup: [{
@@ -749,6 +1220,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
+            }], id: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
             }], onShow: [{
                 type: Output
             }], onHide: [{
@@ -756,13 +1237,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], rootmenu: [{
+                type: ViewChild,
+                args: ['rootmenu']
+            }], containerViewChild: [{
+                type: ViewChild,
+                args: ['container']
             }] } });
 class TieredMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenu, TieredMenuSub], imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule], exports: [TieredMenu, RouterModule, TooltipModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TieredMenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, RouterModule, TooltipModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenu, TieredMenuSub], imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule], exports: [TieredMenu, RouterModule, TooltipModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TieredMenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, RouterModule, TooltipModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: TieredMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TieredMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule],