import { Component, ElementRef, Injector, ViewEncapsulation, forwardRef } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { Subscription } from 'rxjs';
import { OTranslatePipe } from '../../pipes/o-translate.pipe';
import { AppMenuService } from '../../services/app-menu.service';
import { PermissionsService } from '../../services/permissions/permissions.service';
import { OTranslateService } from '../../services/translate/o-translate.service';
import { Util } from '../../util/util';
import { OBarMenuBase } from './o-bar-menu-base.class';
import { OBarMenuNestedComponent } from './menu-nested/o-bar-menu-nested.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/toolbar";
import * as i2 from "@angular/material/icon";
export const DEFAULT_INPUTS_O_BAR_MENU = [
    'menuTitle: title',
    'tooltip',
];
export class OBarMenuComponent {
    constructor(elRef, injector) {
        this.elRef = elRef;
        this.injector = injector;
        this.subscription = new Subscription();
        this.id = 'm_' + String((new Date()).getTime() + Util.randomNumber().toString());
        this.permissionsService = this.injector.get(PermissionsService);
        this.translateService = this.injector.get(OTranslateService);
        this.appMenuService = this.injector.get(AppMenuService);
        this.subscription.add(this.appMenuService.onPermissionMenuChanged.subscribe(() => this.refreshMenuRoots()));
        this.menuRoots = this.appMenuService.getMenuRoots();
    }
    ngOnInit() {
        if (!this.tooltip) {
            this.tooltip = this.menuTitle;
        }
        if (this.translateService) {
            this.translateService.onLanguageChanged.subscribe(() => {
                this.setDOMTitle();
            });
            this.setDOMTitle();
        }
    }
    setDOMTitle() {
        const tooltip = this.translateService.get(this.tooltip);
        this.elRef.nativeElement.setAttribute('title', tooltip);
    }
    collapseAll() {
        const inputs = this.elRef.nativeElement.querySelectorAll('input');
        if (inputs) {
            inputs.forEach(element => {
                element.checked = false;
            });
        }
        const fakeLis = this.elRef.nativeElement.querySelectorAll('.fake-li-hover');
        if (fakeLis) {
            fakeLis.forEach(element => {
                element.classList.remove('fake-li-hover');
            });
        }
    }
    getPermissionsService() {
        return this.permissionsService;
    }
    get menuTitle() {
        return this._menuTitle;
    }
    set menuTitle(val) {
        this._menuTitle = val;
    }
    get tooltip() {
        return this._tooltip;
    }
    set tooltip(val) {
        this._tooltip = val;
    }
    get id() {
        return this._id;
    }
    set id(val) {
        this._id = val;
    }
    get menuItems() {
        return this.menuRoots;
    }
    refreshMenuRoots() {
        this.menuRoots = [...this.appMenuService.getMenuRoots()];
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OBarMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OBarMenuComponent, isStandalone: true, selector: "o-bar-menu", inputs: { menuTitle: ["title", "menuTitle"], tooltip: "tooltip" }, host: { properties: { "class.o-bar-menu": "true" } }, providers: [{ provide: OBarMenuBase, useExisting: forwardRef(() => OBarMenuComponent) }], ngImport: i0, template: "<mat-toolbar color=\"primary\">\n  <nav>\n    <mat-icon class=\"mat-24 menu-icon toggle\" (click)=\"input.checked = !input.checked\">menu</mat-icon>\n    <label [attr.for]=\"id\" class=\"toggle title-label\">{{ menuTitle | oTranslate }}</label>\n    <input #input [attr.id]=\"id\" type=\"checkbox\" />\n    <div class=\"fake-ul mat-primary menu\">\n      <ng-container>\n        <o-bar-menu-nested [items]=\"menuItems\"></o-bar-menu-nested>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n  </nav>\n</mat-toolbar>", styles: [".o-bar-menu .toggle,.o-bar-menu input{display:none}.o-bar-menu nav{margin:0;padding:0}.o-bar-menu nav:after{content:\"\";display:table;clear:both}.o-bar-menu nav .fake-li a{cursor:pointer}.o-bar-menu nav .fake-ul{float:right;padding:0;margin:0;list-style:none;position:relative}.o-bar-menu nav .fake-ul.menu>.o-bar-menu-item .o-bar-menu-item-title{top:0;padding-left:0}.o-bar-menu nav .fake-ul .fake-li{margin:0;display:inline-block}.o-bar-menu nav .fake-ul .fake-ul{display:none;position:absolute;top:60px}.o-bar-menu nav .fake-ul .fake-ul .fake-li{min-width:250px;width:250px;float:none;display:list-item;position:relative;white-space:nowrap}.o-bar-menu nav .fake-ul .fake-ul .fake-ul{top:0}.o-bar-menu nav .fake-ul .fake-ul .fake-ul .fake-li{position:relative;top:0;left:0}.o-bar-menu nav a{display:flex;align-items:center;padding:0 20px;font-size:20px;line-height:60px;text-decoration:none}.o-bar-menu .fake-li>a:only-child:after{content:\"\"}@media all and (min-width: 768px){.o-bar-menu nav .fake-ul .fake-li-hover>.fake-ul{display:inline-block;z-index:1000}.o-bar-menu nav .fake-ul .fake-ul .fake-li-hover>.fake-ul{display:inline-block;z-index:1000;left:250px}}@media all and (max-width: 767px){.o-bar-menu .mat-toolbar{height:auto!important}.o-bar-menu nav{margin:10px 0;width:100%}.o-bar-menu nav .o-bar-menu-group,.o-bar-menu nav .o-bar-menu-item,.o-bar-menu nav .o-bar-menu-separator,.o-bar-menu nav .o-locale-bar-menu-item{display:flex}.o-bar-menu nav .o-bar-menu-group .mat-mdc-list-item,.o-bar-menu nav .o-bar-menu-item .mat-mdc-list-item,.o-bar-menu nav .o-bar-menu-separator .mat-mdc-list-item,.o-bar-menu nav .o-locale-bar-menu-item .mat-mdc-list-item{display:flex;justify-content:flex-start;align-items:center}.o-bar-menu nav .fake-ul{width:100%}.o-bar-menu nav .fake-ul .fake-li{width:100%}.o-bar-menu nav .fake-ul .fake-ul{float:none;position:static;width:100%}.o-bar-menu nav .fake-ul .fake-ul .fake-li{padding-left:20px;width:100%}.o-bar-menu nav .fake-ul .fake-ul .mat-elevation-z4{box-shadow:none}.o-bar-menu .toggle{display:inline-block;padding:0 20px;font-size:20px;line-height:60px;text-decoration:none;border:none;cursor:pointer}.o-bar-menu .toggle+a{display:none!important}.o-bar-menu .menu{display:none;float:left!important}.o-bar-menu label.title-label{display:inline-block}.o-bar-menu .mat-icon.menu-icon{vertical-align:middle;display:inline-block;line-height:1;padding:0 4px}.o-bar-menu input:checked+.fake-ul{display:block}}@media all and (max-width: 330px){.o-bar-menu nav .fake-ul .fake-li{width:94%}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }, { kind: "component", type: OBarMenuNestedComponent, selector: "o-bar-menu-nested", inputs: ["items"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OBarMenuComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [MatToolbarModule, MatIconModule, OTranslatePipe, OBarMenuNestedComponent], selector: 'o-bar-menu', inputs: DEFAULT_INPUTS_O_BAR_MENU, encapsulation: ViewEncapsulation.None, host: {
                        '[class.o-bar-menu]': 'true'
                    }, providers: [{ provide: OBarMenuBase, useExisting: forwardRef(() => OBarMenuComponent) }], template: "<mat-toolbar color=\"primary\">\n  <nav>\n    <mat-icon class=\"mat-24 menu-icon toggle\" (click)=\"input.checked = !input.checked\">menu</mat-icon>\n    <label [attr.for]=\"id\" class=\"toggle title-label\">{{ menuTitle | oTranslate }}</label>\n    <input #input [attr.id]=\"id\" type=\"checkbox\" />\n    <div class=\"fake-ul mat-primary menu\">\n      <ng-container>\n        <o-bar-menu-nested [items]=\"menuItems\"></o-bar-menu-nested>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n  </nav>\n</mat-toolbar>", styles: [".o-bar-menu .toggle,.o-bar-menu input{display:none}.o-bar-menu nav{margin:0;padding:0}.o-bar-menu nav:after{content:\"\";display:table;clear:both}.o-bar-menu nav .fake-li a{cursor:pointer}.o-bar-menu nav .fake-ul{float:right;padding:0;margin:0;list-style:none;position:relative}.o-bar-menu nav .fake-ul.menu>.o-bar-menu-item .o-bar-menu-item-title{top:0;padding-left:0}.o-bar-menu nav .fake-ul .fake-li{margin:0;display:inline-block}.o-bar-menu nav .fake-ul .fake-ul{display:none;position:absolute;top:60px}.o-bar-menu nav .fake-ul .fake-ul .fake-li{min-width:250px;width:250px;float:none;display:list-item;position:relative;white-space:nowrap}.o-bar-menu nav .fake-ul .fake-ul .fake-ul{top:0}.o-bar-menu nav .fake-ul .fake-ul .fake-ul .fake-li{position:relative;top:0;left:0}.o-bar-menu nav a{display:flex;align-items:center;padding:0 20px;font-size:20px;line-height:60px;text-decoration:none}.o-bar-menu .fake-li>a:only-child:after{content:\"\"}@media all and (min-width: 768px){.o-bar-menu nav .fake-ul .fake-li-hover>.fake-ul{display:inline-block;z-index:1000}.o-bar-menu nav .fake-ul .fake-ul .fake-li-hover>.fake-ul{display:inline-block;z-index:1000;left:250px}}@media all and (max-width: 767px){.o-bar-menu .mat-toolbar{height:auto!important}.o-bar-menu nav{margin:10px 0;width:100%}.o-bar-menu nav .o-bar-menu-group,.o-bar-menu nav .o-bar-menu-item,.o-bar-menu nav .o-bar-menu-separator,.o-bar-menu nav .o-locale-bar-menu-item{display:flex}.o-bar-menu nav .o-bar-menu-group .mat-mdc-list-item,.o-bar-menu nav .o-bar-menu-item .mat-mdc-list-item,.o-bar-menu nav .o-bar-menu-separator .mat-mdc-list-item,.o-bar-menu nav .o-locale-bar-menu-item .mat-mdc-list-item{display:flex;justify-content:flex-start;align-items:center}.o-bar-menu nav .fake-ul{width:100%}.o-bar-menu nav .fake-ul .fake-li{width:100%}.o-bar-menu nav .fake-ul .fake-ul{float:none;position:static;width:100%}.o-bar-menu nav .fake-ul .fake-ul .fake-li{padding-left:20px;width:100%}.o-bar-menu nav .fake-ul .fake-ul .mat-elevation-z4{box-shadow:none}.o-bar-menu .toggle{display:inline-block;padding:0 20px;font-size:20px;line-height:60px;text-decoration:none;border:none;cursor:pointer}.o-bar-menu .toggle+a{display:none!important}.o-bar-menu .menu{display:none;float:left!important}.o-bar-menu label.title-label{display:inline-block}.o-bar-menu .mat-icon.menu-icon{vertical-align:middle;display:inline-block;line-height:1;padding:0 4px}.o-bar-menu input:checked+.fake-ul{display:block}}@media all and (max-width: 330px){.o-bar-menu nav .fake-ul .fake-li{width:94%}}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }] });
//# sourceMappingURL=data:application/json;base64, 