@testgorilla/tgo-ui 0.0.22 → 0.0.24

package/fesm2020/testgorilla-tgo-ui.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, Pipe, ViewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, ViewEncapsulation, Optional, Inject, Injectable, Pipe, Directive, ViewChild } from '@angular/core';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,26 +14,29 @@ import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
+import * as i4$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular-material-extensions/password-strength';
+import * as i4$2 from '@angular-material-extensions/password-strength';
 import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
-import * as i4$1 from '@angular/material/checkbox';
+import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$4 from '@angular/material/toolbar';
+import * as i1$4 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4$2 from '@angular/material/menu';
+import * as i5$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRippleModule } from '@angular/material/core';
-import * as i1$5 from '@angular/material/paginator';
+import * as i1$6 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$6 from '@angular/material/progress-bar';
+import * as i1$7 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3$2 from '@angular/material/sort';
+import * as i3$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i2$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Subscription } from 'rxjs';
 
 class BannerComponent {
     constructor() {
@@ -96,7 +99,7 @@ class ButtonComponent {
         /**
          * Background color of the button while in active state
          *
-         * @type {ThemePalette}
+         * @type {ButtonColor}
          * @memberof ButtonComponent
          */
         this.color = 'primary';
@@ -125,7 +128,7 @@ class ButtonComponent {
          */
         this.loading = false;
         /**
-         * If the button will have width 100%
+         * Indicator of the button width
          *
          * @memberof ButtonComponent
          */
@@ -137,10 +140,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "<!--The button component for testgorilla-->\n<button mat-flat-button [color]=\"color\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" [ngClass]=\"{'w-full': fullWidth}\">\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.w-full{width:100%;text-align:center}button:hover{background-color:#388779}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .label-icon-wrapper .mat-flat-button.mat-button-disabled{background-color:#a2d4cb;color:#fff}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\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.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\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.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-button', template: "<!--The button component for testgorilla-->\n<button mat-flat-button [color]=\"color\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" [ngClass]=\"{'w-full': fullWidth}\">\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.w-full{width:100%;text-align:center}button:hover{background-color:#388779}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .label-icon-wrapper .mat-flat-button.mat-button-disabled{background-color:#a2d4cb;color:#fff}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"] }]
+            args: [{ selector: 'ui-button', template: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], label: [{
@@ -181,10 +184,10 @@ class BannerActionComponent {
     }
 }
 BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerActionComponent, selector: "ui-banner-action", inputs: { text: "text", backgroundColor: "backgroundColor", buttonLabel: "buttonLabel", emoji: "emoji" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"], components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerActionComponent, selector: "ui-banner-action", inputs: { text: "text", backgroundColor: "backgroundColor", buttonLabel: "buttonLabel", emoji: "emoji" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" [fullWidth]=\"false\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"], components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"] }]
+            args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" [fullWidth]=\"false\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], backgroundColor: [{
@@ -231,10 +234,10 @@ class LogoComponent {
     constructor() { }
 }
 LogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img class=\"logo\" src=\"/images/testgorilla.svg\">\n", styles: [":host{display:flex}.logo{width:180px;position:relative;right:9px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img src=\"/images/testgorilla.svg\">\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img class=\"logo\" src=\"/images/testgorilla.svg\">\n", styles: [":host{display:flex}.logo{width:180px;position:relative;right:9px}\n"] }]
+            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img src=\"/images/testgorilla.svg\">\n", styles: [":host{display:inline-flex}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class CardComponent {
@@ -244,10 +247,10 @@ class CardComponent {
     }
 }
 CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CardComponent, selector: "ui-card", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0, template: "<mat-card class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:70px 80px 80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: LogoComponent, selector: "ui-logo" }], directives: [{ type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CardComponent, selector: "ui-card", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0, template: "<mat-card class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: LogoComponent, selector: "ui-logo" }], directives: [{ type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:70px 80px 80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"] }]
+            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subTitle: [{
@@ -282,6 +285,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+const CREATE_ACCOUNT_i18n = {
+    title: 'Create your Career Passport',
+    subtitle: 'Enter the email address to which you received an assessment invite.',
+    email_placeholder: 'Email',
+    password_placeholder: 'Password',
+    terms_conditions: 'Agree to Terms & Conditions',
+    button_label: 'Next',
+    have_career_passport: 'Already have a Career Passport?',
+    login: 'Log in here',
+};
+
 class FieldComponent {
     constructor() {
         /**
@@ -366,7 +380,7 @@ FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             useExisting: forwardRef(() => FieldComponent),
             multi: true,
         },
-    ], ngImport: i0, template: "<div class=\"column\">\n  <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n  <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n    <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n    <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"isDisabled\" [type]=\"type\" (input)=\"onInput($event)\">\n    <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n    <mat-hint *ngIf=\"hint && !error\">{{ hint }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n  </mat-form-field>\n</div>", styles: ["mat-label{font-weight:600;color:#000}.mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"], components: [{ type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.MatSuffix, selector: "[matSuffix]" }, { type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<div class=\"column\">\n  <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n    <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n    <input\n      matInput\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [type]=\"type\"\n      (input)=\"onInput($event)\"\n    />\n    <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n    <mat-hint *ngIf=\"hint && !error\">{{ hint }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"], components: [{ type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.MatSuffix, selector: "[matSuffix]" }, { type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-field', providers: [
@@ -375,7 +389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             useExisting: forwardRef(() => FieldComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"column\">\n  <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n  <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n    <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n    <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"isDisabled\" [type]=\"type\" (input)=\"onInput($event)\">\n    <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n    <mat-hint *ngIf=\"hint && !error\">{{ hint }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n  </mat-form-field>\n</div>", styles: ["mat-label{font-weight:600;color:#000}.mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"] }]
+                    ], template: "<div class=\"column\">\n  <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n    <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n    <input\n      matInput\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [type]=\"type\"\n      (input)=\"onInput($event)\"\n    />\n    <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n    <mat-hint *ngIf=\"hint && !error\">{{ hint }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], preffixIcon: [{
@@ -422,6 +436,19 @@ class CreateAccountComponent {
             username: [''],
             password: [''],
         };
+        /**
+         * Indicator if the form is loading
+         *
+         * @memberof ButtonComponent
+         */
+        this.loading = false;
+        /**
+         *
+         * @description Object with the translations for the component.
+         * @type {Ii18nCreateAccount}
+         * @memberof CreateAccountComponent
+         */
+        this.i18n = CREATE_ACCOUNT_i18n;
         /**
          * @ignore
          */
@@ -463,14 +490,16 @@ class CreateAccountComponent {
     }
 }
 CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreateAccountComponent, selector: "ui-create-account", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Create your Career Passport</div>\n  <div class=\"subtitle\">Enter the email address to which you received an assessment invite.</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"username\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.username[0]\" (ngModelChange)=\"checkErrors('username')\"></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password[0]\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n      <mat-password-strength\n              [min]=\"12\"\n              #passwordComponentWithValidation\n              [password]=\"registerForm.controls['password'].value\"\n            >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n      </mat-password-strength-info>\n    </div>\n    <div>\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">Agree to Terms & Conditions</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Next'\" [disabled]=\"registerForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n    <div>\n      Already have a Career Passport? <span class=\"log-in\" (click)=\"login()\">Log in here</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px}.form-box .subtitle{margin:16px 0}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i3$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreateAccountComponent, selector: "ui-create-account", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [placeholder]=\"i18n.email_placeholder\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.username[0]\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [placeholder]=\"i18n.password_placeholder\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$2.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$2.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Create your Career Passport</div>\n  <div class=\"subtitle\">Enter the email address to which you received an assessment invite.</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"username\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.username[0]\" (ngModelChange)=\"checkErrors('username')\"></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password[0]\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n      <mat-password-strength\n              [min]=\"12\"\n              #passwordComponentWithValidation\n              [password]=\"registerForm.controls['password'].value\"\n            >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n      </mat-password-strength-info>\n    </div>\n    <div>\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">Agree to Terms & Conditions</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Next'\" [disabled]=\"registerForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n    <div>\n      Already have a Career Passport? <span class=\"log-in\" (click)=\"login()\">Log in here</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px}.form-box .subtitle{margin:16px 0}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
+            args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [placeholder]=\"i18n.email_placeholder\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.username[0]\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [placeholder]=\"i18n.password_placeholder\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
+            }], i18n: [{
+                type: Input
             }], submitEvent: [{
                 type: Output
             }], loginEvent: [{
@@ -501,7 +530,8 @@ CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         FieldComponentModule,
         ButtonComponentModule,
         MatCheckboxModule,
-        MatPasswordStrengthModule], exports: [CreateAccountComponent] });
+        MatPasswordStrengthModule,
+        LogoComponentModule], exports: [CreateAccountComponent] });
 CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponentModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
