(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/components/base'), require('@wm/components/page'), require('lodash-es'), require('@angular/common')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/components/base', '@wm/components/page', 'lodash-es', '@angular/common'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.mobile = global.wm.mobile || {}, global.wm.mobile.components = global.wm.mobile.components || {}, global.wm.mobile.components.page = global.wm.mobile.components.page || {}, global.wm.mobile.components.page.tabbar = {}), global.ng.core, global.wm.components.base, global.wm.components.page, global._, global.ng.common));
})(this, (function (exports, i0, i3, i1, lodashEs, i2) { 'use strict';

    function _interopNamespaceDefault(e) {
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n.default = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);

    const registerProps = () => {
        i3.register('wm-mobile-tabbar', new Map([
            ['class', i3.PROP_STRING],
            ['dataset', i3.PROP_ANY],
            ['itemicon', { value: 'icon', ...i3.PROP_STRING }],
            ['itemlabel', { value: 'label', ...i3.PROP_STRING }],
            ['itemlink', { value: 'label', ...i3.PROP_STRING }],
            ['morebuttoniconclass', { value: 'wi wi-more-horiz', ...i3.PROP_STRING }],
            ['morebuttonlabel', { value: 'more', ...i3.PROP_STRING }],
            ['name', i3.PROP_STRING],
            ['show', { value: true, ...i3.PROP_BOOLEAN }]
        ]));
    };

    const _c0 = ["wmMobileTabbar", ""];
    const _c1 = a0 => ({ dropup: a0 });
    const _c2 = a0 => ({ "nav navbar-nav": a0 });
    const _c3 = a0 => ({ active: a0 });
    function MobileTabbarComponent_li_2_Template(rf, ctx) { if (rf & 1) {
        const _r1 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "li", 7)(1, "a", 8);
        i0__namespace.ɵɵpipe(2, "trustAs");
        i0__namespace.ɵɵlistener("click", function MobileTabbarComponent_li_2_Template_a_click_1_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onItemSelect($event, item_r2)); });
        i0__namespace.ɵɵelement(3, "i", 9);
        i0__namespace.ɵɵelementStart(4, "label");
        i0__namespace.ɵɵtext(5);
        i0__namespace.ɵɵelementEnd()()();
    } if (rf & 2) {
        const item_r2 = ctx.$implicit;
        const i_r4 = ctx.index;
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵclassProp("hidden", !(ctx_r2.tabItems.length === ctx_r2.layout.max || i_r4 < ctx_r2.layout.max));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵclassProp("active", item_r2.active);
        i0__namespace.ɵɵproperty("href", i0__namespace.ɵɵpipeBind2(2, 9, item_r2.link || "javascript:void(0)", "resource"), i0__namespace.ɵɵsanitizeUrl);
        i0__namespace.ɵɵattribute("aria-label", item_r2.label)("aria-current", item_r2.active ? "page" : null);
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("ngClass", item_r2.icon);
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵtextInterpolate(item_r2.label);
    } }
    function MobileTabbarComponent_ul_8_li_1_Template(rf, ctx) { if (rf & 1) {
        const _r5 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "li", 12)(1, "a", 13);
        i0__namespace.ɵɵpipe(2, "trustAs");
        i0__namespace.ɵɵlistener("click", function MobileTabbarComponent_ul_8_li_1_Template_a_click_1_listener($event) { const item_r6 = i0__namespace.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onItemSelect($event, item_r6)); });
        i0__namespace.ɵɵelement(3, "i", 9);
        i0__namespace.ɵɵelementStart(4, "label");
        i0__namespace.ɵɵtext(5);
        i0__namespace.ɵɵelementEnd()()();
    } if (rf & 2) {
        const item_r6 = ctx.$implicit;
        const i_r7 = ctx.index;
        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
        i0__namespace.ɵɵclassProp("hidden", i_r7 < ctx_r2.layout.max);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(11, _c3, item_r6.active))("href", i0__namespace.ɵɵpipeBind2(2, 8, item_r6.link || "javascript:void(0)", "resource"), i0__namespace.ɵɵsanitizeUrl);
        i0__namespace.ɵɵattribute("aria-label", item_r6.label)("aria-current", item_r6.active ? "page" : null);
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("ngClass", item_r6.icon);
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵtextInterpolate(item_r6.label);
    } }
    function MobileTabbarComponent_ul_8_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelementStart(0, "ul", 10);
        i0__namespace.ɵɵtemplate(1, MobileTabbarComponent_ul_8_li_1_Template, 6, 13, "li", 11);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(2, _c2, ctx_r2.menutype === ctx_r2.thumbnail));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngForOf", ctx_r2.tabItems);
    } }
    const DEFAULT_CLS = 'app-tabbar app-top-nav';
    const WIDGET_CONFIG = { widgetType: 'wm-mobile-tabbar', hostClass: DEFAULT_CLS };
    class MobileTabbarComponent extends i3.StylableComponent {
        static { this.initializeProps = registerProps(); }
        constructor(page, inj, binditemlabel, binditemicon, binditemlink, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
            this.page = page;
            this.binditemlabel = binditemlabel;
            this.binditemicon = binditemicon;
            this.binditemlink = binditemlink;
            this.tabItems = [];
            this.layout = {};
            this.showMoreMenu = false;
            this._layouts = [
                { minwidth: 2048, max: 12 },
                { minwidth: 1024, max: 10 },
                { minwidth: 768, max: 7 },
                { minwidth: 480, max: 5 },
                { minwidth: 0, max: 4 }
            ];
            i3.styler(this.nativeElement, this);
            page.notify('wmMobileTabbar:ready', this);
            this.tabItems = this.getDefaultItems();
        }
        onPropertyChange(key, nv, ov) {
            if (key === 'dataset') {
                if (nv) {
                    this.tabItems = this.getTabItems(nv);
                }
                else {
                    this.tabItems = this.getDefaultItems();
                }
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        getDefaultItems() {
            return [{
                    'label': 'Home',
                    'icon': 'wm-sl-r sl-home'
                }, {
                    'label': 'Analytics',
                    'icon': 'wm-sl-r sl-graph-ascend'
                }, {
                    'label': 'Alerts',
                    'icon': 'wm-sl-r sl-alarm-bell'
                }, {
                    'label': 'Settings',
                    'icon': 'wm-sl-r sl-settings'
                }];
        }
        ngAfterViewInit() {
            setTimeout(() => {
                this.layout = this.getSuitableLayout();
                $(window).on('resize.tabbar', lodashEs.debounce(() => this.layout = this.getSuitableLayout(), 20));
            });
            super.ngAfterViewInit();
        }
        ngOnDestroy() {
            $(window).off('.tabbar');
            super.ngOnDestroy();
        }
        // triggered on item selection
        onItemSelect($event, selectedItem) {
            this.invokeEventCallback('select', { $event, $item: selectedItem.value || selectedItem.label });
        }
        getItems(itemArray) {
            return itemArray.map(item => ({
                label: item,
                icon: 'wi wi-' + item
            }));
        }
        getSuitableLayout() {
            const avaiableWidth = $(this.nativeElement).parent().width();
            return this._layouts.find(l => avaiableWidth >= l.minwidth);
        }
        getTabItems(value) {
            if (lodashEs.isArray(value)) {
                if (lodashEs.isObject(value[0])) {
                    return value.map(item => {
                        const link = i3.getEvaluatedData(item, { field: this.itemlink, 'bindExpression': this.binditemlink }, this.viewParent) || item.link;
                        const activePageName = window.location.hash.substr(2);
                        return {
                            label: i3.getEvaluatedData(item, { field: this.itemlabel, bindExpression: this.binditemlabel }, this.viewParent) || item.label,
                            icon: i3.getEvaluatedData(item, { field: this.itemicon, bindExpression: this.binditemicon }, this.viewParent) || item.icon,
                            link: link,
                            active: lodashEs.includes([activePageName, '#' + activePageName, '#/' + activePageName], link)
                        };
                    });
                }
                else {
                    return this.getItems(value);
                }
            }
            else if (lodashEs.isString(value)) {
                return this.getItems(value.split(','));
            }
        }
        static { this.ɵfac = function MobileTabbarComponent_Factory(t) { return new (t || MobileTabbarComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace.PageDirective), i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('itemlabel.bind'), i0__namespace.ɵɵinjectAttribute('itemicon.bind'), i0__namespace.ɵɵinjectAttribute('itemlink.bind'), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: MobileTabbarComponent, selectors: [["div", "wmMobileTabbar", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    i3.provideAsWidgetRef(MobileTabbarComponent)
                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 9, vars: 12, consts: [[1, "navbar", "navbar-default"], [1, "tab-items", "nav", "navbar-nav"], ["class", "tab-item", 3, "hidden", 4, "ngFor", "ngForOf"], [1, "menu-items", "dropdown", 3, "ngClass"], ["href", "javascript:void(0)", "role", "link", "aria-label", "More options", 3, "click"], ["aria-hidden", "true"], ["class", "dropdown-menu dropdown-menu-right", 3, "ngClass", 4, "ngIf"], [1, "tab-item"], ["role", "link", 3, "click", "href"], ["aria-hidden", "true", 1, "app-icon", 3, "ngClass"], [1, "dropdown-menu", "dropdown-menu-right", 3, "ngClass"], ["role", "menuitem", "class", "menu-item", 3, "hidden", 4, "ngFor", "ngForOf"], ["role", "menuitem", 1, "menu-item"], ["role", "link", 1, "dropdown-item", 3, "click", "ngClass", "href"]], template: function MobileTabbarComponent_Template(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵelementStart(0, "nav", 0)(1, "ul", 1);
                i0__namespace.ɵɵtemplate(2, MobileTabbarComponent_li_2_Template, 6, 12, "li", 2);
                i0__namespace.ɵɵelementStart(3, "li", 3)(4, "a", 4);
                i0__namespace.ɵɵlistener("click", function MobileTabbarComponent_Template_a_click_4_listener() { return ctx.showMoreMenu = !ctx.showMoreMenu; });
                i0__namespace.ɵɵelement(5, "i", 5);
                i0__namespace.ɵɵelementStart(6, "label");
                i0__namespace.ɵɵtext(7);
                i0__namespace.ɵɵelementEnd()();
                i0__namespace.ɵɵtemplate(8, MobileTabbarComponent_ul_8_Template, 2, 4, "ul", 6);
                i0__namespace.ɵɵelementEnd()()();
            } if (rf & 2) {
                i0__namespace.ɵɵadvance(2);
                i0__namespace.ɵɵproperty("ngForOf", ctx.tabItems);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵclassProp("hidden", ctx.tabItems.length <= ctx.layout.max);
                i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c1, ctx.position === ctx.bottom));
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵattribute("aria-expanded", ctx.showMoreMenu);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx.morebuttoniconclass, "");
                i0__namespace.ɵɵadvance(2);
                i0__namespace.ɵɵtextInterpolate(ctx.morebuttonlabel);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.showMoreMenu);
            } }, dependencies: [i2__namespace.NgClass, i2__namespace.NgForOf, i2__namespace.NgIf, i3__namespace.TrustAsPipe], encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MobileTabbarComponent, [{
            type: i0.Component,
            args: [{ selector: 'div[wmMobileTabbar]', providers: [
                        i3.provideAsWidgetRef(MobileTabbarComponent)
                    ], template: "<nav class=\"navbar navbar-default\">\n    <ul class=\"tab-items nav navbar-nav\">\n        <li class=\"tab-item\" *ngFor=\"let item of tabItems; index as i\" [class.hidden]=\"!(tabItems.length === layout.max || i < layout.max)\" >\n            <a [class.active]=\"item.active\" [href]=\"(item.link || 'javascript:void(0)')| trustAs: 'resource'\" (click)=\"onItemSelect($event, item)\" role=\"link\" [attr.aria-label]=\"item.label\" [attr.aria-current]=\"item.active ? 'page' : null\">\n                <i class=\"app-icon\" [ngClass]=\"item.icon\" aria-hidden=\"true\"></i><label>{{item.label}}</label>\n            </a>\n        </li>\n        <li class=\"menu-items dropdown\" [class.hidden]=\"tabItems.length <= layout.max\" [ngClass]=\"{dropup : position === bottom}\">\n            <a (click)=\"showMoreMenu = !showMoreMenu\" href=\"javascript:void(0)\" role=\"link\"  aria-label=\"More options\" [attr.aria-expanded]=\"showMoreMenu\">\n                <i class=\"app-icon {{morebuttoniconclass}}\" aria-hidden=\"true\"></i><label>{{morebuttonlabel}}</label>\n            </a>\n            <ul class=\"dropdown-menu dropdown-menu-right\" [ngClass]=\"{'nav navbar-nav' : menutype === thumbnail}\" *ngIf=\"showMoreMenu\">\n                <li role=\"menuitem\" class=\"menu-item\" *ngFor=\"let item of tabItems;index as i\" [class.hidden]=\"i < layout.max\">\n                    <a [ngClass]=\"{active : item.active}\" [href]=\"(item.link || 'javascript:void(0)')| trustAs: 'resource'\" (click)=\"onItemSelect($event, item)\" class=\"dropdown-item\" role=\"link\"  [attr.aria-label]=\"item.label\" [attr.aria-current]=\"item.active ? 'page' : null\">\n                        <i class=\"app-icon\" [ngClass]=\"item.icon\" aria-hidden=\"true\"></i><label>{{item.label}}</label>\n                    </a>\n                </li>\n            </ul>\n        </li>\n    </ul>\n</nav>\n" }]
        }], () => [{ type: i1__namespace.PageDirective }, { type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Attribute,
                    args: ['itemlabel.bind']
                }] }, { type: undefined, decorators: [{
                    type: i0.Attribute,
                    args: ['itemicon.bind']
                }] }, { type: undefined, decorators: [{
                    type: i0.Attribute,
                    args: ['itemlink.bind']
                }] }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(MobileTabbarComponent, { className: "MobileTabbarComponent", filePath: "tabbar.component.ts", lineNumber: 27 }); })();

    const components = [
        MobileTabbarComponent
    ];
    class TabBarModule {
        static { this.ɵfac = function TabBarModule_Factory(t) { return new (t || TabBarModule)(); }; }
        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: TabBarModule }); }
        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i2.CommonModule,
                i3.WmComponentsModule] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TabBarModule, [{
            type: i0.NgModule,
            args: [{
                    imports: [
                        i2.CommonModule,
                        i3.WmComponentsModule
                    ],
                    declarations: [...components],
                    exports: [...components]
                }]
        }], null, null); })();
    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(TabBarModule, { declarations: [MobileTabbarComponent], imports: [i2.CommonModule,
            i3.WmComponentsModule], exports: [MobileTabbarComponent] }); })();

    exports.MobileTabbarComponent = MobileTabbarComponent;
    exports.TabBarModule = TabBarModule;

}));
