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

package/components/navigation/menu/bundles/index.umd.js

@@ -0,0 +1,947 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/input/button'), require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/basic/anchor'), require('@angular/router'), require('lodash-es'), require('ngx-bootstrap/dropdown')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/input/button', '@angular/core', '@wm/core', '@wm/components/base', '@wm/components/basic/anchor', '@angular/router', 'lodash-es', 'ngx-bootstrap/dropdown'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.navigation = global.wm.components.navigation || {}, global.wm.components.navigation.menu = {}), global.ng.common, global.wm.components.input.button, global.ng.core, global.wm.core, global.wm.components.base, global.wm.components.basic.anchor, global.ng.router, global._, global.ngxBootstrap.dropdown));
+})(this, (function (exports, i3, button, i0, i2, base, anchor, i1, lodashEs, i3$1) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i3$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i3$1);
+
+    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) {
+                i2.setAttr(this.nativeElement, 'href', val);
+            }
+            else {
+                i2.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: NavigationControlDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NavigationControlDirective, isStandalone: true, selector: "[wmNavigationControl]", inputs: { disableMenuContext: "disableMenuContext", wmNavigationControl: "wmNavigationControl" }, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: NavigationControlDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmNavigationControl]'
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.ElementRef }], propDecorators: { disableMenuContext: [{
+                    type: i0.Input
+                }], wmNavigationControl: [{
+                    type: i0.Input
+                }] } });
+
+    const registerProps$2 = () => {
+        base.register('wm-nav-item', new Map([
+            ['class', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }]
+        ]));
+    };
+
+    const DEFAULT_CLS$2 = 'app-nav-item';
+    const WIDGET_CONFIG$2 = { widgetType: 'wm-nav-item', hostClass: DEFAULT_CLS$2 };
+    class NavItemDirective extends base.StylableComponent {
+        static { this.initializeProps = registerProps$2(); }
+        makeActive() {
+            const parentNode = this.nativeElement.parentNode;
+            $(parentNode).find('> li.active').removeClass('active');
+            if (this.isAttached) {
+                i2.addClass(this.nativeElement, 'active');
+            }
+        }
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG$2, explicitContext);
+            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER);
+        }
+        ngAfterViewInit() {
+            if (this.innerLink) {
+                this.innerLink.onActive(() => this.makeActive());
+            }
+        }
+        ngOnDetach() {
+            i2.removeClass(this.nativeElement, 'active', true);
+            super.ngOnDetach();
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Clear ContentChild reference
+            this.innerLink = null;
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: NavItemDirective, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NavItemDirective, isStandalone: true, selector: "[wmNavItem]", host: { listeners: { "click": "makeActive()", "keydown.enter": "makeActive()" } }, providers: [
+                base.provideAsWidgetRef(NavItemDirective)
+            ], queries: [{ propertyName: "innerLink", first: true, predicate: anchor.AnchorComponent, descendants: true }], exportAs: ["navItemRef"], usesInheritance: true, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: NavItemDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: '[wmNavItem]',
+                        exportAs: 'navItemRef',
+                        providers: [
+                            base.provideAsWidgetRef(NavItemDirective)
+                        ]
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { innerLink: [{
+                    type: i0.ContentChild,
+                    args: [anchor.AnchorComponent]
+                }], makeActive: [{
+                    type: i0.HostListener,
+                    args: ['click']
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.enter']
+                }] } });
+
+    const registerProps$1 = () => {
+        base.register('wm-nav', new Map([
+            ['autoclose', { value: 'always', ...base.PROP_STRING }],
+            ['autoopen', { value: 'never', ...base.PROP_STRING }],
+            ['class', base.PROP_STRING],
+            ['dataset', base.PROP_ANY],
+            ['iconposition', { value: 'left', ...base.PROP_STRING }],
+            ['isactive', base.PROP_STRING],
+            ['itemlabel', base.PROP_STRING],
+            ['itemhint', base.PROP_STRING],
+            ['itemlink', base.PROP_STRING],
+            ['itemicon', base.PROP_STRING],
+            ['itemclass', base.PROP_STRING],
+            ['itemchildren', base.PROP_STRING],
+            ['itemaction', base.PROP_STRING],
+            ['itembadge', base.PROP_STRING],
+            ['itemtarget', base.PROP_STRING],
+            ['layout', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['orderby', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['showonhover', { value: false, ...base.PROP_BOOLEAN }],
+            ['type', base.PROP_STRING],
+            ['userrole', base.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 base.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;
+            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER);
+            this.disableMenuContext = !!selectEventCB;
+            this.pageScope = this.viewParent;
+            // For selecting the item on load
+            const datasetSubscription = this.nodes$.subscribe(() => {
+                if (!lodashEs.isEmpty(this.nodes)) {
+                    let itemFound = false;
+                    const getItem = (nodes, isMenuWidget) => {
+                        lodashEs.forEach(nodes, (item) => {
+                            if (itemFound) {
+                                return;
+                            }
+                            if (item.isactive) {
+                                itemFound = true;
+                                this.selecteditem = isMenuWidget ? lodashEs.omit(item, ['children', 'value']) : item.value;
+                                this.invokeEventCallback('select', { $event: {}, $item: item.value });
+                                // Trigger the action associated with active item
+                                i2.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 (!lodashEs.isEmpty(item.children)) {
+                                getItem(item.children, 'menu');
+                            }
+                        });
+                    };
+                    getItem(this.nodes);
+                }
+            });
+            this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+        }
+        setNavType(type) {
+            i2.addClass(this.nativeElement, NavClassMap[type]);
+        }
+        setNavLayout(layout) {
+            i2.addClass(this.nativeElement, `nav-${layout}`);
+        }
+        onNavSelect($event, item) {
+            $event.preventDefault();
+            const selectedItem = lodashEs.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
+            i2.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 = lodashEs.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: NavComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.Router }, { token: i2__namespace.UserDefinedExecutionContext }, { token: i2__namespace.App }, { token: 'select.event', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NavComponent, isStandalone: true, selector: "[wmNav]", providers: [
+                base.provideAsWidgetRef(NavComponent)
+            ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.forwardRef(() => i3.CommonModule) }, { kind: "directive", type: i0__namespace.forwardRef(() => i3__namespace.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0__namespace.forwardRef(() => i3__namespace.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i0__namespace.forwardRef(() => i3$1.BsDropdownModule) }, { kind: "directive", type: i0__namespace.forwardRef(() => i3$1__namespace.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__namespace.forwardRef(() => anchor.AnchorComponent), selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: i0__namespace.forwardRef(() => MenuComponent), selector: "[wmMenu]" }, { kind: "directive", type: i0__namespace.forwardRef(() => NavItemDirective), selector: "[wmNavItem]", exportAs: ["navItemRef"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: NavComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i3.CommonModule, i3$1.BsDropdownModule, anchor.AnchorComponent, i0.forwardRef(() => MenuComponent), NavItemDirective,], selector: '[wmNav]', providers: [
+                            base.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__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.Router }, { type: i2__namespace.UserDefinedExecutionContext }, { type: i2__namespace.App }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['select.event']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    const menuAlignClass = {
+        'pull-right': 'fa-caret-left',
+        'dropinline-menu': 'fa-caret-down',
+        'pull-left': 'fa-caret-right'
+    };
+    const MENU_LAYOUT_TYPE = {
+        HORIZONTAL: 'horizontal'};
+    class MenuDropdownItemComponent {
+        constructor(app, userDefinedExecutionContext, parentNav, elRef) {
+            this.app = app;
+            this.userDefinedExecutionContext = userDefinedExecutionContext;
+            this.parentNav = parentNav;
+            this.menuRef = i0.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 = lodashEs.clone(item);
+                selectedItem.target = selectedItem.target || this.menuRef.linktarget;
+                // Trigger the action associated with active item
+                i2.triggerItemAction(this, selectedItem);
+            };
+            this.nativeElement = elRef.nativeElement;
+            i2.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 (base.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.
+                    i2.addClass(this.nativeElement, 'active');
+                }
+                this.highlightActiveLinkSubscription = this.app.subscribe("highlightActiveLink", (data) => {
+                    i2.toggleClass(this.nativeElement, 'active', base.hasLinkToCurrentPage([this.item], this.menuRef.route.url));
+                });
+            }
+        }
+        getInitialKeyMovements() {
+            const KEY_MOVEMENTS = lodashEs.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 (lodashEs.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuDropdownItemComponent, deps: [{ token: i2__namespace.App }, { token: i2__namespace.UserDefinedExecutionContext }, { token: NavComponent, optional: true }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.forwardRef(() => base.TextContentDirective), selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: i0__namespace.forwardRef(() => MenuDropdownComponent), selector: "ul[wmMenuDropdown]", inputs: ["items"] }, { kind: "directive", type: i0__namespace.forwardRef(() => NavigationControlDirective), selector: "[wmNavigationControl]", inputs: ["disableMenuContext", "wmNavigationControl"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuDropdownItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [base.TextContentDirective, i0.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__namespace.App }, { type: i2__namespace.UserDefinedExecutionContext }, { type: NavComponent, decorators: [{
+                        type: i0.Optional
+                    }] }, { type: i0__namespace.ElementRef }], propDecorators: { item: [{
+                    type: i0.Input
+                }], onKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.tab', ['$event', '"TAB"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.shift.tab', ['$event', '"SHIFT-TAB"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.escape', ['$event', '"ESC"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.enter', ['$event', '"ENTER"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowup', ['$event', '"UP-ARROW"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowdown', ['$event', '"DOWN-ARROW"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowright', ['$event', '"RIGHT-ARROW"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowleft', ['$event', '"LEFT-ARROW"']]
+                }], onSelect: [{
+                    type: i0.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 = i0.inject(MenuComponent);
+            this.nativeElement = elRef.nativeElement;
+            this.hasExecutedCallback = false;
+            i2.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)}`;
+            }
+            i2.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuDropdownComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MenuDropdownComponent, isStandalone: true, selector: "ul[wmMenuDropdown]", inputs: { items: "items" }, ngImport: i0__namespace, 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: i3.CommonModule }, { kind: "directive", type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MenuDropdownItemComponent, selector: "li[wmMenuDropdownItem]", inputs: ["item"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i3.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__namespace.ElementRef }], propDecorators: { items: [{
+                    type: i0.Input
+                }] } });
+
+    const registerProps = () => {
+        base.register('wm-menu', new Map([
+            ['accessroles', { value: 'Everyone', ...base.PROP_STRING }],
+            ['animateitems', base.PROP_STRING],
+            ['autoclose', { value: 'always', ...base.PROP_STRING }],
+            ['autoopen', { value: 'never', ...base.PROP_STRING }],
+            ['caption', base.PROP_STRING],
+            ['class', base.PROP_STRING],
+            ['dataset', { value: 'Menu Item 1, Menu Item 2, Menu Item 3', ...base.PROP_ANY }],
+            ['hint', { value: '', ...base.PROP_STRING }],
+            ['arialabel', base.PROP_STRING],
+            ['isactive', base.PROP_STRING],
+            ['iconclass', base.PROP_STRING],
+            ['iconposition', { value: 'left', ...base.PROP_STRING }],
+            ['itemaction', base.PROP_STRING],
+            ['itemchildren', base.PROP_STRING],
+            ['itemclass', base.PROP_STRING],
+            ['itemicon', base.PROP_STRING],
+            ['itemlabel', base.PROP_STRING],
+            ['itemlink', base.PROP_STRING],
+            ['itemtarget', base.PROP_STRING],
+            ['linktarget', { value: '_self', ...base.PROP_STRING }],
+            ['menuclass', base.PROP_STRING],
+            ['menulayout', base.PROP_STRING],
+            ['menuposition', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['orderby', base.PROP_STRING],
+            ['shortcutkey', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['showonhover', { value: false, ...base.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+            ['type', { value: 'menu', ...base.PROP_STRING }],
+            ['userrole', base.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 = {
+        ACTIVE_PAGE: 'activepage',
+        ALWAYS: 'always'
+    };
+    const WIDGET_CONFIG = { widgetType: 'wm-menu', hostClass: 'dropdown app-menu' };
+    class MenuComponent extends base.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();
+                });
+            }
+            i2.$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();
+            i2.$appDigest();
+        }
+        onKeyDown($event, eventAction) {
+            const KEY_MOVEMENTS = lodashEs.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 (lodashEs.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 (lodashEs.includes([KEY_MOVEMENTS.MOVE_UP, KEY_MOVEMENTS.MOVE_LEFT], eventAction) || (eventAction == KEY_MOVEMENTS.ON_MOUSE_LEAVE && this.autoclose == base.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 (!lodashEs.isEmpty(this.nodes)) {
+                    if (base.hasLinkToCurrentPage(this.nodes, this.route.url)) {
+                        i2.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) => {
+                        lodashEs.forEach(nodes, (item) => {
+                            if (itemFound) {
+                                return;
+                            }
+                            if (item.isactive) {
+                                itemFound = true;
+                                this.onMenuItemSelect({ $event: {}, $item: item });
+                                // Trigger the action associated with active item
+                                i2.triggerItemAction(this, item);
+                                return false;
+                            }
+                            if (!lodashEs.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 && base.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) => {
+                i2.toggleClass(this.nativeElement.querySelector('.dropdown-toggle'), 'active', base.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 !== base.AUTOCLOSE_TYPE.DISABLED;
+                this.autoclose = nv;
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        setMenuPosition() {
+            switch (this.menuposition) {
+                case POSITION.DOWN_RIGHT:
+                    i2.removeClass(this.nativeElement, 'dropup');
+                    this.menualign = PULL_CLS.LEFT;
+                    this.menuCaret = CARET_CLS.DOWN;
+                    break;
+                case POSITION.DOWN_LEFT:
+                    i2.removeClass(this.nativeElement, 'dropup');
+                    this.menualign = PULL_CLS.RIGHT;
+                    this.menuCaret = CARET_CLS.DOWN;
+                    break;
+                case POSITION.UP_LEFT:
+                    i2.addClass(this.nativeElement, 'dropup');
+                    this.menualign = PULL_CLS.RIGHT;
+                    this.menuCaret = CARET_CLS.UP;
+                    break;
+                case POSITION.UP_RIGHT:
+                    i2.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;
+            }
+            base.styler(this.nativeElement.querySelector('.dropdown-toggle'), this);
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.Router }, { token: i2__namespace.UserDefinedExecutionContext }, { token: i2__namespace.App }, { token: i3$1__namespace.BsDropdownDirective, optional: true, self: true }, { token: NavComponent, optional: true }, { token: 'select.event', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵ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: [
+                base.provideAsWidgetRef(MenuComponent),
+            ], usesInheritance: true, ngImport: i0__namespace, 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: i3$1.BsDropdownModule }, { kind: "directive", type: i3$1__namespace.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3$1__namespace.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "ngmodule", type: i3.CommonModule }, { kind: "directive", type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: anchor.AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: button.ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: MenuDropdownComponent, selector: "ul[wmMenuDropdown]", inputs: ["items"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i3$1.BsDropdownModule, i3.CommonModule, base.TextContentDirective, anchor.AnchorComponent, button.ButtonComponent, MenuDropdownComponent], selector: '[wmMenu]', providers: [
+                            base.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__namespace.Injector }, { type: i1__namespace.Router }, { type: i2__namespace.UserDefinedExecutionContext }, { type: i2__namespace.App }, { type: i3$1__namespace.BsDropdownDirective, decorators: [{
+                        type: i0.Self
+                    }, {
+                        type: i0.Optional
+                    }] }, { type: NavComponent, decorators: [{
+                        type: i0.Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['select.event']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { onShow: [{
+                    type: i0.HostListener,
+                    args: ['onShown']
+                }], onHide: [{
+                    type: i0.HostListener,
+                    args: ['onHidden']
+                }], onKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowup', ['$event', '"UP-ARROW"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['mouseenter', ['$event', '"MOUSE-ENTER"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['mouseleave', ['$event', '"MOUSE-LEAVE"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowdown', ['$event', '"DOWN-ARROW"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowright', ['$event', '"RIGHT-ARROW"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.arrowleft', ['$event', '"LEFT-ARROW"']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.enter', ['$event', '"ENTER"']]
+                }] } });
+
+    const menuProps = ['itemlabel', 'itemicon', 'itemlink', 'itemaction', 'itemchildren', 'userrole'];
+    class MenuAdapterComponent extends base.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 (lodashEs.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuAdapterComponent, deps: "invalid", target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: MenuAdapterComponent, isStandalone: true, viewQueries: [{ propertyName: "menuRefQL", predicate: MenuComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: MenuAdapterComponent, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: () => [{ type: undefined }, { type: undefined }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { menuRefQL: [{
+                    type: i0.ViewChildren,
+                    args: [MenuComponent]
+                }] } });
+
+    exports.KEYBOARD_MOVEMENTS = KEYBOARD_MOVEMENTS;
+    exports.MENU_POSITION = MENU_POSITION;
+    exports.MenuAdapterComponent = MenuAdapterComponent;
+    exports.MenuComponent = MenuComponent;
+    exports.MenuDropdownComponent = MenuDropdownComponent;
+    exports.MenuDropdownItemComponent = MenuDropdownItemComponent;
+    exports.NavComponent = NavComponent;
+    exports.NavItemDirective = NavItemDirective;
+    exports.NavigationControlDirective = NavigationControlDirective;
+    exports.disableContextMenu = disableContextMenu;
+
+}));