import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
import * as i3 from "angular-svg-icon";
import * as i4 from "@angular/material/button";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/menu";
import * as i7 from "@angular/material/tooltip";
import * as i8 from "@angular/material/toolbar";
import * as i9 from "../directives/material-elevation.directive";
export class ContentToolbarComponent {
    constructor() {
        this.toobarEnabled = true;
        this.toobarTitleIcon = "";
        this.toobarTitle = "";
        this.ToolbarItemClick = new EventEmitter();
    }
    ngOnInit() {
    }
    onToolbarItemClick(name, parameters) {
        this.ToolbarItemClick.emit({ name: name, parameters: parameters });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ContentToolbarComponent, selector: "mobicloud-content-toolbar", inputs: { toobarEnabled: "toobarEnabled", preToolbarItems: "preToolbarItems", toobarTitleIcon: "toobarTitleIcon", toobarTitle: "toobarTitle", toolbarItems: "toolbarItems" }, outputs: { ToolbarItemClick: "ToolbarItemClick" }, ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\" *ngIf=\"toobarEnabled\">\n  <mat-toolbar-row class=\"content-toolbar-row\">\n    <ng-container *ngIf=\"preToolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of preToolbarItems\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-pre-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n              <mat-icon svgIcon=\"{{toolbarItem.svg}}\" class=\"content-pre-toolbar-button-icon\"></mat-icon>\n          </button>\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>              \n      <div class=\"content-toolbar-title\">\n        <!-- <mat-icon svgIcon=\"{{toobarTitleIcon}}\" class=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></mat-icon> -->\n        <svg-icon [name]=\"toobarTitleIcon\" svgClass=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></svg-icon>\n        {{toobarTitle}}\n      </div>\n      \n      <ng-content></ng-content>\n    <span class=\"content-toolbar-divider\"></span>\n    \n    <ng-container *ngIf=\"toolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of toolbarItems\">\n        \n        <ng-container *ngIf=\"toolbarItem.children\">\n          <button aria-label=\"Button\" [matMenuTriggerFor]=\"toolbarChildMenu\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\"  matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n          <mat-menu #toolbarChildMenu>\n            <ng-container *ngFor=\"let childToolbarItem of toolbarItem.children\">\n              <button aria-label=\"button\" mat-menu-item [routerLink]=\"childToolbarItem.link ? childToolbarItem.link : null\" (click)=\"[childToolbarItem.click ? onToolbarItemClick(childToolbarItem.click, childToolbarItem.click_paramters) : null]\">\n                <mat-icon [svgIcon]=\"childToolbarItem.svg\" class=\"content-toolbar-menu-item-icon\"></mat-icon>\n                <span>{{childToolbarItem.caption}}</span>\n              </button>\n            </ng-container>\n          </mat-menu>\n        </ng-container>\n\n        <ng-container *ngIf=\"!toolbarItem.children\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n        </ng-container>\n\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>\n  </mat-toolbar-row>\n</mat-toolbar> ", styles: [".content-toolbar{background-color:transparent!important;min-height:32px!important;max-height:32px!important;margin-bottom:14px}.content-toolbar-row{padding:0}.content-pre-toolbar-button{background-color:transparent!important;width:32px;height:32px!important;min-width:unset!important;padding:0!important;margin-right:10px!important}.content-pre-toolbar-button-icon{margin-left:8px!important;width:20px!important;height:20px!important;fill:var(--default-toolbar-iconcolor-nobackground)}.content-toolbar-title{font-size:large;font-weight:600;color:var(--default-pagecaption-textcolor);display:flex;place-items:center}.content-toolbar-title-icon{height:20px;width:20px;margin-right:8px;padding:0!important;display:flex;fill:var(--default-pagecaption-iconcolor)}.content-toolbar-divider{flex:1 1 auto}.content-toolbar-button{background-color:var(--default-toolbar-iconcolor-withbackground)!important;width:32px;height:32px!important;min-width:unset!important;padding:0!important;margin-left:8px!important}.content-toolbar-button-icon{pointer-events:none;fill:var(--default-toolbar-iconcolor);width:16px;height:16px}.content-toolbar-menu-item-icon{fill:var(--default-popup-iconcolor)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i9.MaterialElevationDirective, selector: "[appMaterialElevation]", inputs: ["defaultElevation", "raisedElevation"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentToolbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mobicloud-content-toolbar', template: "<mat-toolbar class=\"content-toolbar\" *ngIf=\"toobarEnabled\">\n  <mat-toolbar-row class=\"content-toolbar-row\">\n    <ng-container *ngIf=\"preToolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of preToolbarItems\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-pre-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n              <mat-icon svgIcon=\"{{toolbarItem.svg}}\" class=\"content-pre-toolbar-button-icon\"></mat-icon>\n          </button>\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>              \n      <div class=\"content-toolbar-title\">\n        <!-- <mat-icon svgIcon=\"{{toobarTitleIcon}}\" class=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></mat-icon> -->\n        <svg-icon [name]=\"toobarTitleIcon\" svgClass=\"content-toolbar-title-icon\" *ngIf=\"toobarTitleIcon\"></svg-icon>\n        {{toobarTitle}}\n      </div>\n      \n      <ng-content></ng-content>\n    <span class=\"content-toolbar-divider\"></span>\n    \n    <ng-container *ngIf=\"toolbarItems\">            \n      <ng-container *ngFor=\"let toolbarItem of toolbarItems\">\n        \n        <ng-container *ngIf=\"toolbarItem.children\">\n          <button aria-label=\"Button\" [matMenuTriggerFor]=\"toolbarChildMenu\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\"  matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n          <mat-menu #toolbarChildMenu>\n            <ng-container *ngFor=\"let childToolbarItem of toolbarItem.children\">\n              <button aria-label=\"button\" mat-menu-item [routerLink]=\"childToolbarItem.link ? childToolbarItem.link : null\" (click)=\"[childToolbarItem.click ? onToolbarItemClick(childToolbarItem.click, childToolbarItem.click_paramters) : null]\">\n                <mat-icon [svgIcon]=\"childToolbarItem.svg\" class=\"content-toolbar-menu-item-icon\"></mat-icon>\n                <span>{{childToolbarItem.caption}}</span>\n              </button>\n            </ng-container>\n          </mat-menu>\n        </ng-container>\n\n        <ng-container *ngIf=\"!toolbarItem.children\">\n          <button aria-label=\"button\" mat-raised-button appMaterialElevation [routerLink]=\"toolbarItem.link ? toolbarItem.link : null\" (click)=\"[toolbarItem.click ? onToolbarItemClick(toolbarItem.click, toolbarItem.click_paramters) : null]\" class=\"content-toolbar-button\" matTooltip=\"{{toolbarItem.caption}}\">\n            <svg-icon name=\"{{toolbarItem.svg}}\" svgClass=\"content-toolbar-button-icon\" viewBox=\"0 0 48 48\"></svg-icon>\n          </button>\n        </ng-container>\n\n      </ng-container>\n      <!-- <mat-divider vertical style=\"height:100%\"></mat-divider> -->\n    </ng-container>\n  </mat-toolbar-row>\n</mat-toolbar> ", styles: [".content-toolbar{background-color:transparent!important;min-height:32px!important;max-height:32px!important;margin-bottom:14px}.content-toolbar-row{padding:0}.content-pre-toolbar-button{background-color:transparent!important;width:32px;height:32px!important;min-width:unset!important;padding:0!important;margin-right:10px!important}.content-pre-toolbar-button-icon{margin-left:8px!important;width:20px!important;height:20px!important;fill:var(--default-toolbar-iconcolor-nobackground)}.content-toolbar-title{font-size:large;font-weight:600;color:var(--default-pagecaption-textcolor);display:flex;place-items:center}.content-toolbar-title-icon{height:20px;width:20px;margin-right:8px;padding:0!important;display:flex;fill:var(--default-pagecaption-iconcolor)}.content-toolbar-divider{flex:1 1 auto}.content-toolbar-button{background-color:var(--default-toolbar-iconcolor-withbackground)!important;width:32px;height:32px!important;min-width:unset!important;padding:0!important;margin-left:8px!important}.content-toolbar-button-icon{pointer-events:none;fill:var(--default-toolbar-iconcolor);width:16px;height:16px}.content-toolbar-menu-item-icon{fill:var(--default-popup-iconcolor)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { toobarEnabled: [{
                type: Input
            }], preToolbarItems: [{
                type: Input
            }], toobarTitleIcon: [{
                type: Input
            }], toobarTitle: [{
                type: Input
            }], toolbarItems: [{
                type: Input
            }], ToolbarItemClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 