primeng 16.0.2 → 16.1.0

package/fesm2022/primeng-slidemenu.mjs

@@ -2,180 +2,266 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, PLATFORM_ID, Component, ViewEncapsulation, Inject, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, 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 i4 from 'primeng/api';
+import * as i5 from 'primeng/api';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { DomHandler } from 'primeng/dom';
 import { AngleRightIcon } from 'primeng/icons/angleright';
-import { CaretLeftIcon } from 'primeng/icons/caretleft';
-import { CaretRightIcon } from 'primeng/icons/caretright';
-import * as i3 from 'primeng/tooltip';
+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';
+import { CaretLeftIcon } from 'primeng/icons/caretleft';
 
 class SlideMenuSub {
     document;
-    platformId;
+    el;
     renderer;
-    item;
-    root;
-    backLabel = 'Back';
+    cd;
+    slideMenu;
+    items;
     menuWidth;
-    effectDuration;
+    root = false;
     easing = 'ease-out';
-    index;
+    effectDuration;
+    autoDisplay;
+    autoZIndex = true;
+    baseZIndex = 0;
+    popup;
+    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;
-    slideMenu;
-    transitionEndListener;
-    constructor(slideMenu, document, platformId, renderer) {
+    get isActive() {
+        return -this.slideMenu.left == this.level * this.menuWidth;
+    }
+    constructor(document, el, renderer, cd, slideMenu) {
         this.document = document;
-        this.platformId = platformId;
+        this.el = el;
         this.renderer = renderer;
+        this.cd = cd;
         this.slideMenu = slideMenu;
     }
-    activeItem;
-    itemClick(event, item, listitem) {
-        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 && !this.slideMenu.animating) {
-            this.slideMenu.left -= this.slideMenu.menuWidth;
-            this.activeItem = listitem;
-            this.slideMenu.animating = true;
-            setTimeout(() => (this.slideMenu.animating = false), this.effectDuration);
-        }
-        if (!item.items && this.slideMenu.popup) {
-            this.slideMenu.hide();
-        }
+    getItemProp(processedItem, name, params = null) {
+        return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
     }
-    focusNextList(listitem) {
-        if (!this.slideMenu.animating) {
-            let focusableElements = DomHandler.getFocusableElements(listitem);
-            if (focusableElements && focusableElements.length > 0) {
-                focusableElements[0].focus();
-            }
-            this.unbindTransitionEndListener();
-        }
+    getItemId(processedItem) {
+        return `${this.menuId}_${processedItem.key}`;
     }
-    onItemKeyDown(event) {
-        let listItem = event.target.parentElement;
-        switch (event.code) {
-            case 'Space':
-            case 'Enter':
-                if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {
-                    listItem.children[0].click();
-                    this.transitionEndListener = this.renderer.listen(this.sublistViewChild?.nativeElement, 'transitionend', this.focusNextList.bind(this, listItem));
-                }
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
+    getItemKey(processedItem) {
+        return this.getItemId(processedItem);
     }
-    unbindTransitionEndListener() {
-        if (this.transitionEndListener && this.sublistViewChild) {
-            this.transitionEndListener();
-            this.transitionEndListener = null;
+    getItemClass(processedItem) {
+        return {
+            ...this.getItemProp(processedItem, 'class'),
+            'p-menuitem': true,
+            '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);
         }
     }
-    ngOnDestroy() {
-        this.activeItem = null;
-        this.unbindTransitionEndListener();
+    isItemDisabled(processedItem) {
+        return this.getItemProp(processedItem, 'disabled');
     }
-    get isActive() {
-        return -this.slideMenu.left == this.index * this.menuWidth;
+    isItemFocused(processedItem) {
+        return this.focusedItemId === this.getItemId(processedItem);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuSub, deps: [{ token: forwardRef(() => SlideMenu) }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SlideMenuSub, selector: "p-slideMenuSub", inputs: { item: "item", root: "root", backLabel: "backLabel", menuWidth: "menuWidth", effectDuration: "effectDuration", easing: "easing", index: "index" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true }], ngImport: i0, template: `
+    isItemGroup(processedItem) {
+        return ObjectUtils.isNotEmpty(processedItem.items);
+    }
+    onItemClick(event, processedItem) {
+        this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
+        this.itemClick.emit({ originalEvent: event, processedItem, isFocus: true });
+        event.preventDefault();
+    }
+    onMenuKeyDown(event) {
+        this.menuKeydown.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuSub, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: SlideMenu }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SlideMenuSub, selector: "p-slideMenuSub", inputs: { items: "items", menuWidth: "menuWidth", root: "root", easing: "easing", effectDuration: "effectDuration", 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
-            [ngClass]="{ 'p-slidemenu-rootlist': root, 'p-submenu-list': !root, 'p-active-submenu': isActive }"
+            role="menu"
+            [ngClass]="{ 'p-submenu-list': !root, 'p-slidemenu-root-list': root, 'p-active-submenu': isActive }"
+            [id]="menuId + '_list'"
             [style.width.px]="menuWidth"
             [style.left.px]="root ? slideMenu.left : slideMenu.menuWidth"
             [style.transitionProperty]="root ? 'left' : 'none'"
             [style.transitionDuration]="effectDuration + 'ms'"
             [style.transitionTimingFunction]="easing"
+            [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)"
+            (focusin)="menuFocus.emit($event)"
+            [attr.data-pc-state]="isActive ? 'active' : 'inactive'"
         >
-            <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>
+            <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': listitem == activeItem, 'p-hidden': child.visible === false }"
+                    #listItem
+                    *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"
-                    [class]="child.styleClass"
-                    [ngStyle]="child.style"
+                    [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 >
-                    <a
-                        *ngIf="!child.routerLink"
-                        (keydown)="onItemKeyDown($event)"
-                        [attr.href]="child.url"
-                        class="p-menuitem-link"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        [ngClass]="{ 'p-disabled': child.disabled }"
-                        [attr.tabindex]="child.disabled || !isActive ? null : '0'"
-                        (click)="itemClick($event, child, listitem)"
-                    >
-                        <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="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="slideMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
-                    <a
-                        *ngIf="child.routerLink"
-                        (keydown)="onItemKeyDown($event)"
-                        [routerLink]="child.routerLink"
-                        [queryParams]="child.queryParams"
-                        [routerLinkActive]="'p-menuitem-link-active'"
-                        [routerLinkActiveOptions]="child.routerLinkActiveOptions || { exact: false }"
-                        [href]="child.url"
-                        class="p-menuitem-link"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        [attr.tabindex]="child.disabled || !isActive ? null : '0'"
-                        [ngClass]="{ 'p-disabled': child.disabled }"
-                        (click)="itemClick($event, child, listitem)"
-                        [fragment]="child.fragment"
-                        [queryParamsHandling]="child.queryParamsHandling"
-                        [preserveFragment]="child.preserveFragment"
-                        [skipLocationChange]="child.skipLocationChange"
-                        [replaceUrl]="child.replaceUrl"
-                        [state]="child.state"
-                    >
-                        <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">
-                            <CaretRightIcon *ngIf="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="slideMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
-                    <p-slideMenuSub class="p-submenu" [item]="child" [index]="index + 1" [menuWidth]="menuWidth" *ngIf="child.items"></p-slideMenuSub>
+                    <div [attr.data-pc-section]="'content'" class="p-menuitem-content" (click)="onItemClick($event, processedItem)" (mouseenter)="itemMouseEnter.emit({ originalEvent: $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="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="slideMenu.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="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="slideMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                            </ng-container>
+                        </a>
+                    </div>
+
+                    <p-slideMenuSub
+                        *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                        class="p-submenu"
+                        [items]="processedItem.items"
+                        [autoDisplay]="autoDisplay"
+                        [menuId]="menuId"
+                        [activeItemPath]="activeItemPath"
+                        [focusedItemId]="focusedItemId"
+                        [level]="level + 1"
+                        [menuWidth]="menuWidth"
+                        (itemClick)="itemClick.emit($event)"
+                        (itemMouseEnter)="itemMouseEnter.emit($event)"
+                    ></p-slideMenuSub>
                 </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.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 CaretRightIcon; }), selector: "CaretRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleRightIcon; }), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return SlideMenuSub; }), selector: "p-slideMenuSub", inputs: ["item", "root", "backLabel", "menuWidth", "effectDuration", "easing", "index"] }], 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 SlideMenuSub; }), selector: "p-slideMenuSub", inputs: ["items", "menuWidth", "root", "easing", "effectDuration", "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: SlideMenuSub, decorators: [{
             type: Component,
@@ -184,77 +270,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     template: `
         <ul
             #sublist
-            [ngClass]="{ 'p-slidemenu-rootlist': root, 'p-submenu-list': !root, 'p-active-submenu': isActive }"
+            role="menu"
+            [ngClass]="{ 'p-submenu-list': !root, 'p-slidemenu-root-list': root, 'p-active-submenu': isActive }"
+            [id]="menuId + '_list'"
             [style.width.px]="menuWidth"
             [style.left.px]="root ? slideMenu.left : slideMenu.menuWidth"
             [style.transitionProperty]="root ? 'left' : 'none'"
             [style.transitionDuration]="effectDuration + 'ms'"
             [style.transitionTimingFunction]="easing"
+            [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)"
+            (focusin)="menuFocus.emit($event)"
+            [attr.data-pc-state]="isActive ? 'active' : 'inactive'"
         >
-            <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>
+            <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
                 <li
-                    *ngIf="!child.separator"
-                    #listitem
-                    [ngClass]="{ 'p-menuitem': true, 'p-menuitem-active': listitem == activeItem, 'p-hidden': child.visible === false }"
+                    *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
+                    #listItem
+                    *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"
-                    [class]="child.styleClass"
-                    [ngStyle]="child.style"
+                    [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 >
-                    <a
-                        *ngIf="!child.routerLink"
-                        (keydown)="onItemKeyDown($event)"
-                        [attr.href]="child.url"
-                        class="p-menuitem-link"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        [ngClass]="{ 'p-disabled': child.disabled }"
-                        [attr.tabindex]="child.disabled || !isActive ? null : '0'"
-                        (click)="itemClick($event, child, listitem)"
-                    >
-                        <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="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="slideMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
-                    <a
-                        *ngIf="child.routerLink"
-                        (keydown)="onItemKeyDown($event)"
-                        [routerLink]="child.routerLink"
-                        [queryParams]="child.queryParams"
-                        [routerLinkActive]="'p-menuitem-link-active'"
-                        [routerLinkActiveOptions]="child.routerLinkActiveOptions || { exact: false }"
-                        [href]="child.url"
-                        class="p-menuitem-link"
-                        [target]="child.target"
-                        [attr.title]="child.title"
-                        [attr.id]="child.id"
-                        [attr.tabindex]="child.disabled || !isActive ? null : '0'"
-                        [ngClass]="{ 'p-disabled': child.disabled }"
-                        (click)="itemClick($event, child, listitem)"
-                        [fragment]="child.fragment"
-                        [queryParamsHandling]="child.queryParamsHandling"
-                        [preserveFragment]="child.preserveFragment"
-                        [skipLocationChange]="child.skipLocationChange"
-                        [replaceUrl]="child.replaceUrl"
-                        [state]="child.state"
-                    >
-                        <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">
-                            <CaretRightIcon *ngIf="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" />
-                            <ng-template *ngTemplateOutlet="slideMenu.submenuIconTemplate"></ng-template>
-                        </ng-container>
-                    </a>
-                    <p-slideMenuSub class="p-submenu" [item]="child" [index]="index + 1" [menuWidth]="menuWidth" *ngIf="child.items"></p-slideMenuSub>
+                    <div [attr.data-pc-section]="'content'" class="p-menuitem-content" (click)="onItemClick($event, processedItem)" (mouseenter)="itemMouseEnter.emit({ originalEvent: $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="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="slideMenu.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="!slideMenu.submenuIconTemplate" [styleClass]="'p-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
+                                <ng-template *ngTemplateOutlet="slideMenu.submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                            </ng-container>
+                        </a>
+                    </div>
+
+                    <p-slideMenuSub
+                        *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                        class="p-submenu"
+                        [items]="processedItem.items"
+                        [autoDisplay]="autoDisplay"
+                        [menuId]="menuId"
+                        [activeItemPath]="activeItemPath"
+                        [focusedItemId]="focusedItemId"
+                        [level]="level + 1"
+                        [menuWidth]="menuWidth"
+                        (itemClick)="itemClick.emit($event)"
+                        (itemMouseEnter)="itemMouseEnter.emit($event)"
+                    ></p-slideMenuSub>
                 </li>
             </ng-template>
         </ul>
@@ -264,32 +421,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         class: 'p-element'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: SlideMenu, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => SlideMenu)]
-                }] }, { type: Document, decorators: [{
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }]; }, propDecorators: { item: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: SlideMenu }]; }, propDecorators: { items: [{
                 type: Input
-            }], root: [{
+            }], menuWidth: [{
                 type: Input
-            }], backLabel: [{
+            }], root: [{
                 type: Input
-            }], menuWidth: [{
+            }], easing: [{
                 type: Input
             }], effectDuration: [{
                 type: Input
-            }], easing: [{
+            }], autoDisplay: [{
+                type: Input
+            }], autoZIndex: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input
+            }], popup: [{
+                type: Input
+            }], menuId: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
                 type: Input
-            }], index: [{
+            }], level: [{
                 type: Input
+            }], focusedItemId: [{
+                type: Input
+            }], activeItemPath: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], itemMouseEnter: [{
+                type: Output
+            }], menuFocus: [{
+                type: Output
+            }], menuBlur: [{
+                type: Output
+            }], menuKeydown: [{
+                type: Output
             }], sublistViewChild: [{
                 type: ViewChild,
-                args: ['sublist']
+                args: ['sublist', { static: true }]
             }] } });
 /**
  * SlideMenu displays submenus with slide animation.
@@ -304,52 +483,62 @@ class SlideMenu {
     config;
     overlayService;
     /**
-     * An array of menuitems.
+     * Width of the submenus.
      * @group Props
      */
