@wavemaker/app-ng-runtime 12.0.0-next.45002 → 12.0.0-next.45005

app-ng-runtime/components/navigation/menu/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-bootstrap/dropdown'), require('@wm/components/base'), require('@wm/components/basic'), require('@wm/components/input'), require('@angular/router'), require('@wm/core')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', 'ngx-bootstrap/dropdown', '@wm/components/base', '@wm/components/basic', '@wm/components/input', '@angular/router', '@wm/core'], 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.core, global.ng.common, global.dropdown, global.wm.components.base, global.wm.components.basic, global.wm.components.input, global.ng.router, global.wm.core));
-})(this, (function (exports, i0, i3, i2$1, i5, i1$1, i4, i1, i2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-bootstrap/dropdown'), require('@wm/components/base'), require('@wm/components/basic'), require('@wm/components/input'), require('@angular/router'), require('@wm/core'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', 'ngx-bootstrap/dropdown', '@wm/components/base', '@wm/components/basic', '@wm/components/input', '@angular/router', '@wm/core', 'lodash-es'], 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.core, global.ng.common, global.dropdown, global.wm.components.base, global.wm.components.basic, global.wm.components.input, global.ng.router, global.wm.core, global._));
+})(this, (function (exports, i0, i3, i2$1, i5, i1$1, i4, i1, i2, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -57,61 +57,61 @@
     };
 
     const _c0$3 = ["wmNav", ""];
+    const _c1$3 = [[["", "wmNavItem", ""]]];
+    const _c2 = ["[wmNavItem]"];
+    const _c3 = a0 => ({ active: a0 });
+    const _c4 = (a0, a1, a2) => ({ item: a0, index: a1, liRef: a2 });
+    const _c5 = (a0, a1) => ({ item: a0, index: a1 });
     function NavComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "div", 4);
+        i0__namespace.ɵɵelement(0, "div", 5);
     } }
     function NavComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelement(0, "a", 5);
+        i0__namespace.ɵɵelement(0, "a", 6);
     } if (rf & 2) {
-        const item_r8 = ctx.item;
-        const ctx_r3 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("disableMenuContext", ctx_r3.disableMenuContext || !!item_r8.action)("wmNavigationControl", item_r8.link);
-        i0__namespace.ɵɵattribute("aria-current", item_r8._selected || !ctx_r3.isactive && item_r8.link === "#/" + ctx_r3.activePageName ? "page" : "");
+        const item_r1 = ctx.item;
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("disableMenuContext", ctx_r1.disableMenuContext || !!item_r1.action)("wmNavigationControl", item_r1.link);
+        i0__namespace.ɵɵattribute("aria-current", item_r1._selected || !ctx_r1.isactive && item_r1.link === "#/" + ctx_r1.activePageName ? "page" : "");
     } }
-    const _c1$3 = function (a0, a1, a2) { return { item: a0, index: a1, liRef: a2 }; };
     function NavComponent_li_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementContainer(0, 9);
     } if (rf & 2) {
-        const ctx_r16 = i0__namespace.ɵɵnextContext();
-        const item_r11 = ctx_r16.$implicit;
-        const index_r12 = ctx_r16.index;
-        const _r13 = i0__namespace.ɵɵreference(1);
-        i0__namespace.ɵɵnextContext();
-        const _r2 = i0__namespace.ɵɵreference(3);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", _r2)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction3(2, _c1$3, item_r11, index_r12, _r13));
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        const item_r4 = ctx_r2.$implicit;
+        const index_r5 = ctx_r2.index;
+        const liRef_r6 = i0__namespace.ɵɵreference(1);
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const anchorRef_r7 = i0__namespace.ɵɵreference(3);
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", anchorRef_r7)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction3(3, _c4, item_r4, index_r5, liRef_r6))("ngTemplateOutletInjector", ctx_r1.createCustomInjector("anchor_" + liRef_r6.trackId, i0__namespace.ɵɵpureFunction3(7, _c4, item_r4, index_r5, liRef_r6)));
     } }
-    const _c2 = function (a0, a1) { return { item: a0, index: a1 }; };
     function NavComponent_li_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementContainer(0, 9);
     } if (rf & 2) {
-        const ctx_r17 = i0__namespace.ɵɵnextContext();
-        const item_r11 = ctx_r17.$implicit;
-        const index_r12 = ctx_r17.index;
-        i0__namespace.ɵɵnextContext();
-        const _r0 = i0__namespace.ɵɵreference(1);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", _r0)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction2(2, _c2, item_r11, index_r12));
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        const item_r4 = ctx_r2.$implicit;
+        const index_r5 = ctx_r2.index;
+        const liRef_r6 = i0__namespace.ɵɵreference(1);
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const menuRef_r8 = i0__namespace.ɵɵreference(1);
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", menuRef_r8)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction2(3, _c5, item_r4, index_r5))("ngTemplateOutletInjector", ctx_r1.createCustomInjector("menu_" + liRef_r6.trackId, i0__namespace.ɵɵpureFunction2(6, _c5, item_r4, index_r5)));
     } }
-    const _c3 = function (a0) { return { active: a0 }; };
     function NavComponent_li_4_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "li", 6, 7);
