@testgorilla/tgo-ui 1.3.0 → 1.4.0

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -13,9 +13,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { HttpClientModule } from '@angular/common/http';
-import * as i1$2 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i1$3 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, Validators, FormGroup, FormControl } from '@angular/forms';
 import * as i2$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -25,9 +23,9 @@ import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i5$1 from '@angular-material-extensions/password-strength';
 import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
-import * as i1$4 from '@angular/material/dialog';
+import * as i1$3 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import * as i1$5 from '@angular/material/progress-bar';
+import * as i1$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i2$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -35,15 +33,15 @@ import * as i5$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i4$2 from '@angular/material/core';
 import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
-import * as i1$6 from '@angular/material/paginator';
+import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i2$5 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i1$8 from '@angular/material/snack-bar';
+import * as i1$7 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { __decorate } from 'tslib';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import * as i1$7 from '@ngneat/transloco';
+import * as i1$6 from '@ngneat/transloco';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import * as i7 from 'rxjs';
 import { lastValueFrom, Subscription, ReplaySubject, debounceTime, map, startWith } from 'rxjs';
@@ -675,113 +673,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-var LogoTypeEnum;
-(function (LogoTypeEnum) {
-    LogoTypeEnum["DEFAULT"] = "default";
-    LogoTypeEnum["POWEREDBY"] = "poweredby";
-    LogoTypeEnum["REVERSE"] = "reverse";
-})(LogoTypeEnum || (LogoTypeEnum = {}));
-;
-var LogoPathEnum;
-(function (LogoPathEnum) {
-    LogoPathEnum["DEFAULT"] = "/images/testgorilla.svg";
-    LogoPathEnum["POWEREDBY"] = "/images/poweredbyTG.svg";
-    LogoPathEnum["REVERSE"] = "/images/reverseTG.svg";
-})(LogoPathEnum || (LogoPathEnum = {}));
-
-class LogoComponent {
-    constructor() {
-        /**
-         * Logo type
-         *
-         * @type {LogoTypeEnum}
-         * @memberof LogoComponent
-         */
-        this.type = LogoTypeEnum.DEFAULT;
-        /**
-         * @ignore
-         */
-        this.setURL = () => {
-            switch (this.type) {
-                case LogoTypeEnum.POWEREDBY: {
-                    this.logoURL = LogoPathEnum.POWEREDBY;
-                    break;
-                }
-                case LogoTypeEnum.REVERSE: {
-                    this.logoURL = LogoPathEnum.REVERSE;
-                    break;
-                }
-                default: {
-                    this.logoURL = LogoPathEnum.DEFAULT;
-                    break;
-                }
-            }
-        };
-    }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-        this.setURL();
-    }
-    ;
-    /**
-     * @ignore
-     */
-    ngOnChanges() {
-        this.setURL();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LogoComponent, selector: "ui-logo", inputs: { type: "type" }, usesOnChanges: true, ngImport: i0, template: "<img [src]=\"logoURL\" [alt]=\"type\">\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img [src]=\"logoURL\" [alt]=\"type\">\n" }]
-        }], propDecorators: { type: [{
-                type: Input
-            }] } });
-
 class CardComponent {
-    constructor() {
-        this.title = '';
-        this.subTitle = '';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, selector: "ui-card", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0, template: "<mat-card appearance=\"outlined\" class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .mat-mdc-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%;width:100%;word-wrap:break-word}.container .mat-mdc-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"], dependencies: [{ kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, selector: "ui-card", ngImport: i0, template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [".card-container{padding:24px;border-radius:8px;border:1px solid #E0E0E0;background:#ffffff}@media (max-width: 600px){.card-container{padding:16px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card appearance=\"outlined\" class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .mat-mdc-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%;width:100%;word-wrap:break-word}.container .mat-mdc-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], subTitle: [{
-                type: Input
-            }] } });
-
-class LogoComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule, declarations: [LogoComponent], exports: [LogoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [LogoComponent],
-                    imports: [],
-                    exports: [LogoComponent],
-                }]
+            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [".card-container{padding:24px;border-radius:8px;border:1px solid #E0E0E0;background:#ffffff}@media (max-width: 600px){.card-container{padding:16px}}\n"] }]
         }] });
 
 class CardComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CardComponentModule, declarations: [CardComponent], imports: [CommonModule, MatCardModule, LogoComponentModule], exports: [CardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponentModule, imports: [CommonModule, MatCardModule, LogoComponentModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CardComponentModule, declarations: [CardComponent], imports: [CommonModule], exports: [CardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponentModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CardComponent],
-                    imports: [CommonModule, MatCardModule, LogoComponentModule],
+                    imports: [CommonModule],
                     exports: [CardComponent],
                 }]
         }] });