@@ -510,6 +540,7 @@ CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
             ButtonComponentModule,
             MatCheckboxModule,
             MatPasswordStrengthModule,
+            LogoComponentModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponentModule, decorators: [{
             type: NgModule,
@@ -523,12 +554,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         ButtonComponentModule,
                         MatCheckboxModule,
                         MatPasswordStrengthModule,
+                        LogoComponentModule,
                     ],
                     exports: [CreateAccountComponent],
                     providers: [],
                 }]
         }] });
 
+const CREATE_PASSWORD_i18n = {
+    title: 'Please create a new password',
+    password_placeholder: 'Set password',
+    button: 'Set new password',
+};
+
 class CreatePasswordComponent {
     constructor(fb) {
         this.fb = fb;
@@ -554,6 +592,19 @@ class CreatePasswordComponent {
         this.formErrors = {
             password: [''],
         };
+        /**
+         * Indicator if the form is loading
+         *
+         * @memberof ButtonComponent
+         */
+        this.loading = false;
+        /**
+         *
+         * @description Object with the translations for the component.
+         * @type {Ii18nCreatePassword}
+         * @memberof CreatePasswordComponent
+         */
+        this.i18n = CREATE_PASSWORD_i18n;
         /**
          * @ignore
          */
@@ -583,14 +634,16 @@ class CreatePasswordComponent {
     }
 }
 CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Please create a new password</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"password\" [placeholder]=\"'Set password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password[0]\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n      <mat-password-strength\n              [min]=\"12\"\n              #passwordComponentWithValidation\n              [password]=\"createPasswordForm.controls['password'].value\"\n            >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n      </mat-password-strength-info>\n    </div>\n    <div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Set new password'\" [disabled]=\"createPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i3$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [placeholder]=\"i18n.password_placeholder\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$2.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$2.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Please create a new password</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"password\" [placeholder]=\"'Set password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password[0]\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n      <mat-password-strength\n              [min]=\"12\"\n              #passwordComponentWithValidation\n              [password]=\"createPasswordForm.controls['password'].value\"\n            >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n      </mat-password-strength-info>\n    </div>\n    <div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Set new password'\" [disabled]=\"createPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}\n"] }]
