import { Component, Input } from '@angular/core';
import { ApiService } from '@c8y/ngx-components/api';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ActionService } from '../../action/action.service';
import { BreadcrumbService } from '../../breadcrumb/breadcrumb.service';
import { AppStateService } from '../../common/ui-state.service';
import { DocsService } from '../../docs/docs.service';
import { SearchService } from '../../search/search.service';
import { UserMenuService } from '../../user/user-menu.service';
import { HeaderService } from '../header.service';
import * as i0 from "@angular/core";
import * as i1 from "../header.service";
import * as i2 from "../../action/action.service";
import * as i3 from "../../breadcrumb/breadcrumb.service";
import * as i4 from "../../search/search.service";
import * as i5 from "../../common/ui-state.service";
import * as i6 from "../../user/user-menu.service";
import * as i7 from "../../docs/docs.service";
import * as i8 from "@c8y/ngx-components/api";
import * as i9 from "../../application/app-icon.component";
import * as i10 from "../../application/app-switcher.component";
import * as i11 from "../../search/search-outlet.component";
import * as i12 from "../../common/icon.directive";
import * as i13 from "@angular/common";
import * as i14 from "../../action/action-outlet.component";
import * as i15 from "../../breadcrumb/breadcrumb-outlet.component";
import * as i16 from "ngx-bootstrap/tooltip";
import * as i17 from "../../drawer/drawer-outlet/drawer-outlet.component";
import * as i18 from "../title/title-outlet.component";
import * as i19 from "../../i18n/c8y-translate.pipe";
import * as i20 from "../../common/shorten-user-name.pipe";
import * as i21 from "../../common/user-name-initials.pipe";
export class HeaderBarComponent {
    constructor(headerService, actionService, breadcrumbService, searchService, appState, userMenuService, docs, apiService) {
        this.headerService = headerService;
        this.actionService = actionService;
        this.breadcrumbService = breadcrumbService;
        this.searchService = searchService;
        this.appState = appState;
        this.userMenuService = userMenuService;
        this.docs = docs;
        this.apiService = apiService;
        this.canToggle$ = this.headerService.canToggleNavigator$;
        this.appState$ = this.appState.state$.asObservable();
        this.headerOpen = false;
        this.loadingClass$ = new Observable();
        this.showNotification$ = this.headerService.showNotification$;
        /**
         * Can be set to show an header bar with only
         * title, app-switcher and user-menu
         */
        this.simple = false;
        this.app$ = this.appState.currentApplication.pipe(filter(app => !!app));
        this.loadingClass$ = this.apiService.isLoading$.pipe(map(loading => ({ active: loading })));
    }
    ngAfterViewInit() {
        this.headerService.verifyIfNavOpen();
    }
    toggleDrawer() {
        this.headerService.toggleRightDrawer();
    }
    closeDrawer() {
        this.headerService.closeRightDrawer();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderBarComponent, deps: [{ token: i1.HeaderService }, { token: i2.ActionService }, { token: i3.BreadcrumbService }, { token: i4.SearchService }, { token: i5.AppStateService }, { token: i6.UserMenuService }, { token: i7.DocsService }, { token: i8.ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "component", type: i9.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: i10.AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "component", type: i11.SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "directive", type: i12.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i14.ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: i15.BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs"] }, { kind: "directive", type: i16.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i17.DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: i18.TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "pipe", type: i19.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i13.AsyncPipe, name: "async" }, { kind: "pipe", type: i20.ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: i21.UserNameInitialsPipe, name: "userNameInitials" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-header-bar', template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.HeaderService }, { type: i2.ActionService }, { type: i3.BreadcrumbService }, { type: i4.SearchService }, { type: i5.AppStateService }, { type: i6.UserMenuService }, { type: i7.DocsService }, { type: i8.ApiService }], propDecorators: { simple: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 