-        i0__namespace.ɵɵtemplate(2, NavComponent_li_4_ng_container_2_Template, 1, 6, "ng-container", 8);
-        i0__namespace.ɵɵtemplate(3, NavComponent_li_4_ng_container_3_Template, 1, 5, "ng-container", 8);
+        i0__namespace.ɵɵelementStart(0, "li", 7, 2);
+        i0__namespace.ɵɵtemplate(2, NavComponent_li_4_ng_container_2_Template, 1, 11, "ng-container", 8)(3, NavComponent_li_4_ng_container_3_Template, 1, 9, "ng-container", 8);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const item_r11 = ctx.$implicit;
-        const ctx_r4 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵclassMapInterpolate1("app-nav-item ", item_r11.class, "");
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3, item_r11._selected || !ctx_r4.isactive && item_r11.link === "#/" + ctx_r4.activePageName));
+        const item_r4 = ctx.$implicit;
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵclassMapInterpolate1("app-nav-item ", item_r4.class, "");
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3, item_r4._selected || !ctx_r1.isactive && item_r4.link === "#/" + ctx_r1.activePageName));
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngIf", !item_r11.children.length);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngIf", item_r11.children.length);
+        i0__namespace.ɵɵproperty("ngIf", !item_r4.children.length);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", item_r4.children.length);
     } }
     function NavComponent_ng_content_5_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵprojection(0, 0, ["*ngIf", "!nodes.length"]);
     } }
