@testgorilla/tgo-ui 0.0.10 → 0.0.14

package/components/banner/banner.component.d.ts

@@ -0,0 +1,27 @@
+import * as i0 from "@angular/core";
+export declare class BannerComponent {
+    /**
+     * Banner background color
+     *
+     * @type {TemplateStringsArray}
+     * @memberof BannerComponent
+     */
+    backgroundColor: string;
+    /**
+     * Banner text
+     *
+     * @type {string}
+     * @memberof BannerComponent
+     */
+    text: string;
+    /**
+     * Banner icon
+     *
+     * @type {string}
+     * @memberof BannerComponent
+     */
+    icon: string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BannerComponent, "ui-banner", never, { "backgroundColor": "backgroundColor"; "text": "text"; "icon": "icon"; }, {}, never, never>;
+}

package/components/banner/banner.component.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./banner.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/icon";
+export declare class BannerComponentModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponentModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BannerComponentModule, [typeof i1.BannerComponent], [typeof i2.CommonModule, typeof i3.MatIconModule], [typeof i1.BannerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BannerComponentModule>;
+}

package/components/navbar/navbar.component.d.ts

@@ -18,18 +18,23 @@ export declare class NavbarComponent {
      */
     activedRoute: string;
     /**
-     * User first name and last name initials
+     * User first name and last name
      *
      * @type {string}
      * @memberof NavbarComponent
      */
-    userInitials: string;
+    userName: string;
     /**
      * @ignore
      */
     navigateEvent: EventEmitter<string>;
+    /**
+     * @ignore
+     */
+    logoutEvent: EventEmitter<void>;
     constructor();
     navigate(routeId: string): void;
+    logout(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "ui-navbar", never, { "routes": "routes"; "activedRoute": "activedRoute"; "userInitials": "userInitials"; }, { "navigateEvent": "navigateEvent"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "ui-navbar", never, { "routes": "routes"; "activedRoute": "activedRoute"; "userName": "userName"; }, { "navigateEvent": "navigateEvent"; "logoutEvent": "logoutEvent"; }, never, never>;
 }

package/components/navbar/navbar.component.module.d.ts

@@ -5,8 +5,9 @@ import * as i3 from "@angular/material/toolbar";
 import * as i4 from "@angular/material/icon";
 import * as i5 from "@angular/material/button";
 import * as i6 from "@angular/material/core";
+import * as i7 from "@angular/material/menu";
 export declare class NavbarComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NavbarComponentModule, [typeof i1.NavbarComponent], [typeof i2.CommonModule, typeof i3.MatToolbarModule, typeof i4.MatIconModule, typeof i5.MatButtonModule, typeof i6.MatRippleModule], [typeof i1.NavbarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NavbarComponentModule, [typeof i1.NavbarComponent], [typeof i2.CommonModule, typeof i3.MatToolbarModule, typeof i4.MatIconModule, typeof i5.MatButtonModule, typeof i6.MatRippleModule, typeof i7.MatMenuModule], [typeof i1.NavbarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NavbarComponentModule>;
 }

package/components/navigation/navigation.component.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '@angular/core';
+import { IStatusOptionItem } from '../status/status.model';
+import * as i0 from "@angular/core";
+export declare class NavigationComponent {
+    /**
+     * Navigation title
+     *
+     * @type {string}
+     * @memberof NavigationComponent
+     */
+    title: string;
+    /**
+     * Navigation subtitle
+     *
+     * @type {string}
+     * @memberof NavigationComponent
+     */
+    subtitle: string;
+    /**
+     * Navigation status component
+     *
+     * @type {IStatusOptionItem}
+     * @memberof NavigationComponent
+     * @ignore
+     */
+    statusItem: IStatusOptionItem;
+    /**
+     * @ignore
+     */
+    goBackClickedEvent: EventEmitter<void>;
+    constructor();
+    goBackClicked(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationComponent, "ui-navigation", never, { "title": "title"; "subtitle": "subtitle"; "statusItem": "statusItem"; }, { "goBackClickedEvent": "goBackClickedEvent"; }, never, never>;
+}

package/components/navigation/navigation.component.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./navigation.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/material/button";
+import * as i5 from "../status/status.component.module";
+export declare class NavigationComponentModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationComponentModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NavigationComponentModule, [typeof i1.NavigationComponent], [typeof i2.CommonModule, typeof i3.MatIconModule, typeof i4.MatButtonModule, typeof i5.StatusComponentModule], [typeof i1.NavigationComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NavigationComponentModule>;
+}

package/components/status/status.component.d.ts

@@ -0,0 +1,27 @@
+import * as i0 from "@angular/core";
+export declare class StatusComponent {
+    /**
+     * Status background color
+     *
+     * @type {TemplateStringsArray}
+     * @memberof StatusComponent
+     */
+    backgroundColor: string;
+    /**
+     * Status text color
+     *
+     * @type {TemplateStringsArray}
+     * @memberof StatusComponent
+     */
+    color: string;
+    /**
+     * Status title
+     *
+     * @type {string}
+     * @memberof StatusComponent
+     */
+    title: string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatusComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatusComponent, "ui-status", never, { "backgroundColor": "backgroundColor"; "color": "color"; "title": "title"; }, {}, never, never>;
+}

package/components/status/status.component.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./status.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/icon";
+export declare class StatusComponentModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatusComponentModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StatusComponentModule, [typeof i1.StatusComponent], [typeof i2.CommonModule, typeof i3.MatIconModule], [typeof i1.StatusComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<StatusComponentModule>;
+}

package/components/status/status.model.d.ts

@@ -0,0 +1,8 @@
+export interface IStatusOptions {
+    [key: string]: IStatusOptionItem;
+}
+export interface IStatusOptionItem {
+    title: string;
+    color: string;
+    backgroundColor: string;
+}

package/components/table/table.component.d.ts

@@ -2,7 +2,8 @@ import { EventEmitter, OnInit } from '@angular/core';
 import { MatSort, Sort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { DataPropertyGetterPipe } from '../../shared/pipes/dataPropertyGetter';
-import { DataType, DateFormat, IDataSource, IStatusOptions, ITableColumn } from './table.model';
+import { IStatusOptions } from '../status/status.model';
+import { DataType, DateFormat, IDataSource, ITableColumn } from './table.model';
 import * as i0 from "@angular/core";
 export declare class TableComponent<T extends IDataSource> implements OnInit {
     private dataPropertyGetterPipe;

package/components/table/table.component.module.d.ts

@@ -5,8 +5,9 @@ import * as i3 from "@angular/common";
 import * as i4 from "@angular/material/table";
 import * as i5 from "@angular/material/sort";
 import * as i6 from "ngx-date-fns";
+import * as i7 from "../status/status.component.module";
 export declare class TableComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TableComponentModule, [typeof i1.TableComponent, typeof i2.DataPropertyGetterPipe], [typeof i3.CommonModule, typeof i4.MatTableModule, typeof i5.MatSortModule, typeof i6.DateFnsModule], [typeof i1.TableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TableComponentModule, [typeof i1.TableComponent, typeof i2.DataPropertyGetterPipe], [typeof i3.CommonModule, typeof i4.MatTableModule, typeof i5.MatSortModule, typeof i6.DateFnsModule, typeof i7.StatusComponentModule], [typeof i1.TableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TableComponentModule>;
 }

package/components/table/table.model.d.ts

@@ -9,14 +9,6 @@ export interface ITableColumn<T> {
     dataType?: DataType;
     dateFormat?: DateFormat;
 }
-export interface IStatusOptions {
-    [key: string]: IStatusOptionItem;
-}
-export interface IStatusOptionItem {
-    title: string;
-    color: string;
-    backgroundColor: string;
-}
 export declare enum DataType {
     Date = "date",
     String = "string",

package/esm2020/components/banner/banner.component.mjs

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/icon";
+export class BannerComponent {
+    constructor() {
+        // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
+        // https://github.com/storybookjs/storybook/issues/16865
+        // https://github.com/storybookjs/storybook/issues/17004
+        /**
+         * Banner background color
+         *
+         * @type {TemplateStringsArray}
+         * @memberof BannerComponent
+         */
+        this.backgroundColor = '';
+        /**
+         * Banner text
+         *
+         * @type {string}
+         * @memberof BannerComponent
+         */
+        this.text = '';
+        /**
+         * Banner icon
+         *
+         * @type {string}
+         * @memberof BannerComponent
+         */
+        this.icon = 'error_outline';
+    }
+}
+BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerComponent, selector: "ui-banner", inputs: { backgroundColor: "backgroundColor", text: "text", icon: "icon" }, ngImport: i0, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n    <mat-icon>{{ icon }}</mat-icon>\n    <span>{{ text }}</span>\n</div>", styles: ["#banner{width:100%;height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-banner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n    <mat-icon>{{ icon }}</mat-icon>\n    <span>{{ text }}</span>\n</div>", styles: ["#banner{width:100%;height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2Jhbm5lci9iYW5uZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYmFubmVyL2Jhbm5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUzdGLE1BQU0sT0FBTyxlQUFlO0lBNkIxQjtRQTVCQSxtSEFBbUg7UUFDbkgsd0RBQXdEO1FBQ3hELHdEQUF3RDtRQUV4RDs7Ozs7V0FLRztRQUNNLG9CQUFlLEdBQUcsRUFBRSxDQUFDO1FBRTlCOzs7OztXQUtHO1FBQ00sU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUVuQjs7Ozs7V0FLRztRQUNNLFNBQUksR0FBRyxlQUFlLENBQUM7SUFFakIsQ0FBQzs7NkdBN0JMLGVBQWU7aUdBQWYsZUFBZSw2SENUNUIsNElBR007NEZETU8sZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBYTVCLGVBQWU7c0JBQXZCLEtBQUs7Z0JBUUcsSUFBSTtzQkFBWixLQUFLO2dCQVFHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS1iYW5uZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYmFubmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYmFubmVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBCYW5uZXJDb21wb25lbnQge1xuICAvLyBUT0RPOiBTb21lIHByb3BlcnRpZXMgYW5kIG1ldGhvZHMgYXJlIGlnbm9yZWQgb24gcHVycG9zZSBiZWNhdXNlIG9mIGEgY3VycmVudCBpc3N1ZSB3aXRoIGNvbXBvZG9jIGFuZCBhbmd1bGFyIDEzXG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE2ODY1XG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE3MDA0XG5cbiAgLyoqXG4gICAqIEJhbm5lciBiYWNrZ3JvdW5kIGNvbG9yXG4gICAqXG4gICAqIEB0eXBlIHtUZW1wbGF0ZVN0cmluZ3NBcnJheX1cbiAgICogQG1lbWJlcm9mIEJhbm5lckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgYmFja2dyb3VuZENvbG9yID0gJyc7XG5cbiAgLyoqXG4gICAqIEJhbm5lciB0ZXh0XG4gICAqXG4gICAqIEB0eXBlIHtzdHJpbmd9XG4gICAqIEBtZW1iZXJvZiBCYW5uZXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHRleHQgPSAnJztcblxuICAvKipcbiAgICogQmFubmVyIGljb25cbiAgICpcbiAgICogQHR5cGUge3N0cmluZ31cbiAgICogQG1lbWJlcm9mIEJhbm5lckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgaWNvbiA9ICdlcnJvcl9vdXRsaW5lJztcblxuICBjb25zdHJ1Y3RvcigpIHt9XG59XG4iLCI8ZGl2IGlkPVwiYmFubmVyXCIgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiYmFja2dyb3VuZENvbG9yXCI+XG4gICAgPG1hdC1pY29uPnt7IGljb24gfX08L21hdC1pY29uPlxuICAgIDxzcGFuPnt7IHRleHQgfX08L3NwYW4+XG48L2Rpdj4iXX0=

package/esm2020/components/banner/banner.component.module.mjs

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { BannerComponent } from './banner.component';
+import * as i0 from "@angular/core";
+export class BannerComponentModule {
+}
+BannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, declarations: [BannerComponent], imports: [CommonModule, MatIconModule], exports: [BannerComponent] });
+BannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, providers: [], imports: [[CommonModule, MatIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BannerComponent],
+                    imports: [CommonModule, MatIconModule],
+                    exports: [BannerComponent],
+                    providers: [],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9iYW5uZXIvYmFubmVyLmNvbXBvbmVudC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7QUFRckQsTUFBTSxPQUFPLHFCQUFxQjs7bUhBQXJCLHFCQUFxQjtvSEFBckIscUJBQXFCLGlCQUxqQixlQUFlLGFBQ3BCLFlBQVksRUFBRSxhQUFhLGFBQzNCLGVBQWU7b0hBR2QscUJBQXFCLGFBRnJCLEVBQUUsWUFGSixDQUFDLFlBQVksRUFBRSxhQUFhLENBQUM7NEZBSTNCLHFCQUFxQjtrQkFOakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQy9CLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxhQUFhLENBQUM7b0JBQ3RDLE9BQU8sRUFBRSxDQUFDLGVBQWUsQ0FBQztvQkFDMUIsU0FBUyxFQUFFLEVBQUU7aUJBQ2QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcbmltcG9ydCB7IEJhbm5lckNvbXBvbmVudCB9IGZyb20gJy4vYmFubmVyLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0Jhbm5lckNvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIE1hdEljb25Nb2R1bGVdLFxuICBleHBvcnRzOiBbQmFubmVyQ29tcG9uZW50XSxcbiAgcHJvdmlkZXJzOiBbXSxcbn0pXG5leHBvcnQgY2xhc3MgQmFubmVyQ29tcG9uZW50TW9kdWxlIHt9XG4iXX0=

package/esm2020/components/navbar/navbar.component.mjs

@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/toolbar";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/material/core";
+import * as i2 from "@angular/material/button";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/material/menu";
+import * as i5 from "@angular/common";
 export class NavbarComponent {
     constructor() {
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
@@ -24,33 +26,42 @@ export class NavbarComponent {
          */
         this.activedRoute = '';
         /**
-         * User first name and last name initials
+         * User first name and last name
          *
          * @type {string}
          * @memberof NavbarComponent
          */
-        this.userInitials = '';
+        this.userName = '';
         /**
          * @ignore
          */
         this.navigateEvent = new EventEmitter();
+        /**
+         * @ignore
+         */
+        this.logoutEvent = new EventEmitter();
     }
     navigate(routeId) {
         this.navigateEvent.emit(`/${routeId}`);
     }
+    logout() {
+        this.logoutEvent.emit();
+    }
 }
 NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userInitials: "userInitials" }, outputs: { navigateEvent: "navigateEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <!-- <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button> -->\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px;margin-left:28px;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:900}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <!-- <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button> -->\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px;margin-left:28px;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:900}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { routes: [{
                 type: Input
             }], activedRoute: [{
                 type: Input
-            }], userInitials: [{
+            }], userName: [{
                 type: Input
             }], navigateEvent: [{
                 type: Output
+            }], logoutEvent: [{
+                type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25hdmJhci9uYXZiYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2YmFyL25hdmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQVVuSCxNQUFNLE9BQU8sZUFBZTtJQW1DMUI7UUFsQ0EsbUhBQW1IO1FBQ25ILHdEQUF3RDtRQUN4RCx3REFBd0Q7UUFFeEQ7Ozs7OztXQU1HO1FBQ00sV0FBTSxHQUFhLEVBQUUsQ0FBQztRQUUvQjs7Ozs7V0FLRztRQUNNLGlCQUFZLEdBQUcsRUFBRSxDQUFDO1FBRTNCOzs7OztXQUtHO1FBQ00saUJBQVksR0FBRyxFQUFFLENBQUM7UUFFM0I7O1dBRUc7UUFDTyxrQkFBYSxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO0lBRTVELENBQUM7SUFFaEIsUUFBUSxDQUFDLE9BQWU7UUFDdEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxPQUFPLEVBQUUsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7OzZHQXZDVSxlQUFlO2lHQUFmLGVBQWUsd0xDVjVCLG84QkFzQkE7NEZEWmEsZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBYzVCLE1BQU07c0JBQWQsS0FBSztnQkFRRyxZQUFZO3NCQUFwQixLQUFLO2dCQVFHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElSb3V0ZSB9IGZyb20gJy4vbmF2YmFyLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndWktbmF2YmFyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25hdmJhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25hdmJhci5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgTmF2YmFyQ29tcG9uZW50IHtcbiAgLy8gVE9ETzogU29tZSBwcm9wZXJ0aWVzIGFuZCBtZXRob2RzIGFyZSBpZ25vcmVkIG9uIHB1cnBvc2UgYmVjYXVzZSBvZiBhIGN1cnJlbnQgaXNzdWUgd2l0aCBjb21wb2RvYyBhbmQgYW5ndWxhciAxM1xuICAvLyBodHRwczovL2dpdGh1Yi5jb20vc3Rvcnlib29ranMvc3Rvcnlib29rL2lzc3Vlcy8xNjg2NVxuICAvLyBodHRwczovL2dpdGh1Yi5jb20vc3Rvcnlib29ranMvc3Rvcnlib29rL2lzc3Vlcy8xNzAwNFxuXG4gIC8qKlxuICAgKiBSb3V0ZXMgb2JqZWN0XG4gICAqXG4gICAqIEB0eXBlIHtJUm91dGV9XG4gICAqIEBtZW1iZXJvZiBOYXZiYXJDb21wb25lbnRcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQElucHV0KCkgcm91dGVzOiBJUm91dGVbXSA9IFtdO1xuXG4gIC8qKlxuICAgKiBBY3RpdmVkIHJvdXRlIGlkXG4gICAqXG4gICAqIEB0eXBlIHtzdHJpbmd9XG4gICAqIEBtZW1iZXJvZiBOYXZiYXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGFjdGl2ZWRSb3V0ZSA9ICcnO1xuXG4gIC8qKlxuICAgKiBVc2VyIGZpcnN0IG5hbWUgYW5kIGxhc3QgbmFtZSBpbml0aWFsc1xuICAgKlxuICAgKiBAdHlwZSB7c3RyaW5nfVxuICAgKiBAbWVtYmVyb2YgTmF2YmFyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSB1c2VySW5pdGlhbHMgPSAnJztcblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQE91dHB1dCgpIG5hdmlnYXRlRXZlbnQ6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5hdmlnYXRlKHJvdXRlSWQ6IHN0cmluZykge1xuICAgIHRoaXMubmF2aWdhdGVFdmVudC5lbWl0KGAvJHtyb3V0ZUlkfWApO1xuICB9XG59XG4iLCI8bWF0LXRvb2xiYXI+XG4gICAgPGRpdiBjbGFzcz1cImN1c3RvbS10b29sYmFyIHJvd1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaW5pdC1ncmFkaWVudFwiPjwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGVudCByb3dcIj5cbiAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJsb2dvXCIgc3JjPVwiL2ltYWdlcy90ZXN0Z29yaWxsYS5zdmdcIiAoY2xpY2spPVwibmF2aWdhdGUoJycpXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibmF2aWdhdGlvbiByb3dcIj5cbiAgICAgICAgICAgICAgICA8YSAqbmdGb3I9XCJsZXQgcm91dGUgb2Ygcm91dGVzXCIgKGNsaWNrKT1cIm5hdmlnYXRlKHJvdXRlLmlkKVwiIFtuZ0NsYXNzXT1cInsnYWN0aXZlJzogYWN0aXZlZFJvdXRlID09PSByb3V0ZS5pZH1cIj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4+e3sgcm91dGUudGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgICAgICAgPC9hPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICAgICAgICAgICAgICAgIDwhLS0gPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvbj5oZWxwX291dGxpbmU8L21hdC1pY29uPlxuICAgICAgICAgICAgICAgIDwvYnV0dG9uPiAtLT5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZmlsZS1jaXJjbGVcIiBtYXRSaXBwbGUgW21hdFJpcHBsZVVuYm91bmRlZF09XCJ0cnVlXCIgW21hdFJpcHBsZUNlbnRlcmVkXT1cInRydWVcIj5cbiAgICAgICAgICAgICAgICAgICAge3sgdXNlckluaXRpYWxzIH19XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmaW5hbC1ncmFkaWVudFwiPjwvZGl2PlxuICAgIDwvZGl2PlxuPC9tYXQtdG9vbGJhcj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25hdmJhci9uYXZiYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2YmFyL25hdmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBVW5ILE1BQU0sT0FBTyxlQUFlO0lBd0MxQjtRQXZDQSxtSEFBbUg7UUFDbkgsd0RBQXdEO1FBQ3hELHdEQUF3RDtRQUV4RDs7Ozs7O1dBTUc7UUFDTSxXQUFNLEdBQWEsRUFBRSxDQUFDO1FBRS9COzs7OztXQUtHO1FBQ00saUJBQVksR0FBRyxFQUFFLENBQUM7UUFFM0I7Ozs7O1dBS0c7UUFDTSxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBRXZCOztXQUVHO1FBQ08sa0JBQWEsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUUzRTs7V0FFRztRQUNPLGdCQUFXLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7SUFFdEQsQ0FBQztJQUVoQixRQUFRLENBQUMsT0FBZTtRQUN0QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLE9BQU8sRUFBRSxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFCLENBQUM7OzZHQWhEVSxlQUFlO2lHQUFmLGVBQWUsNE1DVjVCLDYyQkFzQlc7NEZEWkUsZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBYzVCLE1BQU07c0JBQWQsS0FBSztnQkFRRyxZQUFZO3NCQUFwQixLQUFLO2dCQVFHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFLRyxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSVJvdXRlIH0gZnJvbSAnLi9uYXZiYXIubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS1uYXZiYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmF2YmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmF2YmFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBOYXZiYXJDb21wb25lbnQge1xuICAvLyBUT0RPOiBTb21lIHByb3BlcnRpZXMgYW5kIG1ldGhvZHMgYXJlIGlnbm9yZWQgb24gcHVycG9zZSBiZWNhdXNlIG9mIGEgY3VycmVudCBpc3N1ZSB3aXRoIGNvbXBvZG9jIGFuZCBhbmd1bGFyIDEzXG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE2ODY1XG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE3MDA0XG5cbiAgLyoqXG4gICAqIFJvdXRlcyBvYmplY3RcbiAgICpcbiAgICogQHR5cGUge0lSb3V0ZX1cbiAgICogQG1lbWJlcm9mIE5hdmJhckNvbXBvbmVudFxuICAgKiBAaWdub3JlXG4gICAqL1xuICBASW5wdXQoKSByb3V0ZXM6IElSb3V0ZVtdID0gW107XG5cbiAgLyoqXG4gICAqIEFjdGl2ZWQgcm91dGUgaWRcbiAgICpcbiAgICogQHR5cGUge3N0cmluZ31cbiAgICogQG1lbWJlcm9mIE5hdmJhckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgYWN0aXZlZFJvdXRlID0gJyc7XG5cbiAgLyoqXG4gICAqIFVzZXIgZmlyc3QgbmFtZSBhbmQgbGFzdCBuYW1lXG4gICAqXG4gICAqIEB0eXBlIHtzdHJpbmd9XG4gICAqIEBtZW1iZXJvZiBOYXZiYXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHVzZXJOYW1lID0gJyc7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBPdXRwdXQoKSBuYXZpZ2F0ZUV2ZW50OiBFdmVudEVtaXR0ZXI8c3RyaW5nPiA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBAT3V0cHV0KCkgbG9nb3V0RXZlbnQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmF2aWdhdGUocm91dGVJZDogc3RyaW5nKSB7XG4gICAgdGhpcy5uYXZpZ2F0ZUV2ZW50LmVtaXQoYC8ke3JvdXRlSWR9YCk7XG4gIH1cblxuICBsb2dvdXQoKTogdm9pZCB7XG4gICAgdGhpcy5sb2dvdXRFdmVudC5lbWl0KCk7XG4gIH1cbn1cbiIsIjxtYXQtdG9vbGJhcj5cbiAgICA8ZGl2IGNsYXNzPVwiY3VzdG9tLXRvb2xiYXIgcm93XCI+XG4gICAgICAgICAgICA8aW1nIGNsYXNzPVwibG9nb1wiIHNyYz1cIi9pbWFnZXMvdGVzdGdvcmlsbGEuc3ZnXCIgKGNsaWNrKT1cIm5hdmlnYXRlKCcnKVwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm5hdmlnYXRpb24gcm93XCI+XG4gICAgICAgICAgICAgICAgPGEgKm5nRm9yPVwibGV0IHJvdXRlIG9mIHJvdXRlc1wiIChjbGljayk9XCJuYXZpZ2F0ZShyb3V0ZS5pZClcIiBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6IGFjdGl2ZWRSb3V0ZSA9PT0gcm91dGUuaWR9XCI+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuPnt7IHJvdXRlLnRpdGxlIH19PC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvYT5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFjdGlvbnNcIj5cbiAgICAgICAgICAgICAgICA8YnV0dG9uIG1hdC1idXR0b24gY2xhc3M9XCJwcm9maWxlLW1lbnVcIiBbbWF0TWVudVRyaWdnZXJGb3JdPVwibWVudVwiPlxuICAgICAgICAgICAgICAgICAgICB7eyB1c2VyTmFtZSB9fVxuICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+ZXhwYW5kX21vcmU8L21hdC1pY29uPlxuICAgICAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuPC9tYXQtdG9vbGJhcj5cblxuPG1hdC1tZW51ICNtZW51PVwibWF0TWVudVwiPlxuICAgIDxidXR0b24gbWF0LW1lbnUtaXRlbSAoY2xpY2spPVwibG9nb3V0KClcIj5cbiAgICAgICAgPG1hdC1pY29uPmxvZ291dDwvbWF0LWljb24+XG4gICAgICAgIExvZyBvdXRcbiAgICA8L2J1dHRvbj5cbjwvbWF0LW1lbnU+Il19

package/esm2020/components/navbar/navbar.component.module.mjs

@@ -1,23 +1,24 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NavbarComponent } from './navbar.component';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { NavbarComponent } from './navbar.component';
 import * as i0 from "@angular/core";
 export class NavbarComponentModule {
 }
 NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule], exports: [NavbarComponent] });
-NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule]] });
+NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule], exports: [NavbarComponent] });
+NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NavbarComponent],
-                    imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule],
+                    imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule],
                     exports: [NavbarComponent],
                     providers: [],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uYXZiYXIvbmF2YmFyLmNvbXBvbmVudC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQVF6RCxNQUFNLE9BQU8scUJBQXFCOzttSEFBckIscUJBQXFCO29IQUFyQixxQkFBcUIsaUJBTGpCLGVBQWUsYUFDcEIsWUFBWSxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxlQUFlLEVBQUUsZUFBZSxhQUMvRSxlQUFlO29IQUdkLHFCQUFxQixhQUZyQixFQUFFLFlBRkosQ0FBQyxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsYUFBYSxFQUFFLGVBQWUsRUFBRSxlQUFlLENBQUM7NEZBSS9FLHFCQUFxQjtrQkFOakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQy9CLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLGVBQWUsQ0FBQztvQkFDMUYsT0FBTyxFQUFFLENBQUMsZUFBZSxDQUFDO29CQUMxQixTQUFTLEVBQUUsRUFBRTtpQkFDZCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmF2YmFyQ29tcG9uZW50IH0gZnJvbSAnLi9uYXZiYXIuY29tcG9uZW50JztcbmltcG9ydCB7IE1hdFRvb2xiYXJNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC90b29sYmFyJztcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcbmltcG9ydCB7IE1hdEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7XG5pbXBvcnQgeyBNYXRSaXBwbGVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jb3JlJztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbTmF2YmFyQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgTWF0VG9vbGJhck1vZHVsZSwgTWF0SWNvbk1vZHVsZSwgTWF0QnV0dG9uTW9kdWxlLCBNYXRSaXBwbGVNb2R1bGVdLFxuICBleHBvcnRzOiBbTmF2YmFyQ29tcG9uZW50XSxcbiAgcHJvdmlkZXJzOiBbXSxcbn0pXG5leHBvcnQgY2xhc3MgTmF2YmFyQ29tcG9uZW50TW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uYXZiYXIvbmF2YmFyLmNvbXBvbmVudC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzdELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7QUFRckQsTUFBTSxPQUFPLHFCQUFxQjs7bUhBQXJCLHFCQUFxQjtvSEFBckIscUJBQXFCLGlCQUxqQixlQUFlLGFBQ3BCLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxhQUFhLGFBQzlGLGVBQWU7b0hBR2QscUJBQXFCLGFBRnJCLEVBQUUsWUFGSixDQUFDLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxhQUFhLENBQUM7NEZBSTlGLHFCQUFxQjtrQkFOakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQy9CLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxhQUFhLENBQUM7b0JBQ3pHLE9BQU8sRUFBRSxDQUFDLGVBQWUsQ0FBQztvQkFDMUIsU0FBUyxFQUFFLEVBQUU7aUJBQ2QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7XG5pbXBvcnQgeyBNYXRSaXBwbGVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jb3JlJztcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcbmltcG9ydCB7IE1hdE1lbnVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9tZW51JztcbmltcG9ydCB7IE1hdFRvb2xiYXJNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC90b29sYmFyJztcbmltcG9ydCB7IE5hdmJhckNvbXBvbmVudCB9IGZyb20gJy4vbmF2YmFyLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW05hdmJhckNvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIE1hdFRvb2xiYXJNb2R1bGUsIE1hdEljb25Nb2R1bGUsIE1hdEJ1dHRvbk1vZHVsZSwgTWF0UmlwcGxlTW9kdWxlLCBNYXRNZW51TW9kdWxlXSxcbiAgZXhwb3J0czogW05hdmJhckNvbXBvbmVudF0sXG4gIHByb3ZpZGVyczogW10sXG59KVxuZXhwb3J0IGNsYXNzIE5hdmJhckNvbXBvbmVudE1vZHVsZSB7fVxuIl19