+            args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [placeholder]=\"i18n.password_placeholder\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
+            }], i18n: [{
+                type: Input
             }], submitEvent: [{
                 type: Output
             }] } });
@@ -603,7 +656,8 @@ CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12
         ReactiveFormsModule,
         FieldComponentModule,
         ButtonComponentModule,
-        MatPasswordStrengthModule], exports: [CreatePasswordComponent] });
+        MatPasswordStrengthModule,
+        LogoComponentModule], exports: [CreatePasswordComponent] });
 CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
@@ -611,6 +665,7 @@ CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
             FieldComponentModule,
             ButtonComponentModule,
             MatPasswordStrengthModule,
+            LogoComponentModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, decorators: [{
             type: NgModule,
@@ -623,12 +678,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         FieldComponentModule,
                         ButtonComponentModule,
                         MatPasswordStrengthModule,
+                        LogoComponentModule,
                     ],
                     exports: [CreatePasswordComponent],
                     providers: [],
                 }]
         }] });
 
+class DialogComponent {
+    // 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
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+    }
+    dismiss() {
+        this.dialogRef.close();
+    }
+}
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$4.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialogComponent, selector: "ui-dialog", ngImport: i0, template: "<ng-container>\n  <div mat-dialog-title class=\"title\">\n    Styles of a default modal\n    <div>\n      <button mat-icon-button (click)=\"dismiss()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum odio fugit ipsa amet nam dolores reiciendis quod aliquam nulla.</p>\n    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, quis nemo voluptatem delectus sed atque corporis perspiciatis fugit reiciendis nobis, accusantium omnis! Iste aliquam totam magnam dignissimos deleniti. Repellat ipsam sit mollitia, aspernatur maiores sint, ea deserunt exercitationem ullam veniam nisi minus inventore officiis tenetur culpa, hic voluptates fuga voluptatum.</p>\n    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima magnam, doloribus iusto nam illum saepe quisquam esse sit sequi possimus vel? Autem vero cum dolores nobis unde, tenetur minima natus?</p>\n  </mat-dialog-content>\n</ng-container>\n", styles: [".ui-dialog .mat-dialog-container{border-radius:8px;padding:32px}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\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"] }], directives: [{ type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container>\n  <div mat-dialog-title class=\"title\">\n    Styles of a default modal\n    <div>\n      <button mat-icon-button (click)=\"dismiss()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum odio fugit ipsa amet nam dolores reiciendis quod aliquam nulla.</p>\n    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, quis nemo voluptatem delectus sed atque corporis perspiciatis fugit reiciendis nobis, accusantium omnis! Iste aliquam totam magnam dignissimos deleniti. Repellat ipsam sit mollitia, aspernatur maiores sint, ea deserunt exercitationem ullam veniam nisi minus inventore officiis tenetur culpa, hic voluptates fuga voluptatum.</p>\n    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima magnam, doloribus iusto nam illum saepe quisquam esse sit sequi possimus vel? Autem vero cum dolores nobis unde, tenetur minima natus?</p>\n  </mat-dialog-content>\n</ng-container>\n", styles: [".ui-dialog .mat-dialog-container{border-radius:8px;padding:32px}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$4.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class DialogService {
+    /**
+     * Constructor
+     */
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    open(dialogComponent, config) {
+        // Open the dialog using UI custom styles
+        return this.matDialog.open(dialogComponent, {
+            panelClass: 'ui-dialog',
+            ...config,
+        });
+    }
+}
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; } });
+
+class LaunchDialogComponent {
+    // 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
+    constructor(dialogService) {
+        this.dialogService = dialogService;
+        this.openModal();
+    }
+    openModal() {
+        this.dialogService.open(DialogComponent);
+    }
+}
+LaunchDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LaunchDialogComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+LaunchDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LaunchDialogComponent, selector: "ui-launch-dialog", ngImport: i0, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>", components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LaunchDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-launch-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>" }]
+        }], ctorParameters: function () { return [{ type: DialogService }]; } });
+
+class DialogComponentModule {
+}
+DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DialogComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, declarations: [DialogComponent, LaunchDialogComponent], imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], exports: [MatDialogModule] });
+DialogComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, providers: [DialogService], imports: [[CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], MatDialogModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DialogComponent, LaunchDialogComponent],
+                    imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule],
+                    exports: [MatDialogModule],
+                    providers: [DialogService],
+                }]
+        }] });
+
+const FORGOT_PASSWORD_i18n = {
+    title: 'Reset your password',
+    email_placeholder: 'Email',
+    button_label: 'Send reset link',
+    back_to_login: 'Back to log in',
+};
+
 class ForgotPasswordComponent {
     constructor(fb) {
         this.fb = fb;
@@ -647,6 +791,13 @@ class ForgotPasswordComponent {
         this.formErrors = {
             email: [''],
         };
+        /**
+         *
+         * @description Object with the translations for the component.
+         * @type {Ii18nForgotPassword}
+         * @memberof ForgotPasswordComponent
+         */
+        this.i18n = FORGOT_PASSWORD_i18n;
         /**
          * @ignore
          */
@@ -683,14 +834,16 @@ class ForgotPasswordComponent {
     }
 }
 ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Reset your password</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"email\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email[0]\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n    </div>\n    <div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Send reset link'\" [disabled]=\"forgotPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>Back to log in</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0 40px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [placeholder]=\"i18n.email_placeholder\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email[0]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Reset your password</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"email\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email[0]\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n    </div>\n    <div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Send reset link'\" [disabled]=\"forgotPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>Back to log in</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0 40px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"] }]
+            args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [placeholder]=\"i18n.email_placeholder\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email[0]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
+            }], i18n: [{
+                type: Input
             }], submitEvent: [{
                 type: Output
             }], backToLoginEvent: [{
@@ -700,18 +853,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class ForgotPasswordComponentModule {
 }
 ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, FieldComponentModule, ButtonComponentModule, MatIconModule], exports: [ForgotPasswordComponent] });
-ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, providers: [], imports: [[CommonModule, FormsModule, ReactiveFormsModule, FieldComponentModule, ButtonComponentModule, MatIconModule]] });
+ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FieldComponentModule,
+        ButtonComponentModule,
+        MatIconModule,
+        LogoComponentModule], exports: [ForgotPasswordComponent] });
+ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            FieldComponentModule,
+            ButtonComponentModule,
+            MatIconModule,
+            LogoComponentModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ForgotPasswordComponent],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, FieldComponentModule, ButtonComponentModule, MatIconModule],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FieldComponentModule,
+                        ButtonComponentModule,
+                        MatIconModule,
+                        LogoComponentModule,
+                    ],
                     exports: [ForgotPasswordComponent],
                     providers: [],
                 }]
         }] });
 
+var LabelSizeEnum;
+(function (LabelSizeEnum) {
+    LabelSizeEnum["SMALL"] = "small";
+    LabelSizeEnum["MEDIUM"] = "medium";
+    LabelSizeEnum["LARGE"] = "large";
+    LabelSizeEnum["BIG"] = "big";
+    LabelSizeEnum["HUGE"] = "huge";
+})(LabelSizeEnum || (LabelSizeEnum = {}));
+
+class LabelComponent {
+    constructor() {
+        /**
+         * @ignore
+         */
+        this.LabelSizeEnum = LabelSizeEnum;
+        /**
+         * Label background color
+         *
+         * @type {string}
+         * @memberof LabelComponent
+         */
+        this.backgroundColor = '';
+        /**
+         * Status text color
+         *
+         * @type {string}
+         * @memberof LabelComponent
+         */
+        this.textColor = '';
+        /**
+         * Status title
+         *
+         * @type {string}
+         * @memberof LabelComponent
+         */
+        this.title = '';
+        /**
+         * Label size
+         *
+         * @type {LabelSizeEnum}
+         * @memberof LabelComponent
+         */
+        this.size = LabelSizeEnum.SMALL;
+    }
+}
+LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LabelComponent, selector: "ui-label", inputs: { backgroundColor: "backgroundColor", textColor: "textColor", title: "title", size: "size" }, ngImport: i0, template: "<div class=\"label\"\n  [ngStyle]=\"{'background-color': backgroundColor, 'color': textColor}\"\n  [ngClass]=\"{'small': size === LabelSizeEnum.SMALL, 'medium': size === LabelSizeEnum.MEDIUM,\n      'large': size === LabelSizeEnum.LARGE, 'big': size === LabelSizeEnum.BIG, 'huge': size === LabelSizeEnum.HUGE}\">\n    {{ title }}\n</div>\n", styles: [".label{display:flex;flex-direction:row;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;height:16px}.label.medium{padding:2px 8px;font-size:12px;height:20px}.label.large{padding:8px 12px;font-size:14px;height:32px}.label.big{padding:8px 16px;font-size:14px;height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;height:48px}\n"], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\"\n  [ngStyle]=\"{'background-color': backgroundColor, 'color': textColor}\"\n  [ngClass]=\"{'small': size === LabelSizeEnum.SMALL, 'medium': size === LabelSizeEnum.MEDIUM,\n      'large': size === LabelSizeEnum.LARGE, 'big': size === LabelSizeEnum.BIG, 'huge': size === LabelSizeEnum.HUGE}\">\n    {{ title }}\n</div>\n", styles: [".label{display:flex;flex-direction:row;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;height:16px}.label.medium{padding:2px 8px;font-size:12px;height:20px}.label.large{padding:8px 12px;font-size:14px;height:32px}.label.big{padding:8px 16px;font-size:14px;height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;height:48px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class LabelComponentModule {
+}
+LabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponentModule, declarations: [LabelComponent], imports: [CommonModule], exports: [LabelComponent] });
+LabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponentModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LabelComponent],
+                    imports: [CommonModule],
+                    exports: [LabelComponent],
+                    providers: [],
+                }]
+        }] });
+
+const LOGIN_i18n = {
+    title: 'Log in to your Career Passport',
+    email_placeholder: 'Email address',
+    password_placeholder: 'Password',
+    remember_me: 'Keep me logged in',
+    forgot_password: 'Forgot password?',
+    not_have_account: "Don't have an account?",
+    create_account: 'Create one here',
+};
+
 class LoginComponent {
     constructor(fb) {
         this.fb = fb;
@@ -733,6 +993,18 @@ class LoginComponent {
             email: '',
             password: '',
         };
+        /**
+         * Indicator if the form is loading
+         *
+         * @memberof ButtonComponent
+         */
+        this.loading = false;
+        /**
+         * @description Object with the translations for the component.
+         * @type {Ii18n}
+         * @memberof LoginComponent
+         */
+        this.i18n = LOGIN_i18n;
         /**
          * @ignore
          */
@@ -778,12 +1050,14 @@ class LoginComponent {
     }
 }
 LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Log in to your Career Passport</div>\n  <form [formGroup]=\"loginForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"email\" [placeholder]=\"'Email address'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n    </div>\n    <div class=\"row space-between\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">Keep me logged in</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">Forgot password?</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Log in'\" [disabled]=\"loginForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n    <div>\n      Don't have an account? <span class=\"create-account\" (click)=\"createAccount()\">Create one here</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px;margin-bottom:32px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [placeholder]=\"i18n.email_placeholder\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [placeholder]=\"i18n.password_placeholder\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"row space-between\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"'Log in'\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.not_have_account }}\n      <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin:40px 0 24px}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row;margin-top:3px}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <img class=\"logo\" src=\"/images/testgorilla.svg\">\n  <div class=\"title\">Log in to your Career Passport</div>\n  <form [formGroup]=\"loginForm\">\n    <div class=\"field\">\n      <ui-field formControlName=\"email\" [placeholder]=\"'Email address'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n    </div>\n    <div class=\"row space-between\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">Keep me logged in</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">Forgot password?</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button [label]=\"'Log in'\" [disabled]=\"loginForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n    </div>\n    <div>\n      Don't have an account? <span class=\"create-account\" (click)=\"createAccount()\">Create one here</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px;margin-bottom:32px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
+            args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [placeholder]=\"i18n.email_placeholder\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [placeholder]=\"i18n.password_placeholder\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"row space-between\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"'Log in'\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.not_have_account }}\n      <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin:40px 0 24px}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row;margin-top:3px}.row.space-between{justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { loading: [{
                 type: Input
+            }], i18n: [{
+                type: Input
             }], submitEvent: [{
                 type: Output
             }], forgotPasswordEvent: [{
@@ -800,7 +1074,8 @@ LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         ReactiveFormsModule,
         FieldComponentModule,
         ButtonComponentModule,
-        MatCheckboxModule], exports: [LoginComponent] });
+        MatCheckboxModule,
+        LogoComponentModule], exports: [LoginComponent] });
 LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponentModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