-    const _c4 = [[["", "wmNavItem", ""]]];
-    const _c5 = ["[wmNavItem]"];
     const DEFAULT_CLS$2 = 'nav app-nav';
     const WIDGET_CONFIG$2 = { widgetType: 'wm-nav', hostClass: DEFAULT_CLS$2 };
     const NavClassMap = {
@@ -124,8 +124,8 @@
         get activePageName() {
             return this.app.activePageName;
         }
-        constructor(inj, cdRef, route, userDefinedExecutionContext, app, selectEventCB) {
-            super(inj, WIDGET_CONFIG$2);
+        constructor(inj, cdRef, route, userDefinedExecutionContext, app, selectEventCB, explicitContext) {
+            super(inj, WIDGET_CONFIG$2, explicitContext);
             this.cdRef = cdRef;
             this.route = route;
             this.userDefinedExecutionContext = userDefinedExecutionContext;
@@ -135,16 +135,16 @@
             this.pageScope = this.viewParent;
             // For selecting the item on load
             const datasetSubscription = this.nodes$.subscribe(() => {
-                if (!_.isEmpty(this.nodes)) {
+                if (!lodashEs.isEmpty(this.nodes)) {
                     let itemFound = false;
                     const getItem = (nodes, isMenuWidget) => {
-                        _.forEach(nodes, (item) => {
+                        lodashEs.forEach(nodes, (item) => {
                             if (itemFound) {
                                 return;
                             }
                             if (item.isactive || item.link == '#/' + this.activePageName) {
                                 itemFound = true;
-                                this.selecteditem = isMenuWidget ? _.omit(item, ['children', 'value']) : item.value;
+                                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);
@@ -154,7 +154,7 @@
                                 }
                                 return false;
                             }
-                            if (!_.isEmpty(item.children)) {
+                            if (!lodashEs.isEmpty(item.children)) {
                                 getItem(item.children, 'menu');
                             }
                         });
@@ -170,17 +170,13 @@
         setNavLayout(layout) {
             i2.addClass(this.nativeElement, `nav-${layout}`);
         }
-        onNavSelect($event, item, liRef) {
+        onNavSelect($event, item) {
             $event.preventDefault();
-            const selectedItem = _.find(this.nodes, '_selected');
+            const selectedItem = lodashEs.find(this.nodes, '_selected');
             if (selectedItem) {
+                // @ts-ignore
                 delete selectedItem._selected;
             }
-            if (this.activeNavLINode) {
-                i2.removeClass(this.activeNavLINode, 'active');
-            }
-            this.activeNavLINode = liRef;
-            i2.addClass(liRef, 'active');
             this.selecteditem = item.value;
             this.invokeEventCallback('select', { $event, $item: item.value });
             // Trigger the action associated with active item
@@ -198,34 +194,37 @@
          * @param $item
          */
         onMenuItemSelect($event, widget, $item) {
-            this.selecteditem = _.omit($item, ['children', 'value']);
+            this.selecteditem = lodashEs.omit($item, ['children', 'value']);
             this.invokeEventCallback('select', { $event, $item: this.selecteditem });
         }
-        static { this.ɵfac = function NavComponent_Factory(t) { return new (t || NavComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1__namespace.Router), i0__namespace.ɵɵdirectiveInject(i2__namespace.UserDefinedExecutionContext), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵinjectAttribute('select.event')); }; }
+        static { this.ɵfac = function NavComponent_Factory(t) { return new (t || NavComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1__namespace.Router), i0__namespace.ɵɵdirectiveInject(i2__namespace.UserDefinedExecutionContext), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵinjectAttribute('select.event'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: NavComponent, selectors: [["", "wmNav", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i5.provideAsWidgetRef(NavComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$3, ngContentSelectors: _c5, decls: 6, vars: 2, consts: [["menuRef", ""], ["anchorRef", ""], [3, "class", "ngClass", 4, "ngFor", "ngForOf"], [4, "ngIf"], ["wmMenu", "", "dropdown", "", "type", "anchor", "autoclose.bind", "autoclose", "iconclass.bind", "item.icon", "autoopen.bind", "autoopen", "caption.bind", "item.label", "dataset.bind", "item.children", "badgevalue.bind", "item.badge", "iconposition.bind", "iconposition", "showonhover.bind", "showonhover", "select.event", "onMenuItemSelect($event, widget, $item)"], ["wmAnchor", "", "caption.bind", "item.label", "iconclass.bind", "item.icon", "badgevalue.bind", "item.badge", "iconposition.bind", "iconposition", "click.event", "onNavSelect($event, item, liRef)", 3, "disableMenuContext", "wmNavigationControl"], [3, "ngClass"], ["liRef", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function NavComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵprojectionDef(_c4);
-                i0__namespace.ɵɵtemplate(0, NavComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
-                i0__namespace.ɵɵtemplate(2, NavComponent_ng_template_2_Template, 1, 3, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor);
-                i0__namespace.ɵɵtemplate(4, NavComponent_li_4_Template, 4, 8, "li", 2);
-                i0__namespace.ɵɵtemplate(5, NavComponent_ng_content_5_Template, 1, 0, "ng-content", 3);
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$3, ngContentSelectors: _c2, decls: 6, vars: 2, consts: [["menuRef", ""], ["anchorRef", ""], ["liRef", "navItemRef"], ["wmNavItem", "", 3, "ngClass", "class", 4, "ngFor", "ngForOf"], [4, "ngIf"], ["wmMenu", "", "dropdown", "", "type", "anchor", "autoclose.bind", "autoclose", "iconclass.bind", "item.icon", "autoopen.bind", "autoopen", "caption.bind", "item.label", "dataset.bind", "item.children", "badgevalue.bind", "item.badge", "iconposition.bind", "iconposition", "showonhover.bind", "showonhover", "select.event", "onMenuItemSelect($event, widget, $item)"], ["wmAnchor", "", "caption.bind", "item.label", "iconclass.bind", "item.icon", "badgevalue.bind", "item.badge", "iconposition.bind", "iconposition", "click.event", "onNavSelect($event, item)", 3, "disableMenuContext", "wmNavigationControl"], ["wmNavItem", "", 3, "ngClass"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector"]], template: function NavComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵprojectionDef(_c1$3);
+                i0__namespace.ɵɵtemplate(0, NavComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor)(2, NavComponent_ng_template_2_Template, 1, 3, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor)(4, NavComponent_li_4_Template, 4, 8, "li", 3)(5, NavComponent_ng_content_5_Template, 1, 0, "ng-content", 4);
             } if (rf & 2) {
                 i0__namespace.ɵɵadvance(4);
                 i0__namespace.ɵɵproperty("ngForOf", ctx.nodes);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", !ctx.nodes.length);
             } }, encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NavComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NavComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmNav]', providers: [
                         i5.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         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       iconclass.bind=\"item.icon\"\n       badgevalue.bind=\"item.badge\"\n       iconposition.bind=\"iconposition\"\n       click.event=\"onNavSelect($event, item, liRef)\"></a>\n</ng-template>\n\n<li class=\"app-nav-item {{item.class}}\" *ngFor=\"let item of nodes; let index = index;\" #liRef [ngClass]=\"{active: item._selected || (!isactive && item.link === '#/' + activePageName)}\">\n    <ng-container [ngTemplateOutlet]=\"anchorRef\" [ngTemplateOutletContext]=\"{item: item, index:index, liRef: liRef}\" *ngIf=\"!item.children.length\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"menuRef\" [ngTemplateOutletContext]=\"{item: item, index:index}\"  *ngIf=\"item.children.length\"></ng-container>\n</li>\n\n<ng-content *ngIf=\"!nodes.length\" select=\"[wmNavItem]\"></ng-content>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.Router }, { type: i2__namespace.UserDefinedExecutionContext }, { type: i2__namespace.App }, { type: undefined, decorators: [{
+                    ], 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         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       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<li #liRef=\"navItemRef\" *ngFor=\"let item of nodes; let index = index;\"\n    [ngClass]=\"{active: item._selected || (!isactive && item.link === '#/' + activePageName)}\"\n    class=\"app-nav-item {{item.class}}\"\n    wmNavItem>\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                  *ngIf=\"!item.children.length\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"menuRef\"\n                  [ngTemplateOutletContext]=\"{item: item, index:index}\"\n                  [ngTemplateOutletInjector]=\"createCustomInjector('menu_' + liRef.trackId, {item: item, index:index})\"\n                  *ngIf=\"item.children.length\"></ng-container>\n</li>\n\n<ng-content *ngIf=\"!nodes.length\" select=\"[wmNavItem]\"></ng-content>\n" }]
+        }], () => [{ 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']
-                }] }]; }, null); })();
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(NavComponent, { className: "NavComponent", filePath: "nav/nav.component.ts", lineNumber: 26 }); })();
 
     const registerProps$1 = () => {
         i5.register('wm-menu', new Map([
@@ -263,27 +262,27 @@
     };
 
     const _c0$2 = ["wmMenu", ""];
-    const _c1$2 = function (a0) { return [a0]; };
+    const _c1$2 = a0 => [a0];
     function MenuComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "button", 4);
         i0__namespace.ɵɵelement(1, "span", 5);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵclassMapInterpolate1("btn app-button dropdown-toggle ", ctx_r1.menuclass, "");
-        i0__namespace.ɵɵattribute("aria-label", ctx_r1.hint || "Menu");
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(5, _c1$2, ctx_r1.menuCaret));
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵclassMapInterpolate1("btn app-button dropdown-toggle ", ctx_r0.menuclass, "");
+        i0__namespace.ɵɵattribute("aria-label", ctx_r0.hint || "Menu");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(5, _c1$2, ctx_r0.menuCaret));
     } }
     function MenuComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i")(1, "span", 6)(2, "span");
     } if (rf & 2) {
-        const ctx_r3 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r3.iconclass, "");
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("textContent", ctx_r3.caption);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵclassMapInterpolate1("pull-right caret fa ", ctx_r3.menuCaret, "");
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("textContent", ctx_r0.caption);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵclassMapInterpolate1("pull-right caret fa ", ctx_r0.menuCaret, "");
     } }
     function MenuComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementContainerStart(0);
@@ -292,18 +291,18 @@
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelementContainerEnd();
     } if (rf & 2) {
-        const ctx_r4 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵclassMapInterpolate1("dropdown-toggle ", ctx_r4.menuclass, "");
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c1$2, ctx_r4.menuCaret));
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵclassMapInterpolate1("dropdown-toggle ", ctx_r0.menuclass, "");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c1$2, ctx_r0.menuCaret));
     } }
     function MenuComponent_ul_5_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "ul", 8);
     } if (rf & 2) {
-        const ctx_r5 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵclassMapInterpolate1("icon-position-", ctx_r5.iconposition, "");
-        i0__namespace.ɵɵproperty("items", ctx_r5.nodes)("ngClass", ctx_r5.menulayout);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵclassMapInterpolate1("icon-position-", ctx_r0.iconposition, "");
+        i0__namespace.ɵɵproperty("items", ctx_r0.nodes)("ngClass", ctx_r0.menulayout);
     } }
     const KEYBOARD_MOVEMENTS = {
         MOVE_UP: 'UP-ARROW',
@@ -365,7 +364,7 @@
             i2.$appDigest();
         }
         onKeyDown($event, eventAction) {
-            const KEY_MOVEMENTS = _.clone(KEYBOARD_MOVEMENTS);
+            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';
@@ -380,7 +379,7 @@
                 KEY_MOVEMENTS.MOVE_LEFT = 'RIGHT-ARROW';
                 KEY_MOVEMENTS.MOVE_RIGHT = 'LEFT-ARROW';
             }