-    model;
+    menuWidth = 190;
     /**
-     * Defines if menu would displayed as a popup.
+     * Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.
      * @group Props
      */
-    popup;
+    viewportHeight = 180;
     /**
-     * Inline style of the element.
+     * Duration of the sliding animation in milliseconds.
      * @group Props
      */
-    style;
+    effectDuration = 250;
     /**
-     * Class of the element.
+     * Easing animation to use for sliding.
      * @group Props
      */
-    styleClass;
+    easing = 'ease-out';
     /**
-     * Width of the submenus.
+     * Label of element to navigate back.
      * @group Props
      */
-    menuWidth = 190;
+    backLabel = 'Back';
     /**
-     * Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.
+     * When present, it specifies that the component should be disabled.
      * @group Props
      */
-    viewportHeight = 180;
+    disabled = false;
     /**
-     * Duration of the sliding animation in milliseconds.
+     * Index of the element in tabbing order.
      * @group Props
      */
-    effectDuration = 250;
+    tabindex = 0;
     /**
-     * Easing animation to use for sliding.
+     * An array of menuitems.
      * @group Props
      */
-    easing = 'ease-out';
+    model;
     /**
-     * Label of element to navigate back.
+     * Defines if menu would displayed as a popup.
      * @group Props
      */
-    backLabel = 'Back';
+    popup;
     /**
-     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * Inline style of the component.
+     * @group Props
+     */
+    style;
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
      * @group Props
      */
     appendTo;