package/esm2020/components/navigation/navigation.component.mjs

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/button";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "../status/status.component";
+import * as i4 from "@angular/common";
+export class NavigationComponent {
+    constructor() {
+        /**
+         * @ignore
+         */
+        this.goBackClickedEvent = new EventEmitter();
+    }
+    goBackClicked() {
+        this.goBackClickedEvent.emit();
+    }
+}
+NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", statusItem: "statusItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div id=\"navigation\">\n    <button mat-icon-button (click)=\"goBackClicked()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"content\">\n        <div class=\"title\">\n            <span>{{ title }}</span>\n            <div class=\"status\" *ngIf=\"statusItem\">\n                <ui-status [backgroundColor]=\"statusItem.backgroundColor\" [color]=\"statusItem.color\" [title]=\"statusItem.title\"></ui-status>\n            </div>\n        </div>\n        <div class=\"subtitle\">\n            {{ subtitle }}\n        </div>\n    </div>\n</div>", styles: ["#navigation{width:100%;height:128px;display:flex;align-items:center}#navigation mat-icon{color:#000}#navigation .content{margin-left:32px;display:flex;flex-direction:column}#navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}#navigation .content .title .status{margin-left:8px}#navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.StatusComponent, selector: "ui-status", inputs: ["backgroundColor", "color", "title"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div id=\"navigation\">\n    <button mat-icon-button (click)=\"goBackClicked()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"content\">\n        <div class=\"title\">\n            <span>{{ title }}</span>\n            <div class=\"status\" *ngIf=\"statusItem\">\n                <ui-status [backgroundColor]=\"statusItem.backgroundColor\" [color]=\"statusItem.color\" [title]=\"statusItem.title\"></ui-status>\n            </div>\n        </div>\n        <div class=\"subtitle\">\n            {{ subtitle }}\n        </div>\n    </div>\n</div>", styles: ["#navigation{width:100%;height:128px;display:flex;align-items:center}#navigation mat-icon{color:#000}#navigation .content{margin-left:32px;display:flex;flex-direction:column}#navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}#navigation .content .title .status{margin-left:8px}#navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], statusItem: [{
+                type: Input
+            }], goBackClickedEvent: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uYXZpZ2F0aW9uL25hdmlnYXRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2aWdhdGlvbi9uYXZpZ2F0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7OztBQVVuSCxNQUFNLE9BQU8sbUJBQW1CO0lBbUM5QjtRQUxBOztXQUVHO1FBQ08sdUJBQWtCLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7SUFFN0QsQ0FBQztJQUVoQixhQUFhO1FBQ1gsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2pDLENBQUM7O2lIQXZDVSxtQkFBbUI7cUdBQW5CLG1CQUFtQix3TENWaEMsZ2tCQWVNOzRGRExPLG1CQUFtQjtrQkFQL0IsU0FBUzsrQkFDRSxlQUFlLG1CQUdSLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBYTVCLEtBQUs7c0JBQWIsS0FBSztnQkFRRyxRQUFRO3NCQUFoQixLQUFLO2dCQVNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0ksa0JBQWtCO3NCQUEzQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSVN0YXR1c09wdGlvbkl0ZW0gfSBmcm9tICcuLi9zdGF0dXMvc3RhdHVzLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndWktbmF2aWdhdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9uYXZpZ2F0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmF2aWdhdGlvbi5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgTmF2aWdhdGlvbkNvbXBvbmVudCB7XG4gIC8vIFRPRE86IFNvbWUgcHJvcGVydGllcyBhbmQgbWV0aG9kcyBhcmUgaWdub3JlZCBvbiBwdXJwb3NlIGJlY2F1c2Ugb2YgYSBjdXJyZW50IGlzc3VlIHdpdGggY29tcG9kb2MgYW5kIGFuZ3VsYXIgMTNcbiAgLy8gaHR0cHM6Ly9naXRodWIuY29tL3N0b3J5Ym9va2pzL3N0b3J5Ym9vay9pc3N1ZXMvMTY4NjVcbiAgLy8gaHR0cHM6Ly9naXRodWIuY29tL3N0b3J5Ym9va2pzL3N0b3J5Ym9vay9pc3N1ZXMvMTcwMDRcblxuICAvKipcbiAgICogTmF2aWdhdGlvbiB0aXRsZVxuICAgKlxuICAgKiBAdHlwZSB7c3RyaW5nfVxuICAgKiBAbWVtYmVyb2YgTmF2aWdhdGlvbkNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcblxuICAvKipcbiAgICogTmF2aWdhdGlvbiBzdWJ0aXRsZVxuICAgKlxuICAgKiBAdHlwZSB7c3RyaW5nfVxuICAgKiBAbWVtYmVyb2YgTmF2aWdhdGlvbkNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgc3VidGl0bGU6IHN0cmluZztcblxuICAvKipcbiAgICogTmF2aWdhdGlvbiBzdGF0dXMgY29tcG9uZW50XG4gICAqXG4gICAqIEB0eXBlIHtJU3RhdHVzT3B0aW9uSXRlbX1cbiAgICogQG1lbWJlcm9mIE5hdmlnYXRpb25Db21wb25lbnRcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQElucHV0KCkgc3RhdHVzSXRlbTogSVN0YXR1c09wdGlvbkl0ZW07XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBPdXRwdXQoKSBnb0JhY2tDbGlja2VkRXZlbnQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgZ29CYWNrQ2xpY2tlZCgpOiB2b2lkIHtcbiAgICB0aGlzLmdvQmFja0NsaWNrZWRFdmVudC5lbWl0KCk7XG4gIH1cbn1cbiIsIjxkaXYgaWQ9XCJuYXZpZ2F0aW9uXCI+XG4gICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cImdvQmFja0NsaWNrZWQoKVwiPlxuICAgICAgICA8bWF0LWljb24+YXJyb3dfYmFjazwvbWF0LWljb24+XG4gICAgPC9idXR0b24+XG4gICAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgICAgICA8c3Bhbj57eyB0aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdGF0dXNcIiAqbmdJZj1cInN0YXR1c0l0ZW1cIj5cbiAgICAgICAgICAgICAgICA8dWktc3RhdHVzIFtiYWNrZ3JvdW5kQ29sb3JdPVwic3RhdHVzSXRlbS5iYWNrZ3JvdW5kQ29sb3JcIiBbY29sb3JdPVwic3RhdHVzSXRlbS5jb2xvclwiIFt0aXRsZV09XCJzdGF0dXNJdGVtLnRpdGxlXCI+PC91aS1zdGF0dXM+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzdWJ0aXRsZVwiPlxuICAgICAgICAgICAge3sgc3VidGl0bGUgfX1cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=