@@ -1220,6 +1130,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+var LogoTypeEnum;
+(function (LogoTypeEnum) {
+    LogoTypeEnum["DEFAULT"] = "default";
+    LogoTypeEnum["POWEREDBY"] = "poweredby";
+    LogoTypeEnum["REVERSE"] = "reverse";
+})(LogoTypeEnum || (LogoTypeEnum = {}));
+;
+var LogoPathEnum;
+(function (LogoPathEnum) {
+    LogoPathEnum["DEFAULT"] = "/images/testgorilla.svg";
+    LogoPathEnum["POWEREDBY"] = "/images/poweredbyTG.svg";
+    LogoPathEnum["REVERSE"] = "/images/reverseTG.svg";
+})(LogoPathEnum || (LogoPathEnum = {}));
+
+class LogoComponent {
+    constructor() {
+        /**
+         * Logo type
+         *
+         * @type {LogoTypeEnum}
+         * @memberof LogoComponent
+         */
+        this.type = LogoTypeEnum.DEFAULT;
+        /**
+         * @ignore
+         */
+        this.setURL = () => {
+            switch (this.type) {
+                case LogoTypeEnum.POWEREDBY: {
+                    this.logoURL = LogoPathEnum.POWEREDBY;
+                    break;
+                }
+                case LogoTypeEnum.REVERSE: {
+                    this.logoURL = LogoPathEnum.REVERSE;
+                    break;
+                }
+                default: {
+                    this.logoURL = LogoPathEnum.DEFAULT;
+                    break;
+                }
+            }
+        };
+    }
+    /**
+     * @ignore
+     */
+    ngOnInit() {
+        this.setURL();
+    }
+    ;
+    /**
+     * @ignore
+     */
+    ngOnChanges() {
+        this.setURL();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LogoComponent, selector: "ui-logo", inputs: { type: "type" }, usesOnChanges: true, ngImport: i0, template: "<img [src]=\"logoURL\" [alt]=\"type\">\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img [src]=\"logoURL\" [alt]=\"type\">\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }] } });
+
 class CreateAccountComponent {
     /**
      * @ignore
@@ -1331,13 +1307,13 @@ class CreateAccountComponent {
         }
         this.formErrors[field] = errors;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateAccountComponent, selector: "ui-create-account", inputs: { email: "email", emailEditable: "emailEditable", termsOfusePath: "termsOfusePath", privacyPolicyPath: "privacyPolicyPath", 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        [errors]=\"formErrors['username']\"\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        [errors]=\"formErrors['password']\"\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      <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n      <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>\n      <span>{{i18n.terms_conditions_delimiter}}</span>\n      <a class=\"link\" [href]=\"privacyPolicyPath\" target=\"_blank\">{{ i18n.privacy_policy_link_label }}</a>\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        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"link\" (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 ui-logo{width:160px;display:inline-flex}.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{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: i5$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateAccountComponent, selector: "ui-create-account", inputs: { email: "email", emailEditable: "emailEditable", termsOfusePath: "termsOfusePath", privacyPolicyPath: "privacyPolicyPath", 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        [errors]=\"formErrors['username']\"\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        [errors]=\"formErrors['password']\"\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      <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n      <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>\n      <span>{{i18n.terms_conditions_delimiter}}</span>\n      <a class=\"link\" [href]=\"privacyPolicyPath\" target=\"_blank\">{{ i18n.privacy_policy_link_label }}</a>\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        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"link\" (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 ui-logo{width:160px;display:inline-flex}.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{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: i5$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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        [errors]=\"formErrors['username']\"\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        [errors]=\"formErrors['password']\"\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      <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n      <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>\n      <span>{{i18n.terms_conditions_delimiter}}</span>\n      <a class=\"link\" [href]=\"privacyPolicyPath\" target=\"_blank\">{{ i18n.privacy_policy_link_label }}</a>\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        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"link\" (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 ui-logo{width:160px;display:inline-flex}.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{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { email: [{
+        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }]; }, propDecorators: { email: [{
                 type: Input
             }], emailEditable: [{
                 type: Input
@@ -1392,6 +1368,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class LogoComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule, declarations: [LogoComponent], exports: [LogoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogoComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LogoComponent],
+                    imports: [],
+                    exports: [LogoComponent],
+                }]
+        }] });
+
 class CreateAccountComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateAccountComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CreateAccountComponentModule, declarations: [CreateAccountComponent], imports: [CommonModule,
@@ -1494,13 +1484,13 @@ class CreatePasswordComponent {
         }
         this.formErrors[field] = [''];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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        [errors]=\"formErrors.password\"\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        (buttonClickEvent)=\"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 ui-logo{width:160px;display:inline-flex}.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}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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        [errors]=\"formErrors.password\"\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        (buttonClickEvent)=\"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 ui-logo{width:160px;display:inline-flex}.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}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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        [errors]=\"formErrors.password\"\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        (buttonClickEvent)=\"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 ui-logo{width:160px;display:inline-flex}.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}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { formErrors: [{
+        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -1629,13 +1619,13 @@ class DialogComponent {
     onPrimaryButtonClick(event) {
         this.primaryButtonClickEvent.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div mat-dialog-title class=\"dialog-title\">\n    {{ title }}\n    <div *ngIf=\"showCloseButton\">\n      <ui-button\n        type=\"text\"\n        [justIcon]=\"true\"\n        [disabled]=\"disableButtons\"\n        class=\"close\"\n        iconName=\"Close\"\n        label=\"Close dialog\"\n        (click)=\"onClose($event)\"\n        (buttonClickEvent)=\"dismiss()\"\n      ></ui-button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <ng-content></ng-content>\n  </mat-dialog-content>\n  <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n    <ui-button\n      [type]=\"secondaryButtonType\"\n      *ngIf=\"!!secondaryButtonLabel\"\n      [label]=\"secondaryButtonLabel\"\n      (click)=\"onSecondaryButtonClick($event)\"\n    ></ui-button>\n    <ui-button\n      [type]=\"primaryButtonType\"\n      *ngIf=\"!!primaryButtonLabel\"\n      [disabled]=\"disableButtons\"\n      (click)=\"onPrimaryButtonClick($event)\"\n      [label]=\"primaryButtonLabel\"\n      (buttonClickEvent)=\"dismiss()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0;font-size:20px!important;font-weight:700!important}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;flex-flow:column}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i1$3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div mat-dialog-title class=\"dialog-title\">\n    {{ title }}\n    <div *ngIf=\"showCloseButton\">\n      <ui-button\n        type=\"text\"\n        [justIcon]=\"true\"\n        [disabled]=\"disableButtons\"\n        class=\"close\"\n        iconName=\"Close\"\n        label=\"Close dialog\"\n        (click)=\"onClose($event)\"\n        (buttonClickEvent)=\"dismiss()\"\n      ></ui-button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <ng-content></ng-content>\n  </mat-dialog-content>\n  <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n    <ui-button\n      [type]=\"secondaryButtonType\"\n      *ngIf=\"!!secondaryButtonLabel\"\n      [label]=\"secondaryButtonLabel\"\n      (click)=\"onSecondaryButtonClick($event)\"\n    ></ui-button>\n    <ui-button\n      [type]=\"primaryButtonType\"\n      *ngIf=\"!!primaryButtonLabel\"\n      [disabled]=\"disableButtons\"\n      (click)=\"onPrimaryButtonClick($event)\"\n      [label]=\"primaryButtonLabel\"\n      (buttonClickEvent)=\"dismiss()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0;font-size:20px!important;font-weight:700!important}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;flex-flow:column}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container>\n  <div mat-dialog-title class=\"dialog-title\">\n    {{ title }}\n    <div *ngIf=\"showCloseButton\">\n      <ui-button\n        type=\"text\"\n        [justIcon]=\"true\"\n        [disabled]=\"disableButtons\"\n        class=\"close\"\n        iconName=\"Close\"\n        label=\"Close dialog\"\n        (click)=\"onClose($event)\"\n        (buttonClickEvent)=\"dismiss()\"\n      ></ui-button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <ng-content></ng-content>\n  </mat-dialog-content>\n  <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n    <ui-button\n      [type]=\"secondaryButtonType\"\n      *ngIf=\"!!secondaryButtonLabel\"\n      [label]=\"secondaryButtonLabel\"\n      (click)=\"onSecondaryButtonClick($event)\"\n    ></ui-button>\n    <ui-button\n      [type]=\"primaryButtonType\"\n      *ngIf=\"!!primaryButtonLabel\"\n      [disabled]=\"disableButtons\"\n      (click)=\"onPrimaryButtonClick($event)\"\n      [label]=\"primaryButtonLabel\"\n      (buttonClickEvent)=\"dismiss()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0;font-size:20px!important;font-weight:700!important}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;flex-flow:column}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }]; }, propDecorators: { title: [{
                 type: Input
             }], showCloseButton: [{
                 type: Input
@@ -1667,12 +1657,12 @@ class DialogService {
             panelClass: 'ui-dialog-wrapper',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
 
 class DialogComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1767,7 +1757,7 @@ class ProgressBarComponent {
         this.buffer = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", progress: "progress", mode: "mode", buffer: "buffer" }, host: { properties: { "style.--color": "this.color" } }, ngImport: i0, template: "<mat-progress-bar\n  [mode]=\"mode\"\n  [value]=\"progress\"\n  [bufferValue]=\"buffer\"\n  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\n  class=\"progress-bar\"\n></mat-progress-bar>\n", styles: [".mat-mdc-progress-bar.progress-bar{height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px}\n"], dependencies: [{ kind: "component", type: i1$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", progress: "progress", mode: "mode", buffer: "buffer" }, host: { properties: { "style.--color": "this.color" } }, ngImport: i0, template: "<mat-progress-bar\n  [mode]=\"mode\"\n  [value]=\"progress\"\n  [bufferValue]=\"buffer\"\n  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\n  class=\"progress-bar\"\n></mat-progress-bar>\n", styles: [".mat-mdc-progress-bar.progress-bar{height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px}\n"], dependencies: [{ kind: "component", type: i1$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
@@ -2117,13 +2107,13 @@ class ForgotPasswordComponent {
         }
         this.formErrors[field] = [''];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { formErrors: [{
+        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -2395,13 +2385,13 @@ class LoginComponent {
         }
         this.formErrors[field] = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, selector: "ui-login", inputs: { email: "email", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n    <div class=\"field-email\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.email]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field-password\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.password]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"actions\">\n      <div class=\"remember-me\">\n        <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"create-account-wrapper\">\n      <p>\n        {{ i18n.not_have_account }}\n        <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n      </p>\n    </div>\n  </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, selector: "ui-login", inputs: { email: "email", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n    <div class=\"field-email\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.email]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field-password\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.password]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"actions\">\n      <div class=\"remember-me\">\n        <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"create-account-wrapper\">\n      <p>\n        {{ i18n.not_have_account }}\n        <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n      </p>\n    </div>\n  </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-login-container\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n    <div class=\"field-email\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.email]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field-password\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.password]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"actions\">\n      <div class=\"remember-me\">\n        <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"create-account-wrapper\">\n      <p>\n        {{ i18n.not_have_account }}\n        <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n      </p>\n    </div>\n  </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { email: [{
+        }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }]; }, propDecorators: { email: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -2648,7 +2638,7 @@ class PaginatorComponent {
         this.paginatorChangedEvent.emit(paginator);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-mdc-paginator{border-radius:0 0 8px 8px}.mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], dependencies: [{ kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-mdc-paginator{border-radius:0 0 8px 8px}.mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], dependencies: [{ kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -2883,7 +2873,7 @@ let LanguageService = class LanguageService {
     setActiveLanguage(languageCode) {
         this.translocoService.setActiveLang(languageCode);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LanguageService, deps: [{ token: i1$7.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LanguageService, deps: [{ token: i1$6.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
 };
 LanguageService = __decorate([
@@ -2894,7 +2884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$7.TranslocoService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.TranslocoService }]; } });
 
 class SnackbarComponent {
     constructor(data, snackbarRef, languageService) {
@@ -2987,8 +2977,8 @@ class SnackbarComponent {
         this.visible = false;
         this.snackbarRef.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$8.MatSnackBarRef }, { token: LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SnackbarComponent, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", language: "language" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [ngClass]=\"snackbarType + ' ' + position\"\n    [@openClose]\n    *ngIf=\"visible\"\n    class=\"snackbar-container\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n  >\n    <div class=\"snackbar-text\">\n      <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n      {{ message }}\n    </div>\n    <ui-button\n      *ngIf=\"includeDismissButton\"\n      type=\"text\"\n      [label]=\"t(translationContext + 'DISMISS')\"\n      (buttonClickEvent)=\"dismissClick()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .mat-mdc-snack-bar-container{margin:16px 8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$7.MatSnackBarRef }, { token: LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SnackbarComponent, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", language: "language" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [ngClass]=\"snackbarType + ' ' + position\"\n    [@openClose]\n    *ngIf=\"visible\"\n    class=\"snackbar-container\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n  >\n    <div class=\"snackbar-text\">\n      <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n      {{ message }}\n    </div>\n    <ui-button\n      *ngIf=\"includeDismissButton\"\n      type=\"text\"\n      [label]=\"t(translationContext + 'DISMISS')\"\n      (buttonClickEvent)=\"dismissClick()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .mat-mdc-snack-bar-container{margin:16px 8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$6.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }], animations: [
             trigger('openClose', [
                 transition(':enter', [
                     style({ bottom: '-55px', opacity: 0 }),
@@ -3018,7 +3008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
-                }] }, { type: i1$8.MatSnackBarRef }, { type: LanguageService }]; }, propDecorators: { snackbarType: [{
+                }] }, { type: i1$7.MatSnackBarRef }, { type: LanguageService }]; }, propDecorators: { snackbarType: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -3052,12 +3042,12 @@ class SnackbarService {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarService, deps: [{ token: i1$8.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarService, deps: [{ token: i1$7.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$8.MatSnackBar }]; } });
+        }], ctorParameters: function () { return [{ type: i1$7.MatSnackBar }]; } });
 
 const preloadLang$2 = (transloco) => () => {
     transloco.setActiveLang('en');
@@ -3784,13 +3774,13 @@ class ConfirmDialogComponent {
         this.cancelButtonText = data.cancelButtonText ?? CONFIRM_DIALOG_i18n.cancelButtonText;
         this.title = data.title ?? CONFIRM_DIALOG_i18n.title;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", ngImport: i0, template: "<ui-dialog\n  [title]=\"title\"\n  [primaryButtonLabel]=\"confirmButtonText\"\n  [secondaryButtonLabel]=\"cancelButtonText\"\n  (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n  (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n  primaryButtonType=\"destructive\"\n  secondaryButtonType=\"outlined\"\n  [showCloseButton]=\"false\"\n>\n  <div class=\"message\">{{ confirmMessage }}</div>\n</ui-dialog>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "secondaryButtonType", "primaryButtonType"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-confirm-dialog', template: "<ui-dialog\n  [title]=\"title\"\n  [primaryButtonLabel]=\"confirmButtonText\"\n  [secondaryButtonLabel]=\"cancelButtonText\"\n  (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n  (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n  primaryButtonType=\"destructive\"\n  secondaryButtonType=\"outlined\"\n  [showCloseButton]=\"false\"\n>\n  <div class=\"message\">{{ confirmMessage }}</div>\n</ui-dialog>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -3947,7 +3937,7 @@ class DatepickerComponent {
                 useExisting: forwardRef(() => DatepickerComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field #uiDatepicker appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n  <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n  <ng-container *ngIf=\"!isRange\">\n    <input *ngIf=\"!isRange\" matInput\n      [matDatepicker]=\"picker\"\n      matInput\n      (blur)=\"onTouch()\"\n      (dateChange)=\"onValueChange($event.value)\"\n      [id]=\"id!\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </ng-container>\n  <ng-container *ngIf=\"isRange\">\n    <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" >\n      <input matStartDate #dateRangeStart formControlName=\"start\" placeholder=\"Start date\" >\n      <input matEndDate  #dateRangeEnd formControlName=\"end\" placeholder=\"End date\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n    </mat-date-range-input>\n    <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #rangePicker></mat-date-range-picker>\n  </ng-container>\n  <mat-hint class=\"info\" *ngIf=\"hint && !_errors\">{{ hint }}</mat-hint>\n  <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n    <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field #uiDatepicker appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n  <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n  <ng-container *ngIf=\"!isRange\">\n    <input *ngIf=\"!isRange\" matInput\n      [matDatepicker]=\"picker\"\n      matInput\n      (blur)=\"onTouch()\"\n      (dateChange)=\"onValueChange($event.value)\"\n      [id]=\"id!\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </ng-container>\n  <ng-container *ngIf=\"isRange\">\n    <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" >\n      <input matStartDate #dateRangeStart formControlName=\"start\" placeholder=\"Start date\" >\n      <input matEndDate  #dateRangeEnd formControlName=\"end\" placeholder=\"End date\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n    </mat-date-range-input>\n    <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #rangePicker></mat-date-range-picker>\n  </ng-container>\n  <mat-hint class=\"info\" *ngIf=\"hint && !_errors\">{{ hint }}</mat-hint>\n  <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n    <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
@@ -4345,11 +4335,11 @@ class StepComponent {
         this.stepSelected.emit(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n  *ngIf=\"!mobileMode; else mobile\"\n  class=\"step-container\"\n  [tabIndex]=\"0\"\n  [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon,\n    'disabled': disabled,\n  }\"\n  (click)=\"onStepSelected(index)\"\n>\n  <div class=\"step-icon\">\n    <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n    <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n      <ng-container [ngSwitch]=\"true\">\n        <ng-container *ngSwitchCase=\"isVisited && !selected\">\n          <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                   [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"selected && !!icon\">\n          <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          {{ index + 1 }}\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <ng-template #lastStep>\n      <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n      <ng-template #stepIcon>\n        <div class=\"icon-wrapper\">\n          <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n          <ng-template #stepIndex>\n            {{ index + 1 }}\n          </ng-template>\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <div class=\"step-label\" *ngIf=\"label\">\n    {{ label }}\n  </div>\n</div>\n\n<ng-template #mobile>\n  <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\">\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n</ng-template>\n", styles: [".flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;font-weight:700}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:44px;right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#C8D7DE}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n  *ngIf=\"!mobileMode; else mobile\"\n  class=\"step-container\"\n  [tabIndex]=\"0\"\n  [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon,\n    'disabled': disabled,\n  }\"\n  (click)=\"onStepSelected(index)\"\n>\n  <div class=\"step-icon\">\n    <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n    <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n      <ng-container [ngSwitch]=\"true\">\n        <ng-container *ngSwitchCase=\"isVisited && !selected\">\n          <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                   [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"selected && !!icon\">\n          <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          {{ index + 1 }}\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <ng-template #lastStep>\n      <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n      <ng-template #stepIcon>\n        <div class=\"icon-wrapper\">\n          <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n          <ng-template #stepIndex>\n            {{ index + 1 }}\n          </ng-template>\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <div class=\"step-label\" *ngIf=\"label\">\n    {{ label }}\n  </div>\n</div>\n\n<ng-template #mobile>\n  <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n</ng-template>\n", styles: [".flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;font-weight:700}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:44px;right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#C8D7DE}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!mobileMode; else mobile\"\n  class=\"step-container\"\n  [tabIndex]=\"0\"\n  [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon,\n    'disabled': disabled,\n  }\"\n  (click)=\"onStepSelected(index)\"\n>\n  <div class=\"step-icon\">\n    <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n    <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n      <ng-container [ngSwitch]=\"true\">\n        <ng-container *ngSwitchCase=\"isVisited && !selected\">\n          <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                   [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"selected && !!icon\">\n          <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          {{ index + 1 }}\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <ng-template #lastStep>\n      <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n      <ng-template #stepIcon>\n        <div class=\"icon-wrapper\">\n          <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n          <ng-template #stepIndex>\n            {{ index + 1 }}\n          </ng-template>\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <div class=\"step-label\" *ngIf=\"label\">\n    {{ label }}\n  </div>\n</div>\n\n<ng-template #mobile>\n  <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\">\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n</ng-template>\n", styles: [".flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;font-weight:700}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:44px;right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#C8D7DE}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"] }]
+            args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!mobileMode; else mobile\"\n  class=\"step-container\"\n  [tabIndex]=\"0\"\n  [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon,\n    'disabled': disabled,\n  }\"\n  (click)=\"onStepSelected(index)\"\n>\n  <div class=\"step-icon\">\n    <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n    <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n      <ng-container [ngSwitch]=\"true\">\n        <ng-container *ngSwitchCase=\"isVisited && !selected\">\n          <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                   [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"selected && !!icon\">\n          <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          {{ index + 1 }}\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <ng-template #lastStep>\n      <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n      <ng-template #stepIcon>\n        <div class=\"icon-wrapper\">\n          <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n          <ng-template #stepIndex>\n            {{ index + 1 }}\n          </ng-template>\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <div class=\"step-label\" *ngIf=\"label\">\n    {{ label }}\n  </div>\n</div>\n\n<ng-template #mobile>\n  <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n</ng-template>\n", styles: [".flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;font-weight:700}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:44px;right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#C8D7DE}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], isVisited: [{
@@ -4479,7 +4469,7 @@ class StepperComponent {
         this.progressValue = ((selectedIndex + 1) * 100) / this.itemSteps.length;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponent, deps: [{ token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepperComponent, selector: "ui-stepper", inputs: { steps: "steps", selectedIndex: "selectedIndex", lastStepFinalIcon: "lastStepFinalIcon" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"stepper-wrapper\" *ngIf=\"!(isMobile$ | async); else mobile\">\n    <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n      <div class=\"step\" #stepElement>\n        <ui-step\n          [label]=\"step.label\"\n          [isVisited]=\"step.isVisited!\"\n          [icon]=\"step.iconName\"\n          [index]=\"i\"\n          [selected]=\"i === selectedIndex\"\n          [selectedIndex]=\"selectedIndex\"\n          [isLast]=\"isLast\"\n          [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n          [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n          [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n          [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n          (stepSelected)=\"onSelect($event, step)\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineWidth]=\"stepElement\" class=\"line\"></div>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-template #mobile>\n    <div class=\"mobile-stepper-wrapper\">\n      <div class=\"stepper\">\n        <div class=\"progress-step\">\n          <div class=\"background\"></div>\n          <mat-progress-spinner [strokeWidth]=\"8\" [diameter]=\"40\" [value]=\"progressValue\"></mat-progress-spinner>\n        </div>\n\n        <div class=\"step-info\">\n          <div class=\"current-step\">\n            <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n            <span>{{ itemSteps[selectedIndex].label }}</span>\n          </div>\n          <div class=\"next-step\">\n            <span *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ t('COMMON.NEXT') + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ t(translationContext + 'FINAL_STEP') }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [size]=\"'24'\" [name]=\"'Arrow_down'\"></ui-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"isOpen\">\n        <div class=\"step-list\">\n          <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n            <ui-step\n              [label]=\"step.label\"\n              [isVisited]=\"step.isVisited!\"\n              [icon]=\"step.iconName\"\n              [index]=\"i\"\n              [selected]=\"i === selectedIndex\"\n              [selectedIndex]=\"selectedIndex\"\n              [isLast]=\"isLast\"\n              [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n              [mobileMode]=\"true\"\n              [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n              [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n              (stepSelected)=\"onSelect($event, step)\"\n            ></ui-step>\n          </div>\n        </div>\n        <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-container>\n", styles: [".row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.mobile-stepper-wrapper{width:100%}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#ffffff;border-radius:8px}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .stepper .progress-step ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mobile-stepper-wrapper .stepper .progress-step .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#276678;stroke-linecap:round}.mobile-stepper-wrapper .stepper .progress-step .background{position:absolute;top:0;left:0;width:100%;height:100%;border:8px solid #E0E0E0;border-radius:50%}.mobile-stepper-wrapper .step-list{margin-top:4px;z-index:1;background:#ffffff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: StepComponent, selector: "ui-step", inputs: ["label", "isVisited", "submitted", "icon", "index", "selected", "isLast", "selectedIndex", "disabled", "prevStepIsVisited", "mobileMode", "finalIcon", "showIconWhenSelected"], outputs: ["stepSelected"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: StepLineWidthDirective, selector: "[stepLineWidth]", inputs: ["stepLineWidth"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepperComponent, selector: "ui-stepper", inputs: { steps: "steps", selectedIndex: "selectedIndex", lastStepFinalIcon: "lastStepFinalIcon" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"stepper-wrapper\" *ngIf=\"!(isMobile$ | async); else mobile\">\n    <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n      <div class=\"step\" #stepElement>\n        <ui-step\n          [label]=\"step.label\"\n          [isVisited]=\"step.isVisited!\"\n          [icon]=\"step.iconName\"\n          [index]=\"i\"\n          [selected]=\"i === selectedIndex\"\n          [selectedIndex]=\"selectedIndex\"\n          [isLast]=\"isLast\"\n          [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n          [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n          [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n          [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n          (stepSelected)=\"onSelect($event, step)\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineWidth]=\"stepElement\" class=\"line\"></div>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-template #mobile>\n    <div class=\"mobile-stepper-wrapper\">\n      <div class=\"stepper\">\n        <div class=\"progress-step\">\n          <div class=\"background\"></div>\n          <mat-progress-spinner [strokeWidth]=\"8\" [diameter]=\"40\" [value]=\"progressValue\"></mat-progress-spinner>\n        </div>\n\n        <div class=\"step-info\">\n          <div class=\"current-step\">\n            <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n            <span>{{ itemSteps[selectedIndex].label }}</span>\n          </div>\n          <div class=\"next-step\">\n            <span *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ t('COMMON.NEXT') + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ t(translationContext + 'FINAL_STEP') }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [size]=\"'24'\" [name]=\"'Arrow_down'\"></ui-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"isOpen\">\n        <div class=\"step-list\">\n          <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n            <ui-step\n              [label]=\"step.label\"\n              [isVisited]=\"step.isVisited!\"\n              [icon]=\"step.iconName\"\n              [index]=\"i\"\n              [selected]=\"i === selectedIndex\"\n              [selectedIndex]=\"selectedIndex\"\n              [isLast]=\"isLast\"\n              [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n              [mobileMode]=\"true\"\n              [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n              [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n              (stepSelected)=\"onSelect($event, step)\"\n            ></ui-step>\n          </div>\n        </div>\n        <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-container>\n", styles: [".row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.mobile-stepper-wrapper{width:100%}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#ffffff;border-radius:8px}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .stepper .progress-step ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mobile-stepper-wrapper .stepper .progress-step .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#276678;stroke-linecap:round}.mobile-stepper-wrapper .stepper .progress-step .background{position:absolute;top:0;left:0;width:100%;height:100%;border:8px solid #E0E0E0;border-radius:50%}.mobile-stepper-wrapper .step-list{margin-top:4px;z-index:1;background:#ffffff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: StepComponent, selector: "ui-step", inputs: ["label", "isVisited", "submitted", "icon", "index", "selected", "isLast", "selectedIndex", "disabled", "prevStepIsVisited", "mobileMode", "finalIcon", "showIconWhenSelected"], outputs: ["stepSelected"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$6.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: StepLineWidthDirective, selector: "[stepLineWidth]", inputs: ["stepLineWidth"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -4946,7 +4936,7 @@ class AutocompleteComponent {
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matFormFieldElement", first: true, predicate: ["matFormField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"autocomplete-wrapper\">\n    <mat-form-field\n      [appearance]=\"'outline'\"\n      #matFormField\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n      <div class=\"input-container\">\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(autocomplete, valueItem)\"\n          ></ui-tag>\n          <ng-container *ngIf=\"isOverLapping\">\n            <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n              {{ t(translationContext + 'SELECTED_AMOUNT', { numberSelected: (value | slice: overlapIndex).length }) }}\n            </div>\n            <ng-template #overlapTag>\n              <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n            </ng-template>\n          </ng-container>\n        </div>\n        <input\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          matInput\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n      </div>\n\n      <ui-icon\n        class=\"remove-selected\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear()\"\n        *ngIf=\"inputValue || value?.length\"\n        [size]=\"'24'\"\n        [name]=\"'Close'\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        (optionSelected)=\"onOptionSelected($event)\"\n        [hideSingleSelectionIndicator]=\"false\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"suggestionsList.length\">\n            <mat-option\n              [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n              *ngFor=\"let suggested of suggestionsList\"\n              [value]=\"suggested\"\n            >\n              <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n              <ui-icon [name]=\"'Check'\"></ui-icon>\n            </mat-option>\n          </mat-optgroup>\n\n          <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n            <mat-option\n              [ngClass]=\"{ 'selected-option': item | includes: value }\"\n              *ngFor=\"let item of value\"\n              [value]=\"item\"\n            >\n              <span>{{ item | transformItem: textField }}</span>\n              <ui-icon [name]=\"'Check'\"></ui-icon>\n            </mat-option>\n          </mat-optgroup>\n\n          <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n            <mat-option\n              [class]=\"'selected-option'\"\n              [value]=\"value\"\n            >\n              <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n              <ui-icon [name]=\"'Check'\"></ui-icon>\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n              <mat-option\n                [ngClass]=\"{ 'selected-option': item | includes: value }\"\n                *ngFor=\"let item of filteredSuggestionList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [name]=\"'Check'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n              <mat-option\n                [ngClass]=\"{ 'selected-option': item | includes: value }\"\n                *ngFor=\"let item of filteredItemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [name]=\"'Check'\"></ui-icon>\n              </mat-option>\n            </ng-container>\n\n            <ng-template #showItemListWithGroup>\n              <mat-optgroup [label]=\"t(translationContext + 'ALL_ITEMS') | uppercase\" *ngIf=\"filteredItemsList.length\">\n                <mat-option\n                  [ngClass]=\"{ 'selected-option': item | includes: value }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [name]=\"'Check'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-template>\n\n            <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n              <ng-container *ngIf=\"allowAdd; else notFound\">\n                <mat-option [value]=\"inputValue\">\n                  <span>{{ t('COMMON.ADD') }}</span>\n                  <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #notFound>\n                <mat-option [style.pointer-events]=\"'none'\">\n                  <span>{{ t(translationContext + 'NO_RESULTS_FOUND') }}</span>\n                </mat-option>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [".large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "matFormFieldElement", first: true, predicate: ["matFormField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"autocomplete-wrapper\">\n    <mat-form-field\n      [appearance]=\"'outline'\"\n      #matFormField\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n      <div class=\"input-container\">\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(autocomplete, valueItem)\"\n          ></ui-tag>\n          <ng-container *ngIf=\"isOverLapping\">\n            <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n              {{ t(translationContext + 'SELECTED_AMOUNT', { numberSelected: (value | slice: overlapIndex).length }) }}\n            </div>\n            <ng-template #overlapTag>\n              <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n            </ng-template>\n          </ng-container>\n        </div>\n        <input\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          matInput\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n      </div>\n\n      <ui-icon\n        class=\"remove-selected\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear()\"\n        *ngIf=\"inputValue || value?.length\"\n        [size]=\"'24'\"\n        [name]=\"'Close'\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        (optionSelected)=\"onOptionSelected($event)\"\n        [hideSingleSelectionIndicator]=\"false\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"suggestionsList.length\">\n            <mat-option\n              [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n              *ngFor=\"let suggested of suggestionsList\"\n              [value]=\"suggested\"\n            >\n              <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n              <ui-icon [name]=\"'Check'\"></ui-icon>\n            </mat-option>\n          </mat-optgroup>\n\n          <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n            <mat-option\n              [ngClass]=\"{ 'selected-option': item | includes: value }\"\n              *ngFor=\"let item of value\"\n              [value]=\"item\"\n            >\n              <span>{{ item | transformItem: textField }}</span>\n              <ui-icon [name]=\"'Check'\"></ui-icon>\n            </mat-option>\n          </mat-optgroup>\n\n          <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n            <mat-option\n              [class]=\"'selected-option'\"\n              [value]=\"value\"\n            >\n              <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n              <ui-icon [name]=\"'Check'\"></ui-icon>\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n              <mat-option\n                [ngClass]=\"{ 'selected-option': item | includes: value }\"\n                *ngFor=\"let item of filteredSuggestionList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [name]=\"'Check'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n              <mat-option\n                [ngClass]=\"{ 'selected-option': item | includes: value }\"\n                *ngFor=\"let item of filteredItemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [name]=\"'Check'\"></ui-icon>\n              </mat-option>\n            </ng-container>\n\n            <ng-template #showItemListWithGroup>\n              <mat-optgroup [label]=\"t(translationContext + 'ALL_ITEMS') | uppercase\" *ngIf=\"filteredItemsList.length\">\n                <mat-option\n                  [ngClass]=\"{ 'selected-option': item | includes: value }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [name]=\"'Check'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-template>\n\n            <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n              <ng-container *ngIf=\"allowAdd; else notFound\">\n                <mat-option [value]=\"inputValue\">\n                  <span>{{ t('COMMON.ADD') }}</span>\n                  <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #notFound>\n                <mat-option [style.pointer-events]=\"'none'\">\n                  <span>{{ t(translationContext + 'NO_RESULTS_FOUND') }}</span>\n                </mat-option>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [".large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$6.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -5110,18 +5100,18 @@ class BadgeComponent {
             BadgeColorEnum.GREY_MEDIUM,
             BadgeColorEnum.PETROL_90W,
             BadgeColorEnum.TEAL_60W,
-            BadgeColorEnum.GREY_MEDIUM,
+            BadgeColorEnum.PETROL_60W,
         ];
     }
     get iconColor() {
         return this.darkColors.includes(this.color) ? 'black' : 'white';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount" }, ngImport: i0, template: "<div [class]=\"'badge-container-' + variant\" [attr.color]=\"color\">\n  <ng-container [ngSwitch]=\"variant\">\n    <ui-icon *ngSwitchCase=\"badgeVariant.PRIMARY\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n    <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"color\"></div>\n    <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n  </ng-container>\n  <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [":host{display:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;font-size:12px;line-height:10px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;font-size:12px;line-height:10px}:host .badge-container-notification .number-notification{color:#fff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#E0E0E0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46A997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#B5DDD5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#E9F0F1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#A9C2C9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888888}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount" }, ngImport: i0, template: "<div [class]=\"'badge-container-' + variant\" [attr.color]=\"color\">\n  <ng-container [ngSwitch]=\"variant\">\n    <ui-icon *ngSwitchCase=\"badgeVariant.PRIMARY\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n    <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"color\"></div>\n    <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n  </ng-container>\n  <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [":host{display:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;font-size:12px;line-height:10px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;font-size:12px;line-height:10px}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#E0E0E0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46A997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#B5DDD5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#E9F0F1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#A9C2C9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888888}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge-container-' + variant\" [attr.color]=\"color\">\n  <ng-container [ngSwitch]=\"variant\">\n    <ui-icon *ngSwitchCase=\"badgeVariant.PRIMARY\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n    <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"color\"></div>\n    <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n  </ng-container>\n  <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [":host{display:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;font-size:12px;line-height:10px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;font-size:12px;line-height:10px}:host .badge-container-notification .number-notification{color:#fff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#E0E0E0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46A997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#B5DDD5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#E9F0F1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#A9C2C9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888888}\n"] }]
+            args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge-container-' + variant\" [attr.color]=\"color\">\n  <ng-container [ngSwitch]=\"variant\">\n    <ui-icon *ngSwitchCase=\"badgeVariant.PRIMARY\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n    <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"color\"></div>\n    <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n  </ng-container>\n  <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [":host{display:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;font-size:12px;line-height:10px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;font-size:12px;line-height:10px}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#E0E0E0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46A997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#B5DDD5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#E9F0F1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#A9C2C9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888888}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{