new-front-common-library 16.1.32-ROY-1 → 16.1.32-ROY-3

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, '../../coverage/new-front-common-library'),
+            subdir: '.',
+            reporters: [
+                {type: 'html'},
+                {type: 'text-summary'}
+            ]
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
+        restartOnFileChange: true
+    });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/new-front-common-library",
+  "assets": [
+    "./assets"
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "new-front-common-library",
-  "version": "16.1.32-ROY-1",
+  "version": "16.1.32-ROY-3",
   "Dependencies": {
     "@angular/common": "^16.2.12",
     "@angular/core": "^16.2.12",
@@ -14,22 +14,5 @@
     "crypto-js": "^4.1.1",
     "ngx-cookie-service": "^16.1.0",
     "ngx-permissions": "^16.0.1"
-  },
-  "module": "fesm2022/new-front-common-library.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/new-front-common-library.mjs",
-      "esm": "./esm2022/new-front-common-library.mjs",
-      "default": "./fesm2022/new-front-common-library.mjs"
-    }
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
   }
-}
+}

package/src/lib/new-front-common-library.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewFrontCommonLibraryComponent } from './new-front-common-library.component';
+
+describe('NewFrontCommonLibraryComponent', () => {
+    let component: NewFrontCommonLibraryComponent;
+    let fixture: ComponentFixture<NewFrontCommonLibraryComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [NewFrontCommonLibraryComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NewFrontCommonLibraryComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/new-front-common-library.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'lib-new-front-common-library',
+    template: `
+    <p>
+      new-front-common-library works!
+    </p>
+  `,
+    styles: []
+})
+export class NewFrontCommonLibraryComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+    }
+
+}

package/src/lib/new-front-common-library.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { NewFrontCommonLibraryComponent } from './new-front-common-library.component';
+import { LangService } from "./util/services/translate-language/lang.service";
+import { TranslateService } from "@ngx-translate/core";
+import { LocalStorageService } from "./util/services/storage/local-storage.service";
+
+
+@NgModule({
+    declarations: [
+        NewFrontCommonLibraryComponent
+    ],
+    imports: [],
+    exports: [
+        NewFrontCommonLibraryComponent
+    ]
+})
+export class NewFrontCommonLibraryModule {
+    constructor(private langEventsService: LangService,
+                private translate: TranslateService,
+                private localStorage: LocalStorageService
+    ) {
+        this.langEventsService.switchLangEmitter.subscribe(() => {
+            this.translate.use(this.localStorage.get('lang'));
+        });
+    }
+}