@@ -363,6 +552,12 @@ class SlideMenu {
      * @group Props
      */
     baseZIndex = 0;
+    /**
+     * Whether to show a root submenu on mouse over.
+     * @defaultValue true
+     * @group Props
+     */
+    autoDisplay = true;
     /**
      * Transition options of the show animation.
      * @group Props
@@ -373,6 +568,21 @@ class SlideMenu {
      * @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;
     /**
      * Callback to invoke when overlay menu is shown.
      * @group Emits
@@ -384,21 +594,48 @@ class SlideMenu {
      */
     onHide = new EventEmitter();
     templates;
+    rootmenu;
     containerViewChild;
-    backwardViewChild;
+    set backward(element) {
+        this.backwardViewChild = element;
+    }
     slideMenuContentViewChild;
-    documentClickListener;
-    documentResizeListener;
-    preventDocumentDefault;
-    scrollHandler;
+    submenuIconTemplate;
+    backIconTemplate;
+    outsideClickListener;
+    resizeListener;
+    transitionEndListener;
+    transitionStartListener;
+    backwardViewChild;
+    transition = false;
     left = 0;
     animating = false;
     target;
     visible;
-    viewportUpdated;
+    relativeAlign;
     window;
-    submenuIconTemplate;
-    backIconTemplate;
+    focused = false;
+    activeItemPath = signal([]);
+    focusedItemInfo = signal({ index: -1, level: 0, parentKey: '' });
+    searchValue = '';
+    searchTimeout;
+    _processedItems;
+    container;
+    itemClick = false;
+    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;
@@ -408,15 +645,26 @@ class SlideMenu {
         this.config = config;
         this.overlayService = overlayService;
         this.window = this.document.defaultView;
+        effect(() => {
+            const path = this.activeItemPath();
+            if (this.popup) {
+                if (ObjectUtils.isNotEmpty(path)) {
+                    this.bindOutsideClickListener();
+                    this.bindResizeListener();
+                }
+                else {
+                    this.unbindOutsideClickListener();
+                    this.unbindResizeListener();
+                }
+            }
+        });
     }
-    ngAfterViewChecked() {
-        if (!this.viewportUpdated && !this.popup && this.containerViewChild) {
-            this.updateViewPort();
-            this.viewportUpdated = true;
-        }
+    documentFocusListener;
+    ngOnInit() {
+        this.id = this.id || UniqueComponentId();
     }
     ngAfterContentInit() {
-        this.templates?.forEach((item) => {
+        this.templates.forEach((item) => {
             switch (item.getType()) {
                 case 'backicon':
                     this.backIconTemplate = item.template;
@@ -427,40 +675,56 @@ class SlideMenu {
             }
         });
     }
-    set container(element) {
-        this.containerViewChild = element;
+    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;
     }
-    set backward(element) {
-        this.backwardViewChild = element;
+    getItemProp(item, name) {
+        return item ? ObjectUtils.getItemValue(item[name]) : undefined;
     }
-    set slideMenuContent(element) {
-        this.slideMenuContentViewChild = element;
+    getProccessedItemLabel(processedItem) {
+        return processedItem ? this.getItemLabel(processedItem.item) : undefined;
     }
-    updateViewPort() {
-        this.renderer.setStyle(this.slideMenuContentViewChild?.nativeElement, 'height', this.viewportHeight - DomHandler.getHiddenElementOuterHeight(this.backwardViewChild?.nativeElement) + 'px');
+    getItemLabel(item) {
+        return this.getItemProp(item, 'label');
     }
-    /**
-     * 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;
+    isProcessedItemGroup(processedItem) {
+        return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
     }
-    /**
-     * Displays the popup menu.
-     * @param {Event} event - Browser event.
-     * @group Method
-     */
-    show(event) {
-        this.target = event.currentTarget;
-        this.visible = true;
-        this.preventDocumentDefault = true;
-        this.cd.markForCheck();
+    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) {
@@ -469,20 +733,303 @@ class SlideMenu {
                 target: this.el.nativeElement
             });
         }
-        this.preventDocumentDefault = true;
+    }
+    goBack(event) {
+        this.animate('left');
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    onItemClick(event) {
+        if (this.transition) {
+            return;
+        }
+        else {
+            if (!this.itemClick) {
+                this.itemClick = true;
+                this.onMenuFocus();
+            }
+            const { originalEvent, processedItem } = event;
+            const grouped = this.isProcessedItemGroup(processedItem);
+            if (grouped) {
+                this.focusedItemInfo.mutate((value) => {
+                    value.index = -1;
+                    value.level = value.level + 1;
+                    value.parentKey = processedItem.key;
+                });
+                this.animate('right');
+            }
+            else {
+                this.onItemChange(event);
+                this.popup && this.hide();
+            }
+        }
+    }
+    onItemMouseEnter(event) {
+        this.onItemChange(event);
+    }
+    onKeyDown(event) {
+        if (!this.transition) {
+            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;
+            }
+        }
+    }
+    onNavigationKeyDown(event) {
+        switch (event.code) {
+            case 'Enter':
+            case 'Space':
+                this.onArrowLeftKey(event);
+                this.focusedItemInfo.mutate((value) => (value.index = -1));
+                break;
+            default:
+                break;
+        }
+    }
+    animate(to) {
+        switch (to) {
+            case 'right':
+                this.left -= this.menuWidth;
+                break;
+            case 'left':
+                this.left += this.menuWidth;
+                break;
+            default:
+                break;
+        }
+        this.animating = true;
+        setTimeout(() => (this.animating = false), this.effectDuration);
+    }
+    onArrowDownKey(event) {
+        const itemIndex = this.focusedItemInfo().index !== -1 ? this.findNextItemIndex(this.focusedItemInfo().index) : this.findFirstFocusedItemIndex();
+        this.changeFocusedItemIndex(event, itemIndex);
+        event.preventDefault();
+    }
+    onArrowRightKey(event) {
+        const focusedItemInfo = this.focusedItemInfo();
+        if (focusedItemInfo.index === -1) {
+            focusedItemInfo.index = 0;
+        }
+        const processedItem = this.visibleItems[this.focusedItemInfo().index];
+        const grouped = this.isProccessedItemGroup(processedItem);
+        if (grouped) {
+            let { index, level, key } = processedItem;
+            this.onItemChange({ originalEvent: event, processedItem });
+            this.focusedItemInfo.set({ index: 0, level: processedItem.level, parentKey: processedItem.key });
+            this.searchValue = '';
+            this.animate('right');
+        }
+        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 focusedItemInfo = this.focusedItemInfo();
+        if (focusedItemInfo.index === -1) {
+            focusedItemInfo.index = 0;
+        }
+        const processedItem = this.visibleItems[focusedItemInfo.index];
+        const parentItem = this.activeItemPath().find((p) => p.key === processedItem.parentKey);
+        const root = ObjectUtils.isEmpty(processedItem.parent);
+        if (!root) {
+            let { level, index, parentKey } = parentItem;
+            this.focusedItemInfo.set({ index, level, parentKey });
+            this.searchValue = '';
+        }
+        const activeItemPath = this.activeItemPath().filter((p) => p.parentKey !== focusedItemInfo.parentKey);
+        this.activeItemPath.set(activeItemPath);
+        parentItem && this.animate('left');
+        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) {
+        if (this.popup) {
+            this.hide(event, true);
+            this.focusedItemInfo().index = this.findFirstFocusedItemIndex();
+            event.preventDefault();
+        }
+    }
+    onTabKey(event) {
+        if (this.backwardViewChild.nativeElement.style.display !== 'none') {
+            this.backwardViewChild.nativeElement.focus();
+        }
+        if (this.popup && !this.containerViewChild.nativeElement.contains(event.target)) {
+            this.hide();
+        }
+        event.preventDefault();
+    }
+    onEnterKey(event) {
+        if (this.focusedItemInfo().index !== -1) {
+            const processedItem = this.visibleItems[this.focusedItemInfo().index];
+            const grouped = this.isProccessedItemGroup(processedItem);
+            if (grouped) {
+                this.onArrowRightKey(event);
+            }
+            else {
+                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();
+                this.focusedItemInfo.mutate((value) => (value.index = processedItem.index));
+            }
+        }
+        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);
+        isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+    }
+    onMenuFocus() {
+        this.focused = true;
+        this.bindOutsideClickListener();
+        this.bindTransitionListeners();
+        if (!this.left && this.focusedItemInfo().level > 0) {
+            this.focusedItemInfo.set({ index: 0, level: 0, parentKey: '' });
+        }
+        if (this.focusedItemInfo().index === -1 && this.left < 0) {
+            this.focusedItemInfo.mutate((value) => (value.index = 0));
+        }
+        if (this.focusedItemInfo().index === -1 && !this.left) {
+            this.focusedItemInfo.set({ index: 0, level: 0, parentKey: '' });
+        }
+    }
+    onMenuBlur() {
+        this.focused = false;
+        this.popup && this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '' });
+        if (!this.popup) {
+            this.focusedItemInfo.mutate((value) => {
+                value.index = -1;
+            });
+        }
+        this.searchValue = '';
+        !this.popup && this.unbindOutsideClickListener();
+    }
+    activeLevel = signal(0);
+    bindTransitionListeners() {
+        if (!this.transitionStartListener) {
+            this.transitionStartListener = this.renderer.listen(this.rootmenu.sublistViewChild.nativeElement, 'transitionstart', (event) => {
+                this.transition = true;
+                event.preventDefault();
+            });
+        }
+        if (!this.transitionEndListener) {
+            this.transitionEndListener = this.renderer.listen(this.rootmenu.sublistViewChild.nativeElement, 'transitionend', (event) => {
+                const activeMenu = DomHandler.findSingle(this.rootmenu.el.nativeElement, `ul[data-pc-state="active"]`);
+                const activeLevel = DomHandler.getAttribute(activeMenu.firstElementChild, 'aria-level') - 1;
+                this.activeLevel.set(activeLevel);
+                if (!this.left) {
+                    this.rootmenu.sublistViewChild.nativeElement.focus();
+                }
+                else {
+                    const activeLevel = DomHandler.getAttribute(activeMenu.firstElementChild, 'aria-level') - 1;
+                    this.activeLevel.set(activeLevel);
+                    if (this.focusedItemInfo().level > this.activeLevel()) {
+                        let newActiveItemPath = this.activeItemPath().slice(0, this.activeItemPath().length - 1);
+                        let lastActiveParent = newActiveItemPath[newActiveItemPath.length - 1];
+                        this.focusedItemInfo.set({ index: -1, level: this.activeLevel(), parentKey: lastActiveParent.key });
+                        this.activeItemPath.set(newActiveItemPath);
+                    }
+                }
+                this.transition = false;
+                event.preventDefault();
+            });
+        }
+    }
+    unbindTransitionListeners() {
+        if (this.transitionEndListener) {
+            this.transitionEndListener();
+            this.transitionEndListener = null;
+        }
+        if (this.transitionStartListener) {
+            this.transitionStartListener();
+            this.transitionStartListener = null;
+        }
     }
     onOverlayAnimationStart(event) {
         switch (event.toState) {
             case 'visible':
                 if (this.popup) {
-                    this.updateViewPort();
+                    this.container = event.element;
                     this.moveOnTop();
                     this.onShow.emit({});
                     this.appendOverlay();
-                    DomHandler.absolutePosition(this.containerViewChild?.nativeElement, this.target);
-                    this.bindDocumentClickListener();
-                    this.bindDocumentResizeListener();
-                    this.bindScrollListener();
+                    this.alignOverlay();
+                    this.bindOutsideClickListener();
+                    this.bindResizeListener();
+                    DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+                    this.scrollInView();
                 }
                 break;
             case 'void':
@@ -491,6 +1038,12 @@ class SlideMenu {
                 break;
         }
     }
+    alignOverlay() {
+        if (this.relativeAlign)
+            DomHandler.relativePosition(this.container, this.target);
+        else
+            DomHandler.absolutePosition(this.container, this.target);
+    }
     onOverlayAnimationEnd(event) {
         switch (event.toState) {
             case 'void':
@@ -501,123 +1054,197 @@ class SlideMenu {
     appendOverlay() {
         if (this.appendTo) {
             if (this.appendTo === 'body')
-                this.renderer.appendChild(this.document.body, this.containerViewChild?.nativeElement);
+                this.renderer.appendChild(this.document.body, this.containerViewChild.nativeElement);
             else
-                DomHandler.appendChild(this.containerViewChild?.nativeElement, this.appendTo);
+                DomHandler.appendChild(this.container, this.appendTo);
         }
     }
     restoreOverlayAppend() {
-        if (this.container && this.appendTo) {
-            this.renderer.appendChild(this.el.nativeElement, this.containerViewChild?.nativeElement);
+        if (this.containerViewChild && this.appendTo) {
+            this.renderer.appendChild(this.el.nativeElement, this.container);
         }
     }
     moveOnTop() {
         if (this.autoZIndex) {
-            ZIndexUtils.set('menu', this.containerViewChild?.nativeElement, this.baseZIndex + this.config.zIndex.menu);
+            ZIndexUtils.set('menu', this.container, this.baseZIndex + this.config.zIndex.menu);
         }
     }
     /**
      * Hides the popup menu.
      * @group Method
      */
-    hide() {
-        this.visible = false;
+    hide(event, isFocus) {
+        if (this.popup) {
+            this.onHide.emit({});
+            this.visible = false;
+        }
+        isFocus && DomHandler.focus(this.target || this.rootmenu.sublistViewChild.nativeElement);
+    }
+    /**
+     * 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.visible = true;
+            this.target = event.currentTarget;
+        }
+        this.focusedItemInfo.set({ index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' });
+        if (!this.popup) {
+            isFocus && DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+        }
         this.cd.markForCheck();
     }
-    onWindowResize() {
-        if (this.visible && !DomHandler.isTouchDevice()) {
-            this.hide();
+    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;
     }
-    goBack() {
-        this.left += this.menuWidth;
+    findLastFocusedItemIndex() {
+        const selectedIndex = this.findSelectedItemIndex();
+        return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
     }
-    onBackwardKeydown(event) {
-        this.goBack();
-        if (!this.left) {
-            setTimeout(() => {
-                let focusableElements = DomHandler.getFocusableElements(this.el.nativeElement);
-                if (focusableElements && focusableElements.length > 0) {
-                    focusableElements[0].focus();
-                }
-            }, 1);
-        }
-        event.preventDefault();
+    findLastItemIndex() {
+        return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
     }
-    bindDocumentClickListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (!this.documentClickListener) {
-                const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
-                this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => {
-                    if (!this.preventDocumentDefault) {
-                        this.hide();
-                        this.cd.detectChanges();
-                    }
-                    this.preventDocumentDefault = false;
-                });
-            }
+    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));
+    }
+    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();
         }
     }
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            this.documentClickListener();
-            this.documentClickListener = 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' });
         }
     }
-    bindDocumentResizeListener() {
+    bindResizeListener() {
         if (isPlatformBrowser(this.platformId)) {
-            if (!this.documentResizeListener) {
-                this.documentResizeListener = this.renderer.listen(this.window, 'resize', this.onWindowResize.bind(this));
+            if (!this.resizeListener) {
+                this.resizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => {
+                    if (!DomHandler.isTouchDevice()) {
+                        this.hide(event, true);
+                    }
+                });
             }
         }
     }
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            this.documentResizeListener();
-            this.documentResizeListener = null;
-        }
-    }
-    bindScrollListener() {
+    bindOutsideClickListener() {
         if (isPlatformBrowser(this.platformId)) {
-            if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
-                    if (this.visible) {
-                        this.hide();
+            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 (this.popup) {
+                        if (isOutsideContainer && isOutsideTarget) {
+                            this.onMenuBlur();
+                            this.hide();
+                        }
+                    }
+                    else {
+                        if (isOutsideContainer && isOutsideTarget && this.focused) {
+                            this.onMenuBlur();
+                        }
                     }
                 });
             }
-            this.scrollHandler.bindScrollListener();
         }
     }
-    unbindScrollListener() {
-        if (this.scrollHandler) {
-            this.scrollHandler.unbindScrollListener();
+    unbindOutsideClickListener() {
+        if (this.outsideClickListener) {
+            this.outsideClickListener();
+            this.outsideClickListener = null;
+        }
+    }
+    unbindResizeListener() {
+        if (this.resizeListener) {
+            this.resizeListener();
+            this.resizeListener = null;
         }
     }
     onOverlayHide() {
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-        this.unbindScrollListener();
-        this.preventDocumentDefault = false;
+        this.unbindOutsideClickListener();
+        this.unbindResizeListener();
         this.left = 0;
         if (!this.cd.destroyed) {
             this.target = null;
         }
+        if (this.container) {
+            this.container = null;
+        }
     }
     ngOnDestroy() {
         if (this.popup) {
-            if (this.scrollHandler) {
-                this.scrollHandler.destroy();
-                this.scrollHandler = null;
+            if (this.container && this.autoZIndex) {
+                ZIndexUtils.clear(this.container);
             }
             this.restoreOverlayAppend();
             this.onOverlayHide();
         }
+        this.unbindTransitionListeners();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i4.PrimeNGConfig }, { token: i4.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SlideMenu, selector: "p-slideMenu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", menuWidth: "menuWidth", viewportHeight: "viewportHeight", effectDuration: "effectDuration", easing: "easing", backLabel: "backLabel", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "backward", first: true, predicate: ["backward"], descendants: true }, { propertyName: "slideMenuContent", first: true, predicate: ["slideMenuContent"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenu, 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.0.2", type: SlideMenu, selector: "p-slideMenu", inputs: { menuWidth: "menuWidth", viewportHeight: "viewportHeight", effectDuration: "effectDuration", easing: "easing", backLabel: "backLabel", disabled: "disabled", tabindex: "tabindex", 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" }, 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 }, { propertyName: "backward", first: true, predicate: ["backward"], descendants: true }, { propertyName: "slideMenuContentViewChild", first: true, predicate: ["slideMenuContent"], descendants: true }], ngImport: i0, template: `
         <div
             #container
+            [attr.data-pc-section]="'root'"
+            [attr.data-pc-name]="'slidemenu'"
+            [id]="id"
             [ngClass]="{ 'p-slidemenu p-component': true, 'p-slidemenu-overlay': popup }"
             [class]="styleClass"
             [ngStyle]="style"
@@ -629,23 +1256,47 @@ class SlideMenu {
             *ngIf="!popup || visible"
         >
             <div class="p-slidemenu-wrapper" [style.height]="left ? viewportHeight + 'px' : 'auto'" [style.width]="menuWidth + 'px'">
-                <div #slideMenuContent class="p-slidemenu-content">
-                    <p-slideMenuSub [item]="model" root="root" [index]="0" [menuWidth]="menuWidth" [effectDuration]="effectDuration" [easing]="easing"></p-slideMenuSub>
+                <div #slideMenuContent class="p-slidemenu-content" (focus)="logFocus($event, slideMenuContent)">
+                    <p-slideMenuSub
+                        #rootmenu
+                        [root]="true"
+                        [items]="processedItems"
+                        [menuId]="id"
+                        [tabindex]="!disabled ? tabindex : -1"
+                        [ariaLabel]="ariaLabel"
+                        [ariaLabelledBy]="ariaLabelledBy"
+                        [baseZIndex]="baseZIndex"
+                        [autoZIndex]="autoZIndex"
+                        [autoDisplay]="autoDisplay"
+                        [menuWidth]="menuWidth"
+                        [popup]="popup"
+                        [effectDuration]="effectDuration"
+                        [easing]="easing"
+                        [focusedItemId]="focused ? focusedItemId : undefined"
+                        [activeItemPath]="activeItemPath()"
+                        (itemClick)="onItemClick($event)"
+                        (menuFocus)="onMenuFocus($event)"
+                        (menuKeydown)="onKeyDown($event)"
+                        (itemMouseEnter)="onItemMouseEnter($event)"
+                    ></p-slideMenuSub>
                 </div>
-                <a #backward (keydown.enter)="onBackwardKeydown($event)" (keydown.space)="onBackwardKeydown($event)" class="p-slidemenu-backward p-menuitem-link" tabindex="0" [style.display]="left ? 'block' : 'none'" (click)="goBack()">
-                    <CaretLeftIcon *ngIf="!backIconTemplate" [styleClass]="'p-slidemenu-backward-icon'" />
+                <a #backward class="p-slidemenu-backward p-menuitem-link" tabindex="0" [style.display]="left ? 'block' : 'none'" (click)="goBack($event)" (keydown)="onNavigationKeyDown($event)" [attr.data-pc-section]="'navigation'">
+                    <CaretLeftIcon *ngIf="!backIconTemplate" [styleClass]="'p-slidemenu-backward-icon'" [ngStyle]="{ 'vertical-align': 'middle' }" />
                     <ng-template *ngTemplateOutlet="backIconTemplate"></ng-template>
                     <span>{{ backLabel }}</span>
                 </a>
             </div>
         </div>
-    `, isInline: true, styles: [".p-slidemenu{width:12.5rem}.p-slidemenu.p-slidemenu-overlay{position:absolute;top:0;left:0}.p-slidemenu ul{list-style:none;margin:0;padding:0}.p-slidemenu .p-slidemenu-rootlist{position:absolute;top:0}.p-slidemenu .p-submenu-list{display:none;position:absolute;top:0;width:12.5rem}.p-slidemenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden}.p-slidemenu .p-menuitem-icon,.p-slidemenu .p-menuitem-text{vertical-align:middle}.p-slidemenu .p-menuitem{position:relative}.p-slidemenu .p-menuitem-link .p-submenu-icon:not(svg){margin-left:auto}.p-slidemenu .p-menuitem-link .p-icon-wrapper{margin-left:auto;vertical-align:middle}.p-slidemenu .p-slidemenu-wrapper{position:relative}.p-slidemenu .p-slidemenu-content{overflow-x:hidden;overflow-y:auto;position:relative}.p-slidemenu-backward{position:absolute;bottom:0;width:100%;cursor:pointer;display:none}.p-slidemenu-backward .p-slidemenu-backward-icon,.p-slidemenu-backward span{vertical-align:middle}.p-slidemenu .p-menuitem-active{position:static}.p-slidemenu .p-menuitem-active>.p-submenu>.p-submenu-list{display:block}.p-slidemenu ul:not(.p-active-submenu)>.p-menuitem:not(.p-menuitem-active),.p-slidemenu .p-active-submenu>.p-menuitem-active>.p-submenu>.p-submenu-list{display:none}.p-slidemenu .p-active-submenu>.p-menuitem-active~.p-menuitem{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i0.forwardRef(function () { return CaretLeftIcon; }), selector: "CaretLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return SlideMenuSub; }), selector: "p-slideMenuSub", inputs: ["item", "root", "backLabel", "menuWidth", "effectDuration", "easing", "index"] }], 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-slidemenu .p-slidemenu-root-list{position:relative;top:0}.p-slidemenu-overlay{position:absolute;top:0;left:0}.p-slidemenu .p-menuitem-active{position:static}.p-slidemenu .p-slidemenu-wrapper{position:relative}.p-slidemenu ul{margin:0;padding:0;list-style:none}.p-slidemenu .p-submenu-list{position:absolute;min-width:100%;z-index:1;display:none}.p-slidemenu .p-slidemenu-content{overflow-x:hidden;overflow-y:auto;position:relative;height:100%}.p-slidemenu .p-menuitem-link:not(.p-slidemenu-backward){cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-slidemenu .p-menuitem-text{line-height:1}.p-slidemenu .p-menuitem{position:relative}.p-slidemenu .p-menuitem-link .p-submenu-icon:not(svg){margin-left:auto}.p-slidemenu .p-menuitem-link .p-icon-wrapper{margin-left:auto}.p-slidemenu .p-menuitem-active>p-slidemenusub>.p-submenu-list{display:block;left:100%;top:0}.p-slidemenu .p-menuitem-active>.p-menuitem-content>.p-submenu>.p-submenu-list{display:block}.p-slidemenu ul:not(.p-active-submenu)>.p-menuitem:not(.p-menuitem-active),.p-slidemenu .p-active-submenu>.p-menuitem-active>.p-menuitem-content>.p-submenu>.p-submenu-list{display:none}.p-slidemenu .p-active-submenu>.p-menuitem-active~.p-menuitem{display:block}.p-slidemenu-backward{position:absolute;bottom:0;width:100%;cursor:pointer;display:none}.p-slidemenu-backward .p-slidemenu-backward-icon,.p-slidemenu-backward span{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i0.forwardRef(function () { return CaretLeftIcon; }), selector: "CaretLeftIcon" }, { kind: "component", type: i0.forwardRef(function () { return SlideMenuSub; }), selector: "p-slideMenuSub", inputs: ["items", "menuWidth", "root", "easing", "effectDuration", "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: SlideMenu, decorators: [{
             type: Component,
             args: [{ selector: 'p-slideMenu', template: `
         <div
             #container
+            [attr.data-pc-section]="'root'"
+            [attr.data-pc-name]="'slidemenu'"
+            [id]="id"
             [ngClass]="{ 'p-slidemenu p-component': true, 'p-slidemenu-overlay': popup }"
             [class]="styleClass"
             [ngStyle]="style"
@@ -657,11 +1308,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             *ngIf="!popup || visible"
         >
             <div class="p-slidemenu-wrapper" [style.height]="left ? viewportHeight + 'px' : 'auto'" [style.width]="menuWidth + 'px'">
-                <div #slideMenuContent class="p-slidemenu-content">
-                    <p-slideMenuSub [item]="model" root="root" [index]="0" [menuWidth]="menuWidth" [effectDuration]="effectDuration" [easing]="easing"></p-slideMenuSub>
+                <div #slideMenuContent class="p-slidemenu-content" (focus)="logFocus($event, slideMenuContent)">
+                    <p-slideMenuSub
+                        #rootmenu
+                        [root]="true"
+                        [items]="processedItems"
+                        [menuId]="id"
+                        [tabindex]="!disabled ? tabindex : -1"
+                        [ariaLabel]="ariaLabel"
+                        [ariaLabelledBy]="ariaLabelledBy"
+                        [baseZIndex]="baseZIndex"
+                        [autoZIndex]="autoZIndex"
+                        [autoDisplay]="autoDisplay"
+                        [menuWidth]="menuWidth"
+                        [popup]="popup"
+                        [effectDuration]="effectDuration"
+                        [easing]="easing"
+                        [focusedItemId]="focused ? focusedItemId : undefined"
+                        [activeItemPath]="activeItemPath()"
+                        (itemClick)="onItemClick($event)"
+                        (menuFocus)="onMenuFocus($event)"
+                        (menuKeydown)="onKeyDown($event)"
+                        (itemMouseEnter)="onItemMouseEnter($event)"
+                    ></p-slideMenuSub>
                 </div>
-                <a #backward (keydown.enter)="onBackwardKeydown($event)" (keydown.space)="onBackwardKeydown($event)" class="p-slidemenu-backward p-menuitem-link" tabindex="0" [style.display]="left ? 'block' : 'none'" (click)="goBack()">
-                    <CaretLeftIcon *ngIf="!backIconTemplate" [styleClass]="'p-slidemenu-backward-icon'" />
+                <a #backward class="p-slidemenu-backward p-menuitem-link" tabindex="0" [style.display]="left ? 'block' : 'none'" (click)="goBack($event)" (keydown)="onNavigationKeyDown($event)" [attr.data-pc-section]="'navigation'">
+                    <CaretLeftIcon *ngIf="!backIconTemplate" [styleClass]="'p-slidemenu-backward-icon'" [ngStyle]="{ 'vertical-align': 'middle' }" />
                     <ng-template *ngTemplateOutlet="backIconTemplate"></ng-template>
                     <span>{{ backLabel }}</span>
                 </a>
@@ -669,22 +1341,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
         </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'
-                    }, styles: [".p-slidemenu{width:12.5rem}.p-slidemenu.p-slidemenu-overlay{position:absolute;top:0;left:0}.p-slidemenu ul{list-style:none;margin:0;padding:0}.p-slidemenu .p-slidemenu-rootlist{position:absolute;top:0}.p-slidemenu .p-submenu-list{display:none;position:absolute;top:0;width:12.5rem}.p-slidemenu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden}.p-slidemenu .p-menuitem-icon,.p-slidemenu .p-menuitem-text{vertical-align:middle}.p-slidemenu .p-menuitem{position:relative}.p-slidemenu .p-menuitem-link .p-submenu-icon:not(svg){margin-left:auto}.p-slidemenu .p-menuitem-link .p-icon-wrapper{margin-left:auto;vertical-align:middle}.p-slidemenu .p-slidemenu-wrapper{position:relative}.p-slidemenu .p-slidemenu-content{overflow-x:hidden;overflow-y:auto;position:relative}.p-slidemenu-backward{position:absolute;bottom:0;width:100%;cursor:pointer;display:none}.p-slidemenu-backward .p-slidemenu-backward-icon,.p-slidemenu-backward span{vertical-align:middle}.p-slidemenu .p-menuitem-active{position:static}.p-slidemenu .p-menuitem-active>.p-submenu>.p-submenu-list{display:block}.p-slidemenu ul:not(.p-active-submenu)>.p-menuitem:not(.p-menuitem-active),.p-slidemenu .p-active-submenu>.p-menuitem-active>.p-submenu>.p-submenu-list{display:none}.p-slidemenu .p-active-submenu>.p-menuitem-active~.p-menuitem{display:block}\n"] }]
+                    }, styles: [".p-slidemenu .p-slidemenu-root-list{position:relative;top:0}.p-slidemenu-overlay{position:absolute;top:0;left:0}.p-slidemenu .p-menuitem-active{position:static}.p-slidemenu .p-slidemenu-wrapper{position:relative}.p-slidemenu ul{margin:0;padding:0;list-style:none}.p-slidemenu .p-submenu-list{position:absolute;min-width:100%;z-index:1;display:none}.p-slidemenu .p-slidemenu-content{overflow-x:hidden;overflow-y:auto;position:relative;height:100%}.p-slidemenu .p-menuitem-link:not(.p-slidemenu-backward){cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-slidemenu .p-menuitem-text{line-height:1}.p-slidemenu .p-menuitem{position:relative}.p-slidemenu .p-menuitem-link .p-submenu-icon:not(svg){margin-left:auto}.p-slidemenu .p-menuitem-link .p-icon-wrapper{margin-left:auto}.p-slidemenu .p-menuitem-active>p-slidemenusub>.p-submenu-list{display:block;left:100%;top:0}.p-slidemenu .p-menuitem-active>.p-menuitem-content>.p-submenu>.p-submenu-list{display:block}.p-slidemenu ul:not(.p-active-submenu)>.p-menuitem:not(.p-menuitem-active),.p-slidemenu .p-active-submenu>.p-menuitem-active>.p-menuitem-content>.p-submenu>.p-submenu-list{display:none}.p-slidemenu .p-active-submenu>.p-menuitem-active~.p-menuitem{display:block}.p-slidemenu-backward{position:absolute;bottom:0;width:100%;cursor:pointer;display:none}.p-slidemenu-backward .p-slidemenu-backward-icon,.p-slidemenu-backward span{vertical-align:middle}\n"] }]
         }], 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: i4.PrimeNGConfig }, { type: i4.OverlayService }]; }, propDecorators: { model: [{
-                type: Input
-            }], popup: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], menuWidth: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.PrimeNGConfig }, { type: i5.OverlayService }]; }, propDecorators: { menuWidth: [{
                 type: Input
             }], viewportHeight: [{
                 type: Input
@@ -694,16 +1358,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], backLabel: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], popup: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
             }], appendTo: [{
                 type: Input
             }], autoZIndex: [{
                 type: Input
             }], baseZIndex: [{
                 type: Input
+            }], autoDisplay: [{
+                type: Input
             }], showTransitionOptions: [{
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
+            }], id: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
             }], onShow: [{
                 type: Output
             }], onHide: [{
@@ -711,25 +1395,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
-            }], container: [{
+            }], rootmenu: [{
+                type: ViewChild,
+                args: ['rootmenu']
+            }], containerViewChild: [{
                 type: ViewChild,
                 args: ['container']
             }], backward: [{
                 type: ViewChild,
                 args: ['backward']
-            }], slideMenuContent: [{
+            }], slideMenuContentViewChild: [{
                 type: ViewChild,
                 args: ['slideMenuContent']
             }] } });
 class SlideMenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuModule, declarations: [SlideMenu, SlideMenuSub], imports: [CommonModule, RouterModule, TooltipModule, SharedModule, CaretLeftIcon, CaretRightIcon, AngleRightIcon], exports: [SlideMenu, RouterModule, TooltipModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuModule, imports: [CommonModule, RouterModule, TooltipModule, SharedModule, CaretLeftIcon, CaretRightIcon, AngleRightIcon, RouterModule, TooltipModule, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuModule, declarations: [SlideMenu, SlideMenuSub], imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, CaretLeftIcon], exports: [SlideMenu, RouterModule, TooltipModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, CaretLeftIcon, RouterModule, TooltipModule, SharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SlideMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, RouterModule, TooltipModule, SharedModule, CaretLeftIcon, CaretRightIcon, AngleRightIcon],
+                    imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, CaretLeftIcon],
                     exports: [SlideMenu, RouterModule, TooltipModule, SharedModule],
                     declarations: [SlideMenu, SlideMenuSub]
                 }]