import * as i0 from '@angular/core';
import { Component, Attribute, Inject, Optional, Self, HostListener, Input, Directive, ContentChild, NgModule, ViewChildren } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2$1 from 'ngx-bootstrap/dropdown';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import * as i5 from '@wm/components/base';
import { PROP_STRING, PROP_ANY, PROP_BOOLEAN, register, DatasetAwareNavComponent, APPLY_STYLES_TYPE, styler, provideAsWidgetRef, PROP_NUMBER, AUTOCLOSE_TYPE, hasLinkToCurrentPage, StylableComponent, WmComponentsModule, BaseContainerComponent } from '@wm/components/base';
import * as i1$1 from '@wm/components/basic';
import { AnchorComponent, BasicModule } from '@wm/components/basic';
import * as i4 from '@wm/components/input';
import { InputModule } from '@wm/components/input';
import * as i1 from '@angular/router';
import * as i2 from '@wm/core';
import { triggerItemAction, addClass, $appDigest, toggleClass, removeClass, setAttr } from '@wm/core';
import { isEmpty, omit, forEach, find, clone, includes } from 'lodash-es';

const registerProps$2 = () => {
    register('wm-nav', new Map([
        ['autoclose', { value: 'always', ...PROP_STRING }],
        ['autoopen', { value: 'never', ...PROP_STRING }],
        ['class', PROP_STRING],
        ['dataset', PROP_ANY],
        ['iconposition', { value: 'left', ...PROP_STRING }],
        ['isactive', PROP_STRING],
        ['itemlabel', PROP_STRING],
        ['itemlink', PROP_STRING],
        ['itemicon', PROP_STRING],
        ['itemclass', PROP_STRING],
        ['itemchildren', PROP_STRING],
        ['itemaction', PROP_STRING],
        ['itembadge', PROP_STRING],
        ['itemtarget', PROP_STRING],
        ['layout', PROP_STRING],
        ['name', PROP_STRING],
        ['orderby', PROP_STRING],
        ['show', { value: true, ...PROP_BOOLEAN }],
        ['showonhover', { value: false, ...PROP_BOOLEAN }],
        ['type', PROP_STRING],
        ['userrole', PROP_STRING]
    ]));
};

