import { ViewChild } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/material/toolbar";
import * as i4 from "@angular/material/button";
import * as i5 from "@angular/material/badge";
import * as i6 from "../button/button";
export class QmsAppBarComponent {
    constructor() {
        // nomal style
        this.isNomalType = false;
        this.leftFirstIcon = 'keyboard_backspace';
        this.onClickLeftFirstIconEvent = new EventEmitter();
        this.onCancelEvent = new EventEmitter();
        this.onConfirmEvent = new EventEmitter();
        this.rightIcons = [];
        this.notifications = 0;
        this.onMenuClickedEvent = new EventEmitter();
        this.onRightIconClickedEvent = new EventEmitter();
    }
    ngOnInit() {
    }
    onCancel() {
        this.onCancelEvent.emit();
    }
    onClickLeftFirstIcon() {
        this.onClickLeftFirstIconEvent.emit();
    }
    onConfirm() {
        this.onConfirmEvent.emit();
    }
    onMenuClicked() {
        this.onMenuClickedEvent.emit();
    }
    onRightIconClicked(icon) {
        this.onRightIconClickedEvent.emit(icon);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsAppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsAppBarComponent, selector: "app-qms-app-bar", inputs: { isNomalType: "isNomalType", leftFirstIcon: "leftFirstIcon", title: "title", cancelTitle: "cancelTitle", confirmTitle: "confirmTitle", disabledConfirmAction: "disabledConfirmAction", hideMenuDropdown: "hideMenuDropdown", logoSvgPath: "logoSvgPath", imgSvgPath: "imgSvgPath", isImgSvgTransparent: "isImgSvgTransparent", rightIcons: "rightIcons", notifications: "notifications" }, outputs: { onClickLeftFirstIconEvent: "onClickLeftFirstIconEvent", onCancelEvent: "onCancelEvent", onConfirmEvent: "onConfirmEvent", onMenuClickedEvent: "onMenuClickedEvent", onRightIconClickedEvent: "onRightIconClickedEvent" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"qms-app-bar-container\">\n    <mat-toolbar class=\"bar-container\" *ngIf=\"!isNomalType\">\n        <span class=\"w-100\">\n            <span class=\"col-4 d-inline-flex align-items-lg-center\">\n                <div *ngIf=\"hideMenuDropdown\" class=\"border align-self-center\">\n                    <div *ngIf=\"logoSvgPath\" class=\"logo-container\">\n                        <img [src]=\"logoSvgPath\" alt=\"\" />\n                    </div>\n                </div>\n                <div *ngIf=\"!hideMenuDropdown\">\n                    <button #menu class=\"collapse-icon\" mat-button>\n                        <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onMenuClicked()\">\n                            menu\n                        </mat-icon>\n                    </button>\n                    <img [src]=\"logoSvgPath\" alt=\"\" />\n                </div>\n                <div class=\"pr-8\"></div>\n                <span class=\"content-title\">{{title}}</span>\n                <div class=\"spacer\"></div>\n            </span>\n            <span class=\"align-items-sm-center col-4 d-inline-flex justify-content-center\">\n                <div *ngIf=\"imgSvgPath\" class=\"img-container\" [class.bg-transparent]=\"isImgSvgTransparent\">\n                    <img [src]=\"imgSvgPath\" alt=\"\" />\n                </div>\n            </span>\n            <span class=\"col-4 d-inline-flex justify-content-end right-icon\">\n                <button (click)=\"onRightIconClicked(item.icon)\" *ngFor=\"let item of rightIcons\" class=\"menu-item-icon\"\n                    mat-button>\n                    <mat-icon *ngIf=\"item.icon == 'notifications_none'\" matBadge=\"{{notifications}}\"\n                        matBadgeColor=\"warn\">\n                        {{item.icon}}\n                    </mat-icon>\n                    <mat-icon *ngIf=\"item.icon != 'notifications_none'\"\n                        class=\"material-icons-outlined mat-icon-rtl-mirror\">\n                        {{item.icon}}\n                    </mat-icon>\n                    <span class=\"mg-l-3\">{{item.tooltip}}</span>\n                </button>\n            </span>\n        </span>\n    </mat-toolbar>\n    <mat-toolbar class=\"bar-prv-container\" *ngIf=\"isNomalType\">\n        <button class=\"icon-title\" #menu qms-btn-text (click)=\"onClickLeftFirstIcon()\">\n            <mat-icon class=\"cusor-pointer\">\n                {{leftFirstIcon}}\n            </mat-icon>\n        </button>\n        <span class=\"content-title\">{{title}}</span>\n        <div class=\"spacer\"></div>\n        <div class=\"right-content\">\n            <button qms-btn-text (click)=\"onCancel()\" class=\"cusor-pointer mr-10\" *ngIf=\"cancelTitle\">\n                {{cancelTitle}}\n            </button>\n            <button qms-btn [disabled]=\"disabledConfirmAction\" class=\"cusor-pointer\" (click)=\"onConfirm()\" *ngIf=\"confirmTitle\">\n                {{confirmTitle}}\n            </button>\n        </div>\n    </mat-toolbar>\n</div>", styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content button{line-height:16px!important}.qms-app-bar-container .bar-prv-container .right-content .mr-10{margin-right:10px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:#00000014}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%;margin-right:11px}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0px;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}.qms-app-bar-container .bar-container .right-icon button:last-child{min-width:unset!important}.qms-app-bar-container .bar-container ::ng-deep .mat-badge-warn .mat-badge-content{background-color:#9e360f!important}.qms-app-bar-container .bar-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0px;text-align:left;color:#fff}.qms-app-bar-container .pr-8{padding-right:8px}\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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6.QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsAppBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-qms-app-bar', template: "<div class=\"qms-app-bar-container\">\n    <mat-toolbar class=\"bar-container\" *ngIf=\"!isNomalType\">\n        <span class=\"w-100\">\n            <span class=\"col-4 d-inline-flex align-items-lg-center\">\n                <div *ngIf=\"hideMenuDropdown\" class=\"border align-self-center\">\n                    <div *ngIf=\"logoSvgPath\" class=\"logo-container\">\n                        <img [src]=\"logoSvgPath\" alt=\"\" />\n                    </div>\n                </div>\n                <div *ngIf=\"!hideMenuDropdown\">\n                    <button #menu class=\"collapse-icon\" mat-button>\n                        <mat-icon class=\"mat-icon-rtl-mirror\" (click)=\"onMenuClicked()\">\n                            menu\n                        </mat-icon>\n                    </button>\n                    <img [src]=\"logoSvgPath\" alt=\"\" />\n                </div>\n                <div class=\"pr-8\"></div>\n                <span class=\"content-title\">{{title}}</span>\n                <div class=\"spacer\"></div>\n            </span>\n            <span class=\"align-items-sm-center col-4 d-inline-flex justify-content-center\">\n                <div *ngIf=\"imgSvgPath\" class=\"img-container\" [class.bg-transparent]=\"isImgSvgTransparent\">\n                    <img [src]=\"imgSvgPath\" alt=\"\" />\n                </div>\n            </span>\n            <span class=\"col-4 d-inline-flex justify-content-end right-icon\">\n                <button (click)=\"onRightIconClicked(item.icon)\" *ngFor=\"let item of rightIcons\" class=\"menu-item-icon\"\n                    mat-button>\n                    <mat-icon *ngIf=\"item.icon == 'notifications_none'\" matBadge=\"{{notifications}}\"\n                        matBadgeColor=\"warn\">\n                        {{item.icon}}\n                    </mat-icon>\n                    <mat-icon *ngIf=\"item.icon != 'notifications_none'\"\n                        class=\"material-icons-outlined mat-icon-rtl-mirror\">\n                        {{item.icon}}\n                    </mat-icon>\n                    <span class=\"mg-l-3\">{{item.tooltip}}</span>\n                </button>\n            </span>\n        </span>\n    </mat-toolbar>\n    <mat-toolbar class=\"bar-prv-container\" *ngIf=\"isNomalType\">\n        <button class=\"icon-title\" #menu qms-btn-text (click)=\"onClickLeftFirstIcon()\">\n            <mat-icon class=\"cusor-pointer\">\n                {{leftFirstIcon}}\n            </mat-icon>\n        </button>\n        <span class=\"content-title\">{{title}}</span>\n        <div class=\"spacer\"></div>\n        <div class=\"right-content\">\n            <button qms-btn-text (click)=\"onCancel()\" class=\"cusor-pointer mr-10\" *ngIf=\"cancelTitle\">\n                {{cancelTitle}}\n            </button>\n            <button qms-btn [disabled]=\"disabledConfirmAction\" class=\"cusor-pointer\" (click)=\"onConfirm()\" *ngIf=\"confirmTitle\">\n                {{confirmTitle}}\n            </button>\n        </div>\n    </mat-toolbar>\n</div>", styles: [".qms-app-bar-container{height:56px}.qms-app-bar-container .spacer{flex:1 1 auto}.qms-app-bar-container .mat-toolbar{background:#00324e;color:#fff;height:56px}.qms-app-bar-container .bar-prv-container{background:#e4e4e4}.qms-app-bar-container .bar-prv-container .close-icon,.qms-app-bar-container .bar-prv-container .title-icon{color:#323232}.qms-app-bar-container .bar-prv-container .right-content button{line-height:16px!important}.qms-app-bar-container .bar-prv-container .right-content .mr-10{margin-right:10px}.qms-app-bar-container .bar-prv-container button:first-child:hover{background-color:#00000014}.qms-app-bar-container .bar-prv-container .icon-title{color:#666;padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%;margin-right:11px}.qms-app-bar-container .bar-prv-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0px;text-align:left;color:#323232}.qms-app-bar-container .bar-container{padding:0!important}.qms-app-bar-container .bar-container .logo-container{background:#fff;padding:12px;height:56px}.qms-app-bar-container .bar-container .img-container{height:40px;background:#fff;padding:2px}.qms-app-bar-container .bar-container .bg-transparent{background:transparent;height:40px;padding:2px}.qms-app-bar-container .bar-container .right-icon button:last-child{min-width:unset!important}.qms-app-bar-container .bar-container ::ng-deep .mat-badge-warn .mat-badge-content{background-color:#9e360f!important}.qms-app-bar-container .bar-container .content-title{font-family:Raleway;font-size:18px;font-style:normal;font-weight:600;line-height:21px;letter-spacing:0px;text-align:left;color:#fff}.qms-app-bar-container .pr-8{padding-right:8px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { menu: [{
                type: ViewChild,
                args: ['menu', { static: true }]
            }], isNomalType: [{
                type: Input
            }], leftFirstIcon: [{
                type: Input
            }], title: [{
                type: Input
            }], cancelTitle: [{
                type: Input
            }], confirmTitle: [{
                type: Input
            }], disabledConfirmAction: [{
                type: Input
            }], onClickLeftFirstIconEvent: [{
                type: Output
            }], onCancelEvent: [{
                type: Output
            }], onConfirmEvent: [{
                type: Output
            }], hideMenuDropdown: [{
                type: Input
            }], logoSvgPath: [{
                type: Input
            }], imgSvgPath: [{
                type: Input
            }], isImgSvgTransparent: [{
                type: Input
            }], rightIcons: [{
                type: Input
            }], notifications: [{
                type: Input
            }], onMenuClickedEvent: [{
                type: Output
            }], onRightIconClickedEvent: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 