package/esm2020/components/navigation/navigation.component.module.mjs

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { StatusComponentModule } from '../status/status.component.module';
+import { NavigationComponent } from './navigation.component';
+import * as i0 from "@angular/core";
+export class NavigationComponentModule {
+}
+NavigationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavigationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponentModule, declarations: [NavigationComponent], imports: [CommonModule, MatIconModule, MatButtonModule, StatusComponentModule], exports: [NavigationComponent] });
+NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponentModule, providers: [], imports: [[CommonModule, MatIconModule, MatButtonModule, StatusComponentModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NavigationComponent],
+                    imports: [CommonModule, MatIconModule, MatButtonModule, StatusComponentModule],
+                    exports: [NavigationComponent],
+                    providers: [],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi5jb21wb25lbnQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2aWdhdGlvbi9uYXZpZ2F0aW9uLmNvbXBvbmVudC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7QUFRN0QsTUFBTSxPQUFPLHlCQUF5Qjs7dUhBQXpCLHlCQUF5Qjt3SEFBekIseUJBQXlCLGlCQUxyQixtQkFBbUIsYUFDeEIsWUFBWSxFQUFFLGFBQWEsRUFBRSxlQUFlLEVBQUUscUJBQXFCLGFBQ25FLG1CQUFtQjt3SEFHbEIseUJBQXlCLGFBRnpCLEVBQUUsWUFGSixDQUFDLFlBQVksRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLHFCQUFxQixDQUFDOzRGQUluRSx5QkFBeUI7a0JBTnJDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsbUJBQW1CLENBQUM7b0JBQ25DLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLHFCQUFxQixDQUFDO29CQUM5RSxPQUFPLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztvQkFDOUIsU0FBUyxFQUFFLEVBQUU7aUJBQ2QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7XG5pbXBvcnQgeyBNYXRJY29uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvbic7XG5pbXBvcnQgeyBTdGF0dXNDb21wb25lbnRNb2R1bGUgfSBmcm9tICcuLi9zdGF0dXMvc3RhdHVzLmNvbXBvbmVudC5tb2R1bGUnO1xuaW1wb3J0IHsgTmF2aWdhdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vbmF2aWdhdGlvbi5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtOYXZpZ2F0aW9uQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgTWF0SWNvbk1vZHVsZSwgTWF0QnV0dG9uTW9kdWxlLCBTdGF0dXNDb21wb25lbnRNb2R1bGVdLFxuICBleHBvcnRzOiBbTmF2aWdhdGlvbkNvbXBvbmVudF0sXG4gIHByb3ZpZGVyczogW10sXG59KVxuZXhwb3J0IGNsYXNzIE5hdmlnYXRpb25Db21wb25lbnRNb2R1bGUge31cbiJdfQ==

package/esm2020/components/paginator/paginator.component.mjs

@@ -34,10 +34,10 @@ export class PaginatorComponent {
     }
 }
 PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"] }]
