new-front-common-library 0.0.72 → 0.0.73

package/assets/css/_global.scss

@@ -8,9 +8,9 @@
 
 @font-face {
 
-  font-family: "Sofia pro";
+  font-family: "Sofia Pro";
 
-  src: local("Sofia pro"), url('../fonts/SofiaPro.ttf') format("truetype");
+  src: local("Sofia Pro"), url('../fonts/SofiaPro.ttf') format("truetype");
 
 }
 

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,28 +1,18 @@
-{
-  "name": "new-front-common-library",
-  "version": "0.0.72",
-  "Dependencies": {
-    "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0",
-    "tslib": "^2.3.0"
-  },
-  "peerDependencies": {
-    "@angular/cdk": "^12.2.2",
-    "@angular/material": "^12.2.2",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "6.0.0",
-    "crypto-js": "^4.1.1",
-    "ngx-cookie-service": "^12.0.3",
-    "ngx-permissions": "^8.1.1"
-  },
-  "main": "bundles/new-front-common-library.umd.js",
-  "module": "fesm2015/new-front-common-library.js",
-  "es2015": "fesm2015/new-front-common-library.js",
-  "esm2015": "esm2015/new-front-common-library.js",
-  "fesm2015": "fesm2015/new-front-common-library.js",
-  "typings": "new-front-common-library.d.ts",
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.2.0"
-  }
-}
+{
+  "name": "new-front-common-library",
+  "version": "0.0.73",
+  "Dependencies": {
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^12.2.2",
+    "@angular/material": "^12.2.2",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "6.0.0",
+    "crypto-js": "^4.1.1",
+    "ngx-cookie-service": "^12.0.3",
+    "ngx-permissions": "^8.1.1"
+  }
+}

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,306 @@
+<mat-toolbar [ngClass]="{ 'light-header': theme !== 'dark' }"
+             class="sc-header d-flex align-items-center">
+  <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>
+  <span class="header-separator"></span>
+  <span [matMenuTriggerFor]="menu_global" class="material-icons header-icon max-width-5">apps</span>
+  <mat-menu #menu_global="matMenu" class="action-menu">
+    <!--DASHBOARD-->
+    <button (click)="navigate(null, '/dashboard')" mat-menu-item>
+      <span class="material-icons-outlined">apps</span>
+      <span>{{ 'COMMON.HEADER.MENU.DASHBOARD' | commonTranslate: lang }}</span>
+    </button>
+    <!--COMMERCIAL-->
+    <span *ngxPermissionsOnly="['COMMERCIAL']">
+        <button (click)="navigate('commercial', '/deal/search')" mat-menu-item>
+        <span class="material-icons-outlined">local_offer</span>
+        <span>{{ 'COMMON.HEADER.MENU.COMMERCIAL.DEAL' | commonTranslate: lang }}</span>
+      </button>
+      <button (click)="navigate('commercial', '/work-record/search')" mat-menu-item>
+        <span class="material-icons-outlined">theaters</span>
+        <span>{{ 'COMMON.HEADER.MENU.COMMERCIAL.WORK_RECORD' | commonTranslate: lang }}</span>
+      </button>
+      <button (click)="navigate('commercial', '/vod/search')" mat-menu-item>
+        <span class="material-icons-outlined">manage_search</span>
+        <span>{{ 'COMMON.HEADER.MENU.COMMERCIAL.VOD_SEARCH' | commonTranslate: lang }}</span>
+      </button>
+      <button (click)="navigate('commercial', '/accounting-closing/consult')"
+              *ngxPermissionsOnly="['ACCOUNTANT', 'ADMINISTRATIVE_CONTROLLER']"
+              mat-menu-item>
+        <span class="material-icons-outlined">account_balance_wallet</span>
+        <span>{{ 'COMMON.HEADER.MENU.COMMERCIAL.ACCOUNTING_CLOSING' | commonTranslate: lang }}</span>
+      </button>
+      <button (click)="navigate('commercial', '/invoice/search')" mat-menu-item>
+        <span class="material-icons-outlined">receipt</span>
+        <span>{{ 'COMMON.HEADER.MENU.COMMERCIAL.INVOICE' | commonTranslate: lang }}</span>
+      </button>
+      <button (click)="navigate('commercial', '/turnover/search')"
+              *ngxPermissionsOnly="['ACCOUNTANT', 'ADMINISTRATIVE_CONTROLLER']"
+              mat-menu-item>
+        <span class="material-icons-outlined">request_quote</span>
+        <span>{{ 'COMMON.HEADER.MENU.COMMERCIAL.TURNOVER' | commonTranslate: lang }}</span>
+      </button>
+      </span>
+    <!--USER-->
+    <button (click)="navigate('user', '/account/authorization/search')" *ngIf="user && user.admin" mat-menu-item>
+      <span class="material-icons-outlined">manage_accounts</span>
+      <span>{{ 'COMMON.HEADER.MENU.USER.SECTION_TITLE' | commonTranslate: lang }}</span>
+    </button>
+    <!--MY PREFERENCES-->
+    <button (click)="navigate('user', '/account/settings')" mat-menu-item>
+      <span class="material-icons-outlined">settings</span>
+      <span>{{ 'COMMON.HEADER.MENU.USER.SETTINGS' | commonTranslate: lang }}</span>
+    </button>
+    <!--BATCH-->
+    <button (click)="navigate('batch', '/jobs/referential')" *ngxPermissionsOnly="['MODULE REF']" mat-menu-item>
+      <span class="material-icons-outlined">autorenew</span>
+      <span>{{ 'COMMON.HEADER.MENU.REFERENTIAL.BATCH' | commonTranslate: lang }}</span>
+    </button>
+    <!--TV DATA-->
+    <button (click)="navigate('tvdata', '/infos-center')" *ngxPermissionsOnly="['TVDATA']" mat-menu-item>
+      <span class="material-icons-outlined">source</span>
+      <span>{{ 'COMMON.HEADER.MENU.TV-DATA' | commonTranslate: lang }}</span>
+    </button>
+    <!--EXPENDITURE COMMITMENT-->
+    <button (click)="navigate('expenditure-commitment', '/home/commands')" *ngxPermissionsExcept="['UNIVERSAL_ROLE']"
+            mat-menu-item>
+      <span class="material-icons-outlined">receipt_long</span>
+      <span>{{ 'COMMON.HEADER.MENU.EXPENDITURE_COMMITMENT' | commonTranslate: lang }}</span>
+    </button>
+    <!--BI-->
+    <button (click)="navigate('bi', '/simple-search/form')" *ngxPermissionsOnly="['MODULE BI']" mat-menu-item>
+      <span class="material-icons-outlined">travel_explore</span>
+      <span>{{ 'COMMON.HEADER.MENU.BI.SEARCH' | commonTranslate: lang }}</span>
+    </button>
+    <!--LEGAL-->
+    <button (click)="navigate('legal', '/contracts/menu/legals-det')" *ngxPermissionsOnly="['LEGAL']" mat-menu-item>
+      <span class="material-icons-outlined">gavel</span>
+      <span>{{ 'COMMON.HEADER.MENU.LEGAL' | commonTranslate: lang }}</span>
+    </button>
+    <!--CALENDAR-->
+    <button (click)="navigate('calendar', '')" mat-menu-item>
+      <span class="material-icons-outlined">calendar_month</span>
+      <span>{{ 'COMMON.HEADER.MENU.CALENDAR' | commonTranslate: lang }}</span>
+    </button>
+  </mat-menu>
+  <span class="header-separator"></span>
+  <span [matMenuTriggerFor]="menu" class="material-icons-outlined header-icon max-width-5">add_box</span>
+  <mat-menu #menu="matMenu" class="action-menu">
+    <button (click)="navigate('video', '/product/form')" mat-menu-item>
+      <span class="material-icons-outlined">theaters</span>
+      {{ 'COMMON.HEADER.CREATION.PRODUCT' | commonTranslate: lang }}
+    </button>
+    <button (click)="navigate('expenditure-commitment', '/purchase-orders/form')" mat-menu-item>
+      <span class="material-icons-outlined">receipt_long</span>
+      {{ 'COMMON.HEADER.CREATION.PO' | commonTranslate: lang }}
+    </button>
+    <button (click)="navigate('commercial', '/deal/form')" mat-menu-item>
+      <span class="material-icons-outlined">local_offer</span>
+      {{ 'COMMON.HEADER.CREATION.DEAL' | commonTranslate: lang }}
+    </button>
+
+    <button (click)="navigate('legal', '/createContract/acq')" mat-menu-item>
+      <span class="material-icons-outlined">shop_two</span>
+      {{ 'COMMON.HEADER.CREATION.CREATION_ACQ' | commonTranslate: lang }}
+    </button>
+    <button (click)="navigate('legal', '/createContract/sales')" mat-menu-item>
+      <span class="material-icons-outlined">article</span>
+      {{ 'COMMON.HEADER.CREATION.CREATION_CESS' | commonTranslate: lang }}
+    </button>
+	<button (click)="navigate('legal', '/createContract/auth')" mat-menu-item>
+      <span class="material-icons-outlined">account_circle</span>
+      {{ 'COMMON.HEADER.CREATION.CREATION_AUTH' | commonTranslate: lang }}
+    </button>
+  </mat-menu>
+  <span class="header-separator"></span>
+  <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>
+        <span class="material-icons-outlined">theaters</span>
+        {{ '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>
+        <span class="material-icons-outlined">receipt_long</span>
+        {{ 'COMMON.HEADER.HISTORY.PO' | commonTranslate : lang  }} {{history.ref}}
+      </button>
+      <button (click)="navigate('commercial', '/deal/consult/' + history.id)" *ngSwitchCase="'DEAL'"
+              mat-menu-item>
+        <span class="material-icons-outlined">local_offer</span>
+        {{ 'COMMON.HEADER.HISTORY.DEAL' | commonTranslate : lang  }} {{history.ref}}
+      </button>
+      <button (click)="navigate('commercial', '/work-record/consult/'+ history.id +'/general')" *ngSwitchCase="'WORK'"
+              mat-menu-item>
+        <span class="material-icons-outlined">theaters</span>
+        {{ 'COMMON.HEADER.HISTORY.WORK' | commonTranslate : lang }} {{history.ref}}
+      </button>
+      <button (click)="navigate('legal', '/contracts/contract-acq/consult/' + history.id)"
+              *ngSwitchCase="'CONTRACT_ACQ'"
+              mat-menu-item>
+        <span class="material-icons-outlined">assignment</span>
+        {{ 'COMMON.HEADER.HISTORY.CONTRACT-ACQ' | commonTranslate : lang  }} {{history.ref}}
+      </button>
+      <button (click)="navigate('legal', '/contracts/contract-cess/consult/' + history.id)"
+              *ngSwitchCase="'CONTRACT_CESS'"
+              mat-menu-item>
+        <span class="material-icons-outlined">article</span>
+        {{ 'COMMON.HEADER.HISTORY.CONTRACT-CESS' | commonTranslate : lang  }} {{history.ref}}
+      </button>
+      <button (click)="navigate('expenditure-commitment', '/budget/form/' + history.id)" *ngSwitchCase="'BUDGET'"
+              mat-menu-item>
+        <span class="material-icons-outlined">payments</span>
+        {{ 'COMMON.HEADER.HISTORY.BUDGET' | commonTranslate : lang  }} {{history.ref}}
+      </button>
+      <button *ngSwitchCase="'NO_HISTORY_AVAILABLE'" mat-menu-item>
+        <span class="material-icons-outlined">not_interested</span>
+        {{ 'COMMON.HEADER.HISTORY.NO_HISTORY_AVAILABLE' | commonTranslate : lang  }}
+      </button>
+    </ng-container>
+  </mat-menu>
+
+  <div class="global-search d-flex max-width-60">
+    <i class="material-icons global-search-icon header-icon">search</i>
+    <span class="global-search-separator"></span>
+    <mat-form-field class="max-width-100" floatLabel="never">
+      <div class="d-flex">
+        <input [formControl]="formControlSearch" [matAutocomplete]="autoSearch"
+               class="global-search-input max-width-85"
+               id="search-input"
+               matInput
+               placeholder="search ..."/>
+        <button (click)="navigate(null, '/advanced-search')"
+                class="btn advanced-button" mat-raised-button>
+          <span class="material-icons icon">flash_on</span>
+          {{ 'COMMON.HEADER.GLOBAL_SEARCH.ADVANCED' | commonTranslate: lang }}
+        </button>
+
+        <mat-autocomplete #autoSearch="matAutocomplete" class="mat-autocomplete-global-search" panelWidth="56vw">
+          <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>
+          </mat-option>
+        </mat-autocomplete>
+      </div>
+
+    </mat-form-field>
+
+  </div>
+
+  <span class="d-flex flex-column max-width-15"></span>
+  <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 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="action-menu">
+    <button (click)="switchTheme()" mat-menu-item>
+      <mat-icon class="menu-icon mat-icon">toggle_on</mat-icon>
+      <span>{{'COMMON.HEADER.PARAMETERS.THEME' | commonTranslate: lang}}</span>
+    </button>
+    <button (click)='switchLang("en")' *ngIf='lang !== "en"' mat-menu-item>
+      <img src="assets/img/flag/en-flag.png">
+      {{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.ENGLISH' | commonTranslate: lang }}
+    </button>
+    <button (click)='switchLang("fr")' *ngIf='lang !== "fr"' mat-menu-item>
+      <img src="assets/img/flag/fr-flag.png">
+      {{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.FRENCH' | commonTranslate: lang }}
+    </button>
+    <button (click)='switchLang("de")' *ngIf='lang !== "de" ' mat-menu-item>
+      <img src="assets/img/flag/de-flag.png">
+      {{ 'COMMON.HEADER.PARAMETERS.TITLE.LANGUAGES.DEUTCH' | commonTranslate: lang }}
+    </button>
+  </mat-menu>
+</mat-toolbar>
+