package/src/lib/new-front-common-library.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NewFrontCommonLibraryService } from './new-front-common-library.service';
+
+describe('NewFrontCommonLibraryService', () => {
+    let service: NewFrontCommonLibraryService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(NewFrontCommonLibraryService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

package/src/lib/new-front-common-library.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NewFrontCommonLibraryService {
+
+    constructor() {
+    }
+}

package/src/lib/util/animations/actions.animation.ts

@@ -0,0 +1,16 @@
+// import the required animation functions from the angular animations module
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const actionsAnimation =
+    trigger('fadeAnimation', [
+        state('void', style({position: 'absolute', 'margin-right': '-100px'})),
+        state('*', style({position: 'absolute', 'margin-right': '100px'})),
+        transition(':enter', [  // before 2.1: transition('void => *', [
+            style({opacity: 0}),
+            animate('0.2s ease-in-out', style({opacity: 1}))
+        ]),
+        transition(':leave', [  // before 2.1: transition('* => void', [
+            style({opacity: 1}),
+            animate('0.2s ease-in-out', style({opacity: 0}))
+        ])
+    ]);

package/src/lib/util/animations/fade.animation.ts

@@ -0,0 +1,16 @@
+// import the required animation functions from the angular animations module
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const fadeAnimation =
+    trigger('fadeAnimation', [
+        state('void', style({position: 'absolute', width: '100%'})),
+        state('*', style({position: 'absolute', width: '100%'})),
+        transition(':enter', [  // before 2.1: transition('void => *', [
+            style({opacity: 0}),
+            animate('0.2s ease-in-out', style({opacity: 1}))
+        ]),
+        transition(':leave', [  // before 2.1: transition('* => void', [
+            style({opacity: 1}),
+            animate('0.2s ease-in-out', style({opacity: 0}))
+        ])
+    ]);

package/src/lib/util/array.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ArrayService {
+
+    /** Check if a value is in array */
+    public inArray(value: any, array: any): boolean {
+        if (value === null || array === null) {
+            return false;
+        } else {
+            return array.indexOf(value) !== -1;
+        }
+    }
+}

package/src/lib/util/component/header/header.component.html

@@ -0,0 +1,389 @@
+<mat-toolbar class="d-flex align-items-center toolbar-header toolbar-padding">
+  <span class="d-flex align-items-end">
+    <a
+      [href]="env === 'prod' ? 'https://unity.studiocanal.com/dashboard' : (env === 'sbx' ? 'https://unity-sbx.cplus/dashboard' : 'https://unity-' + env + '.studiocanal.com/dashboard')">
+      <img class="logo-unity" src="./assets/img/unity_logo_48x48.png">
+    </a>
+    <span *ngIf="env != 'prod'" [attr.id]="'env-' + env" class="env">{{ env }}</span>
+  </span>
+
+  <sc-menu [lang]="lang" (navigate)="navigate($event.module, $event.route, $event.queryParams)"
+           (redirect)="redirect($event.route)" class="menu-header" />
+
+  <div class="global-search">
+    <mat-icon class="header-icon">search</mat-icon>
+    <span class="global-search-separator"></span>
+    <mat-form-field class="max-width-100" subscriptSizing="dynamic">
+      <input [formControl]="formControlSearch"
+             [matAutocomplete]="autoSearch"
+             class="global-search-input max-width-85"
+             matInput
+             placeholder="search ..." />
+
+      <button (click)="navigate(null, '/advanced-search')"
+              matSuffix
+              class="btn advanced-button" mat-raised-button>
+        <mat-icon>flash_on</mat-icon>
+        {{ 'COMMON.HEADER.GLOBAL_SEARCH.ADVANCED' | commonTranslate: lang }}
+      </button>
+
+      <mat-autocomplete #autoSearch="matAutocomplete" class="mat-autocomplete-global-search" panelWidth="54vw">
+        <mat-option (onSelectionChange)="onSelectSearch($event, doc)"
+                    *ngFor="let doc of documents$ | async"
+                    class="mat-option-global-search">
+          <!--PURCHASE_ORDER-->
+          <div *ngIf="doc.docType === RapidSearchItemType.PURCHASE_ORDER" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">receipt_long</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-70">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.PURCHASE_ORDER' | commonTranslate: lang }}</span>
+                <span>{{ doc.poNumber }}
+                  - {{ doc.totalAmount | currency: doc.currencyCode:'symbol':undefined:'fr-FR' }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.BASKET_NUMBER' | commonTranslate: lang }}</span>
+                <span>{{ doc?.basketNumber ? doc.basketNumber : '-' }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.EAN' | commonTranslate: lang }}</span>
+                <span>{{ doc?.ean ? doc.ean : '-' }}</span>
+              </div>
+            </div>
+          </div>
+          <!--PRODUCT-->
+          <div *ngIf="doc.docType === RapidSearchItemType.PRODUCT" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">movie</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="ellipsis d-flex flex-column max-width-60">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.PRODUCT' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.title }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-10">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.SUPPORT' | commonTranslate: lang }}</span>
+                <span>{{ doc.support[labelLang] }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.EAN' | commonTranslate: lang }}</span>
+                <span>{{ doc.ean }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.RELEASE_DATE' | commonTranslate: lang }}</span>
+                <span>{{ doc?.releaseDate ? doc.releaseDate : '-' }}</span>
+              </div>
+            </div>
+          </div>
+          <!--WORK-->
+          <div *ngIf="doc.docType === RapidSearchItemType.WORK_VERSION" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">theaters</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-75 ellipsis">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.WORK' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.title }} ({{ doc.codeIso }})</span>
+              </div>
+              <div class="d-flex flex-column max-width-10">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.MILO_CODE' | commonTranslate: lang }}</span>
+                <span>{{ doc.miloCode }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.PRODUCTION_YEAR' | commonTranslate: lang }}</span>
+                <span>{{ doc.yearOfProduction }}</span>
+              </div>
+            </div>
+          </div>
+          <!--DEAL-->
+          <div *ngIf="doc.docType === RapidSearchItemType.DEAL" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">local_offer</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-70 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.DEAL' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.dealNumber }} - {{ doc.thirdPartyClientName }}
+                  ({{ doc.thirdPartyClientSap }})</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.AMOUNT' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.calculatedAmount | currency: doc.currencyCode:'symbol' }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.VALIDATION_DATE' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.validationDate }}</span>
+              </div>
+            </div>
+          </div>
+          <!--WORK_RECORD-->
+          <div *ngIf="doc.docType === RapidSearchItemType.WORK_RECORD" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">assignment</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-10 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.WORK_RECORD' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.id }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-10 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.DEAL' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.dealNumber }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-30 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CLIENT' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.thirdPartyClientName }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-35">
+                    <span class="auto-complete-label">
+                      {{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TITLE' | commonTranslate: lang }}
+                      ({{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.MILO_CODE' | commonTranslate: lang }})
+                    </span>
+                <span class="ellipsis">{{ doc.getTitle(lang) }} ({{ doc.miloCode }})</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.AMOUNT' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.amount | currency: doc.currencyCode:'symbol' }}</span>
+              </div>
+            </div>
+          </div>
+          <!--INVOICE-->
+          <div *ngIf="doc.docType === RapidSearchItemType.INVOICE" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">receipt</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-15 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.INVOICE' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.number }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-15 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.DEAL' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.dealNumber }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-20 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CLIENT' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.thirdPartyClientName }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-35">
+                    <span class="auto-complete-label">
+                      {{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TITLE' | commonTranslate: lang }}
+                      ({{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.MILO_CODE' | commonTranslate: lang }})
+                    </span>
+                <span class="ellipsis">{{ doc.getTitle(lang) }} ({{ doc.miloCode }})</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.AMOUNT' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.amount | currency: doc.currencyCode:'symbol' }}</span>
+              </div>
+            </div>
+          </div>
+          <!--THIRD_PARTY-->
+          <div *ngIf="doc.docType === RapidSearchItemType.THIRD_PARTY" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">person</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-85 ellipsis">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.THIRD_PARTY' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.companyOrPersonName }} ({{ doc.address | thirdPartyAddressSearch: lang }}
+                  )</span>
+              </div>
+              <div class="d-flex flex-column max-width-15">
+                    <span
+                      class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CODE' | commonTranslate: lang }}</span>
+                <span>{{ doc.code }}</span>
+              </div>
+            </div>
+          </div>
+          <!--CONTRACT-->
+          <div *ngIf="doc.docType === RapidSearchItemType.CONTRACT" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span *ngIf="getContractType(doc.type.labelEn) === 'cess'"
+                    class="material-icons-outlined rapid-search-type-icon">receipt</span>
+              <span *ngIf="getContractType(doc.type.labelEn) === 'acq'"
+                    class="material-icons-outlined rapid-search-type-icon">shop_two</span>
+              <span *ngIf="getContractType(doc.type.labelEn) === 'auth'"
+                    class="material-icons-outlined rapid-search-type-icon">account_circle</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-10 ellipsis">
+                <span
+                  class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CONTRACT' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.lisaId }} </span>
+              </div>
+              <div class="d-flex flex-column max-width-10">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TYPE' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.type[labelLang] }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-30">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.STATUS' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.status[labelLang] }}</span>
+              </div>
+              <div *ngIf="doc.type.labelEn !== 'Sale'" class="d-flex flex-column max-width-40 ellipsis">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.LICENSOR' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.licensor ? doc.licensor : '-' }}</span>
+              </div>
+              <div *ngIf="doc.type.labelEn === 'Sale'" class="d-flex flex-column max-width-40 ellipsis">
+                    <span class="auto-complete-label">{{
+                        'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CUSTOMER' | commonTranslate: lang
+                      }}</span>
+                <span>{{ doc.customer ? doc.customer : '-' }}</span>
+              </div>
+            </div>
+          </div>
+          <!--CONTRACT ROYALTY-->
+          <div *ngIf="doc.docType === RapidSearchItemType.ROYALTY_CONTRACT" class="d-flex align-items-center">
+            <div class="max-width-5">
+              <span class="material-icons-outlined rapid-search-type-icon">savings</span>
+            </div>
+            <div class="d-flex max-width-95">
+              <div class="d-flex flex-column max-width-20 ellipsis">
+                <span class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.CONTRACT' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.contractNumber }}</span>
+              </div>
+              <div class="d-flex flex-column max-width-80 ellipsis">
+                <span class="auto-complete-label">{{ 'COMMON.HEADER.GLOBAL_SEARCH.ITEM.TITLES' | commonTranslate: lang }}</span>
+                <span class="ellipsis">{{ doc.works.join(', ') }}</span>
+              </div>
+            </div>
+          </div>
+        </mat-option>
+      </mat-autocomplete>
+
+    </mat-form-field>
+  </div>
+
+  <div *ngIf="user && user.secondary" class="connected-as d-flex justify-content-between align-items-center">
+      <span style="margin-right: 10px">
+        {{ 'COMMON.HEADER.CONNECTED_AS' | commonTranslate: lang }}  {{ user.login + ' - ' + user.firstName + ' ' + user.name }}
+      </span>
+
+    <button (click)="stopIdentityTheft()" *ngIf="user.secondary" color="warn" mat-raised-button>
+      {{ 'CORE.STOP' | commonTranslate: lang }}
+    </button>
+  </div>
+
+  <span (click)="getHistory()" [matMenuTriggerFor]="menuHistory"
+        class="material-icons header-icon max-width-5">history</span>
+  <mat-menu #menuHistory="matMenu" class="action-menu">
+    <ng-container *ngFor="let history of historyList" [ngSwitch]="history.type">
+      <button (click)="navigate('expenditure-commitment', '/purchase-orders/' + history.id)" *ngSwitchCase="'PRODUCT'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">theaters</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.PRODUCT' | commonTranslate : lang }}{{ history.type }} {{ history.ref }}
+      </button>
+      <button (click)="navigate('expenditure-commitment', '/purchase-orders/' + history.id)" *ngSwitchCase="'PO'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">receipt_long</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.PO' | commonTranslate : lang }} {{ history.ref }}
+      </button>
+      <button (click)="navigate('commercial', '/deal/consult/' + history.id)" *ngSwitchCase="'DEAL'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">local_offer</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.DEAL' | commonTranslate : lang }} {{ history.ref }}
+      </button>
+      <button (click)="navigate('commercial', '/work-record/consult/'+ history.id +'/general')" *ngSwitchCase="'WORK'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">assignment</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.WORK_RECORD' | commonTranslate : lang }} {{ history.ref }}
+      </button>
+      <button (click)="navigate('legal', '/contracts-details/acq/' + history.id)"
+              *ngSwitchCase="'CONTRACT_ACQ'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">shop_two</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.CONTRACT_ACQ' | commonTranslate : lang }} {{ history.ref }}
+      </button>
+      <button (click)="navigate('legal', '/contracts-details/cess/' + history.id)"
+              *ngSwitchCase="'CONTRACT_CESS'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">receipt</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.CONTRACT_CESS' | commonTranslate : lang }} {{ history.ref }}
+      </button>
+      <button (click)="navigate('legal', '/contracts-details/auth/' + history.id)"
+              *ngSwitchCase="'CONTRACT_AUTH'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">account_circle</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.CONTRACT_AUTH' | commonTranslate : lang }} {{ history.ref }}
+      </button>
+      <button (click)="navigate('expenditure-commitment', '/budget/form/' + history.id)" *ngSwitchCase="'BUDGET'"
+              mat-menu-item>
+        <mat-icon class="material-icons-outlined">payments</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.BUDGET' | commonTranslate : lang }} {{ history.ref }}
+      </button>
+      <button *ngSwitchCase="'NO_HISTORY_AVAILABLE'" mat-menu-item>
+        <mat-icon class="material-icons-outlined">not_interested</mat-icon>
+        {{ 'COMMON.HEADER.HISTORY.NO_HISTORY_AVAILABLE' | commonTranslate : lang }}
+      </button>
+    </ng-container>
+  </mat-menu>
+  <span class="header-separator"></span>
+
+  <span [matMenuTriggerFor]="settings" class="material-icons-outlined header-icon max-width-5">settings</span>
+
+  <!-- #enddocregion mat-menu-trigger-for -->
+  <mat-menu #settings="matMenu" class="settings-menu">
+    <button (click)="switchTheme()" mat-menu-item>
+      <mat-icon class="theme-icon">toggle_on</mat-icon>
+      <span>{{ 'COMMON.HEADER.PARAMETERS.THEME' | commonTranslate: lang }}</span>
+    </button>
+    <button class="img-btn" (click)='switchLang("en")' *ngIf='lang !== "en"' mat-menu-item>
+      <img class="mat-icon" src="assets/img/flag/en-flag.png">
+      <span>{{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.ENGLISH' | commonTranslate: lang }}</span>
+    </button>
+    <button class="img-btn" (click)='switchLang("fr")' *ngIf='lang !== "fr"' mat-menu-item>
+      <img class="mat-icon" src="assets/img/flag/fr-flag.png">
+      <span>{{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.FRENCH' | commonTranslate: lang }}</span>
+    </button>
+    <button class="img-btn" (click)='switchLang("de")' *ngIf='lang !== "de"' mat-menu-item>
+      <img class="mat-icon" src="assets/img/flag/de-flag.png">
+      <span>{{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.DEUTCH' | commonTranslate: lang }}</span>
+    </button>
+    <ng-container *ngxPermissionsExcept="restrictions">
+      <!--USER-->
+      <button (click)="navigate('user', '/account/authorization/search')" *ngIf="user && user.admin" mat-menu-item>
+        <mat-icon class="material-icons-outlined">manage_accounts</mat-icon>
+        <span>{{ 'COMMON.HEADER.MENU.USER.SECTION_TITLE' | commonTranslate: lang }}</span>
+      </button>
+    </ng-container>
+      <!--MY PREFERENCES-->
+      <button (click)="navigate('user', '/account/settings')" mat-menu-item>
+        <mat-icon class="material-icons-outlined">settings</mat-icon>
+        <span>{{ 'COMMON.HEADER.MENU.USER.SETTINGS' | commonTranslate: lang }}</span>
+      </button>
+  </mat-menu>
+</mat-toolbar>
+