const _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.ɵɵelement(0, "div", 5);
} }
function NavComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "a", 6);
} if (rf & 2) {
    const item_r1 = ctx.item;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("disableMenuContext", ctx_r1.disableMenuContext || !!item_r1.action)("wmNavigationControl", item_r1.link);
    i0.ɵɵattribute("aria-current", item_r1._selected || !ctx_r1.isactive && item_r1.link === "#/" + ctx_r1.activePageName ? "page" : "");
} }
function NavComponent_li_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0, 9);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    const item_r4 = ctx_r2.$implicit;
    const index_r5 = ctx_r2.index;
    const liRef_r6 = i0.ɵɵreference(1);
    const ctx_r1 = i0.ɵɵnextContext();
    const anchorRef_r7 = i0.ɵɵreference(3);
    i0.ɵɵproperty("ngTemplateOutlet", anchorRef_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c4, item_r4, index_r5, liRef_r6))("ngTemplateOutletInjector", ctx_r1.createCustomInjector("anchor_" + liRef_r6.trackId, i0.ɵɵpureFunction3(7, _c4, item_r4, index_r5, liRef_r6)));
} }
function NavComponent_li_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0, 9);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    const item_r4 = ctx_r2.$implicit;
    const index_r5 = ctx_r2.index;
    const liRef_r6 = i0.ɵɵreference(1);
    const ctx_r1 = i0.ɵɵnextContext();
    const menuRef_r8 = i0.ɵɵreference(1);
    i0.ɵɵproperty("ngTemplateOutlet", menuRef_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c5, item_r4, index_r5))("ngTemplateOutletInjector", ctx_r1.createCustomInjector("menu_" + liRef_r6.trackId, i0.ɵɵpureFunction2(6, _c5, item_r4, index_r5)));
} }
function NavComponent_li_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "li", 7, 2);
    i0.ɵɵ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.ɵɵelementEnd();
} if (rf & 2) {
    const item_r4 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵclassMapInterpolate1("app-nav-item ", item_r4.class, "");
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c3, item_r4._selected || !ctx_r1.isactive && item_r4.link === "#/" + ctx_r1.activePageName));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", !item_r4.children.length);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", item_r4.children.length);
} }
function NavComponent_ng_content_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵprojection(0, 0, ["*ngIf", "!nodes.length"]);
} }
const DEFAULT_CLS$2 = 'nav app-nav';
const WIDGET_CONFIG$2 = { widgetType: 'wm-nav', hostClass: DEFAULT_CLS$2 };
const NavClassMap = {
    pills: 'nav-pills',
    tabs: 'nav-tabs',
    navbar: 'navbar-nav'
};
class NavComponent extends DatasetAwareNavComponent {
    static { this.initializeProps = registerProps$2(); }
    get activePageName() {
        return this.app.activePageName;
    }
    constructor(inj, cdRef, route, userDefinedExecutionContext, app, selectEventCB, explicitContext) {
        super(inj, WIDGET_CONFIG$2, explicitContext);
        this.cdRef = cdRef;
        this.route = route;
        this.userDefinedExecutionContext = userDefinedExecutionContext;
        this.app = app;
        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
        this.disableMenuContext = !!selectEventCB;
        this.pageScope = this.viewParent;
        // For selecting the item on load
        const datasetSubscription = this.nodes$.subscribe(() => {
            if (!isEmpty(this.nodes)) {
                let itemFound = false;
                const getItem = (nodes, isMenuWidget) => {
                    forEach(nodes, (item) => {
                        if (itemFound) {
                            return;
                        }
                        if (item.isactive) {
                            itemFound = true;
                            this.selecteditem = isMenuWidget ? omit(item, ['children', 'value']) : item.value;
                            this.invokeEventCallback('select', { $event: {}, $item: item.value });
                            // Trigger the action associated with active item
                            triggerItemAction(this, item);
                            // _selected is used to add active class for nav item. If we have children inside nav widget then it is not required.
                            if (!isMenuWidget) {
                                item._selected = true;
                            }
                            return false;
                        }
                        if (!isEmpty(item.children)) {
                            getItem(item.children, 'menu');
                        }
                    });
                };
                getItem(this.nodes);
            }
        });
        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
    }
    setNavType(type) {
        addClass(this.nativeElement, NavClassMap[type]);
    }
    setNavLayout(layout) {
        addClass(this.nativeElement, `nav-${layout}`);
    }
    onNavSelect($event, item) {
        $event.preventDefault();
        const selectedItem = find(this.nodes, '_selected');
        if (selectedItem) {
            // @ts-ignore
            delete selectedItem._selected;
        }
        this.selecteditem = item.value;
        this.invokeEventCallback('select', { $event, $item: item.value });
        // Trigger the action associated with active item
        triggerItemAction(this, item);
    }
    ngOnInit() {
        super.ngOnInit();
        this.setNavType(this.type);
        this.setNavLayout(this.layout);
    }
    /**
     * invoked from the menu widget when a menu item is selected.
     * @param $event
     * @param widget
     * @param $item
     */
    onMenuItemSelect($event, widget, $item) {
        this.selecteditem = omit($item, ['children', 'value']);
        this.invokeEventCallback('select', { $event, $item: this.selecteditem });
    }
    static { this.ɵfac = function NavComponent_Factory(t) { return new (t || NavComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i2.UserDefinedExecutionContext), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵinjectAttribute('select.event'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavComponent, selectors: [["", "wmNav", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(NavComponent)
            ]), i0.ɵɵ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.ɵɵprojectionDef(_c1$3);
            i0.ɵɵtemplate(0, NavComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, NavComponent_ng_template_2_Template, 1, 3, "ng-template", null, 1, i0.ɵɵ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.ɵɵadvance(4);
            i0.ɵɵproperty("ngForOf", ctx.nodes);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", !ctx.nodes.length);
        } }, encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavComponent, [{
        type: Component,
        args: [{ selector: '[wmNav]', providers: [
                    provideAsWidgetRef(NavComponent)
                ], template: "<ng-template #menuRef let-item=\"item\" let-index=\"index\">\n    <div wmMenu dropdown\n         type=\"anchor\"\n         autoclose.bind=\"autoclose\"\n         iconclass.bind=\"item.icon\"\n         autoopen.bind=\"autoopen\"\n         caption.bind=\"item.label\"\n         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.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i2.UserDefinedExecutionContext }, { type: i2.App }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['select.event']
            }] }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavComponent, { className: "NavComponent", filePath: "nav/nav.component.ts", lineNumber: 26 }); })();

const registerProps$1 = () => {
    register('wm-menu', new Map([
        ['accessroles', { value: 'Everyone', ...PROP_STRING }],
        ['animateitems', PROP_STRING],
        ['autoclose', { value: 'always', ...PROP_STRING }],
        ['autoopen', { value: 'never', ...PROP_STRING }],
        ['caption', PROP_STRING],
        ['class', PROP_STRING],
        ['dataset', { value: 'Menu Item 1, Menu Item 2, Menu Item 3', ...PROP_ANY }],
        ['hint', { value: '', ...PROP_STRING }],
        ['arialabel', PROP_STRING],
        ['isactive', PROP_STRING],
        ['iconclass', PROP_STRING],
        ['iconposition', { value: 'left', ...PROP_STRING }],
        ['itemaction', PROP_STRING],
        ['itemchildren', PROP_STRING],
        ['itemclass', PROP_STRING],
        ['itemicon', PROP_STRING],
        ['itemlabel', PROP_STRING],
        ['itemlink', PROP_STRING],
        ['itemtarget', PROP_STRING],
        ['linktarget', { value: '_self', ...PROP_STRING }],
        ['menuclass', PROP_STRING],
        ['menulayout', PROP_STRING],
        ['menuposition', PROP_STRING],
        ['name', PROP_STRING],
        ['orderby', PROP_STRING],
        ['shortcutkey', PROP_STRING],
        ['show', { value: true, ...PROP_BOOLEAN }],
        ['showonhover', { value: false, ...PROP_BOOLEAN }],
        ['tabindex', { value: 0, ...PROP_NUMBER }],
        ['type', { value: 'menu', ...PROP_STRING }],
        ['userrole', PROP_STRING]
    ]));
};

const _c0$2 = ["wmMenu", ""];
const _c1$2 = a0 => [a0];
function MenuComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "button", 4);
    i0.ɵɵelement(1, "span", 5);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵclassMapInterpolate1("btn app-button dropdown-toggle ", ctx_r0.menuclass, "");
    i0.ɵɵattribute("aria-label", ctx_r0.arialabel || "Menu");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c1$2, ctx_r0.menuCaret));
} }
function MenuComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i")(1, "span", 6)(2, "span");
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
    i0.ɵɵadvance();
    i0.ɵɵproperty("textContent", ctx_r0.caption);
    i0.ɵɵadvance();
    i0.ɵɵclassMapInterpolate1("pull-right caret fa ", ctx_r0.menuCaret, "");
} }
function MenuComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementStart(1, "a", 7);
    i0.ɵɵelement(2, "span", 5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵclassMapInterpolate1("dropdown-toggle ", ctx_r0.menuclass, "");
    i0.ɵɵattribute("aria-label", ctx_r0.arialabel || "Menu");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c1$2, ctx_r0.menuCaret));
} }
function MenuComponent_ul_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "ul", 8);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵclassMapInterpolate1("icon-position-", ctx_r0.iconposition, "");
    i0.ɵɵproperty("items", ctx_r0.nodes)("ngClass", ctx_r0.menulayout);
} }
const KEYBOARD_MOVEMENTS = {
    MOVE_UP: 'UP-ARROW',
    MOVE_LEFT: 'LEFT-ARROW',
    MOVE_RIGHT: 'RIGHT-ARROW',
    MOVE_DOWN: 'DOWN-ARROW',
    ON_ENTER: 'ENTER',
    ON_MOUSE_ENTER: 'MOUSE-ENTER',
    ON_MOUSE_LEAVE: 'MOUSE-LEAVE',
    ON_TAB: 'TAB',
    ON_SHIFT_TAB: 'SHIFT-TAB',
    ON_ESCAPE: 'ESC'
};
const MENU_POSITION = {
    UP_LEFT: 'up,left',
    UP_RIGHT: 'up,right',
    DOWN_LEFT: 'down,left',
    DOWN_RIGHT: 'down,right',
    INLINE: 'inline'
};
const POSITION = {
    DOWN_RIGHT: 'down,right',
    DOWN_LEFT: 'down,left',
    UP_RIGHT: 'up,right',
    UP_LEFT: 'up,left',
    INLINE: 'inline'
};
const CARET_CLS = {
    UP: 'fa-caret-up',
    DOWN: 'fa-caret-down'
};
const PULL_CLS = {
    LEFT: 'pull-left',
    RIGHT: 'pull-right'
};
const AUTO_OPEN = {
    NEVER: 'never',
    ACTIVE_PAGE: 'activepage',
    ALWAYS: 'always'
};
const WIDGET_CONFIG$1 = { widgetType: 'wm-menu', hostClass: 'dropdown app-menu' };
class MenuComponent extends DatasetAwareNavComponent {
    static { this.initializeProps = registerProps$1(); }
    onShow() {
        this._menuposition = this.menuposition;
        if (this._selectFirstItem) {
            setTimeout(() => {
                this.$element.find('> ul[wmmenudropdown] li.app-menu-item').first().find('> a').focus();
            });
        }
        $appDigest();
    }
    onHide() {
        this.$element.find('li').removeClass('open');
        this._selectFirstItem = false;
        // reset the menuposition when dropdown is closed
        this.menuposition = this._menuposition ? this._menuposition : MENU_POSITION.DOWN_RIGHT;
        this.setMenuPosition();
        $appDigest();
    }
    onKeyDown($event, eventAction) {
        const KEY_MOVEMENTS = clone(KEYBOARD_MOVEMENTS);
        if (this.menuposition === MENU_POSITION.UP_RIGHT) {
            KEY_MOVEMENTS.MOVE_UP = 'DOWN-ARROW';
            KEY_MOVEMENTS.MOVE_DOWN = 'UP-ARROW';
        }
        else if (this.menuposition === MENU_POSITION.UP_LEFT) {
            KEY_MOVEMENTS.MOVE_UP = 'DOWN-ARROW';
            KEY_MOVEMENTS.MOVE_DOWN = 'UP-ARROW';
            KEY_MOVEMENTS.MOVE_LEFT = 'RIGHT-ARROW';
            KEY_MOVEMENTS.MOVE_RIGHT = 'LEFT-ARROW';
        }
        else if (this.menuposition === MENU_POSITION.DOWN_LEFT) {
            KEY_MOVEMENTS.MOVE_LEFT = 'RIGHT-ARROW';
            KEY_MOVEMENTS.MOVE_RIGHT = 'LEFT-ARROW';
        }
        if (includes([KEY_MOVEMENTS.MOVE_DOWN, KEY_MOVEMENTS.MOVE_RIGHT], eventAction)) {
            if (!this.bsDropdown.isOpen) {
                this._selectFirstItem = true;
                this.bsDropdown.show();
            }
            else {
                this.$element.find('> ul[wmmenudropdown] li.app-menu-item').first().find('> a').focus();
            }
        }
        else if (eventAction === KEY_MOVEMENTS.ON_ENTER || (eventAction === KEY_MOVEMENTS.ON_MOUSE_ENTER && this.showonhover)) {
            this.bsDropdown.toggle(true);
        }
        else if (includes([KEY_MOVEMENTS.MOVE_UP, KEY_MOVEMENTS.MOVE_LEFT], eventAction) || (eventAction == KEY_MOVEMENTS.ON_MOUSE_LEAVE && this.autoclose == AUTOCLOSE_TYPE.ALWAYS && this.showonhover)) {
            this.bsDropdown.hide();
        }
        $event.preventDefault();
    }
    constructor(inj, route, userDefinedExecutionContext, app, bsDropdown, parentNav, selectEventCB, explicitContext) {
        super(inj, WIDGET_CONFIG$1, explicitContext);
        this.route = route;
        this.userDefinedExecutionContext = userDefinedExecutionContext;
        this.app = app;
        this.bsDropdown = bsDropdown;
        this.parentNav = parentNav;
        this.selectEventCB = selectEventCB;
        this.menuCaret = 'fa-caret-down';
        this._selectFirstItem = false;
        if (parentNav) {
            this.disableMenuContext = !!parentNav.disableMenuContext;
        }
        else {
            this.disableMenuContext = !!selectEventCB;
        }
        // For selecting the item on load
        const datasetSubscription = this.nodes$.subscribe(() => {
            if (!isEmpty(this.nodes)) {
                if (hasLinkToCurrentPage(this.nodes, this.route.url)) {
                    addClass(this.nativeElement.querySelector('.dropdown-toggle'), 'active');
                }
                // If menu widget is inside nav widget then dont check for item isactive property because these will be handled form nav widget.
                if (this.parentNav) {
                    return;
                }
                let itemFound = false;
                const getItem = (nodes) => {
                    forEach(nodes, (item) => {
                        if (itemFound) {
                            return;
                        }
                        if (item.isactive) {
                            itemFound = true;
                            this.onMenuItemSelect({ $event: {}, $item: item });
                            // Trigger the action associated with active item
                            triggerItemAction(this, item);
                            return false;
                        }
                        if (!isEmpty(item.children)) {
                            getItem(item.children);
                        }
                    });
                };
                getItem(this.nodes);
            }
        });
        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
    }
    resetNodes() {
        super.resetNodes();
        // open the menu if any of its menu items has link to current page and if autoopen value is 'active page'
        if ((this.autoopen === AUTO_OPEN.ACTIVE_PAGE && hasLinkToCurrentPage(this.nodes, this.route.url)) || this.autoopen === AUTO_OPEN.ALWAYS) {
            this.bsDropdown.show();
        }
    }
    ngOnInit() {
        super.ngOnInit();
        this.setMenuPosition();
        const cancelSubscription = this.app.subscribe("highlightActiveLink", (data) => {
            toggleClass(this.nativeElement.querySelector('.dropdown-toggle'), 'active', hasLinkToCurrentPage(this.nodes, this.route.url));
        });
        this.registerDestroyListener(() => cancelSubscription());
    }
    onPropertyChange(key, nv, ov) {
        if (key === 'tabindex') {
            return;
        }
        if (key === 'autoclose') {
            this.bsDropdown.autoClose = nv !== AUTOCLOSE_TYPE.DISABLED;
            this.autoclose = nv;
        }
        else {
            super.onPropertyChange(key, nv, ov);
        }
    }
    setMenuPosition() {
        switch (this.menuposition) {
            case POSITION.DOWN_RIGHT:
                removeClass(this.nativeElement, 'dropup');
                this.menualign = PULL_CLS.LEFT;
                this.menuCaret = CARET_CLS.DOWN;
                break;
            case POSITION.DOWN_LEFT:
                removeClass(this.nativeElement, 'dropup');
                this.menualign = PULL_CLS.RIGHT;
                this.menuCaret = CARET_CLS.DOWN;
                break;
            case POSITION.UP_LEFT:
                addClass(this.nativeElement, 'dropup');
                this.menualign = PULL_CLS.RIGHT;
                this.menuCaret = CARET_CLS.UP;
                break;
            case POSITION.UP_RIGHT:
                addClass(this.nativeElement, 'dropup');
                this.menualign = PULL_CLS.LEFT;
                this.menuCaret = CARET_CLS.UP;
                break;
            case POSITION.INLINE:
                this.menualign = 'dropinline-menu';
                break;
        }
    }
    onMenuItemSelect(args) {
        const { $event } = args;
        const $item = args.$item.value;
        this.invokeEventCallback('select', { $event, $item });
    }
    ngAfterViewInit() {
        super.ngAfterViewInit();
        styler(this.nativeElement.querySelector('.dropdown-toggle'), this);
    }
    static { this.ɵfac = function MenuComponent_Factory(t) { return new (t || MenuComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i2.UserDefinedExecutionContext), i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(i2$1.BsDropdownDirective, 10), i0.ɵɵdirectiveInject(NavComponent, 8), i0.ɵɵinjectAttribute('select.event'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuComponent, selectors: [["", "wmMenu", ""]], hostBindings: function MenuComponent_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵ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.ɵɵProvidersFeature([
                provideAsWidgetRef(MenuComponent)
            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$2, decls: 6, vars: 2, consts: [["menuTemplate", ""], ["innerTemplate", ""], [4, "ngIf", "ngIfElse"], ["role", "menubar", "wmMenuDropdown", "", 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"], ["role", "menubar", "wmMenuDropdown", "", 3, "items", "ngClass"]], template: function MenuComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, MenuComponent_ng_template_0_Template, 2, 7, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, MenuComponent_ng_template_2_Template, 3, 7, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(4, MenuComponent_ng_container_4_Template, 3, 7, "ng-container", 2)(5, MenuComponent_ul_5_Template, 1, 5, "ul", 3);
        } if (rf & 2) {
            const menuTemplate_r2 = i0.ɵɵreference(1);
            i0.ɵɵadvance(4);
            i0.ɵɵproperty("ngIf", ctx.type === "anchor")("ngIfElse", menuTemplate_r2);
        } }, encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuComponent, [{
        type: Component,
        args: [{ selector: '[wmMenu]', providers: [
                    provideAsWidgetRef(MenuComponent)
                ], template: "<ng-template #menuTemplate>\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        <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       [attr.aria-label]=\"arialabel || 'Menu'\"\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 *dropdownMenu [items]=\"nodes\" [ngClass]=\"menulayout\" class=\"icon-position-{{iconposition}}\" role=\"menubar\"\n    wmMenuDropdown></ul>\n" }]
    }], () => [{ type: i0.Injector }, { type: i1.Router }, { type: i2.UserDefinedExecutionContext }, { type: i2.App }, { type: i2$1.BsDropdownDirective, decorators: [{
                type: Self
            }, {
                type: Optional
            }] }, { type: NavComponent, decorators: [{
                type: Optional
            }] }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['select.event']
            }] }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { onShow: [{
            type: HostListener,
            args: ['onShown']
        }], onHide: [{
            type: HostListener,
            args: ['onHidden']
        }], onKeyDown: [{
            type: HostListener,
            args: ['keydown.arrowup', ['$event', '"UP-ARROW"']]
        }, {
            type: HostListener,
            args: ['mouseenter', ['$event', '"MOUSE-ENTER"']]
        }, {
            type: HostListener,
            args: ['mouseleave', ['$event', '"MOUSE-LEAVE"']]
        }, {
            type: HostListener,
            args: ['keydown.arrowdown', ['$event', '"DOWN-ARROW"']]
        }, {
            type: HostListener,
            args: ['keydown.arrowright', ['$event', '"RIGHT-ARROW"']]
        }, {
            type: HostListener,
            args: ['keydown.arrowleft', ['$event', '"LEFT-ARROW"']]
        }, {
            type: HostListener,
            args: ['keydown.enter', ['$event', '"ENTER"']]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuComponent, { className: "MenuComponent", filePath: "menu.component.ts", lineNumber: 89 }); })();

const _c0$1 = ["wmMenuDropdownItem", ""];
const _c1$1 = a0 => ({ item: a0 });
function MenuDropdownItemComponent_span_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span");
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵclassMapInterpolate1("pull-right fa caret ", ctx_r0.menualign, "");
} }
function MenuDropdownItemComponent_span_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span", 6);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("textContent", ctx_r0.item.badge);
} }
function MenuDropdownItemComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0, 7);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    const nestedMenuDropdown_r2 = i0.ɵɵreference(8);
    i0.ɵɵproperty("ngTemplateOutlet", nestedMenuDropdown_r2)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1$1, ctx_r0.item));
} }
function MenuDropdownItemComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "ul", 8);
} if (rf & 2) {
    const item_r3 = ctx.item;
    i0.ɵɵproperty("items", item_r3.children);
} }
const menuAlignClass = {
    'pull-right': 'fa-caret-left',
    'dropinline-menu': 'fa-caret-down',
    'pull-left': 'fa-caret-right'
};
const MENU_LAYOUT_TYPE = {
    HORIZONTAL: 'horizontal',
    VERTICAL: 'vertical'
};
class MenuDropdownItemComponent {
    constructor(app, menuRef, userDefinedExecutionContext, parentNav, elRef) {
        this.app = app;
        this.menuRef = menuRef;
        this.userDefinedExecutionContext = userDefinedExecutionContext;
        this.parentNav = parentNav;
        this.onSelect = ($event, item) => {
            if (this.nativeElement !== $($event.target).closest('.app-menu-item').get(0)) {
                return;
            }
            // prevent event event propagation if auto close is outside click.
            if (this.menuRef.autoclose === 'outsideClick') {
                $event.stopPropagation();
            }
            $event.preventDefault();
            const args = { $event, $item: item };
            this.menuRef.onMenuItemSelect(args);
            const selectedItem = clone(item);
            selectedItem.target = selectedItem.target || this.menuRef.linktarget;
            // Trigger the action associated with active item
            triggerItemAction(this, selectedItem);
        };
        this.nativeElement = elRef.nativeElement;
        addClass(this.nativeElement, 'app-menu-item');
        this.menualign = menuAlignClass[this.menuRef.menualign] || menuAlignClass['pull-left'];
    }
    ngOnInit() {
        // add active class to the item only if it is in nav component.
        if (this.parentNav) {
            if (hasLinkToCurrentPage([this.item], this.menuRef.route.url)) {
                // add active class to the li, if the menu item's link is same as the current page name.
                addClass(this.nativeElement, 'active');
            }
            this.highlightActiveLinkSubscription = this.app.subscribe("highlightActiveLink", (data) => {
                toggleClass(this.nativeElement, 'active', hasLinkToCurrentPage([this.item], this.menuRef.route.url));
            });
        }
    }
    getInitialKeyMovements() {
        const KEY_MOVEMENTS = clone(KEYBOARD_MOVEMENTS);
        if (this.menuRef.menulayout === MENU_LAYOUT_TYPE.HORIZONTAL) {
            KEY_MOVEMENTS.MOVE_UP = 'LEFT-ARROW';
            KEY_MOVEMENTS.MOVE_LEFT = 'UP-ARROW';
            KEY_MOVEMENTS.MOVE_RIGHT = 'DOWN-ARROW';
            KEY_MOVEMENTS.MOVE_DOWN = 'RIGHT-ARROW';
        }
        else {
            if (this.menuRef.menuposition === MENU_POSITION.DOWN_LEFT || this.menuRef.menuposition === MENU_POSITION.UP_LEFT) {
                KEY_MOVEMENTS.MOVE_LEFT = 'RIGHT-ARROW';
                KEY_MOVEMENTS.MOVE_RIGHT = 'LEFT-ARROW';
            }
            else if (this.menuRef.menuposition === 'inline') {
                KEY_MOVEMENTS.MOVE_UP = 'LEFT-ARROW';
                KEY_MOVEMENTS.MOVE_LEFT = 'UP-ARROW';
                KEY_MOVEMENTS.MOVE_RIGHT = 'DOWN-ARROW';
                KEY_MOVEMENTS.MOVE_DOWN = 'RIGHT-ARROW';
            }
        }
        return KEY_MOVEMENTS;
    }
    onKeyDown($event, eventAction) {
        const $li = $(this.nativeElement);
        const $ul = $(this.nativeElement).closest('ul.dropdown-menu');
        const $parentUl = this.menuRef.$element.find('> ul.dropdown-menu');
        const ARROW_KEYS = ['LEFT-ARROW', 'RIGHT-ARROW', 'UP-ARROW', 'DOWN-ARROW'];
        const KEY_MOVEMENTS = this.getInitialKeyMovements();
        if (includes(ARROW_KEYS, eventAction)) {
            // preventing from page scroll when up/down arrow is pressed, in case of menu is opened.
            $event.preventDefault();
        }
        if ((eventAction === KEY_MOVEMENTS.ON_TAB && $parentUl.children().last()[0] === this.nativeElement)
            || (eventAction === KEY_MOVEMENTS.ON_SHIFT_TAB && $parentUl.children().first()[0] === this.nativeElement)
            || eventAction === KEY_MOVEMENTS.ON_ESCAPE) {
            /*closing all the children elements when
            * 1. Tab is clicked on the last $element
            * 2. Shift Tab is clicked on the first $element
            * 3. When Escape key is clicked*/
            $event.preventDefault();
            this.menuRef.bsDropdown.hide();
        }
        else if ((eventAction === KEY_MOVEMENTS.ON_ENTER && !this.item.link) || eventAction === KEY_MOVEMENTS.MOVE_RIGHT) {
            // when there is no link for the menu, on enter open the inner child elements and focus the first $element
            $event.stopPropagation();
            if (this.item.children.length) {
                $li.toggleClass('open');
                $li.find('li').first().find('> a').focus();
            }
            else {
                $li.find('> a').focus();
            }
        }
        else if (eventAction === KEY_MOVEMENTS.MOVE_LEFT
            || (eventAction === KEY_MOVEMENTS.ON_TAB && $ul.children().last()[0] === this.nativeElement)
            || (eventAction === KEY_MOVEMENTS.ON_SHIFT_TAB && $ul.children().first()[0] === this.nativeElement)) {
            if ($parentUl[0] !== $ul[0]) {
                const $parentItem = $ul.parent();
                $parentItem.toggleClass('open').find('li.open').removeClass('open');
                $parentItem.find('> a').focus();
                $event.preventDefault();
                $event.stopPropagation();
            }
        }
        else if (eventAction === KEY_MOVEMENTS.MOVE_UP) {
            if ($parentUl[0] !== $ul[0] || $parentUl.find('> li').first()[0] !== this.nativeElement) {
                $event.stopPropagation();
                $li.prev().find('> a').focus();
            }
        }
        else if (eventAction === KEY_MOVEMENTS.MOVE_DOWN) {
            $event.stopPropagation();
            if ($parentUl.find('> li').last()[0] === this.nativeElement
                && (this.menuRef.menulayout !== MENU_LAYOUT_TYPE.HORIZONTAL
                    && this.menuRef.menuposition === MENU_POSITION.UP_RIGHT
                    || this.menuRef.menuposition === MENU_POSITION.UP_LEFT)) {
                this.menuRef.bsDropdown.hide();
            }
            else {
                $li.next().find('> a').focus();
            }
        }
        else if (eventAction === KEY_MOVEMENTS.ON_ENTER) {
            this.onSelect($event, this.item);
        }
        else {
            $event.stopPropagation();
        }
    }
    ngOnDestroy() {
        if (this.highlightActiveLinkSubscription) {
            this.highlightActiveLinkSubscription();
        }
    }
    static { this.ɵfac = function MenuDropdownItemComponent_Factory(t) { return new (t || MenuDropdownItemComponent)(i0.ɵɵdirectiveInject(i2.App), i0.ɵɵdirectiveInject(MenuComponent), i0.ɵɵdirectiveInject(i2.UserDefinedExecutionContext), i0.ɵɵdirectiveInject(NavComponent, 8), i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuDropdownItemComponent, selectors: [["li", "wmMenuDropdownItem", ""]], hostBindings: function MenuDropdownItemComponent_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵ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: [["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.ɵɵelementStart(0, "a", 1);
            i0.ɵɵtemplate(1, MenuDropdownItemComponent_span_1_Template, 1, 3, "span", 2);
            i0.ɵɵelement(2, "i");
            i0.ɵɵelementStart(3, "span", 3);
            i0.ɵɵtext(4);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(5, MenuDropdownItemComponent_span_5_Template, 1, 1, "span", 4);
            i0.ɵɵelementEnd();
            i0.ɵɵ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.ɵɵtemplateRefExtractor);
        } if (rf & 2) {
            i0.ɵɵproperty("title", ctx.item.label)("wmNavigationControl", ctx.item.link)("disableMenuContext", ctx.menuRef.disableMenuContext || !!ctx.item.action);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.item.children.length);
            i0.ɵɵadvance();
            i0.ɵɵclassMapInterpolate1("app-icon ", ctx.item.icon, "");
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate(ctx.item.label);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.item.badge);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.item.children.length);
        } }, encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuDropdownItemComponent, [{
        type: 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" }]
    }], () => [{ type: i2.App }, { type: MenuComponent }, { type: i2.UserDefinedExecutionContext }, { type: NavComponent, decorators: [{
                type: Optional
            }] }, { type: i0.ElementRef }], { item: [{
            type: Input
        }], onKeyDown: [{
            type: HostListener,
            args: ['keydown.tab', ['$event', '"TAB"']]
        }, {
            type: HostListener,
            args: ['keydown.shift.tab', ['$event', '"SHIFT-TAB"']]
        }, {
            type: HostListener,
            args: ['keydown.escape', ['$event', '"ESC"']]
        }, {
            type: HostListener,
            args: ['keydown.enter', ['$event', '"ENTER"']]
        }, {
            type: HostListener,
            args: ['keydown.arrowup', ['$event', '"UP-ARROW"']]
        }, {
            type: HostListener,
            args: ['keydown.arrowdown', ['$event', '"DOWN-ARROW"']]
        }, {
            type: HostListener,
            args: ['keydown.arrowright', ['$event', '"RIGHT-ARROW"']]
        }, {
            type: HostListener,
            args: ['keydown.arrowleft', ['$event', '"LEFT-ARROW"']]
        }], onSelect: [{
            type: HostListener,
            args: ['click', ['$event', 'item']]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuDropdownItemComponent, { className: "MenuDropdownItemComponent", filePath: "menu-dropdown-item/menu-dropdown-item.component.ts", lineNumber: 27 }); })();