@@ -808,6 +1083,7 @@ LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             FieldComponentModule,
             ButtonComponentModule,
             MatCheckboxModule,
+            LogoComponentModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponentModule, decorators: [{
             type: NgModule,
@@ -820,6 +1096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         FieldComponentModule,
                         ButtonComponentModule,
                         MatCheckboxModule,
+                        LogoComponentModule,
                     ],
                     exports: [LoginComponent],
                     providers: [],
@@ -870,10 +1147,10 @@ class NavbarComponent {
     }
 }
 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", 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>power_settings_new</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$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.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$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\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>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.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$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: LogoComponent, selector: "ui-logo" }, { 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: i5$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, 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>power_settings_new</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"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\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>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.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: [{
@@ -889,59 +1166,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 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, 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]] });
+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,
+        LogoComponentModule], 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,
+            LogoComponentModule,
+        ]] });
 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, MatMenuModule],
+                    imports: [
+                        CommonModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatRippleModule,
+                        MatMenuModule,
+                        LogoComponentModule,
+                    ],
                     exports: [NavbarComponent],
                     providers: [],
                 }]
         }] });
 
-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>\n", styles: [".label{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 8px;font-weight:600;font-size:10px;border-radius:4px;width:-moz-fit-content;width:fit-content;height:16px}\n"], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-status', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngStyle]=\"{'background-color': backgroundColor, 'color': color}\">\n    {{ title }}\n</div>\n", styles: [".label{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 8px;font-weight:600;font-size:10px;border-radius:4px;width:-moz-fit-content;width:fit-content;height:16px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
-
 class NavigationComponent {
     constructor() {
         /**
@@ -954,45 +1212,30 @@ class NavigationComponent {
     }
 }
 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 class=\"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\">\n        </ui-status>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;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: StatusComponent, selector: "ui-status", inputs: ["backgroundColor", "color", "title"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", labelItem: "labelItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"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=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;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: LabelComponent, selector: "ui-label", inputs: ["backgroundColor", "textColor", "title", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"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\">\n        </ui-status>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;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"] }]
+            args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"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=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;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: [{
+            }], labelItem: [{
                 type: Input
             }], goBackClickedEvent: [{
                 type: Output
             }] } });
 
-class StatusComponentModule {
-}
-StatusComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StatusComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponentModule, declarations: [StatusComponent], imports: [CommonModule, MatIconModule], exports: [StatusComponent] });
-StatusComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponentModule, providers: [], imports: [[CommonModule, MatIconModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [StatusComponent],
-                    imports: [CommonModule, MatIconModule],
-                    exports: [StatusComponent],
-                    providers: [],
-                }]
-        }] });
-
 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]] });
+NavigationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponentModule, declarations: [NavigationComponent], imports: [CommonModule, MatIconModule, MatButtonModule, LabelComponentModule], exports: [NavigationComponent] });
+NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponentModule, providers: [], imports: [[CommonModule, MatIconModule, MatButtonModule, LabelComponentModule]] });
 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],
+                    imports: [CommonModule, MatIconModule, MatButtonModule, LabelComponentModule],
                     exports: [NavigationComponent],
                     providers: [],
                 }]
@@ -1031,7 +1274,7 @@ 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;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$5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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$6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
@@ -1062,7 +1305,7 @@ class ProgressBarComponent {
     constructor() { }
 }
 ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", mode: "mode", value: "value", buffer: "buffer" }, ngImport: i0, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"], components: [{ type: i1$6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", mode: "mode", value: "value", buffer: "buffer" }, ngImport: i0, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"], components: [{ type: i1$7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"] }]
@@ -1091,20 +1334,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
-var ColumnType;
-(function (ColumnType) {
-    ColumnType["FIELD"] = "field";
-    ColumnType["LABEL"] = "label";
-    ColumnType["FUNCTION"] = "function";
-    ColumnType["RENDERER"] = "renderer";
-})(ColumnType || (ColumnType = {}));
-var ColumnAlignment;
-(function (ColumnAlignment) {
-    ColumnAlignment["LEFT"] = "left";
-    ColumnAlignment["RIGHT"] = "right";
-    ColumnAlignment["CENTER"] = "center";
-})(ColumnAlignment || (ColumnAlignment = {}));
-
 class DataPropertyGetterPipe {
     transform(obj, keyName = '') {
         return this.getDeepVal(obj, keyName);
@@ -1135,6 +1364,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+var ColumnTypeEnum;
+(function (ColumnTypeEnum) {
+    ColumnTypeEnum["FIELD"] = "field";
+    ColumnTypeEnum["FUNCTION"] = "function";
+    ColumnTypeEnum["RENDERER"] = "renderer";
+})(ColumnTypeEnum || (ColumnTypeEnum = {}));
+var ColumnAlignmentEnum;
+(function (ColumnAlignmentEnum) {
+    ColumnAlignmentEnum["LEFT"] = "left";
+    ColumnAlignmentEnum["RIGHT"] = "right";
+    ColumnAlignmentEnum["CENTER"] = "center";
+})(ColumnAlignmentEnum || (ColumnAlignmentEnum = {}));
+
+class DynamicComponentDirective {
+    constructor(vcr) {
+        this.vcr = vcr;
+        this.subscription = new Subscription();
+    }
+    set dynamicComponent(componentRenderer) {
+        if (componentRenderer.component) {
+            this.compRef = this.vcr.createComponent(componentRenderer.component);
+            if (componentRenderer.inputs) {
+                Object.keys(componentRenderer.inputs).map(inputName => (this.compRef.instance[inputName] = componentRenderer.inputs[inputName]));
+            }
+            if (componentRenderer.outputs) {
+                Object.keys(componentRenderer.outputs).map(output => {
+                    this.subscription.add(this.compRef.instance[output].subscribe(componentRenderer.outputs?.[output]));
+                });
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.compRef) {
+            this.compRef.destroy();
+        }
+        this.subscription.unsubscribe();
+    }
+}
+DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: { dynamicComponent: "dynamicComponent" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicComponentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dynamicComponent]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { dynamicComponent: [{
+                type: Input
+            }] } });
+
 class TableComponent {
     constructor(dataPropertyGetterPipe) {
         this.dataPropertyGetterPipe = dataPropertyGetterPipe;
@@ -1149,12 +1427,6 @@ class TableComponent {
          * @memberof TableComponent
          */
         this.tableColumns = [];
-        /**
-         * @type {IStatusOptions}
-         * @memberof TableComponent
-         * @ignore
-         */
-        this.statusOptions = {};
         /**
          * @ignore
          */
@@ -1186,11 +1458,8 @@ class TableComponent {
         /**
          * @ignore
          */
-        this.DataType = ColumnType;
+        this.DataType = ColumnTypeEnum;
     }
-    // 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
     /**
      * @ignore
      */
@@ -1201,6 +1470,7 @@ class TableComponent {
     /**
      * Data to be rendered
      *
+     * @ignore
      * @type {IDataSource}
      * @memberof TableComponent
      */
@@ -1251,7 +1521,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n      [align]=\"tableColumn.styles?.alignment\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n      [align]=\"tableColumn.styles?.alignment\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n              [align]=\"tableColumn.styles?.alignment\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <ui-status [backgroundColor]=\"label?.backgroundColor\" [color]=\"label?.color\" [title]=\"label?.title\"></ui-status>\n</ng-template>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n\n    <!-- TODO: LABEL type is Deprecated. Use RENDERER Type instead. -->\n    <ng-container *ngSwitchCase=\"DataType.LABEL\">\n      <ng-container\n        *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.field]}\">\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <div [innerHTML]=\"tableColumn.renderer?.(element)\"></div>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .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}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{display:none}table .element-detail table .mat-cell{border-width:0px}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: StatusComponent, selector: "ui-status", inputs: ["backgroundColor", "color", "title"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <ng-template\n        [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .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}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table td.td-right{display:flex;justify-content:flex-end}table td.td-left{display:flex;justify-content:flex-start}table td.td-center{display:flex;justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
         trigger('expandDetail', [
             state('collapsed, void', style({ height: '0px' })),
             state('expanded', style({ height: '*' })),
@@ -1268,7 +1538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                             transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n      [align]=\"tableColumn.styles?.alignment\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n      [align]=\"tableColumn.styles?.alignment\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n              [align]=\"tableColumn.styles?.alignment\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <ui-status [backgroundColor]=\"label?.backgroundColor\" [color]=\"label?.color\" [title]=\"label?.title\"></ui-status>\n</ng-template>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n\n    <!-- TODO: LABEL type is Deprecated. Use RENDERER Type instead. -->\n    <ng-container *ngSwitchCase=\"DataType.LABEL\">\n      <ng-container\n        *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.field]}\">\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <div [innerHTML]=\"tableColumn.renderer?.(element)\"></div>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .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}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{display:none}table .element-detail table .mat-cell{border-width:0px}\n"] }]
+                    ], template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <ng-template\n        [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .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}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table td.td-right{display:flex;justify-content:flex-end}table td.td-left{display:flex;justify-content:flex-start}table td.td-center{display:flex;justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"] }]
         }], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { matSort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -1280,8 +1550,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], tableDetailColumns: [{
                 type: Input
-            }], statusOptions: [{
-                type: Input
             }], onSortEvent: [{
                 type: Output
             }], onRowClickEvent: [{
@@ -1293,13 +1561,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class TableComponentModule {
 }
 TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe], imports: [CommonModule, MatTableModule, MatSortModule, StatusComponentModule], exports: [TableComponent] });
-TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, StatusComponentModule]] });
+TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective], imports: [CommonModule, MatTableModule, MatSortModule], exports: [TableComponent] });
+TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TableComponent, DataPropertyGetterPipe],
-                    imports: [CommonModule, MatTableModule, MatSortModule, StatusComponentModule],
+                    declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective],
+                    imports: [CommonModule, MatTableModule, MatSortModule],
                     exports: [TableComponent],
                     providers: [DataPropertyGetterPipe],
                 }]
@@ -1311,5 +1579,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BannerActionComponent, BannerActionComponentModule, BannerComponent, BannerComponentModule, CardComponent, CardComponentModule, ColumnAlignment, ColumnType, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, FieldComponent, FieldComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, StatusComponent, StatusComponentModule, TableComponent, TableComponentModule };
+export { BannerActionComponent, BannerActionComponentModule, BannerComponent, BannerComponentModule, CardComponent, CardComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DialogComponentModule, DialogService, FieldComponent, FieldComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, TableComponent, TableComponentModule };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map