@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/navigation/menu/fesm2022/index.mjs

@@ -0,0 +1,929 @@
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from '@wm/components/input/button';
+import * as i0 from '@angular/core';
+import { Input, Directive, HostListener, ContentChild, Inject, Optional, Attribute, Component, forwardRef, inject, Self, ViewChildren } from '@angular/core';
+import * as i2 from '@wm/core';
+import { setAttr, addClass, removeClass, triggerItemAction, toggleClass, $appDigest } from '@wm/core';
+import { register, PROP_STRING, PROP_BOOLEAN, StylableComponent, styler, APPLY_STYLES_TYPE, provideAsWidgetRef, PROP_ANY, DatasetAwareNavComponent, hasLinkToCurrentPage, TextContentDirective, PROP_NUMBER, AUTOCLOSE_TYPE, BaseContainerComponent } from '@wm/components/base';
+import { AnchorComponent } from '@wm/components/basic/anchor';
+import * as i1 from '@angular/router';
+import { isEmpty, forEach, omit, find, clone, includes } from 'lodash-es';
+import * as i3$1 from 'ngx-bootstrap/dropdown';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+
+const disableContextMenu = ($event) => {
+    $event.preventDefault();
+};
+class NavigationControlDirective {
+    set wmNavigationControl(val) {
+        this._link = val;
+        // MEMORY LEAK FIX: Remove existing listener before adding new one
+        if (this.boundContextMenuHandler) {
+            this.nativeElement.removeEventListener('contextmenu', this.boundContextMenuHandler);
+            this.boundContextMenuHandler = null;
+        }
+        if (val && !this.disableMenuContext) {
+            setAttr(this.nativeElement, 'href', val);
+        }
+        else {
+            setAttr(this.nativeElement, 'href', 'javascript:void(0)');
+            // MEMORY LEAK FIX: Store bound function reference for cleanup
+            this.boundContextMenuHandler = disableContextMenu;
+            this.nativeElement.addEventListener('contextmenu', this.boundContextMenuHandler);
+        }
+    }
+    constructor(eleRef) {
+        this.nativeElement = eleRef.nativeElement;
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Remove event listener using stored bound function reference
+        if (this.boundContextMenuHandler) {
+            this.nativeElement.removeEventListener('contextmenu', this.boundContextMenuHandler);
+            this.boundContextMenuHandler = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NavigationControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NavigationControlDirective, isStandalone: true, selector: "[wmNavigationControl]", inputs: { disableMenuContext: "disableMenuContext", wmNavigationControl: "wmNavigationControl" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NavigationControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmNavigationControl]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disableMenuContext: [{
+                type: Input
+            }], wmNavigationControl: [{
+                type: Input
+            }] } });
+
+const registerProps$2 = () => {
+    register('wm-nav-item', new Map([
+        ['class', PROP_STRING],
+        ['name', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }]
+    ]));
+};
+
+const DEFAULT_CLS$2 = 'app-nav-item';
+const WIDGET_CONFIG$2 = { widgetType: 'wm-nav-item', hostClass: DEFAULT_CLS$2 };
+class NavItemDirective extends StylableComponent {
+    static { this.initializeProps = registerProps$2(); }
+    makeActive() {
+        const parentNode = this.nativeElement.parentNode;
+        $(parentNode).find('> li.active').removeClass('active');
+        if (this.isAttached) {
+            addClass(this.nativeElement, 'active');
+        }
+    }
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG$2, explicitContext);
+        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
+    }
+    ngAfterViewInit() {
+        if (this.innerLink) {
+            this.innerLink.onActive(() => this.makeActive());
+        }
+    }
+    ngOnDetach() {
+        removeClass(this.nativeElement, 'active', true);
+        super.ngOnDetach();
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ContentChild reference
+        this.innerLink = null;
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NavItemDirective, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NavItemDirective, isStandalone: true, selector: "[wmNavItem]", host: { listeners: { "click": "makeActive()", "keydown.enter": "makeActive()" } }, providers: [
+            provideAsWidgetRef(NavItemDirective)
+        ], queries: [{ propertyName: "innerLink", first: true, predicate: AnchorComponent, descendants: true }], exportAs: ["navItemRef"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NavItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wmNavItem]',
+                    exportAs: 'navItemRef',
+                    providers: [
+                        provideAsWidgetRef(NavItemDirective)
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { innerLink: [{
+                type: ContentChild,
+                args: [AnchorComponent]
+            }], makeActive: [{
+                type: HostListener,
+                args: ['click']
+            }, {
+                type: HostListener,
+                args: ['keydown.enter']
+            }] } });
+
+const registerProps$1 = () => {
+    register('wm-nav', new Map([
+        ['autoclose', { value: 'always', ...PROP_STRING }],
+        ['autoopen', { value: 'never', ...PROP_STRING }],
+        ['class', PROP_STRING],
+        ['dataset', PROP_ANY],
+        ['iconposition', { value: 'left', ...PROP_STRING }],
+        ['isactive', PROP_STRING],
+        ['itemlabel', PROP_STRING],
+        ['itemhint', PROP_STRING],
+        ['itemlink', PROP_STRING],
+        ['itemicon', PROP_STRING],
+        ['itemclass', PROP_STRING],
+        ['itemchildren', PROP_STRING],
+        ['itemaction', PROP_STRING],
+        ['itembadge', PROP_STRING],
+        ['itemtarget', PROP_STRING],
+        ['layout', PROP_STRING],
+        ['name', PROP_STRING],
+        ['orderby', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['showonhover', { value: false, ...PROP_BOOLEAN }],
+        ['type', PROP_STRING],
+        ['userrole', PROP_STRING]
+    ]));
+};
+
+const DEFAULT_CLS$1 = 'nav app-nav';
+const WIDGET_CONFIG$1 = { widgetType: 'wm-nav', hostClass: DEFAULT_CLS$1 };
+const NavClassMap = {
+    pills: 'nav-pills',
+    tabs: 'nav-tabs',
+    navbar: 'navbar-nav'
+};
+class NavComponent extends DatasetAwareNavComponent {
+    static { this.initializeProps = registerProps$1(); }
+    get activePageName() {
+        return this.app.activePageName;
+    }
+    constructor(inj, cdRef, route, userDefinedExecutionContext, app, selectEventCB, explicitContext) {
+        super(inj, WIDGET_CONFIG$1, explicitContext);
+        this.cdRef = cdRef;
+        this.route = route;
+        this.userDefinedExecutionContext = userDefinedExecutionContext;
+        this.app = app;
+        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
+        this.disableMenuContext = !!selectEventCB;
+        this.pageScope = this.viewParent;
+        // For selecting the item on load
+        const datasetSubscription = this.nodes$.subscribe(() => {
+            if (!isEmpty(this.nodes)) {
+                let itemFound = false;
+                const getItem = (nodes, isMenuWidget) => {
+                    forEach(nodes, (item) => {
+                        if (itemFound) {
+                            return;
+                        }
+                        if (item.isactive) {
+                            itemFound = true;
+                            this.selecteditem = isMenuWidget ? omit(item, ['children', 'value']) : item.value;
+                            this.invokeEventCallback('select', { $event: {}, $item: item.value });
+                            // Trigger the action associated with active item
+                            triggerItemAction(this, item);
+                            // _selected is used to add active class for nav item. If we have children inside nav widget then it is not required.
+                            if (!isMenuWidget) {
+                                item._selected = true;
+                            }
+                            return false;
+                        }
+                        if (!isEmpty(item.children)) {
+                            getItem(item.children, 'menu');
+                        }
+                    });
+                };
+                getItem(this.nodes);
+            }
+        });
+        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+    }
+    setNavType(type) {
+        addClass(this.nativeElement, NavClassMap[type]);
+    }
+    setNavLayout(layout) {
+        addClass(this.nativeElement, `nav-${layout}`);
+    }
+    onNavSelect($event, item) {
+        $event.preventDefault();
+        const selectedItem = find(this.nodes, '_selected');
+        if (selectedItem) {
+            // @ts-ignore
+            delete selectedItem._selected;
+        }
+        this.selecteditem = item.value;
+        this.invokeEventCallback('select', { $event, $item: item.value });
+        // Trigger the action associated with active item
+        triggerItemAction(this, item);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.setNavType(this.type);
+        this.setNavLayout(this.layout);
+    }
+    /**
+     * invoked from the menu widget when a menu item is selected.
+     * @param $event
+     * @param widget
+     * @param $item
+     */
+    onMenuItemSelect($event, widget, $item) {
+        this.selecteditem = omit($item, ['children', 'value']);
+        this.invokeEventCallback('select', { $event, $item: this.selecteditem });
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Cleanup
+        // Note: Subscription is already cleaned up via registerDestroyListener in constructor
+        // but adding explicit OnDestroy to ensure proper cleanup lifecycle
+        // Clear references
+        this.selecteditem = null;
+        this.pageScope = null;
+        this.itemActionFn = null;
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NavComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.UserDefinedExecutionContext }, { token: i2.App }, { token: 'select.event', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NavComponent, isStandalone: true, selector: "[wmNav]", providers: [
+            provideAsWidgetRef(NavComponent)
+        ], usesInheritance: true, ngImport: i0, template: "<ng-template #menuRef let-item=\"item\" let-index=\"index\">\n  <div wmMenu dropdown\n    type=\"anchor\"\n    autoclose.bind=\"autoclose\"\n    iconclass.bind=\"item.icon\"\n    autoopen.bind=\"autoopen\"\n    caption.bind=\"item.label\"\n    hint.bind=\"item.hint\"\n    dataset.bind=\"item.children\"\n    badgevalue.bind=\"item.badge\"\n    iconposition.bind=\"iconposition\"\n    showonhover.bind=\"showonhover\"\n  select.event=\"onMenuItemSelect($event, widget, $item)\"></div>\n</ng-template>\n\n<ng-template #anchorRef let-item=\"item\" let-index=\"index\" let-liRef=\"liRef\">\n  <a wmAnchor\n    [disableMenuContext]=\"disableMenuContext || !!item.action\"\n    [wmNavigationControl]=\"item.link\"\n    [attr.aria-current]=\"item._selected || (!isactive && item.link === '#/' + activePageName) ? 'page' : ''\"\n    caption.bind=\"item.label\"\n    hint.bind=\"item.hint\"\n    iconclass.bind=\"item.icon\"\n    badgevalue.bind=\"item.badge\"\n    iconposition.bind=\"iconposition\"\n  click.event=\"onNavSelect($event, item)\"></a>\n</ng-template>\n\n@for (item of nodes; track item; let index = $index) {\n  <li #liRef=\"navItemRef\"\n    [ngClass]=\"{active: item._selected || (!isactive && item.link === '#/' + activePageName)}\"\n    class=\"app-nav-item {{item.class}}\"\n    wmNavItem>\n    @if (!item.children.length) {\n      <ng-container [ngTemplateOutlet]=\"anchorRef\"\n        [ngTemplateOutletContext]=\"{item: item, index:index, liRef: liRef}\"\n        [ngTemplateOutletInjector]=\"createCustomInjector('anchor_' + liRef.trackId, {item: item, index:index, liRef: liRef})\"\n      ></ng-container>\n    }\n    @if (item.children.length) {\n      <ng-container [ngTemplateOutlet]=\"menuRef\"\n        [ngTemplateOutletContext]=\"{item: item, index:index}\"\n        [ngTemplateOutletInjector]=\"createCustomInjector('menu_' + liRef.trackId, {item: item, index:index})\"\n      ></ng-container>\n    }\n  </li>\n}\n\n@if (!nodes.length) {\n  <ng-content select=\"[wmNavItem]\"></ng-content>\n}\n", dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0.forwardRef(() => BsDropdownModule) }, { kind: "directive", type: i0.forwardRef(() => i3$1.BsDropdownDirective), selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i0.forwardRef(() => AnchorComponent), selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: i0.forwardRef(() => MenuComponent), selector: "[wmMenu]" }, { kind: "directive", type: i0.forwardRef(() => NavItemDirective), selector: "[wmNavItem]", exportAs: ["navItemRef"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NavComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, BsDropdownModule, AnchorComponent, forwardRef(() => MenuComponent), NavItemDirective,], selector: '[wmNav]', providers: [
+                        provideAsWidgetRef(NavComponent)
+                    ], template: "<ng-template #menuRef let-item=\"item\" let-index=\"index\">\n  <div wmMenu dropdown\n    type=\"anchor\"\n    autoclose.bind=\"autoclose\"\n    iconclass.bind=\"item.icon\"\n    autoopen.bind=\"autoopen\"\n    caption.bind=\"item.label\"\n    hint.bind=\"item.hint\"\n    dataset.bind=\"item.children\"\n    badgevalue.bind=\"item.badge\"\n    iconposition.bind=\"iconposition\"\n    showonhover.bind=\"showonhover\"\n  select.event=\"onMenuItemSelect($event, widget, $item)\"></div>\n</ng-template>\n\n<ng-template #anchorRef let-item=\"item\" let-index=\"index\" let-liRef=\"liRef\">\n  <a wmAnchor\n    [disableMenuContext]=\"disableMenuContext || !!item.action\"\n    [wmNavigationControl]=\"item.link\"\n    [attr.aria-current]=\"item._selected || (!isactive && item.link === '#/' + activePageName) ? 'page' : ''\"\n    caption.bind=\"item.label\"\n    hint.bind=\"item.hint\"\n    iconclass.bind=\"item.icon\"\n    badgevalue.bind=\"item.badge\"\n    iconposition.bind=\"iconposition\"\n  click.event=\"onNavSelect($event, item)\"></a>\n</ng-template>\n\n@for (item of nodes; track item; let index = $index) {\n  <li #liRef=\"navItemRef\"\n    [ngClass]=\"{active: item._selected || (!isactive && item.link === '#/' + activePageName)}\"\n    class=\"app-nav-item {{item.class}}\"\n    wmNavItem>\n    @if (!item.children.length) {\n      <ng-container [ngTemplateOutlet]=\"anchorRef\"\n        [ngTemplateOutletContext]=\"{item: item, index:index, liRef: liRef}\"\n        [ngTemplateOutletInjector]=\"createCustomInjector('anchor_' + liRef.trackId, {item: item, index:index, liRef: liRef})\"\n      ></ng-container>\n    }\n    @if (item.children.length) {\n      <ng-container [ngTemplateOutlet]=\"menuRef\"\n        [ngTemplateOutletContext]=\"{item: item, index:index}\"\n        [ngTemplateOutletInjector]=\"createCustomInjector('menu_' + liRef.trackId, {item: item, index:index})\"\n      ></ng-container>\n    }\n  </li>\n}\n\n@if (!nodes.length) {\n  <ng-content select=\"[wmNavItem]\"></ng-content>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i2.UserDefinedExecutionContext }, { type: i2.App }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['select.event']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }] });
+
+const menuAlignClass = {
+    'pull-right': 'fa-caret-left',
+    'dropinline-menu': 'fa-caret-down',
+    'pull-left': 'fa-caret-right'
+};
+const MENU_LAYOUT_TYPE = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical'
+};
+class MenuDropdownItemComponent {
+    constructor(app, userDefinedExecutionContext, parentNav, elRef) {
+        this.app = app;
+        this.userDefinedExecutionContext = userDefinedExecutionContext;
+        this.parentNav = parentNav;
+        this.menuRef = inject(MenuComponent);
+        this.onSelect = ($event, item) => {
+            if (this.nativeElement !== $($event.target).closest('.app-menu-item').get(0)) {
+                return;
+            }
+            // prevent event event propagation if auto close is outside click.
+            if (this.menuRef.autoclose === 'outsideClick') {
+                $event.stopPropagation();
+            }
+            $event.preventDefault();
+            const args = { $event, $item: item };
+            this.menuRef.onMenuItemSelect(args);
+            const selectedItem = clone(item);
+            selectedItem.target = selectedItem.target || this.menuRef.linktarget;
+            // Trigger the action associated with active item
+            triggerItemAction(this, selectedItem);
+        };
+        this.nativeElement = elRef.nativeElement;
+        addClass(this.nativeElement, 'app-menu-item');
+        this.menualign = menuAlignClass[this.menuRef.menualign] || menuAlignClass['pull-left'];
+    }
+    ngOnInit() {
+        // add active class to the item only if it is in nav component.
+        if (this.parentNav) {
+            if (hasLinkToCurrentPage([this.item], this.menuRef.route.url)) {
+                // add active class to the li, if the menu item's link is same as the current page name.
+                addClass(this.nativeElement, 'active');
+            }
+            this.highlightActiveLinkSubscription = this.app.subscribe("highlightActiveLink", (data) => {
+                toggleClass(this.nativeElement, 'active', hasLinkToCurrentPage([this.item], this.menuRef.route.url));
+            });
+        }
+    }
+    getInitialKeyMovements() {
+        const KEY_MOVEMENTS = clone(KEYBOARD_MOVEMENTS);
+        if (this.menuRef.menulayout === MENU_LAYOUT_TYPE.HORIZONTAL) {
+            KEY_MOVEMENTS.MOVE_UP = 'LEFT-ARROW';
+            KEY_MOVEMENTS.MOVE_LEFT = 'UP-ARROW';
+            KEY_MOVEMENTS.MOVE_RIGHT = 'DOWN-ARROW';
+            KEY_MOVEMENTS.MOVE_DOWN = 'RIGHT-ARROW';
+        }
+        else {
+            if (this.menuRef.menuposition === MENU_POSITION.DOWN_LEFT || this.menuRef.menuposition === MENU_POSITION.UP_LEFT) {
+                KEY_MOVEMENTS.MOVE_LEFT = 'RIGHT-ARROW';
+                KEY_MOVEMENTS.MOVE_RIGHT = 'LEFT-ARROW';
+            }
+            else if (this.menuRef.menuposition === 'inline') {
+                KEY_MOVEMENTS.MOVE_UP = 'LEFT-ARROW';
+                KEY_MOVEMENTS.MOVE_LEFT = 'UP-ARROW';
+                KEY_MOVEMENTS.MOVE_RIGHT = 'DOWN-ARROW';
+                KEY_MOVEMENTS.MOVE_DOWN = 'RIGHT-ARROW';
+            }
+        }
+        return KEY_MOVEMENTS;
+    }
+    onKeyDown($event, eventAction) {
+        const $li = $(this.nativeElement);
+        const $ul = $(this.nativeElement).closest('ul.dropdown-menu');
+        const $parentUl = this.menuRef.$element.find('> ul.dropdown-menu');
+        const ARROW_KEYS = ['LEFT-ARROW', 'RIGHT-ARROW', 'UP-ARROW', 'DOWN-ARROW'];
+        const KEY_MOVEMENTS = this.getInitialKeyMovements();
+        if (includes(ARROW_KEYS, eventAction)) {
+            // preventing from page scroll when up/down arrow is pressed, in case of menu is opened.
+            $event.preventDefault();
+        }
+        if ((eventAction === KEY_MOVEMENTS.ON_TAB && $parentUl.children().last()[0] === this.nativeElement)
+            || (eventAction === KEY_MOVEMENTS.ON_SHIFT_TAB && $parentUl.children().first()[0] === this.nativeElement)
+            || eventAction === KEY_MOVEMENTS.ON_ESCAPE) {
+            /*closing all the children elements when
+            * 1. Tab is clicked on the last $element
+            * 2. Shift Tab is clicked on the first $element
+            * 3. When Escape key is clicked*/
+            $event.preventDefault();
+            this.menuRef.bsDropdown.hide();
+        }
+        else if ((eventAction === KEY_MOVEMENTS.ON_ENTER && !this.item.link) || eventAction === KEY_MOVEMENTS.MOVE_RIGHT) {
+            // when there is no link for the menu, on enter open the inner child elements and focus the first $element
+            $event.stopPropagation();
+            if (this.item.children.length) {
+                $li.toggleClass('open');
+                $li.find('li').first().find('> a').focus();
+            }
+            else {
+                $li.find('> a').focus();
+            }
+        }
+        else if (eventAction === KEY_MOVEMENTS.MOVE_LEFT
+            || (eventAction === KEY_MOVEMENTS.ON_TAB && $ul.children().last()[0] === this.nativeElement)
+            || (eventAction === KEY_MOVEMENTS.ON_SHIFT_TAB && $ul.children().first()[0] === this.nativeElement)) {
+            if ($parentUl[0] !== $ul[0]) {
+                const $parentItem = $ul.parent();
+                $parentItem.toggleClass('open').find('li.open').removeClass('open');
+                $parentItem.find('> a').focus();
+                $event.preventDefault();
+                $event.stopPropagation();
+            }
+        }
+        else if (eventAction === KEY_MOVEMENTS.MOVE_UP) {
+            if ($parentUl[0] !== $ul[0] || $parentUl.find('> li').first()[0] !== this.nativeElement) {
+                $event.stopPropagation();
+                $li.prev().find('> a').focus();
+            }
+        }
+        else if (eventAction === KEY_MOVEMENTS.MOVE_DOWN) {
+            $event.stopPropagation();
+            if ($parentUl.find('> li').last()[0] === this.nativeElement
+                && (this.menuRef.menulayout !== MENU_LAYOUT_TYPE.HORIZONTAL
+                    && this.menuRef.menuposition === MENU_POSITION.UP_RIGHT
+                    || this.menuRef.menuposition === MENU_POSITION.UP_LEFT)) {
+                this.menuRef.bsDropdown.hide();
+            }
+            else {
+                $li.next().find('> a').focus();
+            }
+        }
+        else if (eventAction === KEY_MOVEMENTS.ON_ENTER) {
+            this.onSelect($event, this.item);
+        }
+        else {
+            $event.stopPropagation();
+        }
+    }
+    ngOnDestroy() {
+        if (this.highlightActiveLinkSubscription) {
+            this.highlightActiveLinkSubscription();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuDropdownItemComponent, deps: [{ token: i2.App }, { token: i2.UserDefinedExecutionContext }, { token: NavComponent, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MenuDropdownItemComponent, isStandalone: true, selector: "li[wmMenuDropdownItem]", inputs: { item: "item" }, host: { listeners: { "keydown.tab": "onKeyDown($event,\"TAB\")", "keydown.shift.tab": "onKeyDown($event,\"SHIFT-TAB\")", "keydown.escape": "onKeyDown($event,\"ESC\")", "keydown.enter": "onKeyDown($event,\"ENTER\")", "keydown.arrowup": "onKeyDown($event,\"UP-ARROW\")", "keydown.arrowdown": "onKeyDown($event,\"DOWN-ARROW\")", "keydown.arrowright": "onKeyDown($event,\"RIGHT-ARROW\")", "keydown.arrowleft": "onKeyDown($event,\"LEFT-ARROW\")", "click": "onSelect($event,item)" } }, ngImport: i0, template: "<a href=\"javascript:void(0);\" [title]=\"item.label\" [wmNavigationControl]=\"item.link\" [disableMenuContext]=\"menuRef.disableMenuContext || !!item.action\">\n  @if (item.children.length) {\n    <span class=\"pull-right fa caret {{menualign}}\"></span>\n  }\n  <i class=\"app-icon {{item.icon}}\"></i>\n  <span class=\"anchor-caption\">{{item.label}}</span>\n  @if (item.badge) {\n    <span class=\"badge pull-right\" [textContent]=\"item.badge\"></span>\n  }\n</a>\n@if (item.children.length) {\n  <ul wmMenuDropdown [items]=\"item.children\"></ul>\n}", dependencies: [{ kind: "directive", type: i0.forwardRef(() => TextContentDirective), selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: i0.forwardRef(() => MenuDropdownComponent), selector: "ul[wmMenuDropdown]", inputs: ["items"] }, { kind: "directive", type: i0.forwardRef(() => NavigationControlDirective), selector: "[wmNavigationControl]", inputs: ["disableMenuContext", "wmNavigationControl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [TextContentDirective, forwardRef(() => MenuDropdownComponent), NavigationControlDirective], selector: 'li[wmMenuDropdownItem]', template: "<a href=\"javascript:void(0);\" [title]=\"item.label\" [wmNavigationControl]=\"item.link\" [disableMenuContext]=\"menuRef.disableMenuContext || !!item.action\">\n  @if (item.children.length) {\n    <span class=\"pull-right fa caret {{menualign}}\"></span>\n  }\n  <i class=\"app-icon {{item.icon}}\"></i>\n  <span class=\"anchor-caption\">{{item.label}}</span>\n  @if (item.badge) {\n    <span class=\"badge pull-right\" [textContent]=\"item.badge\"></span>\n  }\n</a>\n@if (item.children.length) {\n  <ul wmMenuDropdown [items]=\"item.children\"></ul>\n}" }]
+        }], ctorParameters: () => [{ type: i2.App }, { type: i2.UserDefinedExecutionContext }, { type: NavComponent, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ElementRef }], propDecorators: { item: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown.tab', ['$event', '"TAB"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.shift.tab', ['$event', '"SHIFT-TAB"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.escape', ['$event', '"ESC"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.enter', ['$event', '"ENTER"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowup', ['$event', '"UP-ARROW"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowdown', ['$event', '"DOWN-ARROW"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event', '"RIGHT-ARROW"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event', '"LEFT-ARROW"']]
+            }], onSelect: [{
+                type: HostListener,
+                args: ['click', ['$event', 'item']]
+            }] } });
+
+const animationClasses = {
+    scale: {
+        'name': 'wmScaleInLeft',
+        'down,right': 'wmScaleInLeft',
+        'down,left': 'wmScaleInRight',
+        'up,right': 'wmScaleInTopLeft',
+        'up,left': 'wmScaleInTopRight'
+    },
+    fade: {
+        'name': 'fadeIn',
+        'down,right': 'fadeIn',
+        'down,left': 'fadeIn',
+        'up,right': 'fadeIn',
+        'up,left': 'fadeIn'
+    },
+    slide: {
+        'name': 'wmSlideInDown',
+        'down,right': 'wmSlideInDown',
+        'down,left': 'wmSlideInDown',
+        'up,right': 'wmSlideInUp',
+        'up,left': 'wmSlideInUp'
+    }
+};
+const DEFAULT_CLS = 'dropdown-menu';
+class MenuDropdownComponent {
+    constructor(elRef) {
+        this.menuRef = inject(MenuComponent);
+        this.nativeElement = elRef.nativeElement;
+        this.hasExecutedCallback = false;
+        addClass(this.nativeElement, DEFAULT_CLS);
+    }
+    ngAfterViewInit() {
+        const animateItems = this.menuRef.animateitems;
+        let animationClass = '';
+        if (animateItems) {
+            animationClass = `animated ${(animationClasses[animateItems][this.menuRef.menuposition] || animationClasses[animateItems].name)}`;
+        }
+        addClass(this.nativeElement, `dropdown-menu ${this.menuRef.menualign} ${animationClass}`, true);
+        this.getParentWidget();
+    }
+    // Function to check if the menu widget is present inside other widgets like table, tabs, dialog, nav, list, tile, panel, accordion
+    // if true then call createObserver() which internally calculates dropown height
+    getParentWidget() {
+        const closestWidget = $(this.menuRef.nativeElement).closest('table, ul.list-group');
+        // Check if the closest table is the parent of the menu widget
+        if (closestWidget && $(closestWidget).has(this.menuRef.nativeElement).length > 0) {
+            this.createObserver(this, this.callback);
+        }
+    }
+    // function which changes the position of the menu dropdown dynamically if it exceeds viewport height
+    callback(entries, observer) {
+        if (!this.hasExecutedCallback) {
+            const self = this;
+            const positions = this.menuRef.menuposition?.split(',') || [];
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    positions[0] = 'down';
+                    self.menuRef.menuposition = positions.length > 1 ? positions.join() : 'down,right';
+                    self.nativeElement.parentElement?.classList.add('dropdown');
+                    self.menuRef.setMenuPosition();
+                }
+                else {
+                    positions[0] = 'up';
+                    self.menuRef.menuposition = positions.length > 1 ? positions.join() : 'up,right';
+                    self.nativeElement.parentElement?.classList.add('dropup');
+                    self.menuRef.setMenuPosition();
+                    // when container="body" is added to menu dropdown, the dropdown menu ul is attached directly to body.
+                    // so adding a class name inorder to adjust the styling of the dropdown
+                    const dropdownContainer = self.nativeElement.parentElement?.parentElement;
+                    if (dropdownContainer.tagName.toUpperCase() === "BS-DROPDOWN-CONTAINER") {
+                        // The parent element is <bs-dropdown-container>
+                        self.nativeElement.parentElement?.parentElement?.classList.add('parent-position');
+                    }
+                }
+            });
+            this.hasExecutedCallback = true;
+        }
+    }
+    // function which checks if the dropdown is within the viewport height or exceeds viewport height
+    createObserver(target, callback) {
+        const options = {
+            root: null,
+            threshold: 1,
+            once: true
+        };
+        const observer = new IntersectionObserver(callback.bind(this), options);
+        observer.observe(target.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MenuDropdownComponent, isStandalone: true, selector: "ul[wmMenuDropdown]", inputs: { items: "items" }, ngImport: i0, template: "@for (item of items; track item) {\n  <li wmMenuDropdownItem\n    [item]=\"item\"\n    [ngClass]=\"{disabled: item.disabled, 'dropdown-submenu': item.children.length > 0}\"\n    class=\"{{item.class}}\"\n    role=\"menuitem\">\n  </li>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MenuDropdownItemComponent, selector: "li[wmMenuDropdownItem]", inputs: ["item"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, MenuDropdownItemComponent], selector: 'ul[wmMenuDropdown]', template: "@for (item of items; track item) {\n  <li wmMenuDropdownItem\n    [item]=\"item\"\n    [ngClass]=\"{disabled: item.disabled, 'dropdown-submenu': item.children.length > 0}\"\n    class=\"{{item.class}}\"\n    role=\"menuitem\">\n  </li>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+const registerProps = () => {
+    register('wm-menu', new Map([
+        ['accessroles', { value: 'Everyone', ...PROP_STRING }],
+        ['animateitems', PROP_STRING],
+        ['autoclose', { value: 'always', ...PROP_STRING }],
+        ['autoopen', { value: 'never', ...PROP_STRING }],
+        ['caption', PROP_STRING],
+        ['class', PROP_STRING],
+        ['dataset', { value: 'Menu Item 1, Menu Item 2, Menu Item 3', ...PROP_ANY }],
+        ['hint', { value: '', ...PROP_STRING }],
+        ['arialabel', PROP_STRING],
+        ['isactive', PROP_STRING],
+        ['iconclass', PROP_STRING],
+        ['iconposition', { value: 'left', ...PROP_STRING }],
+        ['itemaction', PROP_STRING],
+        ['itemchildren', PROP_STRING],
+        ['itemclass', PROP_STRING],
+        ['itemicon', PROP_STRING],
+        ['itemlabel', PROP_STRING],
+        ['itemlink', PROP_STRING],
+        ['itemtarget', PROP_STRING],
+        ['linktarget', { value: '_self', ...PROP_STRING }],
+        ['menuclass', PROP_STRING],
+        ['menulayout', PROP_STRING],
+        ['menuposition', PROP_STRING],
+        ['name', PROP_STRING],
+        ['orderby', PROP_STRING],
+        ['shortcutkey', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['showonhover', { value: false, ...PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...PROP_NUMBER }],
+        ['type', { value: 'menu', ...PROP_STRING }],
+        ['userrole', PROP_STRING]
+    ]));
+};
+
+const KEYBOARD_MOVEMENTS = {
+    MOVE_UP: 'UP-ARROW',
+    MOVE_LEFT: 'LEFT-ARROW',
+    MOVE_RIGHT: 'RIGHT-ARROW',
+    MOVE_DOWN: 'DOWN-ARROW',
+    ON_ENTER: 'ENTER',
+    ON_MOUSE_ENTER: 'MOUSE-ENTER',
+    ON_MOUSE_LEAVE: 'MOUSE-LEAVE',
+    ON_TAB: 'TAB',
+    ON_SHIFT_TAB: 'SHIFT-TAB',
+    ON_ESCAPE: 'ESC'
+};
+const MENU_POSITION = {
+    UP_LEFT: 'up,left',
+    UP_RIGHT: 'up,right',
+    DOWN_LEFT: 'down,left',
+    DOWN_RIGHT: 'down,right',
+    INLINE: 'inline'
+};
+const POSITION = {
+    DOWN_RIGHT: 'down,right',
+    DOWN_LEFT: 'down,left',
+    UP_RIGHT: 'up,right',
+    UP_LEFT: 'up,left',
+    INLINE: 'inline'
+};
+const CARET_CLS = {
+    UP: 'fa-caret-up',
+    DOWN: 'fa-caret-down'
+};
+const PULL_CLS = {
+    LEFT: 'pull-left',
+    RIGHT: 'pull-right'
+};
+const AUTO_OPEN = {
+    NEVER: 'never',
+    ACTIVE_PAGE: 'activepage',
+    ALWAYS: 'always'
+};
+const WIDGET_CONFIG = { widgetType: 'wm-menu', hostClass: 'dropdown app-menu' };
+class MenuComponent extends DatasetAwareNavComponent {
+    static { this.initializeProps = registerProps(); }
+    onShow() {
+        this._menuposition = this.menuposition;
+        if (this._selectFirstItem) {
+            setTimeout(() => {
+                this.$element.find('> ul[wmmenudropdown] li.app-menu-item').first().find('> a').focus();
+            });
+        }
+        $appDigest();
+    }
+    onHide() {
+        this.$element.find('li').removeClass('open');
+        this._selectFirstItem = false;
+        // reset the menuposition when dropdown is closed
+        this.menuposition = this._menuposition ? this._menuposition : MENU_POSITION.DOWN_RIGHT;
+        this.setMenuPosition();
+        $appDigest();
+    }
+    onKeyDown($event, eventAction) {
+        const KEY_MOVEMENTS = clone(KEYBOARD_MOVEMENTS);
+        if (this.menuposition === MENU_POSITION.UP_RIGHT) {
+            KEY_MOVEMENTS.MOVE_UP = 'DOWN-ARROW';
+            KEY_MOVEMENTS.MOVE_DOWN = 'UP-ARROW';
+        }
+        else if (this.menuposition === MENU_POSITION.UP_LEFT) {
+            KEY_MOVEMENTS.MOVE_UP = 'DOWN-ARROW';
+            KEY_MOVEMENTS.MOVE_DOWN = 'UP-ARROW';
+            KEY_MOVEMENTS.MOVE_LEFT = 'RIGHT-ARROW';
+            KEY_MOVEMENTS.MOVE_RIGHT = 'LEFT-ARROW';
+        }
+        else if (this.menuposition === MENU_POSITION.DOWN_LEFT) {
+            KEY_MOVEMENTS.MOVE_LEFT = 'RIGHT-ARROW';
+            KEY_MOVEMENTS.MOVE_RIGHT = 'LEFT-ARROW';
+        }
+        if (includes([KEY_MOVEMENTS.MOVE_DOWN, KEY_MOVEMENTS.MOVE_RIGHT], eventAction)) {
+            if (!this.bsDropdown.isOpen) {
+                this._selectFirstItem = true;
+                this.bsDropdown.show();
+            }
+            else {
+                this.$element.find('> ul[wmmenudropdown] li.app-menu-item').first().find('> a').focus();
+            }
+        }
+        else if (eventAction === KEY_MOVEMENTS.ON_ENTER || (eventAction === KEY_MOVEMENTS.ON_MOUSE_ENTER && this.showonhover)) {
+            this.bsDropdown.toggle(true);
+        }
+        else if (includes([KEY_MOVEMENTS.MOVE_UP, KEY_MOVEMENTS.MOVE_LEFT], eventAction) || (eventAction == KEY_MOVEMENTS.ON_MOUSE_LEAVE && this.autoclose == AUTOCLOSE_TYPE.ALWAYS && this.showonhover)) {
+            this.bsDropdown.hide();
+        }
+        $event.preventDefault();
+    }
+    constructor(inj, route, userDefinedExecutionContext, app, bsDropdown, parentNav, selectEventCB, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.route = route;
+        this.userDefinedExecutionContext = userDefinedExecutionContext;
+        this.app = app;
+        this.bsDropdown = bsDropdown;
+        this.parentNav = parentNav;
+        this.selectEventCB = selectEventCB;
+        this.menuCaret = 'fa-caret-down';
+        this._selectFirstItem = false;
+        if (parentNav) {
+            this.disableMenuContext = !!parentNav.disableMenuContext;
+        }
+        else {
+            this.disableMenuContext = !!selectEventCB;
+        }
+        // For selecting the item on load
+        const datasetSubscription = this.nodes$.subscribe(() => {
+            if (!isEmpty(this.nodes)) {
+                if (hasLinkToCurrentPage(this.nodes, this.route.url)) {
+                    addClass(this.nativeElement.querySelector('.dropdown-toggle'), 'active');
+                }
+                // If menu widget is inside nav widget then dont check for item isactive property because these will be handled form nav widget.
+                if (this.parentNav) {
+                    return;
+                }
+                let itemFound = false;
+                const getItem = (nodes) => {
+                    forEach(nodes, (item) => {
+                        if (itemFound) {
+                            return;
+                        }
+                        if (item.isactive) {
+                            itemFound = true;
+                            this.onMenuItemSelect({ $event: {}, $item: item });
+                            // Trigger the action associated with active item
+                            triggerItemAction(this, item);
+                            return false;
+                        }
+                        if (!isEmpty(item.children)) {
+                            getItem(item.children);
+                        }
+                    });
+                };
+                getItem(this.nodes);
+            }
+        });
+        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+    }
+    resetNodes() {
+        super.resetNodes();
+        // open the menu if any of its menu items has link to current page and if autoopen value is 'active page'
+        if ((this.autoopen === AUTO_OPEN.ACTIVE_PAGE && hasLinkToCurrentPage(this.nodes, this.route.url)) || this.autoopen === AUTO_OPEN.ALWAYS) {
+            this.bsDropdown.show();
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.setMenuPosition();
+        const cancelSubscription = this.app.subscribe("highlightActiveLink", (data) => {
+            toggleClass(this.nativeElement.querySelector('.dropdown-toggle'), 'active', hasLinkToCurrentPage(this.nodes, this.route.url));
+        });
+        this.registerDestroyListener(() => cancelSubscription());
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'tabindex') {
+            // Let the base class handle tabindex setting via setAttr
+            super.onPropertyChange(key, nv, ov);
+            return;
+        }
+        if (key === 'autoclose') {
+            this.bsDropdown.autoClose = nv !== AUTOCLOSE_TYPE.DISABLED;
+            this.autoclose = nv;
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    setMenuPosition() {
+        switch (this.menuposition) {
+            case POSITION.DOWN_RIGHT:
+                removeClass(this.nativeElement, 'dropup');
+                this.menualign = PULL_CLS.LEFT;
+                this.menuCaret = CARET_CLS.DOWN;
+                break;
+            case POSITION.DOWN_LEFT:
+                removeClass(this.nativeElement, 'dropup');
+                this.menualign = PULL_CLS.RIGHT;
+                this.menuCaret = CARET_CLS.DOWN;
+                break;
+            case POSITION.UP_LEFT:
+                addClass(this.nativeElement, 'dropup');
+                this.menualign = PULL_CLS.RIGHT;
+                this.menuCaret = CARET_CLS.UP;
+                break;
+            case POSITION.UP_RIGHT:
+                addClass(this.nativeElement, 'dropup');
+                this.menualign = PULL_CLS.LEFT;
+                this.menuCaret = CARET_CLS.UP;
+                break;
+            case POSITION.INLINE:
+                this.menualign = 'dropinline-menu';
+                break;
+        }
+    }
+    onMenuItemSelect(args) {
+        const { $event } = args;
+        const $item = args.$item.value;
+        this.invokeEventCallback('select', { $event, $item });
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // Fix tabindex if it's NaN (ensure it's fixed after view initialization)
+        if (this.widget.tabindex !== undefined && (typeof this.widget.tabindex === 'number' && isNaN(this.widget.tabindex))) {
+            this.widget.tabindex = 0;
+            this.tabindex = 0;
+        }
+        styler(this.nativeElement.querySelector('.dropdown-toggle'), this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.UserDefinedExecutionContext }, { token: i2.App }, { token: i3$1.BsDropdownDirective, optional: true, self: true }, { token: NavComponent, optional: true }, { token: 'select.event', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MenuComponent, isStandalone: true, selector: "[wmMenu]", host: { listeners: { "onShown": "onShow()", "onHidden": "onHide()", "keydown.arrowup": "onKeyDown($event,\"UP-ARROW\")", "mouseenter": "onKeyDown($event,\"MOUSE-ENTER\")", "mouseleave": "onKeyDown($event,\"MOUSE-LEAVE\")", "keydown.arrowdown": "onKeyDown($event,\"DOWN-ARROW\")", "keydown.arrowright": "onKeyDown($event,\"RIGHT-ARROW\")", "keydown.arrowleft": "onKeyDown($event,\"LEFT-ARROW\")", "keydown.enter": "onKeyDown($event,\"ENTER\")" } }, providers: [
+            provideAsWidgetRef(MenuComponent),
+        ], usesInheritance: true, ngImport: i0, template: "\n\n<ng-template #innerTemplate>\n  <i class=\"app-icon {{iconclass}}\"></i>\n  <span class=\"caption\" [textContent]=\"caption\"></span>\n  <span class=\"pull-right caret fa {{menuCaret}}\"></span>\n</ng-template>\n\n@if (type === 'anchor') {\n  <a wmAnchor\n    dropdownToggle\n    [attr.aria-label]=\"arialabel || 'Menu'\"\n    href=\"javascript:void(0);\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    aria-expanded=\"false\"\n    hint.bind=\"hint\"\n    class=\"dropdown-toggle {{menuclass}}\"\n    shortcutkey.bind=\"shortcutkey\"\n    tabindex.bind=\"tabindex\"\n    caption.bind=\"caption\"\n    iconclass.bind=\"iconclass\"\n    iconposition.bind=\"iconposition\"\n    badgevalue.bind=\"badgevalue\"\n    >\n    <span class=\"pull-right caret fa\" [ngClass]=\"[menuCaret]\"></span>\n  </a>\n} @else {\n  <button wmButton\n    dropdownToggle\n    aria-haspopup=\"true\"\n    aria-expanded=\"false\"\n    [attr.aria-label]=\"arialabel || 'Menu'\"\n    class=\"btn app-button dropdown-toggle {{menuclass}}\"\n    hint.bind=\"hint\"\n    shortcutkey.bind=\"shortcutkey\"\n    tabindex.bind=\"tabindex\"\n    caption.bind=\"caption\"\n    iconclass.bind=\"iconclass\"\n    iconposition.bind=\"iconposition\"\n    type=\"button\">\n    <span class=\"pull-right caret fa\" [ngClass]=\"[menuCaret]\"></span>\n  </button>\n}\n\n<ul *dropdownMenu [items]=\"nodes\" [ngClass]=\"menulayout\" class=\"icon-position-{{iconposition}}\" role=\"menubar\"\nwmMenuDropdown></ul>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: MenuDropdownComponent, selector: "ul[wmMenuDropdown]", inputs: ["items"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [BsDropdownModule, CommonModule, TextContentDirective, AnchorComponent, ButtonComponent, MenuDropdownComponent], selector: '[wmMenu]', providers: [
+                        provideAsWidgetRef(MenuComponent),
+                    ], template: "\n\n<ng-template #innerTemplate>\n  <i class=\"app-icon {{iconclass}}\"></i>\n  <span class=\"caption\" [textContent]=\"caption\"></span>\n  <span class=\"pull-right caret fa {{menuCaret}}\"></span>\n</ng-template>\n\n@if (type === 'anchor') {\n  <a wmAnchor\n    dropdownToggle\n    [attr.aria-label]=\"arialabel || 'Menu'\"\n    href=\"javascript:void(0);\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    aria-expanded=\"false\"\n    hint.bind=\"hint\"\n    class=\"dropdown-toggle {{menuclass}}\"\n    shortcutkey.bind=\"shortcutkey\"\n    tabindex.bind=\"tabindex\"\n    caption.bind=\"caption\"\n    iconclass.bind=\"iconclass\"\n    iconposition.bind=\"iconposition\"\n    badgevalue.bind=\"badgevalue\"\n    >\n    <span class=\"pull-right caret fa\" [ngClass]=\"[menuCaret]\"></span>\n  </a>\n} @else {\n  <button wmButton\n    dropdownToggle\n    aria-haspopup=\"true\"\n    aria-expanded=\"false\"\n    [attr.aria-label]=\"arialabel || 'Menu'\"\n    class=\"btn app-button dropdown-toggle {{menuclass}}\"\n    hint.bind=\"hint\"\n    shortcutkey.bind=\"shortcutkey\"\n    tabindex.bind=\"tabindex\"\n    caption.bind=\"caption\"\n    iconclass.bind=\"iconclass\"\n    iconposition.bind=\"iconposition\"\n    type=\"button\">\n    <span class=\"pull-right caret fa\" [ngClass]=\"[menuCaret]\"></span>\n  </button>\n}\n\n<ul *dropdownMenu [items]=\"nodes\" [ngClass]=\"menulayout\" class=\"icon-position-{{iconposition}}\" role=\"menubar\"\nwmMenuDropdown></ul>\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.Router }, { type: i2.UserDefinedExecutionContext }, { type: i2.App }, { type: i3$1.BsDropdownDirective, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: NavComponent, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['select.event']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { onShow: [{
+                type: HostListener,
+                args: ['onShown']
+            }], onHide: [{
+                type: HostListener,
+                args: ['onHidden']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown.arrowup', ['$event', '"UP-ARROW"']]
+            }, {
+                type: HostListener,
+                args: ['mouseenter', ['$event', '"MOUSE-ENTER"']]
+            }, {
+                type: HostListener,
+                args: ['mouseleave', ['$event', '"MOUSE-LEAVE"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowdown', ['$event', '"DOWN-ARROW"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event', '"RIGHT-ARROW"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event', '"LEFT-ARROW"']]
+            }, {
+                type: HostListener,
+                args: ['keydown.enter', ['$event', '"ENTER"']]
+            }] } });
+
+const menuProps = ['itemlabel', 'itemicon', 'itemlink', 'itemaction', 'itemchildren', 'userrole'];
+class MenuAdapterComponent extends BaseContainerComponent {
+    constructor(inj, WIDGET_CONFIG, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.pageScope = this.viewParent;
+        this.binditemlabel = this.nativeElement.getAttribute('itemlabel.bind');
+        this.binditemicon = this.nativeElement.getAttribute('itemicon.bind');
+        this.binditemaction = this.nativeElement.getAttribute('itemaction.bind');
+        this.binditemlink = this.nativeElement.getAttribute('itemlink.bind');
+        this.binduserrole = this.nativeElement.getAttribute('userrole.bind');
+        this.binditemchildren = this.nativeElement.getAttribute('itemchildren.bind');
+    }
+    onPropertyChange(key, nv, ov) {
+        if (includes(menuProps, key) && this.menuRef) {
+            this.menuRef.itemlabel = nv;
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.menuRefQL['first']) {
+            this.setMenuProperty();
+        }
+        this.menuRefQLSubscription = this.menuRefQL.changes.subscribe((menuRefQL) => {
+            if (menuRefQL.first) {
+                this.setMenuProperty();
+                if (this.menuRefQLSubscription) {
+                    this.menuRefQLSubscription.unsubscribe();
+                    this.menuRefQLSubscription = null;
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Unsubscribe from QueryList changes
+        if (this.menuRefQLSubscription) {
+            this.menuRefQLSubscription.unsubscribe();
+            this.menuRefQLSubscription = null;
+        }
+        // MEMORY LEAK FIX: Clear QueryList reference
+        this.menuRefQL = null;
+        this.menuRef = null;
+        super.ngOnDestroy();
+    }
+    setMenuProperty() {
+        if (this.menuRefQL['first']) {
+            if (this.menuRefQL.first) {
+                this.menuRef = this.menuRefQL.first;
+                menuProps.forEach((prop) => {
+                    const bindProp = `bind${prop}`;
+                    if (this[bindProp]) {
+                        this.menuRef[bindProp] = this[bindProp];
+                    }
+                    this.menuRef[prop] = this[prop];
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuAdapterComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: MenuAdapterComponent, isStandalone: true, viewQueries: [{ propertyName: "menuRefQL", predicate: MenuComponent, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MenuAdapterComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }, { type: undefined }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { menuRefQL: [{
+                type: ViewChildren,
+                args: [MenuComponent]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KEYBOARD_MOVEMENTS, MENU_POSITION, MenuAdapterComponent, MenuComponent, MenuDropdownComponent, MenuDropdownItemComponent, NavComponent, NavItemDirective, NavigationControlDirective, disableContextMenu };
+//# sourceMappingURL=index.mjs.map