import { __decorate, __metadata } from "tslib";
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { combineLatest, filter, map } from 'rxjs';
import { PrimeIcons } from 'primeng/api';
import { AppStateService, UserService, ThemeService, ConfigurationService, CONFIG_KEY, } from '@onecx/angular-integration-interface';
import { MenuService } from '../../../services/app.menu.service';
import { ImageLogoUrlUtils } from '../../utils/image-logo-url.utils';
import { EventsPublisher } from '@onecx/integration-interface';
import { API_PREFIX } from '../../../api/constants';
import * as i0 from "@angular/core";
import * as i1 from "@onecx/angular-integration-interface";
import * as i2 from "../../../services/app.menu.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/router";
import * as i5 from "primeng/tooltip";
import * as i6 from "primeng/button";
import * as i7 from "primeng/ripple";
import * as i8 from "primeng/inputtext";
import * as i9 from "@onecx/angular-accelerator";
import * as i10 from "../../directives/autofocus.directive";
import * as i11 from "../user-avatar/user-avatar.component";
import * as i12 from "@ngx-translate/core";
let HeaderComponent = class HeaderComponent {
    constructor(config, menuService, themeService, userService, appStateService) {
        this.config = config;
        this.menuService = menuService;
        this.themeService = themeService;
        this.userService = userService;
        this.appStateService = appStateService;
        this.menuExpanded = false;
        this.favoritesDisabled = false;
        this.feedbackDisabled = false;
        this.supportTicketDisabled = false;
        this.searchDisabled = false;
        this.announcementHelpDisabled = false;
        this.passwordChangeDisabled = false;
        this.settingsDisabled = false;
        this.myRolesPermissionsDisabled = false;
        this.helpDisabled = false;
        this.helpEditorDisabled = false;
        this.userMenuItems = [];
        this.moreMenuItems = [];
        this.fallbackImg = false;
        this.menuButtonClick = new EventEmitter();
        this.topbarItemClick = new EventEmitter();
        this.openHelpPage = new EventEmitter();
        this.openHelpPageEditor = new EventEmitter();
        this.openFeedback = new EventEmitter();
        this.openAddToLaunchpad = new EventEmitter();
        this.openSupportTicket = new EventEmitter();
        this.searchClick = new EventEmitter();
        this.disableBreadcrumbs = false;
        this.fullPortalLayout = true;
        this.homeNavUrl = '/';
        this.homeNavTitle = 'Home';
        this.eventsPublisher$ = new EventsPublisher();
        this.currentUser$ = this.userService.profile$
            .pipe(untilDestroyed(this))
            .pipe(filter((x) => x !== undefined));
        this.logoUrl$ = combineLatest([
            this.themeService.currentTheme$.asObservable(),
            this.appStateService.currentPortal$.asObservable(),
        ]).pipe(map(([theme, portal]) => {
            return ImageLogoUrlUtils.createLogoUrl(API_PREFIX, theme.logoUrl || portal.logoUrl);
        }));
    }
    ngOnInit() {
        this.searchUrl = this.config.getProperty(CONFIG_KEY.TKIT_SEARCH_BASE_URL) || '/ops/enterprise-search';
        /* previous idea made by Matusz & Co => to be rethink later
            Use parameter management (MFE) to manipulate these config values
            Fallback are permission management?
          Trian's decision 10/2023
            First we use permissions only (auth service) => strong dependency between shell/mfe/auth!
        */
        /*
        this.favoritesDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_FAVORITES_DISABLED) === 'true'
        this.feedbackDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_FEEDBACK_DISABLED) === 'true'
        this.supportTicketDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_SUPPORT_TICKET_DISABLED) === 'true'
        this.searchDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_SEARCH_DISABLED) === 'true'
        this.announcementHelpDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_ANNOUNCEMENTS_DISABLED) === 'true'
        this.passwordChangeDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_PASSWORD_CHANGE_DISABLED) === 'true'
        this.settingsDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_SETTINGS_DISABLED) === 'true'
        this.myRolesPermissionsDisabled =
          this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_MY_ROLES_PERMISSIONS_DISABLED) === 'true'
        this.helpDisabled = this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_HELP_DISABLED) === 'true'
        this.helpEditorDisabled =
          this.config.getProperty(CONFIG_KEY_ONECX_PORTAL_HELP_DISABLED) === 'true' ||
          !this.authService.hasPermission('PORTAL_HEADER_HELP_ITEM_EDITOR#VIEW')
        */
        this.menuService.getMenuItems().subscribe((el) => this.createMenu(el));
        // TODO add translations
        this.moreMenuItems = [
            {
                command: (e) => this.onOpenFeedback(e),
                icon: PrimeIcons.COMMENT,
                label: 'Feedback',
                disabled: this.feedbackDisabled,
                permission: 'PORTAL_HEADER_GIVE_FEEDBACK#VIEW',
            },
            {
                command: (e) => this.onAddToFavourites(e),
                icon: PrimeIcons.STAR,
                label: 'Add to Favorites',
                disabled: this.favoritesDisabled,
                permission: 'PORTAL_HEADER_ADD_TO_MY_FAVORITES#VIEW',
            },
            {
                command: (e) => this.onOpenSupportTicket(e),
                icon: PrimeIcons.TICKET,
                label: 'Create Support Ticket',
                disabled: this.supportTicketDisabled,
                permission: 'PORTAL_HEADER_CREATE_SUPPORT_TICKET#VIEW',
            },
            {
                command: (e) => this.onTopbarItemClick(e, 'search'),
                icon: PrimeIcons.SEARCH,
                label: 'Search',
                disabled: this.searchDisabled,
                permission: 'PORTAL_HEADER_ENTERPRISE_SEARCH#VIEW',
            },
            {
                command: (e) => this.onOpenHelpPage(e),
                icon: PrimeIcons.QUESTION_CIRCLE,
                label: 'Show Help for this article',
                disabled: this.helpDisabled,
                permission: 'PORTAL_HEADER_HELP#VIEW',
            },
            {
                command: (e) => this.onOpenHelpPageEditor(e),
                icon: PrimeIcons.PENCIL,
                label: 'Edit Help for this article',
                disabled: this.helpEditorDisabled,
                permission: 'PORTAL_HEADER_HELP_ITEM_EDITOR#VIEW',
            },
        ];
    }
    createMenu(menuItems) {
        this.userMenuItems = menuItems.find(({ id }) => id === 'USER_PROFILE_MENU')?.items || [];
    }
    logout(event) {
        event.preventDefault();
        this.eventsPublisher$.publish({ type: 'authentication#logoutButtonClicked' });
    }
    onMenuButtonClick(e) {
        this.menuButtonClick.emit(e);
    }
    onTopbarItemClick(e, arg) {
        this.topbarItemClick.emit({ event: e, arg });
    }
    onOpenHelpPageEditor(e) {
        this.openHelpPageEditor.emit(e);
    }
    onOpenHelpPage(e) {
        this.openHelpPage.emit(e);
    }
    onOpenFeedback(e) {
        this.openFeedback.emit(e);
    }
    onAddToFavourites(e) {
        this.openAddToLaunchpad.emit(e);
    }
    onOpenSupportTicket(e) {
        this.openSupportTicket.emit(e);
    }
    onSearchClick(e, val) {
        this.searchClick.emit({ event: e, val });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.MenuService }, { token: i1.ThemeService }, { token: i1.UserService }, { token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HeaderComponent, selector: "ocx-header", inputs: { menuButtonTitle: "menuButtonTitle", activeTopbarItem: "activeTopbarItem", disableBreadcrumbs: "disableBreadcrumbs", fullPortalLayout: "fullPortalLayout", homeNavUrl: "homeNavUrl", homeNavTitle: "homeNavTitle" }, outputs: { menuButtonClick: "menuButtonClick", topbarItemClick: "topbarItemClick", openHelpPage: "openHelpPage", openHelpPageEditor: "openHelpPageEditor", openFeedback: "openFeedback", openAddToLaunchpad: "openAddToLaunchpad", openSupportTicket: "openSupportTicket", searchClick: "searchClick" }, viewQueries: [{ propertyName: "searchInputViewChild", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar shadow-4\" id=\"header\" role=\"banner\">\n  <div class=\"layout-topbar-left\">\n    <a class=\"layout-topbar-logo\" [routerLink]=\"homeNavUrl\" [title]=\"homeNavTitle\">\n      <img\n        id=\"app-logo\"\n        src=\"{{(logoUrl$ | async) || 'assets/images/logo.png'}}\"\n        alt=\"Logo\"\n        style=\"max-height: 100%; max-width: 100%\"\n        *ngIf=\"(logoUrl$ | async) && !fallbackImg\"\n        (error)=\"fallbackImg=true\"\n      />\n      <svg *ngIf=\"((logoUrl$ | async) === null) || fallbackImg\" width=\"160\" viewBox=\"0 0 283 72\" class=\"default-logo\">\n        <defs id=\"SvgjsDefs4962\"></defs>\n        <g\n          id=\"SvgjsG4963\"\n          featurekey=\"symbolFeature-0\"\n          transform=\"matrix(0.7555406501686023,0,0,0.7555406501686023,-4.883814572467361,-0.26595028490140254)\"\n        >\n          <path\n            xmlns=\"http://www.w3.org/2000/svg\"\n            d=\"M88.54,46.256L9.464,0.616c-0.616-0.352-1.384-0.352-2,0c-0.62,0.36-1,1.02-1,1.736v91.296c0,0.716,0.38,1.375,1,1.731  c0.308,0.185,0.656,0.269,1,0.269c0.344,0,0.692-0.084,1-0.269L88.54,49.729c0.616-0.36,1-1.021,1-1.736  C89.54,47.276,89.152,46.616,88.54,46.256z M60.08,49.771L21.388,69.805c-0.288,0.147-0.604,0.223-0.92,0.223  c-0.36,0-0.72-0.092-1.04-0.287c-0.596-0.364-0.96-1.008-0.96-1.713v-40.06c0-0.696,0.364-1.344,0.96-1.712  c0.596-0.36,1.336-0.392,1.96-0.068l38.696,20.028c0.664,0.344,1.084,1.032,1.084,1.772C61.164,48.74,60.744,49.428,60.08,49.771z\"\n          ></path>\n          <path xmlns=\"http://www.w3.org/2000/svg\" d=\"M22.464,64.744l32.345-16.748l-32.345-16.74V64.744z\"></path>\n        </g>\n        <g\n          id=\"SvgjsG4964\"\n          featurekey=\"nameFeature-0\"\n          transform=\"matrix(1.0207331753701396,0,0,1.0207331753701396,81.5644404108694,15.72408377414908)\"\n        >\n          <path\n            d=\"M17.344 32.6562 c-0.78125 -0.15625 -1.5105 -0.3907 -2.1876 -0.7032 c-1.4584 -0.67711 -2.7344 -1.6146 -3.8281 -2.8125 c-1.0416 -1.0938 -1.875 -2.4479 -2.5 -4.0625 c-0.57289 -1.6146 -0.85938 -3.2552 -0.85938 -4.9219 l0 -0.15625 l0 -0.23438 c0 -1.7188 0.28648 -3.3854 0.85938 -5 c0.67711 -1.6666 1.5105 -2.9948 2.5001 -3.9844 c1.0416 -1.1979 2.2916 -2.1094 3.75 -2.7344 c0.88539 -0.41664 1.6406 -0.67703 2.2656 -0.78117 l0 -5.8594 c-1.8229 0.26039 -3.4375 0.70313 -4.8438 1.3281 c-2.2916 0.98961 -4.2448 2.3177 -5.8594 3.9844 s-2.8906 3.6458 -3.8281 5.9374 s-1.4063 4.6875 -1.4063 7.1875 l0 0.15625 l0 0.23438 c0 2.5521 0.46875 4.948 1.4063 7.1876 c0.83336 2.2396 2.0834 4.1927 3.75 5.8594 c1.6666 1.7188 3.6198 3.0469 5.8594 3.9844 c1.4063 0.625 3.0469 1.0677 4.9219 1.3281 l0 -5.9375 z M38.594 20 l0.000076294 -0.23438 c0 -2.5521 -0.46875 -4.948 -1.4063 -7.1876 c-0.9375 -2.2916 -2.2135 -4.2708 -3.8281 -5.9374 c-1.5625 -1.6666 -3.4896 -2.9688 -5.7813 -3.9063 c-1.3021 -0.625 -2.8906 -1.0677 -4.7656 -1.3281 l0 5.9375 l0.9375 0.3125 c0.46875 0.15625 0.83336 0.28648 1.0938 0.39063 c1.4584 0.67711 2.7344 1.6146 3.8281 2.8125 c1.0416 1.0938 1.875 2.4479 2.5 4.0625 c0.57289 1.6146 0.85938 3.2552 0.85938 4.9219 l0 0.15625 l0 0.23438 c0 1.7188 -0.28648 3.3854 -0.85938 5 c-0.67711 1.6666 -1.5105 2.9948 -2.5001 3.9844 c-1.0416 1.1979 -2.2916 2.1094 -3.75 2.7344 c-0.67711 0.3125 -1.3802 0.54688 -2.1094 0.70313 l0 5.9375 c1.5625 -0.20836 3.125 -0.65109 4.6875 -1.3282 c2.1354 -0.88539 4.0885 -2.2135 5.8594 -3.9844 c1.7188 -1.8229 2.9948 -3.802 3.8281 -5.9374 c0.9375 -2.2916 1.4063 -4.6875 1.4063 -7.1875 l0 -0.15625 z M43.8281 38.5937 l6.4844 0 l0 -19.922 l-6.4844 -9.1406 l0 29.063 z M69.76599999999999 1.4059999999999988 l0 25.703 l-18.359 -25.703 l-7.0313 0 l26.406 37.188 l5.3906 0 l0 -37.188 l-6.4063 0 z M86.0938 1.4059999999999988 l27.813 0 l0 5.9375 l-27.813 0 l0 -5.9375 z M86.0938 32.6562 l27.734 0 l0 5.9375 l-27.734 0 l0 -5.9375 z M86.0938 16.875 l25.078 0 l0 5.8594 l-25.078 0 l0 -5.8594 z M127.2656 12.5 c0.9375 -2.2916 2.2916 -4.2447 4.0624 -5.8593 c1.6146 -1.6146 3.698 -2.9167 6.2501 -3.9063 s5.2344 -1.4844 8.0469 -1.4844 l8.6719 0 l0 5.9375 l-8.5938 0 c-2.0313 0 -3.8281 0.33852 -5.3906 1.0156 c-1.6666 0.67711 -3.0208 1.5625 -4.0624 2.6563 c-1.0938 1.0416 -1.9791 2.3958 -2.6563 4.0624 c-0.625 1.5104 -0.9375 3.2031 -0.9375 5.0781 s0.3125 3.5677 0.9375 5.0781 c0.625 1.5625 1.5104 2.9166 2.6563 4.0625 c1.0416 1.0416 2.3958 1.901 4.0624 2.5781 c1.6666 0.625 3.4635 0.9375 5.3906 0.9375 l8.5938 0 l0 5.9375 l-8.6719 0 c-2.9166 0 -5.5729 -0.46875 -7.9688 -1.4063 c-2.5 -1.0416 -4.6094 -2.3698 -6.3281 -3.9844 c-1.7709 -1.6666 -3.125 -3.6458 -4.0625 -5.9374 c-0.98961 -2.3959 -1.4844 -4.8438 -1.4844 -7.3438 c0 -2.6563 0.49477 -5.1302 1.4844 -7.4219 z M176.484 29.375 l3.5156 -4.6875 l-0.078125 -0.15625 z M196.875 1.4059999999999988 l-7.5 0 l-9.2969 13.359 l-9.2188 -13.359 l-7.7344 0 l13.047 18.281 l-13.516 18.906 l8.3594 0 z M197.344 38.5937 l-10.313 -14.609 l-3.9063 5.2344 l6.5625 9.375 l7.6563 0 z\"\n          ></path>\n        </g>\n      </svg>\n    </a>\n\n    <a\n      class=\"layout-menu-button shadow-6\"\n      (click)=\"onMenuButtonClick($event)\"\n      pRipple\n      [title]=\"menuButtonTitle ?? ('OCX_HEADER.MENU_TOGGLE' | translate)\"\n    >\n      <i class=\"pi pi-chevron-right\"></i>\n    </a>\n  </div>\n\n  <div class=\"layout-topbar-right\">\n    <div class=\"layout-topbar-actions-left\">\n      <ng-content></ng-content>\n      <!-- <tk-breadcrumb *ngIf=\"disableBreadcrumbs\" [disableBreadcrumbs]=\"disableBreadcrumbs\"\n        [fullPortalLayout]=\"fullPortalLayout\" (openHelpPage)=\"onOpenHelpPage($event)\"\n        (openHelpPageEditor)=\"onOpenHelpPageEditor($event)\"></tk-breadcrumb> -->\n    </div>\n    <!-- TODO *ngIf=\"fullPortalLayout\" -->\n    <div class=\"layout-topbar-actions-right\">\n      <ul class=\"layout-topbar-items\">\n        <!-- Only desktop: Actions (favorites, support, search, ...) as icon buttons -->\n        <ng-container *ocxIfBreakpoint=\"'desktop'\">\n          <ng-container *ngFor=\"let item of moreMenuItems\">\n            <li class=\"layout-topbar-item\" *ocxIfPermission=\"item.permission\">\n              <!-- *ngIf=\"!item?.disabled\" -->\n              <a\n                class=\"layout-topbar-action rounded-circle\"\n                pRipple\n                (click)=\"item?.command({originalEvent: $event, item})\"\n                [title]=\"item.label\"\n                [pTooltip]=\"item.label || ''\"\n                tooltipPosition=\"bottom\"\n                tooltipEvent=\"hover\"\n              >\n                <i [ngClass]=\"item.icon || ''\" class=\"fs-large\"></i>\n              </a>\n            </li>\n          </ng-container>\n        </ng-container>\n\n        <!-- Search panel overlay -->\n        <li class=\"layout-topbar-item layout-search-item\">\n          <div\n            class=\"layout-search-panel p-inputgroup\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'search'\"\n          >\n            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n            <input type=\"text\" pInputText ocxAutofocus placeholder=\"Search...\" />\n            <span class=\"p-inputgroup-addon\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                class=\"p-button-rounded p-button-text p-button-plain\"\n                (click)=\"onSearchClick($event, false)\"\n              ></button>\n            </span>\n          </div>\n        </li>\n\n        <!-- Notification icon button + overlay -->\n        <li *ngIf=\"!announcementHelpDisabled\" class=\"layout-topbar-item notifications\">\n          <a\n            *ocxIfPermission=\"'PORTAL_HEADER_NOTIFICATION#VIEW'\"\n            class=\"layout-topbar-action rounded-circle\"\n            (click)=\"onTopbarItemClick($event, 'notifications')\"\n            pRipple\n            title=\"Notifications\"\n            pTooltip=\"Notifications\"\n            tooltipPosition=\"bottom\"\n          >\n            <i class=\"pi pi-bell fs-large\"></i>\n          </a>\n\n          <ul\n            class=\"layout-topbar-action-panel shadow-6\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'notifications'\"\n          >\n            <li class=\"mb-3\">\n              <span class=\"px-3 fs-small\">Not implemented.</span>\n            </li>\n            <li class=\"layout-topbar-action-item\">\n              <div class=\"flex flex-row align-items-center\">\n                <p class=\"avatar-monogram\">MM</p>\n                <div class=\"flex flex-column ml-3\" style=\"flex-grow: 1\">\n                  <div class=\"flex align-items-center justify-content-between mb-1\">\n                    <span class=\"fs-small font-bold\">John Doe</span>\n                    <small>42 mins ago</small>\n                  </div>\n                  <span class=\"fs-small\">Notification example.</span>\n                </div>\n              </div>\n            </li>\n          </ul>\n        </li>\n\n        <!-- Profile icon button + overlay -->\n        <li class=\"layout-topbar-item\">\n          <a\n            class=\"layout-topbar-action flex flex-row justify-content-center align-items-center px-2 rounded-circle\"\n            pRipple\n            (click)=\"onTopbarItemClick($event, 'profile')\"\n            [attr.aria-label]=\"'OCX_HEADER.USER_SETTINGS' | translate\"\n            [pTooltip]=\"'OCX_HEADER.USER_SETTINGS' | translate\"\n            tooltipPosition=\"bottom\"\n            tooltipEvent=\"hover\"\n          >\n            <ocx-user-avatar [user$]=\"currentUser$\"></ocx-user-avatar>\n          </a>\n\n          <ul\n            class=\"layout-topbar-action-panel shadow-6\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'profile' && userMenuItems\"\n          >\n            <li class=\"layout-topbar-action-item flex flex-column\" *ocxIfPermission=\"'PROFILE#VIEW'\">\n              <div *ngIf=\"currentUser$ | async as user\">\n                <h5 class=\"flex flex-row align-items-center justify-content-center text-color-secondary\">\n                  {{ user.person.displayName }}\n                </h5>\n                <span class=\"flex flex-row align-items-center justify-content-center text-color-secondary\"\n                  >{{user.person.email}}</span\n                >\n                <span\n                  *ngIf=\"user.tenantName\"\n                  class=\"flex flex-row align-items-center justify-content-center text-color-secondary\"\n                >\n                  Tenant: {{user.tenantName}}</span\n                >\n              </div>\n            </li>\n            <li class=\"layout-topbar-action-item\" *ngFor=\"let item of userMenuItems; let i = index;\">\n              <a class=\"flex flex-row align-items-center\" pRipple href=\"#\" [routerLink]=\"item.routerLink\">\n                <i [ngClass]=\"'pi-' + item.icon || ''\" class=\"layout-menuitem-icon pi\"></i>\n                <span class=\"layout-menuitem-text ml-2\">{{ item.label }}</span>\n              </a>\n            </li>\n            <li class=\"layout-topbar-action-item\">\n              <a class=\"flex flex-row align-items-center\" pRipple href=\"#\" (click)=\"logout($event)\">\n                <i class=\"mr-2 pi pi-power-off\"></i>\n                <span>Logout</span>\n              </a>\n            </li>\n          </ul>\n        </li>\n\n        <!-- Only mobile: Actions (favorites, support, search, ...) as 'more' button + overlay -->\n        <li class=\"layout-topbar-item\" *ocxIfBreakpoint=\"'mobile'\">\n          <a\n            class=\"layout-topbar-action rounded-circle\"\n            (click)=\"onTopbarItemClick($event, 'more')\"\n            pRipple\n            title=\"More\"\n            pTooltip=\"More\"\n            tooltipPosition=\"bottom\"\n          >\n            <i class=\"pi pi-ellipsis-v fs-large\"></i>\n          </a>\n\n          <ul\n            class=\"layout-topbar-action-panel shadow-6\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'more' && moreMenuItems\"\n          >\n            <ng-container *ngFor=\"let item of moreMenuItems\">\n              <li class=\"layout-topbar-action-item\" *ocxIfPermission=\"item.permission\">\n                <!-- *ngIf=\"!item?.disabled\" -->\n                <a\n                  class=\"flex flex-row align-items-center\"\n                  pRipple\n                  href=\"#\"\n                  [routerLink]=\"item.routerLink\"\n                  (click)=\"item?.command({originalEvent: $event, item})\"\n                >\n                  <i [ngClass]=\"'pi-' + item.icon || ''\" class=\"layout-menuitem-icon pi\"></i>\n                  <span class=\"layout-menuitem-text ml-2\">{{ item.label }}</span>\n                </a>\n              </li>\n            </ng-container>\n          </ul>\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".http-progress-loader{margin-left:8px;padding-top:5px}@media screen and (max-width: 1024px){.http-progress-loader{margin-left:0;margin-right:8px}}.default-logo{color:var(--logo-color, var(--logo-color-default, #12abdb));fill:currentColor}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i7.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i9.IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: i9.IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "directive", type: i10.AutofocusDirective, selector: "[ocxAutofocus]" }, { kind: "component", type: i11.UserAvatarComponent, selector: "ocx-user-avatar", inputs: ["user$", "user"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], animations: [
            trigger('topbarActionPanelAnimation', [
                transition(':enter', [
                    style({ opacity: 0, transform: 'scaleY(0.8)' }),
                    animate('.12s cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: '*' })),
                ]),
                transition(':leave', [animate('.1s linear', style({ opacity: 0 }))]),
            ]),
        ] }); }
};
HeaderComponent = __decorate([
    UntilDestroy(),
    __metadata("design:paramtypes", [ConfigurationService,
        MenuService,
        ThemeService,
        UserService,
        AppStateService])
], HeaderComponent);
export { HeaderComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ocx-header', animations: [
                        trigger('topbarActionPanelAnimation', [
                            transition(':enter', [
                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
                                animate('.12s cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: '*' })),
                            ]),
                            transition(':leave', [animate('.1s linear', style({ opacity: 0 }))]),
                        ]),
                    ], template: "<div class=\"layout-topbar shadow-4\" id=\"header\" role=\"banner\">\n  <div class=\"layout-topbar-left\">\n    <a class=\"layout-topbar-logo\" [routerLink]=\"homeNavUrl\" [title]=\"homeNavTitle\">\n      <img\n        id=\"app-logo\"\n        src=\"{{(logoUrl$ | async) || 'assets/images/logo.png'}}\"\n        alt=\"Logo\"\n        style=\"max-height: 100%; max-width: 100%\"\n        *ngIf=\"(logoUrl$ | async) && !fallbackImg\"\n        (error)=\"fallbackImg=true\"\n      />\n      <svg *ngIf=\"((logoUrl$ | async) === null) || fallbackImg\" width=\"160\" viewBox=\"0 0 283 72\" class=\"default-logo\">\n        <defs id=\"SvgjsDefs4962\"></defs>\n        <g\n          id=\"SvgjsG4963\"\n          featurekey=\"symbolFeature-0\"\n          transform=\"matrix(0.7555406501686023,0,0,0.7555406501686023,-4.883814572467361,-0.26595028490140254)\"\n        >\n          <path\n            xmlns=\"http://www.w3.org/2000/svg\"\n            d=\"M88.54,46.256L9.464,0.616c-0.616-0.352-1.384-0.352-2,0c-0.62,0.36-1,1.02-1,1.736v91.296c0,0.716,0.38,1.375,1,1.731  c0.308,0.185,0.656,0.269,1,0.269c0.344,0,0.692-0.084,1-0.269L88.54,49.729c0.616-0.36,1-1.021,1-1.736  C89.54,47.276,89.152,46.616,88.54,46.256z M60.08,49.771L21.388,69.805c-0.288,0.147-0.604,0.223-0.92,0.223  c-0.36,0-0.72-0.092-1.04-0.287c-0.596-0.364-0.96-1.008-0.96-1.713v-40.06c0-0.696,0.364-1.344,0.96-1.712  c0.596-0.36,1.336-0.392,1.96-0.068l38.696,20.028c0.664,0.344,1.084,1.032,1.084,1.772C61.164,48.74,60.744,49.428,60.08,49.771z\"\n          ></path>\n          <path xmlns=\"http://www.w3.org/2000/svg\" d=\"M22.464,64.744l32.345-16.748l-32.345-16.74V64.744z\"></path>\n        </g>\n        <g\n          id=\"SvgjsG4964\"\n          featurekey=\"nameFeature-0\"\n          transform=\"matrix(1.0207331753701396,0,0,1.0207331753701396,81.5644404108694,15.72408377414908)\"\n        >\n          <path\n            d=\"M17.344 32.6562 c-0.78125 -0.15625 -1.5105 -0.3907 -2.1876 -0.7032 c-1.4584 -0.67711 -2.7344 -1.6146 -3.8281 -2.8125 c-1.0416 -1.0938 -1.875 -2.4479 -2.5 -4.0625 c-0.57289 -1.6146 -0.85938 -3.2552 -0.85938 -4.9219 l0 -0.15625 l0 -0.23438 c0 -1.7188 0.28648 -3.3854 0.85938 -5 c0.67711 -1.6666 1.5105 -2.9948 2.5001 -3.9844 c1.0416 -1.1979 2.2916 -2.1094 3.75 -2.7344 c0.88539 -0.41664 1.6406 -0.67703 2.2656 -0.78117 l0 -5.8594 c-1.8229 0.26039 -3.4375 0.70313 -4.8438 1.3281 c-2.2916 0.98961 -4.2448 2.3177 -5.8594 3.9844 s-2.8906 3.6458 -3.8281 5.9374 s-1.4063 4.6875 -1.4063 7.1875 l0 0.15625 l0 0.23438 c0 2.5521 0.46875 4.948 1.4063 7.1876 c0.83336 2.2396 2.0834 4.1927 3.75 5.8594 c1.6666 1.7188 3.6198 3.0469 5.8594 3.9844 c1.4063 0.625 3.0469 1.0677 4.9219 1.3281 l0 -5.9375 z M38.594 20 l0.000076294 -0.23438 c0 -2.5521 -0.46875 -4.948 -1.4063 -7.1876 c-0.9375 -2.2916 -2.2135 -4.2708 -3.8281 -5.9374 c-1.5625 -1.6666 -3.4896 -2.9688 -5.7813 -3.9063 c-1.3021 -0.625 -2.8906 -1.0677 -4.7656 -1.3281 l0 5.9375 l0.9375 0.3125 c0.46875 0.15625 0.83336 0.28648 1.0938 0.39063 c1.4584 0.67711 2.7344 1.6146 3.8281 2.8125 c1.0416 1.0938 1.875 2.4479 2.5 4.0625 c0.57289 1.6146 0.85938 3.2552 0.85938 4.9219 l0 0.15625 l0 0.23438 c0 1.7188 -0.28648 3.3854 -0.85938 5 c-0.67711 1.6666 -1.5105 2.9948 -2.5001 3.9844 c-1.0416 1.1979 -2.2916 2.1094 -3.75 2.7344 c-0.67711 0.3125 -1.3802 0.54688 -2.1094 0.70313 l0 5.9375 c1.5625 -0.20836 3.125 -0.65109 4.6875 -1.3282 c2.1354 -0.88539 4.0885 -2.2135 5.8594 -3.9844 c1.7188 -1.8229 2.9948 -3.802 3.8281 -5.9374 c0.9375 -2.2916 1.4063 -4.6875 1.4063 -7.1875 l0 -0.15625 z M43.8281 38.5937 l6.4844 0 l0 -19.922 l-6.4844 -9.1406 l0 29.063 z M69.76599999999999 1.4059999999999988 l0 25.703 l-18.359 -25.703 l-7.0313 0 l26.406 37.188 l5.3906 0 l0 -37.188 l-6.4063 0 z M86.0938 1.4059999999999988 l27.813 0 l0 5.9375 l-27.813 0 l0 -5.9375 z M86.0938 32.6562 l27.734 0 l0 5.9375 l-27.734 0 l0 -5.9375 z M86.0938 16.875 l25.078 0 l0 5.8594 l-25.078 0 l0 -5.8594 z M127.2656 12.5 c0.9375 -2.2916 2.2916 -4.2447 4.0624 -5.8593 c1.6146 -1.6146 3.698 -2.9167 6.2501 -3.9063 s5.2344 -1.4844 8.0469 -1.4844 l8.6719 0 l0 5.9375 l-8.5938 0 c-2.0313 0 -3.8281 0.33852 -5.3906 1.0156 c-1.6666 0.67711 -3.0208 1.5625 -4.0624 2.6563 c-1.0938 1.0416 -1.9791 2.3958 -2.6563 4.0624 c-0.625 1.5104 -0.9375 3.2031 -0.9375 5.0781 s0.3125 3.5677 0.9375 5.0781 c0.625 1.5625 1.5104 2.9166 2.6563 4.0625 c1.0416 1.0416 2.3958 1.901 4.0624 2.5781 c1.6666 0.625 3.4635 0.9375 5.3906 0.9375 l8.5938 0 l0 5.9375 l-8.6719 0 c-2.9166 0 -5.5729 -0.46875 -7.9688 -1.4063 c-2.5 -1.0416 -4.6094 -2.3698 -6.3281 -3.9844 c-1.7709 -1.6666 -3.125 -3.6458 -4.0625 -5.9374 c-0.98961 -2.3959 -1.4844 -4.8438 -1.4844 -7.3438 c0 -2.6563 0.49477 -5.1302 1.4844 -7.4219 z M176.484 29.375 l3.5156 -4.6875 l-0.078125 -0.15625 z M196.875 1.4059999999999988 l-7.5 0 l-9.2969 13.359 l-9.2188 -13.359 l-7.7344 0 l13.047 18.281 l-13.516 18.906 l8.3594 0 z M197.344 38.5937 l-10.313 -14.609 l-3.9063 5.2344 l6.5625 9.375 l7.6563 0 z\"\n          ></path>\n        </g>\n      </svg>\n    </a>\n\n    <a\n      class=\"layout-menu-button shadow-6\"\n      (click)=\"onMenuButtonClick($event)\"\n      pRipple\n      [title]=\"menuButtonTitle ?? ('OCX_HEADER.MENU_TOGGLE' | translate)\"\n    >\n      <i class=\"pi pi-chevron-right\"></i>\n    </a>\n  </div>\n\n  <div class=\"layout-topbar-right\">\n    <div class=\"layout-topbar-actions-left\">\n      <ng-content></ng-content>\n      <!-- <tk-breadcrumb *ngIf=\"disableBreadcrumbs\" [disableBreadcrumbs]=\"disableBreadcrumbs\"\n        [fullPortalLayout]=\"fullPortalLayout\" (openHelpPage)=\"onOpenHelpPage($event)\"\n        (openHelpPageEditor)=\"onOpenHelpPageEditor($event)\"></tk-breadcrumb> -->\n    </div>\n    <!-- TODO *ngIf=\"fullPortalLayout\" -->\n    <div class=\"layout-topbar-actions-right\">\n      <ul class=\"layout-topbar-items\">\n        <!-- Only desktop: Actions (favorites, support, search, ...) as icon buttons -->\n        <ng-container *ocxIfBreakpoint=\"'desktop'\">\n          <ng-container *ngFor=\"let item of moreMenuItems\">\n            <li class=\"layout-topbar-item\" *ocxIfPermission=\"item.permission\">\n              <!-- *ngIf=\"!item?.disabled\" -->\n              <a\n                class=\"layout-topbar-action rounded-circle\"\n                pRipple\n                (click)=\"item?.command({originalEvent: $event, item})\"\n                [title]=\"item.label\"\n                [pTooltip]=\"item.label || ''\"\n                tooltipPosition=\"bottom\"\n                tooltipEvent=\"hover\"\n              >\n                <i [ngClass]=\"item.icon || ''\" class=\"fs-large\"></i>\n              </a>\n            </li>\n          </ng-container>\n        </ng-container>\n\n        <!-- Search panel overlay -->\n        <li class=\"layout-topbar-item layout-search-item\">\n          <div\n            class=\"layout-search-panel p-inputgroup\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'search'\"\n          >\n            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n            <input type=\"text\" pInputText ocxAutofocus placeholder=\"Search...\" />\n            <span class=\"p-inputgroup-addon\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                class=\"p-button-rounded p-button-text p-button-plain\"\n                (click)=\"onSearchClick($event, false)\"\n              ></button>\n            </span>\n          </div>\n        </li>\n\n        <!-- Notification icon button + overlay -->\n        <li *ngIf=\"!announcementHelpDisabled\" class=\"layout-topbar-item notifications\">\n          <a\n            *ocxIfPermission=\"'PORTAL_HEADER_NOTIFICATION#VIEW'\"\n            class=\"layout-topbar-action rounded-circle\"\n            (click)=\"onTopbarItemClick($event, 'notifications')\"\n            pRipple\n            title=\"Notifications\"\n            pTooltip=\"Notifications\"\n            tooltipPosition=\"bottom\"\n          >\n            <i class=\"pi pi-bell fs-large\"></i>\n          </a>\n\n          <ul\n            class=\"layout-topbar-action-panel shadow-6\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'notifications'\"\n          >\n            <li class=\"mb-3\">\n              <span class=\"px-3 fs-small\">Not implemented.</span>\n            </li>\n            <li class=\"layout-topbar-action-item\">\n              <div class=\"flex flex-row align-items-center\">\n                <p class=\"avatar-monogram\">MM</p>\n                <div class=\"flex flex-column ml-3\" style=\"flex-grow: 1\">\n                  <div class=\"flex align-items-center justify-content-between mb-1\">\n                    <span class=\"fs-small font-bold\">John Doe</span>\n                    <small>42 mins ago</small>\n                  </div>\n                  <span class=\"fs-small\">Notification example.</span>\n                </div>\n              </div>\n            </li>\n          </ul>\n        </li>\n\n        <!-- Profile icon button + overlay -->\n        <li class=\"layout-topbar-item\">\n          <a\n            class=\"layout-topbar-action flex flex-row justify-content-center align-items-center px-2 rounded-circle\"\n            pRipple\n            (click)=\"onTopbarItemClick($event, 'profile')\"\n            [attr.aria-label]=\"'OCX_HEADER.USER_SETTINGS' | translate\"\n            [pTooltip]=\"'OCX_HEADER.USER_SETTINGS' | translate\"\n            tooltipPosition=\"bottom\"\n            tooltipEvent=\"hover\"\n          >\n            <ocx-user-avatar [user$]=\"currentUser$\"></ocx-user-avatar>\n          </a>\n\n          <ul\n            class=\"layout-topbar-action-panel shadow-6\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'profile' && userMenuItems\"\n          >\n            <li class=\"layout-topbar-action-item flex flex-column\" *ocxIfPermission=\"'PROFILE#VIEW'\">\n              <div *ngIf=\"currentUser$ | async as user\">\n                <h5 class=\"flex flex-row align-items-center justify-content-center text-color-secondary\">\n                  {{ user.person.displayName }}\n                </h5>\n                <span class=\"flex flex-row align-items-center justify-content-center text-color-secondary\"\n                  >{{user.person.email}}</span\n                >\n                <span\n                  *ngIf=\"user.tenantName\"\n                  class=\"flex flex-row align-items-center justify-content-center text-color-secondary\"\n                >\n                  Tenant: {{user.tenantName}}</span\n                >\n              </div>\n            </li>\n            <li class=\"layout-topbar-action-item\" *ngFor=\"let item of userMenuItems; let i = index;\">\n              <a class=\"flex flex-row align-items-center\" pRipple href=\"#\" [routerLink]=\"item.routerLink\">\n                <i [ngClass]=\"'pi-' + item.icon || ''\" class=\"layout-menuitem-icon pi\"></i>\n                <span class=\"layout-menuitem-text ml-2\">{{ item.label }}</span>\n              </a>\n            </li>\n            <li class=\"layout-topbar-action-item\">\n              <a class=\"flex flex-row align-items-center\" pRipple href=\"#\" (click)=\"logout($event)\">\n                <i class=\"mr-2 pi pi-power-off\"></i>\n                <span>Logout</span>\n              </a>\n            </li>\n          </ul>\n        </li>\n\n        <!-- Only mobile: Actions (favorites, support, search, ...) as 'more' button + overlay -->\n        <li class=\"layout-topbar-item\" *ocxIfBreakpoint=\"'mobile'\">\n          <a\n            class=\"layout-topbar-action rounded-circle\"\n            (click)=\"onTopbarItemClick($event, 'more')\"\n            pRipple\n            title=\"More\"\n            pTooltip=\"More\"\n            tooltipPosition=\"bottom\"\n          >\n            <i class=\"pi pi-ellipsis-v fs-large\"></i>\n          </a>\n\n          <ul\n            class=\"layout-topbar-action-panel shadow-6\"\n            [@topbarActionPanelAnimation]=\"'visible'\"\n            *ngIf=\"activeTopbarItem === 'more' && moreMenuItems\"\n          >\n            <ng-container *ngFor=\"let item of moreMenuItems\">\n              <li class=\"layout-topbar-action-item\" *ocxIfPermission=\"item.permission\">\n                <!-- *ngIf=\"!item?.disabled\" -->\n                <a\n                  class=\"flex flex-row align-items-center\"\n                  pRipple\n                  href=\"#\"\n                  [routerLink]=\"item.routerLink\"\n                  (click)=\"item?.command({originalEvent: $event, item})\"\n                >\n                  <i [ngClass]=\"'pi-' + item.icon || ''\" class=\"layout-menuitem-icon pi\"></i>\n                  <span class=\"layout-menuitem-text ml-2\">{{ item.label }}</span>\n                </a>\n              </li>\n            </ng-container>\n          </ul>\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: [".http-progress-loader{margin-left:8px;padding-top:5px}@media screen and (max-width: 1024px){.http-progress-loader{margin-left:0;margin-right:8px}}.default-logo{color:var(--logo-color, var(--logo-color-default, #12abdb));fill:currentColor}\n"] }]
        }], ctorParameters: () => [{ type: i1.ConfigurationService }, { type: i2.MenuService }, { type: i1.ThemeService }, { type: i1.UserService }, { type: i1.AppStateService }], propDecorators: { searchInputViewChild: [{
                type: ViewChild,
                args: ['searchInput']
            }], menuButtonTitle: [{
                type: Input
            }], menuButtonClick: [{
                type: Output
            }], topbarItemClick: [{
                type: Output
            }], openHelpPage: [{
                type: Output
            }], openHelpPageEditor: [{
                type: Output
            }], openFeedback: [{
                type: Output
            }], openAddToLaunchpad: [{
                type: Output
            }], openSupportTicket: [{
                type: Output
            }], searchClick: [{
                type: Output
            }], activeTopbarItem: [{
                type: Input
            }], disableBreadcrumbs: [{
                type: Input
            }], fullPortalLayout: [{
                type: Input
            }], homeNavUrl: [{
                type: Input
            }], homeNavTitle: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 