+            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { length: [{
                 type: Input
             }], defaultPageSize: [{

package/esm2020/components/status/status.component.mjs

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class StatusComponent {
+    constructor() {
+        // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
+        // https://github.com/storybookjs/storybook/issues/16865
+        // https://github.com/storybookjs/storybook/issues/17004
+        /**
+         * Status background color
+         *
+         * @type {TemplateStringsArray}
+         * @memberof StatusComponent
+         */
+        this.backgroundColor = '#e9f0f1';
+        /**
+         * Status text color
+         *
+         * @type {TemplateStringsArray}
+         * @memberof StatusComponent
+         */
+        this.color = 'black';
+        /**
+         * Status title
+         *
+         * @type {string}
+         * @memberof StatusComponent
+         */
+        this.title = '';
+    }
+}
+StatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StatusComponent, selector: "ui-status", inputs: { backgroundColor: "backgroundColor", color: "color", title: "title" }, ngImport: i0, template: "<div class=\"label\" [ngStyle]=\"{'background-color': backgroundColor, 'color': color}\">\n    {{ title }}\n</div>", styles: [".label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"label\" [ngStyle]=\"{'background-color': backgroundColor, 'color': color}\">\n    {{ title }}\n</div>", styles: [".label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3N0YXR1cy9zdGF0dXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RhdHVzL3N0YXR1cy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUzdGLE1BQU0sT0FBTyxlQUFlO0lBNkIxQjtRQTVCQSxtSEFBbUg7UUFDbkgsd0RBQXdEO1FBQ3hELHdEQUF3RDtRQUV4RDs7Ozs7V0FLRztRQUNNLG9CQUFlLEdBQUcsU0FBUyxDQUFDO1FBRXJDOzs7OztXQUtHO1FBQ00sVUFBSyxHQUFHLE9BQU8sQ0FBQztRQUV6Qjs7Ozs7V0FLRztRQUNNLFVBQUssR0FBRyxFQUFFLENBQUM7SUFFTCxDQUFDOzs2R0E3QkwsZUFBZTtpR0FBZixlQUFlLGlJQ1Q1QixvSEFFTTs0RkRPTyxlQUFlO2tCQVAzQixTQUFTOytCQUNFLFdBQVcsbUJBR0osdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSTswRUFhNUIsZUFBZTtzQkFBdkIsS0FBSztnQkFRRyxLQUFLO3NCQUFiLEtBQUs7Z0JBUUcsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3VpLXN0YXR1cycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGF0dXMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdGF0dXMuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFN0YXR1c0NvbXBvbmVudCB7XG4gIC8vIFRPRE86IFNvbWUgcHJvcGVydGllcyBhbmQgbWV0aG9kcyBhcmUgaWdub3JlZCBvbiBwdXJwb3NlIGJlY2F1c2Ugb2YgYSBjdXJyZW50IGlzc3VlIHdpdGggY29tcG9kb2MgYW5kIGFuZ3VsYXIgMTNcbiAgLy8gaHR0cHM6Ly9naXRodWIuY29tL3N0b3J5Ym9va2pzL3N0b3J5Ym9vay9pc3N1ZXMvMTY4NjVcbiAgLy8gaHR0cHM6Ly9naXRodWIuY29tL3N0b3J5Ym9va2pzL3N0b3J5Ym9vay9pc3N1ZXMvMTcwMDRcblxuICAvKipcbiAgICogU3RhdHVzIGJhY2tncm91bmQgY29sb3JcbiAgICpcbiAgICogQHR5cGUge1RlbXBsYXRlU3RyaW5nc0FycmF5fVxuICAgKiBAbWVtYmVyb2YgU3RhdHVzQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kQ29sb3IgPSAnI2U5ZjBmMSc7XG5cbiAgLyoqXG4gICAqIFN0YXR1cyB0ZXh0IGNvbG9yXG4gICAqXG4gICAqIEB0eXBlIHtUZW1wbGF0ZVN0cmluZ3NBcnJheX1cbiAgICogQG1lbWJlcm9mIFN0YXR1c0NvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgY29sb3IgPSAnYmxhY2snO1xuXG4gIC8qKlxuICAgKiBTdGF0dXMgdGl0bGVcbiAgICpcbiAgICogQHR5cGUge3N0cmluZ31cbiAgICogQG1lbWJlcm9mIFN0YXR1c0NvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgdGl0bGUgPSAnJztcblxuICBjb25zdHJ1Y3RvcigpIHt9XG59XG4iLCI8ZGl2IGNsYXNzPVwibGFiZWxcIiBbbmdTdHlsZV09XCJ7J2JhY2tncm91bmQtY29sb3InOiBiYWNrZ3JvdW5kQ29sb3IsICdjb2xvcic6IGNvbG9yfVwiPlxuICAgIHt7IHRpdGxlIH19XG48L2Rpdj4iXX0=