@testgorilla/tgo-ui 0.0.29 → 0.0.31

package/fesm2015/testgorilla-tgo-ui.mjs

@@ -142,10 +142,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "<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"] }] });
+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\" aria-label=\"loading\" 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"] }]
+            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\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], label: [{
@@ -236,10 +236,10 @@ class LogoComponent {
     constructor() { }
 }
 LogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img src=\"/images/testgorilla.svg\">\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img src=\"/images/testgorilla.svg\" alt=\"testGorillaLogo\">\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img src=\"/images/testgorilla.svg\">\n", styles: [":host{display:inline-flex}\n"] }]
+            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img src=\"/images/testgorilla.svg\" alt=\"testGorillaLogo\">\n", styles: [":host{display:inline-flex}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class CardComponent {
@@ -389,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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.MatSuffix, selector: "[matSuffix]" }, { type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<div class=\"column\">\n  <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n    <input\n      matInput\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [type]=\"type\"\n      (input)=\"onInput($event)\"\n      aria-label=\"input\"\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: [
@@ -398,7 +398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             useExisting: forwardRef(() => FieldComponent),
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], 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      aria-label=\"input\"\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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], preffixIcon: [{
@@ -433,7 +433,7 @@ class CreateAccountComponent {
                 [
                     Validators.required,
                     Validators.minLength(12),
-                    Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@])(?=[^A-Z]*[A-Z]).{12,}$/),
+                    Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/),
                 ],
             ],
             agree_terms_and_conditions: [false, [Validators.requiredTrue]],
@@ -500,10 +500,10 @@ 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$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 });
+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          aria-hidden=\"true\"\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"] }]
+            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          aria-hidden=\"true\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
@@ -592,7 +592,7 @@ class CreatePasswordComponent {
                 [
                     Validators.required,
                     Validators.minLength(12),
-                    Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@])(?=[^A-Z]*[A-Z]).{12,}$/),
+                    Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/),
                 ],
             ],
         });
@@ -645,10 +645,10 @@ 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$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 });
+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        aria-hidden=\"true\"\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"] }]
+            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        aria-hidden=\"true\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
@@ -1234,10 +1234,10 @@ 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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", labelItem: "labelItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"navigation\">\n  <button aria-label=\"Go back\" mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon aria-hidden=\"true\">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"] }]
+            args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigation\">\n  <button aria-label=\"Go back\" mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon aria-hidden=\"true\">arrow_back</mat-icon>\n  </button>\n  <div class=\"content\">\n    <div class=\"title\">\n      <span >{{ title }}</span>\n      <div class=\"status\" *ngIf=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -1268,6 +1268,13 @@ class PaginatorComponent {
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
         // https://github.com/storybookjs/storybook/issues/16865
         // https://github.com/storybookjs/storybook/issues/17004
+        /**
+         * Paginator size options
+         *
+         * @type {number[]}
+         * @memberof PaginatorComponent
+         */
+        this.pageSizeOptions = [10, 25, 50];
         /**
          * Data length
          *
@@ -1281,7 +1288,7 @@ class PaginatorComponent {
          * @type {number}
          * @memberof PaginatorComponent
          */
-        this.defaultPageSize = 10;
+        this.defaultPageSize = 25;
         /**
          * @ignore
          */
@@ -1296,10 +1303,10 @@ class PaginatorComponent {
     }
 }
 PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"pageSizeOptions\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
+            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"pageSizeOptions\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { length: [{
                 type: Input
             }], defaultPageSize: [{
@@ -1327,10 +1334,10 @@ 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", mode: "mode", value: "value", buffer: "buffer" }, ngImport: i0, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\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"] }]
+            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  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { color: [{
                 type: Input
             }], mode: [{
@@ -1544,7 +1551,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          <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: [
+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;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></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    [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n    (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  <div class=\"align-wrapper\">\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  </div>\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>\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-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).row-clickable{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 .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{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: '*' })),
@@ -1561,7 +1568,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          <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"] }]
+                    ], 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;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></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    [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n    (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  <div class=\"align-wrapper\">\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  </div>\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>\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-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).row-clickable{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 .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{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]