@testgorilla/tgo-ui 0.0.13 → 0.0.16

package/fesm2020/testgorilla-tgo-ui.mjs

@@ -1,37 +1,150 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Component, Input, NgModule, EventEmitter, Output, ChangeDetectionStrategy, ViewEncapsulation, Pipe, ViewChild } from '@angular/core';
-import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import * as i1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule, forwardRef, EventEmitter, Output, Pipe, ViewChild } from '@angular/core';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/material/input';
+import * as i1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i1$3 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$1 from '@angular/material/button';
+import * as i3$1 from '@angular-material-extensions/password-strength';
+import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
+import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1$3 from '@angular/material/toolbar';
+import * as i3$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4$2 from '@angular/material/menu';
+import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRippleModule } from '@angular/material/core';
-import * as i1$4 from '@angular/material/paginator';
+import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i3$2 from '@angular-material-extensions/password-strength';
-import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
 import * as i3$3 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 * as i5 from 'ngx-date-fns';
+import * as i6 from 'ngx-date-fns';
 import { DateFnsModule } from 'ngx-date-fns';
 
+class BannerComponent {
+    constructor() {
+        // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
+        // https://github.com/storybookjs/storybook/issues/16865
+        // https://github.com/storybookjs/storybook/issues/17004
+        /**
+         * Banner background color
+         *
+         * @type {TemplateStringsArray}
+         * @memberof BannerComponent
+         */
+        this.backgroundColor = '';
+        /**
+         * Banner text
+         *
+         * @type {string}
+         * @memberof BannerComponent
+         */
+        this.text = '';
+        /**
+         * Banner icon
+         *
+         * @type {string}
+         * @memberof BannerComponent
+         */
+        this.icon = 'error_outline';
+    }
+}
+BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerComponent, selector: "ui-banner", inputs: { backgroundColor: "backgroundColor", text: "text", icon: "icon" }, ngImport: i0, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n    <mat-icon>{{ icon }}</mat-icon>\n    <span>{{ text }}</span>\n</div>", styles: ["#banner{width:100%;height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-banner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n    <mat-icon>{{ icon }}</mat-icon>\n    <span>{{ text }}</span>\n</div>", styles: ["#banner{width:100%;height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+class BannerComponentModule {
+}
+BannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, declarations: [BannerComponent], imports: [CommonModule, MatIconModule], exports: [BannerComponent] });
+BannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, providers: [], imports: [[CommonModule, MatIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BannerComponent],
+                    imports: [CommonModule, MatIconModule],
+                    exports: [BannerComponent],
+                    providers: [],
+                }]
+        }] });
+
+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 });
+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"] }]
+        }], ctorParameters: function () { return []; } });
+
+class CardComponent {
+    constructor() {
+        this.title = '';
+        this.subTitle = '';
+    }
+}
+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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: LogoComponent, selector: "ui-logo" }], directives: [{ type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1.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"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subTitle: [{
+                type: Input
+            }] } });
+
+class LogoComponentModule {
+}
+LogoComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LogoComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponentModule, declarations: [LogoComponent], exports: [LogoComponent] });
+LogoComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponentModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LogoComponent],
+                    imports: [],
+                    exports: [LogoComponent],
+                }]
+        }] });
+
+class CardComponentModule {
+}
+CardComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CardComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponentModule, declarations: [CardComponent], imports: [CommonModule, MatCardModule, LogoComponentModule], exports: [CardComponent] });
+CardComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponentModule, imports: [[CommonModule, MatCardModule, LogoComponentModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CardComponent],
+                    imports: [CommonModule, MatCardModule, LogoComponentModule],
+                    exports: [CardComponent],
+                }]
+        }] });
+
 class FieldComponent {
     constructor() {
         /**
@@ -116,7 +229,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.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.MatLabel, selector: "mat-label" }, { type: i1.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.MatSuffix, selector: "[matSuffix]" }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], 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$1.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$1.MatLabel, selector: "mat-label" }, { type: i1$1.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$1.MatSuffix, selector: "[matSuffix]" }, { type: i1$1.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: [
@@ -144,21 +257,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
-class FieldComponentModule {
-}
-FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FieldComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, declarations: [FieldComponent], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule], exports: [FieldComponent] });
-FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, providers: [], imports: [[CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FieldComponent],
-                    imports: [CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule],
-                    exports: [FieldComponent],
-                    providers: [],
-                }]
-        }] });
-
 class ButtonComponent {
     constructor() {
         /**
@@ -205,7 +303,7 @@ 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$1.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.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: "<!--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$2.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"] }] });
 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"] }]
@@ -227,6 +325,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
+class CreatePasswordComponent {
+    constructor(fb) {
+        this.fb = fb;
+        // 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
+         */
+        this.createPasswordForm = this.fb.group({
+            password: [
+                '',
+                [
+                    Validators.required,
+                    Validators.minLength(12),
+                    Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@])(?=[^A-Z]*[A-Z]).{12,}$/),
+                ],
+            ],
+        });
+        /**
+         * @ignore
+         */
+        this.formErrors = {
+            password: [''],
+        };
+        /**
+         * @ignore
+         */
+        this.submitEvent = new EventEmitter();
+    }
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
+    submit() {
+        this.submitEvent.emit({
+            password: this.createPasswordForm.get('password')?.value,
+        });
+    }
+    checkErrors(field) {
+        if (this.createPasswordForm.controls[field].touched) {
+            if (this.createPasswordForm.controls[field].hasError('required')) {
+                this.formErrors[field][0] = 'This field is required';
+                return;
+            }
+            if (field === 'password' && this.createPasswordForm.controls[field].hasError('pattern')) {
+                this.formErrors.password[0] = 'Password is invalid';
+                return;
+            }
+        }
+        this.formErrors[field][0] = '';
+    }
+}
+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, encapsulation: i0.ViewEncapsulation.None });
+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, encapsulation: ViewEncapsulation.None, 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"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], submitEvent: [{
+                type: Output
+            }] } });
+
+class ButtonComponentModule {
+}
+ButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], exports: [ButtonComponent] });
+ButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, providers: [], imports: [[CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonComponent],
+                    imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
+                    exports: [ButtonComponent],
+                    providers: [],
+                }]
+        }] });
+
+class FieldComponentModule {
+}
+FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FieldComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, declarations: [FieldComponent], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule], exports: [FieldComponent] });
+FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, providers: [], imports: [[CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FieldComponent],
+                    imports: [CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule],
+                    exports: [FieldComponent],
+                    providers: [],
+                }]
+        }] });
+
+class CreatePasswordComponentModule {
+}
+CreatePasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, declarations: [CreatePasswordComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FieldComponentModule,
+        ButtonComponentModule,
+        MatPasswordStrengthModule], exports: [CreatePasswordComponent] });
+CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            FieldComponentModule,
+            ButtonComponentModule,
+            MatPasswordStrengthModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CreatePasswordComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FieldComponentModule,
+                        ButtonComponentModule,
+                        MatPasswordStrengthModule,
+                    ],
+                    exports: [CreatePasswordComponent],
+                    providers: [],
+                }]
+        }] });
+
+class ForgotPasswordComponent {
+    constructor(fb) {
+        this.fb = fb;
+        // 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
+         */
+        this.forgotPasswordForm = this.fb.group({
+            email: ['', [Validators.required, Validators.email]],
+        });
+        /**
+         * @ignore
+         */
+        this.formErrors = {
+            email: [''],
+        };
+        /**
+         * @ignore
+         */
+        this.submitEvent = new EventEmitter();
+        /**
+         * @ignore
+         */
+        this.backToLoginEvent = new EventEmitter();
+    }
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
+    submit() {
+        this.submitEvent.emit({
+            email: this.forgotPasswordForm.get('email')?.value,
+        });
+    }
+    backToLogin() {
+        this.backToLoginEvent.emit();
+    }
+    checkErrors(field) {
+        if (this.forgotPasswordForm.controls[field].touched) {
+            if (this.forgotPasswordForm.controls[field].hasError('required')) {
+                this.formErrors[field][0] = 'This field is required';
+                return;
+            }
+            if (this.forgotPasswordForm.controls[field].hasError('email')) {
+                this.formErrors[field][0] = 'Enter a valid email';
+                return;
+            }
+        }
+        this.formErrors[field][0] = '';
+    }
+}
+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, encapsulation: i0.ViewEncapsulation.None });
+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, encapsulation: ViewEncapsulation.None, 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"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], submitEvent: [{
+                type: Output
+            }], backToLoginEvent: [{
+                type: Output
+            }] } });
+
+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]] });
+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],
+                    exports: [ForgotPasswordComponent],
+                    providers: [],
+                }]
+        }] });
+
 class LoginComponent {
     constructor(fb) {
         this.fb = fb;
@@ -292,12 +603,12 @@ class LoginComponent {
         this.formErrors[field] = '';
     }
 }
-LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, deps: [{ token: i1$2.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: i3$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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+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: i3$2.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, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }]; }, propDecorators: { loading: [{
+        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { loading: [{
                 type: Input
             }], submitEvent: [{
                 type: Output
@@ -307,21 +618,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
-class ButtonComponentModule {
-}
-ButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], exports: [ButtonComponent] });
-ButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, providers: [], imports: [[CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ButtonComponent],
-                    imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
-                    exports: [ButtonComponent],
-                    providers: [],
-                }]
-        }] });
-
 class LoginComponentModule {
 }
 LoginComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -400,10 +696,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>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.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$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i1$1.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:900}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i1$2.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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.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, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:900}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { routes: [{
                 type: Input
             }], activedRoute: [{
@@ -431,6 +727,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+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{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-status', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"label\" [ngStyle]=\"{'background-color': backgroundColor, 'color': color}\">\n    {{ title }}\n</div>\n", styles: [".label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class NavigationComponent {
+    constructor() {
+        /**
+         * @ignore
+         */
+        this.goBackClickedEvent = new EventEmitter();
+    }
+    goBackClicked() {
+        this.goBackClickedEvent.emit();
+    }
+}
+NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", statusItem: "statusItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div id=\"navigation\">\n    <button mat-icon-button (click)=\"goBackClicked()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"content\">\n        <div class=\"title\">\n            <span>{{ title }}</span>\n            <div class=\"status\" *ngIf=\"statusItem\">\n                <ui-status [backgroundColor]=\"statusItem.backgroundColor\" [color]=\"statusItem.color\" [title]=\"statusItem.title\"></ui-status>\n            </div>\n        </div>\n        <div class=\"subtitle\">\n            {{ subtitle }}\n        </div>\n    </div>\n</div>", styles: ["#navigation{width:100%;height:128px;display:flex;align-items:center}#navigation mat-icon{color:#000}#navigation .content{margin-left:32px;display:flex;flex-direction:column}#navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}#navigation .content .title .status{margin-left:8px}#navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], components: [{ type: i1$2.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, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div id=\"navigation\">\n    <button mat-icon-button (click)=\"goBackClicked()\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"content\">\n        <div class=\"title\">\n            <span>{{ title }}</span>\n            <div class=\"status\" *ngIf=\"statusItem\">\n                <ui-status [backgroundColor]=\"statusItem.backgroundColor\" [color]=\"statusItem.color\" [title]=\"statusItem.title\"></ui-status>\n            </div>\n        </div>\n        <div class=\"subtitle\">\n            {{ subtitle }}\n        </div>\n    </div>\n</div>", styles: ["#navigation{width:100%;height:128px;display:flex;align-items:center}#navigation mat-icon{color:#000}#navigation .content{margin-left:32px;display:flex;flex-direction:column}#navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}#navigation .content .title .status{margin-left:8px}#navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], statusItem: [{
+                type: Input
+            }], goBackClickedEvent: [{
+                type: Output
+            }] } });
+
+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]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NavigationComponent],
+                    imports: [CommonModule, MatIconModule, MatButtonModule, StatusComponentModule],
+                    exports: [NavigationComponent],
+                    providers: [],
+                }]
+        }] });
+
 class PaginatorComponent {
     constructor() {
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
@@ -464,7 +857,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$4.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;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"] }]
@@ -559,12 +952,12 @@ class RegisterComponent {
         this.formErrors[field][0] = '';
     }
 }
-RegisterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RegisterComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-RegisterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RegisterComponent, selector: "ui-register", 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$2.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$2.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i3$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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+RegisterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RegisterComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+RegisterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RegisterComponent, selector: "ui-register", 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: i3$2.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, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RegisterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-register', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }]; }, propDecorators: { formErrors: [{
+        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -738,10 +1131,10 @@ 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: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{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}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}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}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$3.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: i3$3.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe, "dfnsFormat": i5.FormatPipe, "dfnsParseIso": i5.ParseIsoPipe, "dfnsFormatDistanceToNow": i5.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></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", styles: ["table{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}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}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}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$3.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: i3$3.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe, "dfnsFormat": i6.FormatPipe, "dfnsParseIso": i6.ParseIsoPipe, "dfnsFormatDistanceToNow": i6.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{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}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}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}\n"] }]
+            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></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", styles: ["table{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}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}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}\n"] }]
         }], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort, { static: true }]
@@ -760,23 +1153,23 @@ 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, DateFnsModule], exports: [TableComponent] });
-TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, DateFnsModule]] });
+TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe], imports: [CommonModule, MatTableModule, MatSortModule, DateFnsModule, 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, DateFnsModule, StatusComponentModule]] });
 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, DateFnsModule],
+                    imports: [CommonModule, MatTableModule, MatSortModule, DateFnsModule, StatusComponentModule],
                     exports: [TableComponent],
                     providers: [DataPropertyGetterPipe],
                 }]
         }] });
 
-// Field Component
+/* eslint-disable */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DataPropertyGetterPipe, DataType, DateFormat, FieldComponent, FieldComponentModule, LoginComponent, LoginComponentModule, NavbarComponent, NavbarComponentModule, PaginatorComponent, PaginatorComponentModule, RegisterComponent, RegisterComponentModule, TableComponent, TableComponentModule };
+export { BannerComponent, BannerComponentModule, CardComponent, CardComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DataType, DateFormat, FieldComponent, FieldComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, RegisterComponent, RegisterComponentModule, StatusComponent, StatusComponentModule, TableComponent, TableComponentModule };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map