-            if (_.includes([KEY_MOVEMENTS.MOVE_DOWN, KEY_MOVEMENTS.MOVE_RIGHT], eventAction)) {
+            if (lodashEs.includes([KEY_MOVEMENTS.MOVE_DOWN, KEY_MOVEMENTS.MOVE_RIGHT], eventAction)) {
                 if (!this.bsDropdown.isOpen) {
                     this._selectFirstItem = true;
                     this.bsDropdown.show();
@@ -392,13 +391,13 @@
             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 == i5.AUTOCLOSE_TYPE.ALWAYS && this.showonhover)) {
+            else if (lodashEs.includes([KEY_MOVEMENTS.MOVE_UP, KEY_MOVEMENTS.MOVE_LEFT], eventAction) || (eventAction == KEY_MOVEMENTS.ON_MOUSE_LEAVE && this.autoclose == i5.AUTOCLOSE_TYPE.ALWAYS)) {
                 this.bsDropdown.hide();
             }
             $event.preventDefault();
         }
-        constructor(inj, route, userDefinedExecutionContext, app, bsDropdown, parentNav, selectEventCB) {
-            super(inj, WIDGET_CONFIG$1);
+        constructor(inj, route, userDefinedExecutionContext, app, bsDropdown, parentNav, selectEventCB, explicitContext) {
+            super(inj, WIDGET_CONFIG$1, explicitContext);
             this.route = route;
             this.userDefinedExecutionContext = userDefinedExecutionContext;
             this.app = app;
@@ -415,7 +414,7 @@
             }
             // For selecting the item on load
             const datasetSubscription = this.nodes$.subscribe(() => {
-                if (!_.isEmpty(this.nodes)) {
+                if (!lodashEs.isEmpty(this.nodes)) {
                     if (i5.hasLinkToCurrentPage(this.nodes, this.route.url)) {
                         i2.addClass(this.nativeElement.querySelector('.dropdown-toggle'), 'active');
                     }
@@ -425,7 +424,7 @@
                     }
                     let itemFound = false;
                     const getItem = (nodes) => {
-                        _.forEach(nodes, (item) => {
+                        lodashEs.forEach(nodes, (item) => {
                             if (itemFound) {
                                 return;
                             }
@@ -436,7 +435,7 @@
                                 i2.triggerItemAction(this, item);
                                 return false;
                             }
-                            if (!_.isEmpty(item.children)) {
+                            if (!lodashEs.isEmpty(item.children)) {
                                 getItem(item.children);
                             }
                         });
@@ -509,28 +508,25 @@
             super.ngAfterViewInit();
             i5.styler(this.nativeElement.querySelector('.dropdown-toggle'), this);
         }
-        static { this.ɵfac = function MenuComponent_Factory(t) { return new (t || MenuComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.Router), i0__namespace.ɵɵdirectiveInject(i2__namespace.UserDefinedExecutionContext), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject(i2$1__namespace.BsDropdownDirective, 10), i0__namespace.ɵɵdirectiveInject(NavComponent, 8), i0__namespace.ɵɵinjectAttribute('select.event')); }; }
+        static { this.ɵfac = function MenuComponent_Factory(t) { return new (t || MenuComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.Router), i0__namespace.ɵɵdirectiveInject(i2__namespace.UserDefinedExecutionContext), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject(i2$1__namespace.BsDropdownDirective, 10), i0__namespace.ɵɵdirectiveInject(NavComponent, 8), i0__namespace.ɵɵinjectAttribute('select.event'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: MenuComponent, selectors: [["", "wmMenu", ""]], hostBindings: function MenuComponent_HostBindings(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵlistener("onShown", function MenuComponent_onShown_HostBindingHandler() { return ctx.onShow(); })("onHidden", function MenuComponent_onHidden_HostBindingHandler() { return ctx.onHide(); })("keydown.arrowup", function MenuComponent_keydown_arrowup_HostBindingHandler($event) { return ctx.onKeyDown($event, "UP-ARROW"); })("mouseenter", function MenuComponent_mouseenter_HostBindingHandler($event) { return ctx.onKeyDown($event, "MOUSE-ENTER"); })("mouseleave", function MenuComponent_mouseleave_HostBindingHandler($event) { return ctx.onKeyDown($event, "MOUSE-LEAVE"); })("keydown.arrowdown", function MenuComponent_keydown_arrowdown_HostBindingHandler($event) { return ctx.onKeyDown($event, "DOWN-ARROW"); })("keydown.arrowright", function MenuComponent_keydown_arrowright_HostBindingHandler($event) { return ctx.onKeyDown($event, "RIGHT-ARROW"); })("keydown.arrowleft", function MenuComponent_keydown_arrowleft_HostBindingHandler($event) { return ctx.onKeyDown($event, "LEFT-ARROW"); })("keydown.enter", function MenuComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
             } }, features: [i0__namespace.ɵɵProvidersFeature([
                     i5.provideAsWidgetRef(MenuComponent)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$2, decls: 6, vars: 2, consts: [["menuTemplate", ""], ["innerTemplate", ""], [4, "ngIf", "ngIfElse"], ["wmMenuDropdown", "", "aria-labelledby", "dropdownmenu", "role", "menubar", 3, "items", "ngClass", "class", 4, "dropdownMenu"], ["wmButton", "", "dropdownToggle", "", "aria-haspopup", "true", "aria-expanded", "false", "hint.bind", "hint", "shortcutkey.bind", "shortcutkey", "tabindex.bind", "tabindex", "caption.bind", "caption", "iconclass.bind", "iconclass", "iconposition.bind", "iconposition"], [1, "pull-right", "caret", "fa", 3, "ngClass"], [1, "caption", 3, "textContent"], ["wmAnchor", "", "dropdownToggle", "", "href", "javascript:void(0);", "role", "button", "aria-haspopup", "true", "aria-expanded", "false", "hint.bind", "hint", "shortcutkey.bind", "shortcutkey", "tabindex.bind", "tabindex", "caption.bind", "caption", "iconclass.bind", "iconclass", "iconposition.bind", "iconposition", "badgevalue.bind", "badgevalue"], ["wmMenuDropdown", "", "aria-labelledby", "dropdownmenu", "role", "menubar", 3, "items", "ngClass"]], template: function MenuComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵtemplate(0, MenuComponent_ng_template_0_Template, 2, 7, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
-                i0__namespace.ɵɵtemplate(2, MenuComponent_ng_template_2_Template, 3, 7, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor);
-                i0__namespace.ɵɵtemplate(4, MenuComponent_ng_container_4_Template, 3, 6, "ng-container", 2);
-                i0__namespace.ɵɵtemplate(5, MenuComponent_ul_5_Template, 1, 5, "ul", 3);
+                i0__namespace.ɵɵtemplate(0, MenuComponent_ng_template_0_Template, 2, 7, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor)(2, MenuComponent_ng_template_2_Template, 3, 7, "ng-template", null, 1, i0__namespace.ɵɵtemplateRefExtractor)(4, MenuComponent_ng_container_4_Template, 3, 6, "ng-container", 2)(5, MenuComponent_ul_5_Template, 1, 5, "ul", 3);
             } if (rf & 2) {
-                const _r0 = i0__namespace.ɵɵreference(1);
+                const menuTemplate_r2 = i0__namespace.ɵɵreference(1);
                 i0__namespace.ɵɵadvance(4);
-                i0__namespace.ɵɵproperty("ngIf", ctx.type === "anchor")("ngIfElse", _r0);
+                i0__namespace.ɵɵproperty("ngIf", ctx.type === "anchor")("ngIfElse", menuTemplate_r2);
             } }, encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmMenu]', providers: [
                         i5.provideAsWidgetRef(MenuComponent)
                     ], template: "<ng-template #menuTemplate>\n    <button wmButton\n            dropdownToggle\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n            [attr.aria-label]=\"hint || '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        <span class=\"pull-right caret fa\" [ngClass]=\"[menuCaret]\"></span>\n    </button>\n</ng-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<ng-container *ngIf=\"type === 'anchor'; else menuTemplate\">\n    <a wmAnchor\n       dropdownToggle\n\n       href=\"javascript:void(0);\"\n       role=\"button\"\n       aria-haspopup=\"true\"\n       aria-expanded=\"false\"\n\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</ng-container>\n\n<ul wmMenuDropdown [items]=\"nodes\" [ngClass]=\"menulayout\" class=\"icon-position-{{iconposition}}\" *dropdownMenu aria-labelledby=\"dropdownmenu\" role=\"menubar\"></ul>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1__namespace.Router }, { type: i2__namespace.UserDefinedExecutionContext }, { type: i2__namespace.App }, { type: i2$1__namespace.BsDropdownDirective, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.Router }, { type: i2__namespace.UserDefinedExecutionContext }, { type: i2__namespace.App }, { type: i2$1__namespace.BsDropdownDirective, decorators: [{
                     type: i0.Self
                 }, {
                     type: i0.Optional
@@ -539,7 +535,12 @@
                 }] }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['select.event']
-                }] }]; }, { onShow: [{
+                }] }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { onShow: [{
                 type: i0.HostListener,
                 args: ['onShown']
             }], onHide: [{
@@ -567,8 +568,10 @@
                 type: i0.HostListener,
                 args: ['keydown.enter', ['$event', '"ENTER"']]
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(MenuComponent, { className: "MenuComponent", filePath: "menu.component.ts", lineNumber: 90 }); })();
 
     const _c0$1 = ["wmMenuDropdownItem", ""];
+    const _c1$1 = a0 => ({ item: a0 });
     function MenuDropdownItemComponent_span_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span");
     } if (rf & 2) {
@@ -578,22 +581,21 @@
     function MenuDropdownItemComponent_span_5_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span", 6);
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("textContent", ctx_r1.item.badge);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("textContent", ctx_r0.item.badge);
     } }