const _c0 = ["wmMenuDropdown", ""];
const _c1 = (a0, a1) => ({ disabled: a0, "dropdown-submenu": a1 });
function MenuDropdownComponent_li_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "li", 1);
} if (rf & 2) {
    const item_r1 = ctx.$implicit;
    i0.ɵɵclassMap(item_r1.class);
    i0.ɵɵproperty("item", item_r1)("ngClass", i0.ɵɵpureFunction2(5, _c1, item_r1.disabled, item_r1.children.length > 0));
} }
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$1 = 'dropdown-menu';
class MenuDropdownComponent {
    constructor(elRef, menuRef) {
        this.menuRef = menuRef;
        this.nativeElement = elRef.nativeElement;
        this.hasExecutedCallback = false;
        addClass(this.nativeElement, DEFAULT_CLS$1);
    }
    ngAfterViewInit() {
        const animateItems = this.menuRef.animateitems;
        let animationClass = '';
        if (animateItems) {
            animationClass = `animated ${(animationClasses[animateItems][this.menuRef.menuposition] || animationClasses[animateItems].name)}`;
        }
        addClass(this.nativeElement, `dropdown-menu ${this.menuRef.menualign} ${animationClass}`, true);
        this.getParentWidget();
    }
    // Function to check if the menu widget is present inside other widgets like table, tabs, dialog, nav, list, tile, panel, accordion
    // if true then call createObserver() which internally calculates dropown height
    getParentWidget() {
        const closestWidget = $(this.menuRef.nativeElement).closest('table, ul.list-group');
        // Check if the closest table is the parent of the menu widget
        if (closestWidget && $(closestWidget).has(this.menuRef.nativeElement).length > 0) {
            this.createObserver(this, this.callback);
        }
    }
    // function which changes the position of the menu dropdown dynamically if it exceeds viewport height
    callback(entries, observer) {
        if (!this.hasExecutedCallback) {
            const self = this;
            const positions = this.menuRef.menuposition?.split(',') || [];
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    positions[0] = 'down';
                    self.menuRef.menuposition = positions.length > 1 ? positions.join() : 'down,right';
                    self.nativeElement.parentElement?.classList.add('dropdown');
                    self.menuRef.setMenuPosition();
                }
                else {
                    positions[0] = 'up';
                    self.menuRef.menuposition = positions.length > 1 ? positions.join() : 'up,right';
                    self.nativeElement.parentElement?.classList.add('dropup');
                    self.menuRef.setMenuPosition();
                    // when container="body" is added to menu dropdown, the dropdown menu ul is attached directly to body.
                    // so adding a class name inorder to adjust the styling of the dropdown
                    const dropdownContainer = self.nativeElement.parentElement?.parentElement;
                    if (dropdownContainer.tagName.toUpperCase() === "BS-DROPDOWN-CONTAINER") {
                        // The parent element is <bs-dropdown-container>
                        self.nativeElement.parentElement?.parentElement?.classList.add('parent-position');
                    }
                }
            });
            this.hasExecutedCallback = true;
        }
    }
    // function which checks if the dropdown is within the viewport height or exceeds viewport height
    createObserver(target, callback) {
        const options = {
            root: null,
            threshold: 1,
            once: true
        };
        const observer = new IntersectionObserver(callback.bind(this), options);
        observer.observe(target.nativeElement);
    }
    static { this.ɵfac = function MenuDropdownComponent_Factory(t) { return new (t || MenuDropdownComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MenuComponent)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuDropdownComponent, selectors: [["ul", "wmMenuDropdown", ""]], inputs: { items: "items" }, attrs: _c0, decls: 1, vars: 1, consts: [["wmMenuDropdownItem", "", "role", "menuitem", 3, "item", "ngClass", "class", 4, "ngFor", "ngForOf"], ["wmMenuDropdownItem", "", "role", "menuitem", 3, "item", "ngClass"]], template: function MenuDropdownComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, MenuDropdownComponent_li_0_Template, 1, 8, "li", 0);
        } if (rf & 2) {
            i0.ɵɵproperty("ngForOf", ctx.items);
        } }, dependencies: [i3.NgClass, i3.NgForOf, MenuDropdownItemComponent], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuDropdownComponent, [{
        type: 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" }]
    }], () => [{ type: i0.ElementRef }, { type: MenuComponent }], { items: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuDropdownComponent, { className: "MenuDropdownComponent", filePath: "menu-dropdown/menu-dropdown.component.ts", lineNumber: 37 }); })();

