import * as i0 from '@angular/core';
import { Component, Attribute, Inject, Optional, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@wm/core';
import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, BaseComponent, getImageUrl, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
import * as i2 from '@wm/components/page';
import * as i5 from '@wm/components/basic/search';
import { SearchComponent, SearchModule } from '@wm/components/basic/search';
import * as i3 from '@wm/mobile/core';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';

const navbarProps = new Map([
    ['backbutton', { value: true, ...PROP_BOOLEAN }],
    ['backbuttoniconclass', { value: 'wi wi-back', ...PROP_STRING }],
    ['backbuttonlabel', { value: '', ...PROP_STRING }],
    ['backgroundattachment', PROP_STRING],
    ['backgroundcolor', PROP_STRING],
    ['backgroundgradient', PROP_STRING],
    ['backgroundimage', PROP_STRING],
    ['backgroundposition', PROP_STRING],
    ['backgroundrepeat', PROP_STRING],
    ['backgroundsize', PROP_STRING],
    ['class', PROP_STRING],
    ['datafield', { value: 'All Fields', ...PROP_STRING }],
    ['dataset', PROP_ANY],
    ['datasource', PROP_STRING],
    ['datavalue', PROP_STRING],
    ['debouncetime', { value: 250, ...PROP_NUMBER }],
    ['defaultview', PROP_STRING],
    ['displayimagesrc', PROP_STRING],
    ['displaylabel', PROP_STRING],
    ['imgsrc', PROP_STRING],
    ['query', { value: '', ...PROP_STRING }],
    ['leftnavpaneliconclass', { value: 'wm-sl-l sl-hamburger-menu', ...PROP_STRING }],
    ['matchmode', PROP_STRING],
    ['name', PROP_STRING],
    ['readonlySearchBar', PROP_BOOLEAN],
    ['searchbutton', { value: false, ...PROP_BOOLEAN }],
    ['searchbuttoniconclass', { value: 'wm-sl-l sl-search', ...PROP_STRING }],
    ['searchbuttonlabel', { value: '', ...PROP_STRING }],
    ['show', { value: true, ...PROP_BOOLEAN }],
    ['showLeftnavbtn', { value: true, ...PROP_BOOLEAN }],
    ['searchkey', PROP_STRING],
    ['searchplaceholder', { value: 'Search', ...PROP_STRING }],
    ['showSearchbar', PROP_BOOLEAN],
    ['title', PROP_STRING]
]);
const registerProps = () => {
    register('wm-mobile-navbar', navbarProps);
};

const _c0 = ["wmMobileNavbar", ""];
const _c1 = ["*"];
function MobileNavbarComponent_nav_0_li_3_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li")(1, "a", 18);
    i0.ɵɵlistener("click", function MobileNavbarComponent_nav_0_li_3_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.leftNavPanel.toggle()); });
    i0.ɵɵelement(2, "i", 5);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", ctx_r1.leftnavpaneliconclass);
} }
function MobileNavbarComponent_nav_0_li_4_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li")(1, "a", 19);
    i0.ɵɵlistener("click", function MobileNavbarComponent_nav_0_li_4_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.goBack($event)); });
    i0.ɵɵelement(2, "i", 5)(3, "span", 20);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", ctx_r1.backbuttoniconclass);
    i0.ɵɵadvance();
    i0.ɵɵproperty("innerText", ctx_r1.backbuttonlabel);
} }
function MobileNavbarComponent_nav_0_img_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "img", 21);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("alt", ctx_r1.title)("src", ctx_r1.imgsrc, i0.ɵɵsanitizeUrl);
} }
function MobileNavbarComponent_nav_0_li_14_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li")(1, "a", 22);
    i0.ɵɵlistener("click", function MobileNavbarComponent_nav_0_li_14_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.showSearchbar = true); });
    i0.ɵɵelement(2, "i", 5)(3, "span", 20);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", ctx_r1.searchbuttoniconclass);
    i0.ɵɵadvance();
    i0.ɵɵproperty("innerText", ctx_r1.searchbuttonlabel);
} }
function MobileNavbarComponent_nav_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "nav", 11)(1, "div", 2)(2, "ul", 3);
    i0.ɵɵtemplate(3, MobileNavbarComponent_nav_0_li_3_Template, 3, 1, "li", 12)(4, MobileNavbarComponent_nav_0_li_4_Template, 4, 2, "li", 12);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(5, "div", 13)(6, "div", 14)(7, "h1", 15);
    i0.ɵɵtemplate(8, MobileNavbarComponent_nav_0_img_8_Template, 1, 2, "img", 16);
    i0.ɵɵelement(9, "span", 17);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(10, "div", 8)(11, "ul", 9)(12, "li");
    i0.ɵɵprojection(13);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(14, MobileNavbarComponent_nav_0_li_14_Template, 4, 2, "li", 12);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngIf", ctx_r1.leftNavPanel);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.backbutton);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("ngIf", ctx_r1.imgsrc);
    i0.ɵɵadvance();
    i0.ɵɵproperty("innerText", ctx_r1.title || "");
    i0.ɵɵadvance(5);
    i0.ɵɵproperty("ngIf", ctx_r1.searchbutton);
} }
const DEFAULT_CLS = 'app-mobile-header app-mobile-navbar';
const WIDGET_CONFIG = { widgetType: 'wm-mobile-navbar', hostClass: DEFAULT_CLS };
class MobileNavbarComponent extends BaseComponent {
    static { this.initializeProps = registerProps(); }
    // getter setter is added to pass the datasource to searchcomponent.
    get datasource() {
        return this._datasource;
    }
    set datasource(nv) {
        this._datasource = nv;
        this.searchComponent.datasource = nv;
    }
    constructor(app, page, deviceService, navigationService, inj, backbtnClickEvt, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        this.page = page;
        this.deviceService = deviceService;
        this.navigationService = navigationService;
        this.backbtnClickEvt = backbtnClickEvt;
        this._isReady = false;
        page.subscribe('wmLeftPanel:ready', (leftNavPanel) => {
            if (this.showLeftnavbtn) {
                this.leftNavPanel = leftNavPanel;
            }
        });
        this._backBtnListenerDestroyer = deviceService.onBackButtonTap($event => {
            if (this._isReady) {
                if (this.backbtnClickEvt) {
                    this.invokeEventCallback('backbtnclick', { $event });
                    return false;
                }
            }
        });
        this.binddisplaylabel = this.nativeElement.getAttribute('displaylabel.bind');
        setTimeout(() => this._isReady = true, 1000);
    }
    ngAfterViewInit() {
        this.searchComponent.binddisplayimagesrc = this.binddisplayimagesrc;
        this.searchComponent.displayimagesrc = this.binddisplayimagesrc ? this.binddisplayimagesrc : this.displayimagesrc;
        this.searchComponent.displaylabel = this.displaylabel;
        this.searchComponent.binddisplaylabel = this.binddisplaylabel;
        this.searchComponent.datafield = this.datafield;
        this.searchComponent.binddataset = this.binddataset;
        this.searchComponent.dataset = this.dataset;
        this.searchComponent.searchkey = this.searchkey;
        this.searchComponent.datasource = this.datasource;
        this.searchComponent.matchmode = this.matchmode;
    }
    goBack($event) {
        /**
         * TODO: while trying navigating from details page to edit page in wavereads, app is navigating
         * as details -> editPage -> details. For now, keeping this callback to react after 1 second.
         */
        this.deviceService.executeBackTapListeners($event);
    }
    ngOnDestroy() {
        this._backBtnListenerDestroyer();
        super.ngOnDestroy();
    }
    onPropertyChange(key, nv, ov) {
        if (this.searchComponent) {
            if (key === 'datafield') {
                this.searchComponent.datafield = this.datafield;
            }
            if (key === 'displaylabel') {
                this.searchComponent.displaylabel = this.displaylabel;
            }
        }
        if (key === 'imgsrc') {
            this.imagesrc = getImageUrl(nv);
        }
        else if (key === 'dataset') {
            // $is._dataset = nv;
        }
        else if (key === 'defaultview') {
            this.showSearchbar = (nv === 'searchview');
        }
        else if (key === 'datavalue') {
            this.query = nv;
        }
        else {
            super.onPropertyChange(key, nv, ov);
        }
    }
    onSubmission($event) {
        this.invokeEventCallback('search', { $event });
    }
    // switches the view based on defaultview
    switchView(view) {
        this.showSearchbar = (view !== 'actionview');
    }
    // goto previous view or page
    goBacktoPreviousView($event) {
        if (this.defaultview === 'actionview') {
            // switches the view from search to action or action to search.
            this.switchView('actionview');
        }
        else {
            // goes back to the previous visited page.
            this.goBack($event);
        }
    }
    onSelect($event, widget, selectedValue) {
        this.datavalue = selectedValue;
        this.query = widget.query;
        this.invokeEventCallback('change', {
            $event,
            newVal: selectedValue,
            oldVal: widget.prevDatavalue
        });
    }
    onClear() {
        this.datavalue = '';
        this.query = '';
    }
    static { this.ɵfac = function MobileNavbarComponent_Factory(t) { return new (t || MobileNavbarComponent)(i0.ɵɵdirectiveInject(i1.App), i0.ɵɵdirectiveInject(i2.PageDirective), i0.ɵɵdirectiveInject(i3.DeviceService), i0.ɵɵdirectiveInject(i1.AbstractNavigationService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('backbtnclick.event'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileNavbarComponent, selectors: [["header", "wmMobileNavbar", ""]], viewQuery: function MobileNavbarComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(SearchComponent, 7);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchComponent = _t.first);
        } }, features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(MobileNavbarComponent)
            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c1, decls: 14, vars: 3, consts: [["class", "navbar", 4, "ngIf"], [1, "navbar", "searchbar", 3, "hidden"], [1, "mobile-navbar-left"], [1, "nav", "navbar-nav", "navbar-left"], ["type", "button", "href", "javascript:void(0);", "role", "button", "aria-label", "Back", 1, "btn-back", 3, "click"], [3, "ngClass"], [1, "mobile-navbar-center", "search-container"], ["wmSearch", "", "query.bind", "query", "clearsearch.event", "onClear();", "select.event", "onSelect($event, widget, selectedValue)", "searchkey.bind", "searchkey", "dataset.bind", "dataset", "displayimagesrc.bind", "displayimagesrc", "datavalue.bind", "datavalue", "submit.event", "onSubmission($event, widget, value)", "placeholder.bind", "searchplaceholder", "navsearchbar", "true", "readonly.bind", "readonlySearchBar"], [1, "mobile-navbar-right"], [1, "nav", "navbar-nav", "navbar-right"], ["type", "button", "href", "javascript: void(0);", "role", "button", "aria-label", "Cancel", 1, "btn-cancel", "btn-transparent", 3, "click"], [1, "navbar"], [4, "ngIf"], [1, "mobile-navbar-center"], [1, "navbar-header"], [1, "navbar-brand"], ["data-identifier", "img", "class", "brand-image", "width", "32", "height", "32", 3, "alt", "src", 4, "ngIf"], [1, "title", 3, "innerText"], ["role", "button", "href", "javascript: void(0);", "aria-label", "Menu", 3, "click"], ["type", "button", "role", "button", "href", "javascript: void(0);", "aria-label", "Back", 1, "btn-back", 3, "click"], [3, "innerText"], ["data-identifier", "img", "width", "32", "height", "32", 1, "brand-image", 3, "alt", "src"], ["type", "button", "href", "javascript: void(0);", "aria-label", "Search", 1, "btn-search", "btn-transparent", 3, "click"]], template: function MobileNavbarComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵtemplate(0, MobileNavbarComponent_nav_0_Template, 15, 5, "nav", 0);
            i0.ɵɵelementStart(1, "nav", 1)(2, "div", 2)(3, "ul", 3)(4, "li")(5, "a", 4);
            i0.ɵɵlistener("click", function MobileNavbarComponent_Template_a_click_5_listener($event) { return ctx.goBacktoPreviousView($event); });
            i0.ɵɵelement(6, "i", 5);
            i0.ɵɵelementEnd()()()();
            i0.ɵɵelementStart(7, "div", 6);
            i0.ɵɵelement(8, "div", 7);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(9, "div", 8)(10, "ul", 9)(11, "li")(12, "a", 10);
            i0.ɵɵlistener("click", function MobileNavbarComponent_Template_a_click_12_listener() { return ctx.showSearchbar = false; });
            i0.ɵɵtext(13, " Cancel ");
            i0.ɵɵelementEnd()()()()();
        } if (rf & 2) {
            i0.ɵɵproperty("ngIf", !ctx.showSearchbar);
            i0.ɵɵadvance();
            i0.ɵɵproperty("hidden", !ctx.showSearchbar);
            i0.ɵɵadvance(5);
            i0.ɵɵproperty("ngClass", ctx.backbuttoniconclass);
        } }, dependencies: [i4.NgClass, i4.NgIf, i5.SearchComponent], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MobileNavbarComponent, [{
        type: Component,
        args: [{ selector: 'header[wmMobileNavbar]', providers: [
                    provideAsWidgetRef(MobileNavbarComponent)
                ], template: "<nav class=\"navbar\" *ngIf=\"!showSearchbar\">\n    <div class=\"mobile-navbar-left\">\n        <ul class=\"nav navbar-nav navbar-left\">\n            <li *ngIf=\"leftNavPanel\" >\n                <a (click)=\"leftNavPanel.toggle();\" role=\"button\" href=\"javascript: void(0);\" aria-label=\"Menu\">\n                    <i [ngClass]=\"leftnavpaneliconclass\"></i>\n                    </a>\n                </li>\n            <li *ngIf=\"backbutton\">\n                <a class=\"btn-back\" type=\"button\" role=\"button\" (click)=\"goBack($event)\"  href=\"javascript: void(0);\" aria-label=\"Back\">\n                    <i [ngClass]=\"backbuttoniconclass\"></i><span [innerText]=\"backbuttonlabel\"></span>\n                </a>\n            </li>\n        </ul>\n    </div>\n    <div class=\"mobile-navbar-center\">\n        <div class=\"navbar-header\">\n            <h1 class=\"navbar-brand\">\n                <img data-identifier=\"img\" class=\"brand-image\" [alt]=\"title\" width=\"32\" height=\"32\" *ngIf=\"imgsrc\" [src]=\"imgsrc\"/>\n                <span class=\"title\" [innerText]=\"title || ''\"></span>\n            </h1>\n        </div>\n    </div>\n    <div class=\"mobile-navbar-right\">\n        <ul class=\"nav navbar-nav navbar-right\">\n            <li>\n                <ng-content></ng-content>\n            </li>\n            <li *ngIf=\"searchbutton\">\n                <a class=\"btn-search btn-transparent\" type=\"button\" (click)=\"showSearchbar = true\" href=\"javascript: void(0);\" aria-label=\"Search\">\n                    <i [ngClass]=\"searchbuttoniconclass\"></i><span [innerText]=\"searchbuttonlabel\"></span>\n                </a>\n            </li>\n        </ul>\n    </div>\n</nav>\n<nav class=\"navbar searchbar\" [hidden]=\"!showSearchbar\">\n    <div class=\"mobile-navbar-left\">\n        <ul class=\"nav navbar-nav navbar-left\">\n            <li>\n                <a class=\"btn-back\" type=\"button\" (click)=\"goBacktoPreviousView($event)\" href=\"javascript:void(0);\" role=\"button\" aria-label=\"Back\">\n                    <i [ngClass]=\"backbuttoniconclass\"></i>\n                </a>\n            </li>\n        </ul>\n    </div>\n    <div class=\"mobile-navbar-center search-container\">\n        <div wmSearch query.bind=\"query\"\n             clearsearch.event=\"onClear();\"\n             select.event=\"onSelect($event, widget, selectedValue)\"\n             searchkey.bind=\"searchkey\"\n             dataset.bind=\"dataset\"\n             displayimagesrc.bind=\"displayimagesrc\"\n             datavalue.bind=\"datavalue\"\n             submit.event=\"onSubmission($event, widget, value)\"\n             placeholder.bind=\"searchplaceholder\"\n             navsearchbar=\"true\"\n             readonly.bind=\"readonlySearchBar\">\n        </div>\n    </div>\n    <div class=\"mobile-navbar-right\">\n        <ul class=\"nav navbar-nav navbar-right\">\n            <li>\n                <a class=\"btn-cancel btn-transparent\" type=\"button\" (click)=\"showSearchbar = false;\"  href=\"javascript: void(0);\" role=\"button\" aria-label=\"Cancel\"> Cancel </a>\n            </li>\n        </ul>\n    </div>\n</nav>\n" }]
    }], () => [{ type: i1.App }, { type: i2.PageDirective }, { type: i3.DeviceService }, { type: i1.AbstractNavigationService }, { type: i0.Injector }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['backbtnclick.event']
            }] }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { searchComponent: [{
            type: ViewChild,
            args: [SearchComponent, { static: true }]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MobileNavbarComponent, { className: "MobileNavbarComponent", filePath: "mobile-navbar.component.ts", lineNumber: 22 }); })();

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

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

export { MobileNavbarComponent, MobileNavbarModule };
//# sourceMappingURL=index.mjs.map
