@testgorilla/tgo-ui 0.0.28 → 0.0.29

package/fesm2015/testgorilla-tgo-ui.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, ViewEncapsulation, Optional, Inject, Injectable, Pipe, Directive, ViewChild } from '@angular/core';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,17 +14,17 @@ import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$1 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$2 from '@angular-material-extensions/password-strength';
+import * as i4$1 from '@angular-material-extensions/password-strength';
 import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
-import * as i5 from '@angular/material/checkbox';
+import * as i5$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i5$1 from '@angular/material/menu';
+import * as i5$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRippleModule } from '@angular/material/core';
 import * as i1$6 from '@angular/material/paginator';
@@ -37,6 +37,8 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i2$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Subscription } from 'rxjs';
+import * as i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 class BannerComponent {
     constructor() {
@@ -140,7 +142,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: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"] }]
@@ -184,7 +186,7 @@ class BannerActionComponent {
     }
 }
 BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerActionComponent, selector: "ui-banner-action", inputs: { text: "text", backgroundColor: "backgroundColor", buttonLabel: "buttonLabel", emoji: "emoji" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" [fullWidth]=\"false\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"], components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerActionComponent, selector: "ui-banner-action", inputs: { text: "text", backgroundColor: "backgroundColor", buttonLabel: "buttonLabel", emoji: "emoji" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" [fullWidth]=\"false\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"], components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" [fullWidth]=\"false\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"] }]
@@ -387,7 +389,7 @@ FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             useExisting: forwardRef(() => FieldComponent),
             multi: true,
         },
-    ], ngImport: i0, template: "<div class=\"column\">\n  <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n    <input\n      matInput\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [type]=\"type\"\n      (input)=\"onInput($event)\"\n    />\n    <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n    <mat-hint *ngIf=\"hint && !error\" [innerHTML]=\"hint\"></mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"error\" [innerHTML]=\"error\"></mat-hint>\n  </mat-form-field>\n</div>", styles: [".mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.mat-form-field .error ::ng-deep a{color:#46a997;text-decoration:none}.column{display:flex;flex-direction:column}\n"], components: [{ type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.MatSuffix, selector: "[matSuffix]" }, { type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<div class=\"column\">\n  <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n    <input\n      matInput\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [type]=\"type\"\n      (input)=\"onInput($event)\"\n    />\n    <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n    <mat-hint *ngIf=\"hint && !error\" [innerHTML]=\"hint\"></mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"error\" [innerHTML]=\"error\"></mat-hint>\n  </mat-form-field>\n</div>", styles: [".mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.mat-form-field .error ::ng-deep a{color:#46a997;text-decoration:none}.column{display:flex;flex-direction:column}\n"], components: [{ type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.MatSuffix, selector: "[matSuffix]" }, { type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-field', providers: [
@@ -498,7 +500,7 @@ class CreateAccountComponent {
     }
 }
 CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreateAccountComponent, selector: "ui-create-account", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.username[0]\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$2.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$2.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreateAccountComponent, selector: "ui-create-account", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.username[0]\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.username[0]\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
@@ -643,7 +645,7 @@ class CreatePasswordComponent {
     }
 }
 CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$2.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$2.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"] }]
@@ -949,10 +951,10 @@ class LabelComponent {
     }
 }
 LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LabelComponent, selector: "ui-label", inputs: { backgroundColor: "backgroundColor", textColor: "textColor", title: "title", description: "description", size: "size" }, ngImport: i0, template: "<div\n  class=\"label\"\n  [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n  [ngClass]=\"{\n    small: size === LabelSizeEnum.SMALL,\n    medium: size === LabelSizeEnum.MEDIUM,\n    large: size === LabelSizeEnum.LARGE,\n    big: size === LabelSizeEnum.BIG,\n    huge: size === LabelSizeEnum.HUGE\n  }\"\n>\n  <div [innerHTML]=\"title\"></div>\n  <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;height:16px}.label.medium{padding:2px 8px;font-size:12px;height:20px}.label.large{padding:8px 12px;font-size:14px;height:32px}.label.big{padding:8px 16px;font-size:14px;height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LabelComponent, selector: "ui-label", inputs: { backgroundColor: "backgroundColor", textColor: "textColor", title: "title", description: "description", size: "size" }, ngImport: i0, template: "<div\n  class=\"label\"\n  [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n  [ngClass]=\"{\n    small: size === LabelSizeEnum.SMALL,\n    medium: size === LabelSizeEnum.MEDIUM,\n    large: size === LabelSizeEnum.LARGE,\n    big: size === LabelSizeEnum.BIG,\n    huge: size === LabelSizeEnum.HUGE\n  }\"\n>\n  <div [innerHTML]=\"title\"></div>\n  <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;min-height:16px}.label.medium{padding:2px 8px;font-size:12px;min-height:20px}.label.large{padding:8px 12px;font-size:14px;min-height:32px}.label.big{padding:8px 16px;font-size:14px;min-height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"label\"\n  [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n  [ngClass]=\"{\n    small: size === LabelSizeEnum.SMALL,\n    medium: size === LabelSizeEnum.MEDIUM,\n    large: size === LabelSizeEnum.LARGE,\n    big: size === LabelSizeEnum.BIG,\n    huge: size === LabelSizeEnum.HUGE\n  }\"\n>\n  <div [innerHTML]=\"title\"></div>\n  <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;height:16px}.label.medium{padding:2px 8px;font-size:12px;height:20px}.label.large{padding:8px 12px;font-size:14px;height:32px}.label.big{padding:8px 16px;font-size:14px;height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"] }]