const registerProps = () => {
    register('wm-nav-item', new Map([
        ['class', PROP_STRING],
        ['name', PROP_STRING],
        ['show', { value: true, ...PROP_BOOLEAN }]
    ]));
};

const DEFAULT_CLS = 'app-nav-item';
const WIDGET_CONFIG = { widgetType: 'wm-nav-item', hostClass: DEFAULT_CLS };
class NavItemDirective extends StylableComponent {
    static { this.initializeProps = registerProps(); }
    makeActive() {
        const parentNode = this.nativeElement.parentNode;
        $(parentNode).find('> li.active').removeClass('active');
        if (this.isAttached) {
            addClass(this.nativeElement, 'active');
        }
    }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
    }
    ngAfterViewInit() {
        if (this.innerLink) {
            this.innerLink.onActive(() => this.makeActive());
        }
    }
    ngOnDetach() {
        removeClass(this.nativeElement, 'active', true);
        super.ngOnDetach();
    }
    static { this.ɵfac = function NavItemDirective_Factory(t) { return new (t || NavItemDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NavItemDirective, selectors: [["", "wmNavItem", ""]], contentQueries: function NavItemDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, AnchorComponent, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.innerLink = _t.first);
        } }, hostBindings: function NavItemDirective_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("click", function NavItemDirective_click_HostBindingHandler() { return ctx.makeActive(); })("keydown.enter", function NavItemDirective_keydown_enter_HostBindingHandler() { return ctx.makeActive(); });
        } }, exportAs: ["navItemRef"], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(NavItemDirective)
            ]), i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavItemDirective, [{
        type: Directive,
        args: [{
                selector: '[wmNavItem]',
                exportAs: 'navItemRef',
                providers: [
                    provideAsWidgetRef(NavItemDirective)
                ]
            }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { innerLink: [{
            type: ContentChild,
            args: [AnchorComponent]
        }], makeActive: [{
            type: HostListener,
            args: ['click']
        }, {
            type: HostListener,
            args: ['keydown.enter']
        }] }); })();