-    const _c1$1 = function (a0) { return { item: a0 }; };
     function MenuDropdownItemComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementContainer(0, 7);
     } if (rf & 2) {
-        const ctx_r2 = i0__namespace.ɵɵnextContext();
-        const _r3 = i0__namespace.ɵɵreference(8);
-        i0__namespace.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(2, _c1$1, ctx_r2.item));
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        const nestedMenuDropdown_r2 = i0__namespace.ɵɵreference(8);
+        i0__namespace.ɵɵproperty("ngTemplateOutlet", nestedMenuDropdown_r2)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(2, _c1$1, ctx_r0.item));
     } }
     function MenuDropdownItemComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "ul", 8);
     } if (rf & 2) {
-        const item_r5 = ctx.item;
-        i0__namespace.ɵɵproperty("items", item_r5.children);
+        const item_r3 = ctx.item;
+        i0__namespace.ɵɵproperty("items", item_r3.children);
     } }
     const menuAlignClass = {
         'pull-right': 'fa-caret-left',
@@ -621,7 +623,7 @@
                 $event.preventDefault();
                 const args = { $event, $item: item };
                 this.menuRef.onMenuItemSelect(args);
-                const selectedItem = _.clone(item);
+                const selectedItem = lodashEs.clone(item);
                 selectedItem.target = selectedItem.target || this.menuRef.linktarget;
                 // Trigger the action associated with active item
                 i2.triggerItemAction(this, selectedItem);
@@ -643,7 +645,7 @@
             }
         }
         getInitialKeyMovements() {
-            const KEY_MOVEMENTS = _.clone(KEYBOARD_MOVEMENTS);
+            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';
@@ -670,7 +672,7 @@
             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)) {
+            if (lodashEs.includes(ARROW_KEYS, eventAction)) {
                 // preventing from page scroll when up/down arrow is pressed, in case of menu is opened.
                 $event.preventDefault();
             }
@@ -739,37 +741,36 @@
         static { this.ɵfac = function MenuDropdownItemComponent_Factory(t) { return new (t || MenuDropdownItemComponent)(i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject(MenuComponent), i0__namespace.ɵɵdirectiveInject(i2__namespace.UserDefinedExecutionContext), i0__namespace.ɵɵdirectiveInject(NavComponent, 8), i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: MenuDropdownItemComponent, selectors: [["li", "wmMenuDropdownItem", ""]], hostBindings: function MenuDropdownItemComponent_HostBindings(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵlistener("keydown.tab", function MenuDropdownItemComponent_keydown_tab_HostBindingHandler($event) { return ctx.onKeyDown($event, "TAB"); })("keydown.shift.tab", function MenuDropdownItemComponent_keydown_shift_tab_HostBindingHandler($event) { return ctx.onKeyDown($event, "SHIFT-TAB"); })("keydown.escape", function MenuDropdownItemComponent_keydown_escape_HostBindingHandler($event) { return ctx.onKeyDown($event, "ESC"); })("keydown.enter", function MenuDropdownItemComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); })("keydown.arrowup", function MenuDropdownItemComponent_keydown_arrowup_HostBindingHandler($event) { return ctx.onKeyDown($event, "UP-ARROW"); })("keydown.arrowdown", function MenuDropdownItemComponent_keydown_arrowdown_HostBindingHandler($event) { return ctx.onKeyDown($event, "DOWN-ARROW"); })("keydown.arrowright", function MenuDropdownItemComponent_keydown_arrowright_HostBindingHandler($event) { return ctx.onKeyDown($event, "RIGHT-ARROW"); })("keydown.arrowleft", function MenuDropdownItemComponent_keydown_arrowleft_HostBindingHandler($event) { return ctx.onKeyDown($event, "LEFT-ARROW"); })("click", function MenuDropdownItemComponent_click_HostBindingHandler($event) { return ctx.onSelect($event, ctx.item); });
-            } }, inputs: { item: "item" }, attrs: _c0$1, decls: 9, vars: 10, consts: [["href", "javascript:void(0);", 3, "title", "wmNavigationControl", "disableMenuContext"], [3, "class", 4, "ngIf"], [1, "anchor-caption"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["nestedMenuDropdown", ""], [1, "badge", "pull-right", 3, "textContent"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["wmMenuDropdown", "", 3, "items"]], template: function MenuDropdownItemComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵelementStart(0, "a", 0);
-                i0__namespace.ɵɵtemplate(1, MenuDropdownItemComponent_span_1_Template, 1, 3, "span", 1);
+            } }, inputs: { item: "item" }, attrs: _c0$1, decls: 9, vars: 10, consts: [["nestedMenuDropdown", ""], ["href", "javascript:void(0);", 3, "title", "wmNavigationControl", "disableMenuContext"], [3, "class", 4, "ngIf"], [1, "anchor-caption"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], [1, "badge", "pull-right", 3, "textContent"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["wmMenuDropdown", "", 3, "items"]], template: function MenuDropdownItemComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵelementStart(0, "a", 1);
+                i0__namespace.ɵɵtemplate(1, MenuDropdownItemComponent_span_1_Template, 1, 3, "span", 2);
                 i0__namespace.ɵɵelement(2, "i");
-                i0__namespace.ɵɵelementStart(3, "span", 2);
+                i0__namespace.ɵɵelementStart(3, "span", 3);
                 i0__namespace.ɵɵtext(4);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(5, MenuDropdownItemComponent_span_5_Template, 1, 1, "span", 3);
+                i0__namespace.ɵɵtemplate(5, MenuDropdownItemComponent_span_5_Template, 1, 1, "span", 4);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(6, MenuDropdownItemComponent_ng_container_6_Template, 1, 4, "ng-container", 4);
-                i0__namespace.ɵɵtemplate(7, MenuDropdownItemComponent_ng_template_7_Template, 1, 1, "ng-template", null, 5, i0__namespace.ɵɵtemplateRefExtractor);
+                i0__namespace.ɵɵtemplate(6, MenuDropdownItemComponent_ng_container_6_Template, 1, 4, "ng-container", 5)(7, MenuDropdownItemComponent_ng_template_7_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("title", ctx.item.label)("wmNavigationControl", ctx.item.link)("disableMenuContext", ctx.menuRef.disableMenuContext || !!ctx.item.action);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.item.children.length);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx.item.icon, "");
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵtextInterpolate(ctx.item.label);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.item.badge);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.item.children.length);
             } }, encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuDropdownItemComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuDropdownItemComponent, [{
             type: i0.Component,
             args: [{ selector: 'li[wmMenuDropdownItem]', template: "<a href=\"javascript:void(0);\" [title]=\"item.label\" [wmNavigationControl]=\"item.link\" [disableMenuContext]=\"menuRef.disableMenuContext || !!item.action\">\n    <span *ngIf=\"item.children.length\" class=\"pull-right fa caret {{menualign}}\"></span>\n    <i class=\"app-icon {{item.icon}}\"></i>\n    <span class=\"anchor-caption\">{{item.label}}</span>\n    <span *ngIf=\"item.badge\" class=\"badge pull-right\" [textContent]=\"item.badge\"></span>\n</a>\n<ng-container [ngTemplateOutlet]=\"nestedMenuDropdown\" *ngIf=\"item.children.length\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\n<ng-template #nestedMenuDropdown let-item=\"item\">\n    <ul wmMenuDropdown [items]=\"item.children\"></ul>\n</ng-template>\n" }]
-        }], function () { return [{ type: i2__namespace.App }, { type: MenuComponent }, { type: i2__namespace.UserDefinedExecutionContext }, { type: NavComponent, decorators: [{
+        }], () => [{ type: i2__namespace.App }, { type: MenuComponent }, { type: i2__namespace.UserDefinedExecutionContext }, { type: NavComponent, decorators: [{
                     type: i0.Optional
-                }] }, { type: i0__namespace.ElementRef }]; }, { item: [{
+                }] }, { type: i0__namespace.ElementRef }], { item: [{
                 type: i0.Input
             }], onKeyDown: [{
                 type: i0.HostListener,
@@ -799,9 +800,10 @@
                 type: i0.HostListener,
                 args: ['click', ['$event', 'item']]
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(MenuDropdownItemComponent, { className: "MenuDropdownItemComponent", filePath: "menu-dropdown-item/menu-dropdown-item.component.ts", lineNumber: 27 }); })();
 
     const _c0 = ["wmMenuDropdown", ""];
-    const _c1 = function (a0, a1) { return { disabled: a0, "dropdown-submenu": a1 }; };
+    const _c1 = (a0, a1) => ({ disabled: a0, "dropdown-submenu": a1 });
     function MenuDropdownComponent_li_0_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "li", 1);
     } if (rf & 2) {
@@ -904,12 +906,13 @@
                 i0__namespace.ɵɵproperty("ngForOf", ctx.items);
             } }, dependencies: [i3__namespace.NgClass, i3__namespace.NgForOf, MenuDropdownItemComponent], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuDropdownComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuDropdownComponent, [{
             type: i0.Component,
             args: [{ selector: 'ul[wmMenuDropdown]', template: "<li wmMenuDropdownItem *ngFor=\"let item of items\"\n    [item]=\"item\"\n    [ngClass]=\"{disabled: item.disabled, 'dropdown-submenu': item.children.length > 0}\"\n    class=\"{{item.class}}\"\n    role=\"menuitem\">\n</li>\n" }]
-        }], function () { return [{ type: i0__namespace.ElementRef }, { type: MenuComponent }]; }, { items: [{
+        }], () => [{ type: i0__namespace.ElementRef }, { type: MenuComponent }], { items: [{
                 type: i0.Input
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(MenuDropdownComponent, { className: "MenuDropdownComponent", filePath: "menu-dropdown/menu-dropdown.component.ts", lineNumber: 37 }); })();
 
     const registerProps = () => {
         i5.register('wm-nav-item', new Map([
@@ -930,8 +933,8 @@
                 i2.addClass(this.nativeElement, 'active');
             }
         }
-        constructor(inj) {
-            super(inj, WIDGET_CONFIG);
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
             i5.styler(this.nativeElement, this, i5.APPLY_STYLES_TYPE.CONTAINER);
         }
         ngAfterViewInit() {
@@ -943,7 +946,7 @@
             i2.removeClass(this.nativeElement, 'active', true);
             super.ngOnDetach();
         }
-        static { this.ɵfac = function NavItemDirective_Factory(t) { return new (t || NavItemDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵfac = function NavItemDirective_Factory(t) { return new (t || NavItemDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: NavItemDirective, selectors: [["", "wmNavItem", ""]], contentQueries: function NavItemDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                 i0__namespace.ɵɵcontentQuery(dirIndex, i1$1.AnchorComponent, 5);
             } if (rf & 2) {
@@ -951,19 +954,25 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.innerLink = _t.first);
             } }, hostBindings: function NavItemDirective_HostBindings(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵlistener("click", function NavItemDirective_click_HostBindingHandler() { return ctx.makeActive(); })("keydown.enter", function NavItemDirective_keydown_enter_HostBindingHandler() { return ctx.makeActive(); });
-            } }, features: [i0__namespace.ɵɵProvidersFeature([
+            } }, exportAs: ["navItemRef"], features: [i0__namespace.ɵɵProvidersFeature([
                     i5.provideAsWidgetRef(NavItemDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NavItemDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NavItemDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmNavItem]',
+                    exportAs: 'navItemRef',
                     providers: [
                         i5.provideAsWidgetRef(NavItemDirective)
                     ]
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, { innerLink: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { innerLink: [{
                 type: i0.ContentChild,
                 args: [i1$1.AnchorComponent]
             }], makeActive: [{
@@ -995,10 +1004,10 @@
         static { this.ɵfac = function NavigationControlDirective_Factory(t) { return new (t || NavigationControlDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: NavigationControlDirective, selectors: [["", "wmNavigationControl", ""]], inputs: { disableMenuContext: "disableMenuContext", wmNavigationControl: "wmNavigationControl" } }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NavigationControlDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NavigationControlDirective, [{
             type: i0.Directive,
             args: [{ selector: '[wmNavigationControl]' }]
-        }], function () { return [{ type: i0__namespace.ElementRef }]; }, { disableMenuContext: [{
+        }], () => [{ type: i0__namespace.ElementRef }], { disableMenuContext: [{
                 type: i0.Input
             }], wmNavigationControl: [{
                 type: i0.Input
@@ -1021,7 +1030,7 @@
                 i4.InputModule,
                 i5.WmComponentsModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [
@@ -1054,12 +1063,13 @@
     i0__namespace.ɵɵsetComponentScope(MenuDropdownItemComponent, [i3__namespace.NgIf, i3__namespace.NgTemplateOutlet, i5__namespace.TextContentDirective, MenuDropdownComponent,
         NavigationControlDirective], []);
     i0__namespace.ɵɵsetComponentScope(NavComponent, [i1$1__namespace.AnchorComponent, i2$1__namespace.BsDropdownDirective, i3__namespace.NgClass, i3__namespace.NgForOf, i3__namespace.NgIf, i3__namespace.NgTemplateOutlet, MenuComponent,
-        NavigationControlDirective], []);
+        NavigationControlDirective,
+        NavItemDirective], []);
 
     const menuProps = ['itemlabel', 'itemicon', 'itemlink', 'itemaction', 'itemchildren', 'userrole'];
     class MenuAdapterComponent extends i5.BaseContainerComponent {
-        constructor(inj, WIDGET_CONFIG) {
-            super(inj, WIDGET_CONFIG);
+        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');
@@ -1069,7 +1079,7 @@
             this.binditemchildren = this.nativeElement.getAttribute('itemchildren.bind');
         }
         onPropertyChange(key, nv, ov) {
-            if (_.includes(menuProps, key) && this.menuRef) {
+            if (lodashEs.includes(menuProps, key) && this.menuRef) {
                 this.menuRef.itemlabel = nv;
             }
             else {
@@ -1100,9 +1110,14 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.menuRefQL = _t);
             } }, features: [i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuAdapterComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MenuAdapterComponent, [{
             type: i0.Directive
-        }], function () { return [{ type: undefined }, { type: undefined }]; }, { menuRefQL: [{
+        }], () => [{ type: undefined }, { type: undefined }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { menuRefQL: [{
                 type: i0.ViewChildren,
                 args: [MenuComponent]
             }] }); })();