+            args: [{ selector: 'ui-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"label\"\n  [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n  [ngClass]=\"{\n    small: size === LabelSizeEnum.SMALL,\n    medium: size === LabelSizeEnum.MEDIUM,\n    large: size === LabelSizeEnum.LARGE,\n    big: size === LabelSizeEnum.BIG,\n    huge: size === LabelSizeEnum.HUGE\n  }\"\n>\n  <div [innerHTML]=\"title\"></div>\n  <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;min-height:16px}.label.medium{padding:2px 8px;font-size:12px;min-height:20px}.label.large{padding:8px 12px;font-size:14px;min-height:32px}.label.big{padding:8px 16px;font-size:14px;min-height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
                 type: Input
             }], textColor: [{
@@ -1070,7 +1072,7 @@ class LoginComponent {
     }
 }
 LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"row space-between\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.not_have_account }}\n      <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin:40px 0 24px}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row;margin-top:3px}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"row space-between\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.not_have_account }}\n      <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin:40px 0 24px}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row;margin-top:3px}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"row space-between\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.not_have_account }}\n      <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin:40px 0 24px}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row;margin-top:3px}.row.space-between{justify-content:space-between}\n"] }]
@@ -1167,7 +1169,7 @@ 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            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: LogoComponent, selector: "ui-logo" }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: LogoComponent, selector: "ui-logo" }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
@@ -1232,7 +1234,7 @@ class NavigationComponent {
     }
 }
 NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", labelItem: "labelItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"navigation\">\n  <button mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon>arrow_back</mat-icon>\n  </button>\n  <div class=\"content\">\n    <div class=\"title\">\n      <span>{{ title }}</span>\n      <div class=\"status\" *ngIf=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: LabelComponent, selector: "ui-label", inputs: ["backgroundColor", "textColor", "title", "description", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", labelItem: "labelItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"navigation\">\n  <button mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon>arrow_back</mat-icon>\n  </button>\n  <div class=\"content\">\n    <div class=\"title\">\n      <span>{{ title }}</span>\n      <div class=\"status\" *ngIf=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: LabelComponent, selector: "ui-label", inputs: ["backgroundColor", "textColor", "title", "description", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigation\">\n  <button mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon>arrow_back</mat-icon>\n  </button>\n  <div class=\"content\">\n    <div class=\"title\">\n      <span>{{ title }}</span>\n      <div class=\"status\" *ngIf=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"] }]
@@ -1325,7 +1327,7 @@ class ProgressBarComponent {
     constructor() { }
 }
 ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", mode: "mode", value: "value", buffer: "buffer" }, ngImport: i0, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"], components: [{ type: i1$7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", mode: "mode", value: "value", buffer: "buffer" }, ngImport: i0, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"], components: [{ type: i1$7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"] }]
@@ -1542,7 +1544,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <ng-template\n        [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table td.td-right{display:flex;justify-content:flex-end}table td.td-left{display:flex;justify-content:flex-start}table td.td-center{display:flex;justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n          <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <ng-template\n        [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n  <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n    <span>{{tableColumn.headerName | uppercase}}</span>\n    <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n  </div>\n</ng-template>", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table td.td-right{display:flex;justify-content:flex-end}table td.td-left{display:flex;justify-content:flex-start}table td.td-center{display:flex;justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
         trigger('expandDetail', [
             state('collapsed, void', style({ height: '0px' })),
             state('expanded', style({ height: '*' })),
@@ -1559,7 +1561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                             transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        {{tableColumn.headerName | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <ng-template\n        [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table td.td-right{display:flex;justify-content:flex-end}table td.td-left{display:flex;justify-content:flex-start}table td.td-center{display:flex;justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"] }]
+                    ], template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n          <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <ng-container [ngSwitch]=\"tableColumn.type\">\n    <ng-container *ngSwitchCase=\"DataType.FIELD\">\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n      {{tableColumn.function?.(element)}}\n    </ng-container>\n    <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n      <ng-template\n        [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      {{element | dataPropertyGetter: tableColumn.field}}\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n  <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n    <span>{{tableColumn.headerName | uppercase}}</span>\n    <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n  </div>\n</ng-template>", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row){background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table td.td-right{display:flex;justify-content:flex-end}table td.td-left{display:flex;justify-content:flex-start}table td.td-center{display:flex;justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"] }]
         }], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { matSort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -1582,13 +1584,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class TableComponentModule {
 }
 TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective], imports: [CommonModule, MatTableModule, MatSortModule], exports: [TableComponent] });
-TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule]] });
+TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective], imports: [CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule], exports: [TableComponent] });
+TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective],
-                    imports: [CommonModule, MatTableModule, MatSortModule],
+                    imports: [CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule],
                     exports: [TableComponent],
                     providers: [DataPropertyGetterPipe],
                 }]