const disableContextMenu = ($event) => {
    $event.preventDefault();
};
class NavigationControlDirective {
    set wmNavigationControl(val) {
        this._link = val;
        if (val && !this.disableMenuContext) {
            setAttr(this.nativeElement, 'href', val);
            this.nativeElement.removeEventListener('contextmenu', disableContextMenu);
        }
        else {
            setAttr(this.nativeElement, 'href', 'javascript:void(0)');
            this.nativeElement.addEventListener('contextmenu', disableContextMenu);
        }
    }
    constructor(eleRef) {
        this.nativeElement = eleRef.nativeElement;
    }
    static { this.ɵfac = function NavigationControlDirective_Factory(t) { return new (t || NavigationControlDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NavigationControlDirective, selectors: [["", "wmNavigationControl", ""]], inputs: { disableMenuContext: "disableMenuContext", wmNavigationControl: "wmNavigationControl" } }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationControlDirective, [{
        type: Directive,
        args: [{ selector: '[wmNavigationControl]' }]
    }], () => [{ type: i0.ElementRef }], { disableMenuContext: [{
            type: Input
        }], wmNavigationControl: [{
            type: Input
        }] }); })();

const components = [
    MenuComponent,
    MenuDropdownComponent,
    MenuDropdownItemComponent,
    NavigationControlDirective,
    NavComponent,
    NavItemDirective
];
class MenuModule {
    static { this.ɵfac = function MenuModule_Factory(t) { return new (t || MenuModule)(); }; }
    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MenuModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [BasicModule,
            BsDropdownModule,
            CommonModule,
            InputModule,
            WmComponentsModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuModule, [{
        type: NgModule,
        args: [{
                imports: [
                    BasicModule,
                    BsDropdownModule,
                    CommonModule,
                    InputModule,
                    WmComponentsModule
                ],
                declarations: [...components],
                exports: [...components]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MenuModule, { declarations: [MenuComponent,
        MenuDropdownComponent,
        MenuDropdownItemComponent,
        NavigationControlDirective,
        NavComponent,
        NavItemDirective], imports: [BasicModule,
        BsDropdownModule,
        CommonModule,
        InputModule,
        WmComponentsModule], exports: [MenuComponent,
        MenuDropdownComponent,
        MenuDropdownItemComponent,
        NavigationControlDirective,
        NavComponent,
        NavItemDirective] }); })();
i0.ɵɵsetComponentScope(MenuComponent, [i1$1.AnchorComponent, i2$1.BsDropdownMenuDirective, i2$1.BsDropdownToggleDirective, i3.NgClass, i3.NgIf, i4.ButtonComponent, i5.TextContentDirective, MenuDropdownComponent], []);
i0.ɵɵsetComponentScope(MenuDropdownItemComponent, [i3.NgIf, i3.NgTemplateOutlet, i5.TextContentDirective, MenuDropdownComponent,
    NavigationControlDirective], []);
i0.ɵɵsetComponentScope(NavComponent, [i1$1.AnchorComponent, i2$1.BsDropdownDirective, i3.NgClass, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, MenuComponent,
    NavigationControlDirective,
    NavItemDirective], []);

const menuProps = ['itemlabel', 'itemicon', 'itemlink', 'itemaction', 'itemchildren', 'userrole'];
class MenuAdapterComponent extends BaseContainerComponent {
    constructor(inj, WIDGET_CONFIG, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        this.pageScope = this.viewParent;
        this.binditemlabel = this.nativeElement.getAttribute('itemlabel.bind');
        this.binditemicon = this.nativeElement.getAttribute('itemicon.bind');
        this.binditemaction = this.nativeElement.getAttribute('itemaction.bind');
        this.binditemlink = this.nativeElement.getAttribute('itemlink.bind');
        this.binduserrole = this.nativeElement.getAttribute('userrole.bind');
        this.binditemchildren = this.nativeElement.getAttribute('itemchildren.bind');
    }
    onPropertyChange(key, nv, ov) {
        if (includes(menuProps, key) && this.menuRef) {
            this.menuRef.itemlabel = nv;
        }
        else {
            super.onPropertyChange(key, nv, ov);
        }
    }
    ngAfterViewInit() {
        super.ngAfterViewInit();
        const subscriber = this.menuRefQL.changes.subscribe((menuRefQL) => {
            if (menuRefQL.first) {
                this.menuRef = menuRefQL.first;
                menuProps.forEach((prop) => {
                    const bindProp = `bind${prop}`;
                    if (this[bindProp]) {
                        this.menuRef[bindProp] = this[bindProp];
                    }
                    this.menuRef[prop] = this[prop];
                });
                subscriber.unsubscribe();
            }
        });
    }
    static { this.ɵfac = function MenuAdapterComponent_Factory(t) { i0.ɵɵinvalidFactory(); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MenuAdapterComponent, viewQuery: function MenuAdapterComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(MenuComponent, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuRefQL = _t);
        } }, features: [i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuAdapterComponent, [{
        type: Directive
    }], () => [{ type: undefined }, { type: undefined }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { menuRefQL: [{
            type: ViewChildren,
            args: [MenuComponent]
        }] }); })();

/**
 * Generated bundle index. Do not edit.
 */

export { KEYBOARD_MOVEMENTS, MENU_POSITION, MenuAdapterComponent, MenuComponent, MenuDropdownComponent, MenuDropdownItemComponent, MenuModule, NavComponent, NavItemDirective, NavigationControlDirective, disableContextMenu };
//# sourceMappingURL=index.mjs.map
