@testgorilla/tgo-ui 1.10.3 → 1.10.4

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -17,16 +17,13 @@ import * as i5$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
 import * as i2$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { __decorate } from 'tslib';
-import { UntilDestroy } from '@ngneat/until-destroy';
-import * as i1$2 from '@ngneat/transloco';
-import * as i1$3 from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import * as i2$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i1$4 from '@angular/material/progress-bar';
+import * as i1$3 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';
@@ -34,11 +31,11 @@ import * as i5$1 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$5 from '@angular/material/paginator';
+import * as i1$4 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$6 from '@angular/material/snack-bar';
+import * as i1$5 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import * as i4$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -1320,10 +1317,8 @@ var Language;
 })(Language || (Language = {}));
 //This function retrieves all languages from the enum. It is used to initialize transloco
 const getAvailableLangs = () => Object.values(Language);
-let LanguageService = class LanguageService {
-    static { this.defaultLanguage = Language.en; }
-    constructor(translocoService) {
-        this.translocoService = translocoService;
+class LanguageService {
+    constructor() {
         this.defaultLanguageList = [
             { code: Language.en, label: 'English' },
             { code: Language.es, label: 'Spanish' },
@@ -1339,40 +1334,16 @@ let LanguageService = class LanguageService {
             { code: Language['sv-se'], label: 'Swedish' },
         ];
     }
-    /**
-     *
-     * @description Initialize Language Service.
-     * @memberof LanguageService
-     */
-    init(language) {
-        // Set active language according to user settings. TODO: Replace with user value.
-        this.setActiveLanguage(language);
-        // React to language changes and load the language selected.
-        this.languageChangeSubscription = this.translocoService.langChanges$.subscribe(lang => {
-            this.translocoService.load(lang).subscribe();
-        });
-    }
-    /**
-     *
-     * @description Set a langauge as active language.
-     * @param {string} languageCode Language value code.
-     * @memberof 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$2.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.defaultLanguage = Language.en; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LanguageService, deps: [], 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([
-    UntilDestroy({ checkProperties: true })
-], LanguageService);
+}
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslocoService }]; } });
+        }] });
 
 var SNACKBAR$1 = {
 	DISMISS: "Dismiss"
@@ -1395,36 +1366,7 @@ var DATEPICKER = {
 	START_DATE: "Start date",
 	END_DATE: "End date"
 };
-var PLURALS = {
-	EMAILS: "{numEmails, select, 1 {email} other {emails}}",
-	USERS: "{numUsers, select, 1 {User} other {Users}}",
-	TESTS: "{numberTests, select, 1 {test} other {tests}}",
-	QUESTIONS: "{numberQuestions, select, 1 {question} other {questions}}",
-	ITEMS: "{numItems, select, 1 {item} other {items}}",
-	DATE_TIME: {
-		SECONDS: "{seconds, select, 1 {second} other {seconds}}",
-		MINUTES: "{minutes, select, 1 {minute} other {minutes}}",
-		HOURS: "{hours, select, 1 {hour} other {hours}}",
-		DAYS: "{days, select, 1 {day} other {days}}",
-		SHORT_SECONDS: "{seconds, select, 1 {sec} other {secs}}",
-		SHORT_MINUTES: "{minutes, select, 1 {min} other {mins}}"
-	},
-	CUSTOM_QUESTIONS: "{numberCustomQuestions, select, 1 {custom question} other {custom questions}}",
-	CANDIDATES: "{numberCandidates, select, 1 {candidate} other {candidates}}",
-	INVITATIONS: "{numberInvitations, select, 1 {invitation} other {invitations}}",
-	ASSESSMENTS: "{numberAssessments, select, 1 {assessment} other {assessments}}"
-};
 var COMMON = {
-	IS_ARE: "{count, select, 1 {is} other {are}}",
-	ORDERING: {
-		GENDER_NEUTRAL: "{index, select, 0 {the first} 1 {the second} 2 {the third} 3 {the fourth} 4 {the fifth} 5 {the sixth} 6 {the seventh} other {the}}",
-		MALE: "{index, select, 0 {the first} 1 {the second} 2 {the third} 3 {the fourth} 4 {the fifth} 5 {the sixth} 6 {the seventh} other {the}}",
-		FEMALE: "{index, select, 0 {the first} 1 {the second} 2 {the third} 3 {the fourth} 4 {the fifth} 5 {the sixth} 6 {the seventh} other {the}}",
-		DE_ACCUSATIVE_MALE: "{index, select, 0 {the first} 1 {the second} 2 {the third} 3 {the fourth} 4 {the fifth} 5 {the sixth} 6 {the seventh} other {the}}",
-		DE_DATIVE_MALE_AND_NEUTRAL: "{index, select, 0 {the first} 1 {the second} 2 {the third} 3 {the fourth} 4 {the fifth} 5 {the sixth} 6 {the seventh} other {the}}",
-		DE_GENTIVE_MALE_AND_NEUTRAL: "{index, select, 0 {the first} 1 {the second} 2 {the third} 3 {the fourth} 4 {the fifth} 5 {the sixth} 6 {the seventh} other {the}}",
-		ORDINAL: "{index, select, 0 {1st} 1 {2nd} 2 {3rd} 3 {4th} 4 {5th} other {nth}}"
-	},
 	APPLY: "Apply",
 	VALIDATE: "Validate",
 	YES: "Yes",
@@ -1440,7 +1382,6 @@ var COMMON = {
 	OK: "OK",
 	REMOVE: "Remove",
 	TEST: "test",
-	HAS_HAVE: "{count, select, 1 {has} other {have}}",
 	MAYBE: "Maybe",
 	BACK: "Back",
 	SAVE: "Save",
@@ -1461,31 +1402,6 @@ var COMMON = {
 	MIN: "Min",
 	CLEAR: "Clear"
 };
-var DATE_TIME = {
-	SECONDS: "{{seconds}} {{PLURALS.DATE_TIME.SECONDS}}",
-	SHORT_SECONDS: "{{seconds}} {{PLURALS.DATE_TIME.SHORT_SECONDS}}",
-	SHORT_MINUTES: "{{minutes}} {{PLURALS.DATE_TIME.SHORT_MINUTES}}",
-	HOURS: "{{hours}} {{PLURALS.DATE_TIME.HOURS}}",
-	DAYS: "{{days}} {{PLURALS.DATE_TIME.DAYS}}"
-};
-var CREATE_ACCOUNT = {
-	TITLE: "Create your Career Passport",
-	SUBTITLE: "Enter the email address to which you received an assessment invite.",
-	EMAIL_LABEL: "Email",
-	PASSWORD_LABEL: "Password",
-	TERMS_CONDITIONS: "I have read and accepted the ",
-	TERMS_CONDITIONS_LINK_LABEL: "candidate terms",
-	PRIVACY_POLICY_LINK_LABEL: "privacy policy",
-	TERMS_CONDITIONS_DELIMITER: "and",
-	BUTTON_LABEL: "Next",
-	HAVE_CAREER_PASSPORT: "Already have a Career Passport?",
-	LOGIN: "Log in here"
-};
-var CREATE_PASSWORD = {
-	TITLE: "Please create a new password",
-	PASSWORD_LABEL: "Set password",
-	BUTTON: "Set new password"
-};
 var DIALOG = {
 	CLOSE_LABEL: "Close dialog"
 };
@@ -1501,22 +1417,6 @@ var FILE_UPLOAD = {
 	SUPPORTED_FILE_TYPES: "Supported file types:",
 	CHANGE: "Change"
 };
-var FORGOT_PASSWORD = {
-	TITLE: "Reset your password",
-	EMAIL_LABEL: "Email",
-	BUTTON_LABEL: "Send reset link",
-	BACK_TO_LOGIN: "Back to log in"
-};
-var LOGIN = {
-	TITLE: "Log in to your Career Passport",
-	EMAIL_LABEL: "Email address",
-	PASSWORD_LABEL: "Password",
-	REMEMBER_ME: "Keep me logged in",
-	FORGOT_PASSWORD: "Forgot password?",
-	BUTTON_LABEL: "Log in",
-	NOT_HAVE_ACCOUNT: "Don't have an account?",
-	CREATE_ACCOUNT: "Create one here"
-};
 var NAVBAR = {
 	LOG_OUT: "Log out"
 };
@@ -1526,16 +1426,10 @@ var en = {
 	STEPPER: STEPPER,
 	SLIDER: SLIDER,
 	DATEPICKER: DATEPICKER,
-	PLURALS: PLURALS,
 	COMMON: COMMON,
-	DATE_TIME: DATE_TIME,
-	CREATE_ACCOUNT: CREATE_ACCOUNT,
-	CREATE_PASSWORD: CREATE_PASSWORD,
 	DIALOG: DIALOG,
 	FIELD: FIELD,
 	FILE_UPLOAD: FILE_UPLOAD,
-	FORGOT_PASSWORD: FORGOT_PASSWORD,
-	LOGIN: LOGIN,
 	NAVBAR: NAVBAR
 };
 
@@ -1572,7 +1466,7 @@ class UiTranslatePipe {
         if (translation && interpolationData) {
             return this.interpolate(translation, interpolationData);
         }
-        return translation;
+        return translation || translateKey;
     }
     /**
      * Used to find and replace interpolation in text
@@ -1641,6 +1535,13 @@ class DialogComponent {
          * @memberof DialogComponent
          */
         this.primaryButtonType = 'primary';
+        /**
+         * The language to be used
+         * @property language
+         * @type {Language}
+         * @memberof DialogComponent
+         */
+        this.language = LanguageService.defaultLanguage;
         /**
          * Color of the dialog.
          * Defaults to Test Gorilla primary color.
@@ -1653,18 +1554,8 @@ class DialogComponent {
         this.secondaryButtonClickEvent = new EventEmitter();
         this.primaryButtonClickEvent = new EventEmitter();
         this.disableButtons = false;
-        this.lang = LanguageService.defaultLanguage;
         this.translationContext = 'DIALOG.';
     }
-    /**
-     * The language to be used
-     * @property language
-     * @type {Language}
-     * @memberof DialogComponent
-     */
-    set language(value) {
-        this.lang = value;
-    }
     ngOnInit() {
         this.areButtonsDisabled();
     }
@@ -1699,13 +1590,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$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", language: "language", companyColor: "companyColor" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { properties: { "style.--color": "this.companyColor" } }, 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        variant=\"text\"\n        [justIcon]=\"true\"\n        [disabled]=\"disableButtons\"\n        class=\"close\"\n        iconName=\"Close\"\n        [label]=\"(translationContext + 'CLOSE_LABEL') | uiTranslate : lang\"\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      [companyColor]=\"companyColor\"\n      [variant]=\"secondaryButtonType\"\n      *ngIf=\"!!secondaryButtonLabel\"\n      [label]=\"secondaryButtonLabel\"\n      (click)=\"onSecondaryButtonClick($event)\"\n    ></ui-button>\n    <ui-button\n      [variant]=\"primaryButtonType\"\n      *ngIf=\"!!primaryButtonLabel\"\n      [disabled]=\"disableButtons\"\n      (click)=\"onPrimaryButtonClick($event)\"\n      [label]=\"primaryButtonLabel\"\n      [companyColor]=\"companyColor\"\n      (buttonClickEvent)=\"dismiss()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], 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$2.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", language: "language", companyColor: "companyColor" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { properties: { "style.--color": "this.companyColor" } }, 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        variant=\"text\"\n        [justIcon]=\"true\"\n        [disabled]=\"disableButtons\"\n        class=\"close\"\n        iconName=\"Close\"\n        [label]=\"(translationContext + 'CLOSE_LABEL') | uiTranslate : language\"\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      [companyColor]=\"companyColor\"\n      [variant]=\"secondaryButtonType\"\n      *ngIf=\"!!secondaryButtonLabel\"\n      [label]=\"secondaryButtonLabel\"\n      (click)=\"onSecondaryButtonClick($event)\"\n    ></ui-button>\n    <ui-button\n      [variant]=\"primaryButtonType\"\n      *ngIf=\"!!primaryButtonLabel\"\n      [disabled]=\"disableButtons\"\n      (click)=\"onPrimaryButtonClick($event)\"\n      [label]=\"primaryButtonLabel\"\n      [companyColor]=\"companyColor\"\n      (buttonClickEvent)=\"dismiss()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], 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        variant=\"text\"\n        [justIcon]=\"true\"\n        [disabled]=\"disableButtons\"\n        class=\"close\"\n        iconName=\"Close\"\n        [label]=\"(translationContext + 'CLOSE_LABEL') | uiTranslate : lang\"\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      [companyColor]=\"companyColor\"\n      [variant]=\"secondaryButtonType\"\n      *ngIf=\"!!secondaryButtonLabel\"\n      [label]=\"secondaryButtonLabel\"\n      (click)=\"onSecondaryButtonClick($event)\"\n    ></ui-button>\n    <ui-button\n      [variant]=\"primaryButtonType\"\n      *ngIf=\"!!primaryButtonLabel\"\n      [disabled]=\"disableButtons\"\n      (click)=\"onPrimaryButtonClick($event)\"\n      [label]=\"primaryButtonLabel\"\n      [companyColor]=\"companyColor\"\n      (buttonClickEvent)=\"dismiss()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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$3.MatDialogRef }]; }, propDecorators: { title: [{
+            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        variant=\"text\"\n        [justIcon]=\"true\"\n        [disabled]=\"disableButtons\"\n        class=\"close\"\n        iconName=\"Close\"\n        [label]=\"(translationContext + 'CLOSE_LABEL') | uiTranslate : language\"\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      [companyColor]=\"companyColor\"\n      [variant]=\"secondaryButtonType\"\n      *ngIf=\"!!secondaryButtonLabel\"\n      [label]=\"secondaryButtonLabel\"\n      (click)=\"onSecondaryButtonClick($event)\"\n    ></ui-button>\n    <ui-button\n      [variant]=\"primaryButtonType\"\n      *ngIf=\"!!primaryButtonLabel\"\n      [disabled]=\"disableButtons\"\n      (click)=\"onPrimaryButtonClick($event)\"\n      [label]=\"primaryButtonLabel\"\n      [companyColor]=\"companyColor\"\n      (buttonClickEvent)=\"dismiss()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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$2.MatDialogRef }]; }, propDecorators: { title: [{
                 type: Input
             }], showCloseButton: [{
                 type: Input
@@ -1744,12 +1635,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$3.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$2.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$3.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.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 }); }
@@ -1869,15 +1760,6 @@ class FieldComponent {
         this._errors = errors.filter(Boolean).map(error => this.domSanitizer.bypassSecurityTrustHtml(error));
         this.errorsLength = this.setErrorsLength();
     }
-    /**
-     * The language to be used
-     * @property language
-     * @type {Language}
-     * @memberof FieldComponent
-     */
-    set language(value) {
-        this.lang = value;
-    }
     constructor(matIconRegistry, domSanitizer) {
         this.matIconRegistry = matIconRegistry;
         this.domSanitizer = domSanitizer;
@@ -1938,7 +1820,13 @@ class FieldComponent {
          * @memberof FieldComponent
          */
         this.allowOnlyDigits = false;
-        this.lang = LanguageService.defaultLanguage;
+        /**
+         * The language to be used
+         * @property language
+         * @type {Language}
+         * @memberof FieldComponent
+         */
+        this.language = LanguageService.defaultLanguage;
         this.translationContext = 'FIELD.';
         /**
          * @ignore
@@ -2031,7 +1919,7 @@ class FieldComponent {
                 useExisting: forwardRef(() => FieldComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container>\n  <mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n    <mat-label *ngIf=\"label && type !== 'search'\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon *ngIf=\"type === 'search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n    <input\n      matInput\n      (blur)=\"onTouch()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id!\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [type]=\"currentType\"\n      [name]=\"fieldName!\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n    />\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR') | uiTranslate : lang\"\n          (buttonClickEvent)=\"clearValue()\"\n        ></ui-button>\n        <ui-button\n          *ngIf=\"type === 'password'\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"password\"\n          [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n          [label]=\"(translationContext + 'VIEW_PASSWORD') | uiTranslate : lang\"\n          (buttonClickEvent)=\"showPasswordClick()\"\n        ></ui-button>\n      </div>\n    </div>\n    <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors\">\n        <ui-icon name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </mat-hint>\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .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-field .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-field .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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .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-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.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: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<ng-container>\n  <mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n    <mat-label *ngIf=\"label && type !== 'search'\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon *ngIf=\"type === 'search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n    <input\n      matInput\n      (blur)=\"onTouch()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id!\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [type]=\"currentType\"\n      [name]=\"fieldName!\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n    />\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n          (buttonClickEvent)=\"clearValue()\"\n        ></ui-button>\n        <ui-button\n          *ngIf=\"type === 'password'\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"password\"\n          [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n          [label]=\"(translationContext + 'VIEW_PASSWORD') | uiTranslate : language\"\n          (buttonClickEvent)=\"showPasswordClick()\"\n        ></ui-button>\n      </div>\n    </div>\n    <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors\">\n        <ui-icon name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </mat-hint>\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .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-field .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-field .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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .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-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.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: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldComponent, decorators: [{
             type: Component,
@@ -2041,7 +1929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => FieldComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n    <mat-label *ngIf=\"label && type !== 'search'\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon *ngIf=\"type === 'search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n    <input\n      matInput\n      (blur)=\"onTouch()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id!\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [type]=\"currentType\"\n      [name]=\"fieldName!\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n    />\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR') | uiTranslate : lang\"\n          (buttonClickEvent)=\"clearValue()\"\n        ></ui-button>\n        <ui-button\n          *ngIf=\"type === 'password'\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"password\"\n          [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n          [label]=\"(translationContext + 'VIEW_PASSWORD') | uiTranslate : lang\"\n          (buttonClickEvent)=\"showPasswordClick()\"\n        ></ui-button>\n      </div>\n    </div>\n    <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors\">\n        <ui-icon name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </mat-hint>\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .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-field .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-field .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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .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-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n    <mat-label *ngIf=\"label && type !== 'search'\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n    <mat-icon *ngIf=\"type === 'search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n    <input\n      matInput\n      (blur)=\"onTouch()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id!\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [type]=\"currentType\"\n      [name]=\"fieldName!\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n    />\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n          (buttonClickEvent)=\"clearValue()\"\n        ></ui-button>\n        <ui-button\n          *ngIf=\"type === 'password'\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"password\"\n          [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n          [label]=\"(translationContext + 'VIEW_PASSWORD') | uiTranslate : language\"\n          (buttonClickEvent)=\"showPasswordClick()\"\n        ></ui-button>\n      </div>\n    </div>\n    <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors\">\n        <ui-icon name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </mat-hint>\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .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-field .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-field .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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .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-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .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-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { class: [{
                 type: HostBinding
             }], label: [{
@@ -2148,7 +2036,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: { companyColor: "companyColor", progress: "progress", mode: "mode", buffer: "buffer" }, host: { properties: { "style.--color": "this.companyColor" } }, 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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { companyColor: "companyColor", progress: "progress", mode: "mode", buffer: "buffer" }, host: { properties: { "style.--color": "this.companyColor" } }, 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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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$3.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,
@@ -2229,6 +2117,13 @@ class FileUploadComponent {
          * @memberof FileUploadComponent
          */
         this.file = null;
+        /**
+         * The language to be used
+         * @property language
+         * @type {Language}
+         * @memberof FileUploadComponent
+         */
+        this.language = LanguageService.defaultLanguage;
         /**
          * Color of the file upload.
          * Defaults to Test Gorilla primary color.
@@ -2238,7 +2133,6 @@ class FileUploadComponent {
          */
         this.companyColor = '#46A997';
         this.OnDrop = new EventEmitter();
-        this.lang = LanguageService.defaultLanguage;
         this.translationContext = 'FILE_UPLOAD.';
         /**
          * @ignore
@@ -2251,15 +2145,6 @@ class FileUploadComponent {
         this.progress = false;
         this.success = false;
     }
-    /**
-     * The language to be used
-     * @property language
-     * @type {Language}
-     * @memberof FileUploadComponent
-     */
-    set language(value) {
-        this.lang = value;
-    }
     ngOnInit() {
         this.browse = true;
     }
@@ -2330,7 +2215,7 @@ class FileUploadComponent {
                 useExisting: forwardRef(() => FileUploadComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"upload-file-container\"\n    uiDragDrop\n    [ngClass]=\"{ 'upload-errors': !!errors }\"\n    (fileDropped)=\"onFileDropped($event)\"\n  >\n    <div *ngIf=\"browse && !(!!success && !!file && !!progress)\" [@inOutAnimation] class=\"upload-files\">\n      <div class=\"upload-browse\">\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n        <div class=\"errors\" *ngIf=\"!!errors\">\n          <span *ngFor=\"let error of errors\"> <ui-icon name=\"Error\"></ui-icon> {{ error }} </span>\n        </div>\n        <input\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          [accept]=\"supportedFileTypes\"\n          id=\"fileDrop\"\n          (change)=\"onChangeUpload($event)\"\n        />\n        <p>{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : lang }}<label for=\"fileDrop\" class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : lang   | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : lang | lowercase }}</p>\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{(translationContext + 'MAX_SIZE') | uiTranslate : lang }}</span>\n      </div>\n    </div>\n    <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <input\n        class=\"form-control\"\n        #fileDrop\n        type=\"file\"\n        id=\"fileDrop\"\n        [accept]=\"supportedFileTypes\"\n        (change)=\"onChangeUpload($event)\"\n        [disabled]=\"disabled\"\n      />\n      <p>{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : lang }}<label for=\"fileDrop\" class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : lang | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : lang }}</p>\n      <span class=\"upload-text\"\n      ><strong>{{ file.name }}</strong></span\n      >\n    </div>\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n      <p>{{ file.name }}</p>\n      <ui-progress-bar [progress]=\"uploadProgress\" [companyColor]=\"companyColor\"></ui-progress-bar>\n      <p class=\"upload-text\">\n        {{ (translationContext + 'UPLOADING') | uiTranslate : lang }} <span>{{ uploadProgress }}</span\n      >%\n      </p>\n    </div>\n  </div>\n  <div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n    <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : lang }}</span>{{ supportedFileTypes }}\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\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: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
+        ], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"upload-file-container\"\n    uiDragDrop\n    [ngClass]=\"{ 'upload-errors': !!errors }\"\n    (fileDropped)=\"onFileDropped($event)\"\n  >\n    <div *ngIf=\"browse && !(!!success && !!file && !!progress)\" [@inOutAnimation] class=\"upload-files\">\n      <div class=\"upload-browse\">\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n        <div class=\"errors\" *ngIf=\"!!errors\">\n          <span *ngFor=\"let error of errors\"> <ui-icon name=\"Error\"></ui-icon> {{ error }} </span>\n        </div>\n        <input\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          [accept]=\"supportedFileTypes\"\n          id=\"fileDrop\"\n          (change)=\"onChangeUpload($event)\"\n        />\n        <p>{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}<label for=\"fileDrop\" class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language   | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language | lowercase }}</p>\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{(translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n      </div>\n    </div>\n    <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <input\n        class=\"form-control\"\n        #fileDrop\n        type=\"file\"\n        id=\"fileDrop\"\n        [accept]=\"supportedFileTypes\"\n        (change)=\"onChangeUpload($event)\"\n        [disabled]=\"disabled\"\n      />\n      <p>{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}<label for=\"fileDrop\" class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}</p>\n      <span class=\"upload-text\"\n      ><strong>{{ file.name }}</strong></span\n      >\n    </div>\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n      <p>{{ file.name }}</p>\n      <ui-progress-bar [progress]=\"uploadProgress\" [companyColor]=\"companyColor\"></ui-progress-bar>\n      <p class=\"upload-text\">\n        {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n      >%\n      </p>\n    </div>\n  </div>\n  <div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n    <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\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: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
             trigger('inOutAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0 }),
@@ -2402,7 +2287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
                             ]),
                         ]),
-                    ], template: "<ng-container>\n  <div\n    class=\"upload-file-container\"\n    uiDragDrop\n    [ngClass]=\"{ 'upload-errors': !!errors }\"\n    (fileDropped)=\"onFileDropped($event)\"\n  >\n    <div *ngIf=\"browse && !(!!success && !!file && !!progress)\" [@inOutAnimation] class=\"upload-files\">\n      <div class=\"upload-browse\">\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n        <div class=\"errors\" *ngIf=\"!!errors\">\n          <span *ngFor=\"let error of errors\"> <ui-icon name=\"Error\"></ui-icon> {{ error }} </span>\n        </div>\n        <input\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          [accept]=\"supportedFileTypes\"\n          id=\"fileDrop\"\n          (change)=\"onChangeUpload($event)\"\n        />\n        <p>{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : lang }}<label for=\"fileDrop\" class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : lang   | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : lang | lowercase }}</p>\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{(translationContext + 'MAX_SIZE') | uiTranslate : lang }}</span>\n      </div>\n    </div>\n    <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <input\n        class=\"form-control\"\n        #fileDrop\n        type=\"file\"\n        id=\"fileDrop\"\n        [accept]=\"supportedFileTypes\"\n        (change)=\"onChangeUpload($event)\"\n        [disabled]=\"disabled\"\n      />\n      <p>{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : lang }}<label for=\"fileDrop\" class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : lang | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : lang }}</p>\n      <span class=\"upload-text\"\n      ><strong>{{ file.name }}</strong></span\n      >\n    </div>\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n      <p>{{ file.name }}</p>\n      <ui-progress-bar [progress]=\"uploadProgress\" [companyColor]=\"companyColor\"></ui-progress-bar>\n      <p class=\"upload-text\">\n        {{ (translationContext + 'UPLOADING') | uiTranslate : lang }} <span>{{ uploadProgress }}</span\n      >%\n      </p>\n    </div>\n  </div>\n  <div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n    <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : lang }}</span>{{ supportedFileTypes }}\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"] }]
+                    ], template: "<ng-container>\n  <div\n    class=\"upload-file-container\"\n    uiDragDrop\n    [ngClass]=\"{ 'upload-errors': !!errors }\"\n    (fileDropped)=\"onFileDropped($event)\"\n  >\n    <div *ngIf=\"browse && !(!!success && !!file && !!progress)\" [@inOutAnimation] class=\"upload-files\">\n      <div class=\"upload-browse\">\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n        <div class=\"errors\" *ngIf=\"!!errors\">\n          <span *ngFor=\"let error of errors\"> <ui-icon name=\"Error\"></ui-icon> {{ error }} </span>\n        </div>\n        <input\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          [accept]=\"supportedFileTypes\"\n          id=\"fileDrop\"\n          (change)=\"onChangeUpload($event)\"\n        />\n        <p>{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}<label for=\"fileDrop\" class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language   | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language | lowercase }}</p>\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{(translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n      </div>\n    </div>\n    <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <input\n        class=\"form-control\"\n        #fileDrop\n        type=\"file\"\n        id=\"fileDrop\"\n        [accept]=\"supportedFileTypes\"\n        (change)=\"onChangeUpload($event)\"\n        [disabled]=\"disabled\"\n      />\n      <p>{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}<label for=\"fileDrop\" class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}</p>\n      <span class=\"upload-text\"\n      ><strong>{{ file.name }}</strong></span\n      >\n    </div>\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n      <p>{{ file.name }}</p>\n      <ui-progress-bar [progress]=\"uploadProgress\" [companyColor]=\"companyColor\"></ui-progress-bar>\n      <p class=\"upload-text\">\n        {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n      >%\n      </p>\n    </div>\n  </div>\n  <div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n    <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding
             }], maxFileSizeMB: [{
@@ -2633,6 +2518,13 @@ class NavbarComponent {
          * @memberof NavbarComponent
          */
         this.menuItems = [];
+        /**
+         * The language to be used
+         * @property language
+         * @type {Language}
+         * @memberof NavbarComponent
+         */
+        this.language = LanguageService.defaultLanguage;
         /**
          * @ignore
          */
@@ -2645,18 +2537,8 @@ class NavbarComponent {
          * @ignore
          */
         this.logoutEvent = new EventEmitter();
-        this.lang = LanguageService.defaultLanguage;
         this.translationContext = 'NAVBAR.';
     }
-    /**
-     * The language to be used
-     * @property language
-     * @type {Language}
-     * @memberof NavbarComponent
-     */
-    set language(value) {
-        this.lang = value;
-    }
     navigate(routeId) {
         this.navigateEvent.emit(`/${routeId}`);
     }
@@ -2667,11 +2549,11 @@ class NavbarComponent {
         this.menuItemClicked.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", menuItems: "menuItems", language: "language" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<ng-container>\n  <mat-toolbar>\n    <div class=\"custom-toolbar row\">\n      <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n          {{ userName }}\n          <mat-icon iconPositionEnd>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : lang }}\n    </button>\n  </mat-menu>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#ffffff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\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: "component", type: i2$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", menuItems: "menuItems", language: "language" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<ng-container>\n  <mat-toolbar>\n    <div class=\"custom-toolbar row\">\n      <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n          {{ userName }}\n          <mat-icon iconPositionEnd>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </mat-menu>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#ffffff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\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: "component", type: i2$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <mat-toolbar>\n    <div class=\"custom-toolbar row\">\n      <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n          {{ userName }}\n          <mat-icon iconPositionEnd>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : lang }}\n    </button>\n  </mat-menu>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#ffffff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <mat-toolbar>\n    <div class=\"custom-toolbar row\">\n      <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n          {{ userName }}\n          <mat-icon iconPositionEnd>expand_more</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </mat-menu>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#ffffff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
         }], propDecorators: { routes: [{
                 type: Input
             }], activedRoute: [{
@@ -2818,7 +2700,7 @@ class DeprecatedPaginatorComponent {
         this.paginatorChangedEvent.emit(paginator);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DeprecatedPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DeprecatedPaginatorComponent, 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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DeprecatedPaginatorComponent, 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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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$4.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: DeprecatedPaginatorComponent, decorators: [{
             type: Component,
@@ -3084,7 +2966,7 @@ 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$6.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    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$5.MatSnackBarRef }], 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>\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      variant=\"text\"\n      [label]=\"(translationContext + 'DISMISS') | uiTranslate : language\"\n      (buttonClickEvent)=\"dismissClick()\"\n    ></ui-button>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}: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}::ng-deep .mdc-snackbar__surface{height:0}\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", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
             trigger('openClose', [
                 transition(':enter', [
@@ -3115,7 +2997,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$6.MatSnackBarRef }]; }, propDecorators: { snackbarType: [{
+                }] }, { type: i1$5.MatSnackBarRef }]; }, propDecorators: { snackbarType: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -3149,12 +3031,12 @@ class SnackbarService {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarService, deps: [{ token: i1$6.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$5.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$6.MatSnackBar }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.MatSnackBar }]; } });
 
 class SnackbarComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3883,13 +3765,13 @@ class ConfirmDialogComponent {
         this.title = data.title;
         this.lang = data.language ?? LanguageService.defaultLanguage;
     }
-    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.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: "<ng-container>\n  <ui-dialog\n    [title]=\"title ?? ('COMMON.CONFIRM') | uiTranslate : lang\"\n    [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES') | uiTranslate : lang\"\n    [secondaryButtonLabel]=\"cancelButtonText ?? ('COMMON.CANCEL') | uiTranslate : lang\"\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\n</ng-container>\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", "language", "companyColor"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-confirm-dialog', template: "<ng-container>\n  <ui-dialog\n    [title]=\"title ?? ('COMMON.CONFIRM') | uiTranslate : lang\"\n    [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES') | uiTranslate : lang\"\n    [secondaryButtonLabel]=\"cancelButtonText ?? ('COMMON.CANCEL') | uiTranslate : lang\"\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\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -4577,15 +4459,6 @@ class StepperComponent {
         first.isVisited = true;
         this.itemSteps = [first, ...other];
     }
-    /**
-     * The language to be used
-     *
-     * @type {Language}
-     * @memberof StepperComponent
-     */
-    set language(value) {
-        this.lang = value;
-    }
     get isOpen() {
         return this.isOpened;
     }
@@ -4608,8 +4481,14 @@ class StepperComponent {
          * @memberof StepperComponent
          */
         this.lastStepFinalIcon = false;
+        /**
+         * The language to be used
+         *
+         * @type {Language}
+         * @memberof StepperComponent
+         */
+        this.language = LanguageService.defaultLanguage;
         this.selectionChange = new EventEmitter();
-        this.lang = LanguageService.defaultLanguage;
         this.isOpened = false;
         this.itemSteps = [];
         this.progressValue = 0;
@@ -4630,11 +4509,11 @@ class StepperComponent {
         this.isOpen = false;
     }
     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", language: "language" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-container>\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          <ui-radial-progress [value]=\"selectedIndex + 1\" [total]=\"itemSteps.length\"></ui-radial-progress>\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\">{{ (('COMMON.NEXT') | uiTranslate : lang) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : lang }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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 .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: RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total"] }, { kind: "directive", type: StepLineWidthDirective, selector: "[stepLineWidth]", inputs: ["stepLineWidth"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], 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", language: "language" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-container>\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          <ui-radial-progress [value]=\"selectedIndex + 1\" [total]=\"itemSteps.length\"></ui-radial-progress>\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\">{{ (('COMMON.NEXT') | uiTranslate : language) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : language }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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 .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: RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total"] }, { kind: "directive", type: StepLineWidthDirective, selector: "[stepLineWidth]", inputs: ["stepLineWidth"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\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          <ui-radial-progress [value]=\"selectedIndex + 1\" [total]=\"itemSteps.length\"></ui-radial-progress>\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\">{{ (('COMMON.NEXT') | uiTranslate : lang) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : lang }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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 .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"] }]
+            args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\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          <ui-radial-progress [value]=\"selectedIndex + 1\" [total]=\"itemSteps.length\"></ui-radial-progress>\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\">{{ (('COMMON.NEXT') | uiTranslate : language) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : language }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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 .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"] }]
         }], ctorParameters: function () { return [{ type: i7.Observable, decorators: [{
                     type: Inject,
                     args: [IS_MOBILE_TOKEN]
@@ -4870,15 +4749,6 @@ class AutocompleteComponent {
     set itemValue(v) {
         this.value = AutocompleteUtils.isArray(v) ? v : [v];
     }
-    /**
-     * The language to be used
-     * @property language
-     * @type {Language}
-     * @memberof AutocompleteComponent
-     */
-    set language(value) {
-        this.lang = value;
-    }
     constructor(cdr) {
         this.cdr = cdr;
         /**
@@ -4941,9 +4811,15 @@ class AutocompleteComponent {
          * @memberof AutocompleteComponent
          */
         this.variant = DropdownVariation.AUTOCOMPLETE;
+        /**
+         * The language to be used
+         * @property language
+         * @type {Language}
+         * @memberof AutocompleteComponent
+         */
+        this.language = LanguageService.defaultLanguage;
         this.selectionChange = new EventEmitter();
         this.searchTextChange = new EventEmitter();
-        this.lang = LanguageService.defaultLanguage;
         this.inputValue = '';
         this.isInputFocus = false;
         this.autocompleteType = Autocomplete;
@@ -5132,7 +5008,7 @@ class AutocompleteComponent {
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\">\n    <mat-form-field\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n      <div #formField 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(valueItem)\"\n          ></ui-tag>\n          <ng-container *ngIf=\"isOverLapping\">\n            <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n              {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : lang : { 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          #trigger=\"matAutocompleteTrigger\"\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      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        (optionSelected)=\"onOptionSelected($event)\"\n        [hideSingleSelectionIndicator]=\"false\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : lang | 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]=\"(translationContext + 'SELECTED') | uiTranslate : lang | 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]=\"(translationContext + 'SELECTED') | uiTranslate : lang | 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-template #dropdownList>\n            <mat-option\n              [ngClass]=\"{ 'selected-option': item | includes: value }\"\n              *ngFor=\"let item of itemsList\"\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-template>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : lang | 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]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : lang | 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 && !isDropdown; else notFound\">\n                <mat-option [value]=\"inputValue\">\n                  <span>{{ ('COMMON.ADD') | uiTranslate : lang }}</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>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : lang }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::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 .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 .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: i5.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: i5$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: i5$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$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: 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: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\">\n    <mat-form-field\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n      <div #formField 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(valueItem)\"\n          ></ui-tag>\n          <ng-container *ngIf=\"isOverLapping\">\n            <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n              {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { 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          #trigger=\"matAutocompleteTrigger\"\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      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        (optionSelected)=\"onOptionSelected($event)\"\n        [hideSingleSelectionIndicator]=\"false\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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]=\"(translationContext + 'SELECTED') | uiTranslate : language | 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]=\"(translationContext + 'SELECTED') | uiTranslate : language | 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-template #dropdownList>\n            <mat-option\n              [ngClass]=\"{ 'selected-option': item | includes: value }\"\n              *ngFor=\"let item of itemsList\"\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-template>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | 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 && !isDropdown; else notFound\">\n                <mat-option [value]=\"inputValue\">\n                  <span>{{ ('COMMON.ADD') | uiTranslate : language }}</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>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::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 .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 .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: i5.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: i5$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: i5$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$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: 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: UiTranslatePipe, name: "uiTranslate" }, { 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,
@@ -5142,7 +5018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\">\n    <mat-form-field\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n      <div #formField 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(valueItem)\"\n          ></ui-tag>\n          <ng-container *ngIf=\"isOverLapping\">\n            <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n              {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : lang : { 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          #trigger=\"matAutocompleteTrigger\"\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      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        (optionSelected)=\"onOptionSelected($event)\"\n        [hideSingleSelectionIndicator]=\"false\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : lang | 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]=\"(translationContext + 'SELECTED') | uiTranslate : lang | 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]=\"(translationContext + 'SELECTED') | uiTranslate : lang | 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-template #dropdownList>\n            <mat-option\n              [ngClass]=\"{ 'selected-option': item | includes: value }\"\n              *ngFor=\"let item of itemsList\"\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-template>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : lang | 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]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : lang | 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 && !isDropdown; else notFound\">\n                <mat-option [value]=\"inputValue\">\n                  <span>{{ ('COMMON.ADD') | uiTranslate : lang }}</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>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : lang }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::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 .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 .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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\">\n    <mat-form-field\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n      <div #formField 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(valueItem)\"\n          ></ui-tag>\n          <ng-container *ngIf=\"isOverLapping\">\n            <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n              {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { 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          #trigger=\"matAutocompleteTrigger\"\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      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        (optionSelected)=\"onOptionSelected($event)\"\n        [hideSingleSelectionIndicator]=\"false\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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]=\"(translationContext + 'SELECTED') | uiTranslate : language | 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]=\"(translationContext + 'SELECTED') | uiTranslate : language | 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-template #dropdownList>\n            <mat-option\n              [ngClass]=\"{ 'selected-option': item | includes: value }\"\n              *ngFor=\"let item of itemsList\"\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-template>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | 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 && !isDropdown; else notFound\">\n                <mat-option [value]=\"inputValue\">\n                  <span>{{ ('COMMON.ADD') | uiTranslate : language }}</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>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</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: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::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 .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 .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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { itemsList: [{
                 type: Input
             }], suggestionsList: [{
@@ -5267,6 +5143,12 @@ class EmptyStateComponent {
          * @memberof EmptyStateComponent
          */
         this.tertiaryButtonText = '';
+        /**
+         * The language to be used
+         * @type {Language}
+         * @memberof EmptyStateComponent
+         */
+        this.language = LanguageService.defaultLanguage;
         /**
          * Event triggered when the primary button is clicked.
          * @type {Event}
@@ -5288,15 +5170,6 @@ class EmptyStateComponent {
          * @memberof TagComponent
          */
         this.tertiaryButtonClick = new EventEmitter();
-        this.lang = LanguageService.defaultLanguage;
-    }
-    /**
-     * The language to be used
-     * @type {Language}
-     * @memberof EmptyStateComponent
-     */
-    set language(value) {
-        this.lang = value;
     }
     onPrimaryButtonClick(event) {
         this.primaryButtonClick.emit(event);
@@ -5308,11 +5181,11 @@ class EmptyStateComponent {
         this.tertiaryButtonClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EmptyStateComponent, selector: "ui-empty-state", inputs: { showDefaultImg: "showDefaultImg", icon: "icon", title: "title", bodyText: "bodyText", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", tertiaryButtonText: "tertiaryButtonText", language: "language" }, outputs: { primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick", tertiaryButtonClick: "tertiaryButtonClick" }, ngImport: i0, template: "<ng-container>\n  <div class=\"empty-state-container\">\n\n    <div class=\"illustration\" *ngIf=\"showDefaultImg\">\n      <img [attr.src]=\"'/assets/images/illustration.png'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n    </div>\n\n    <div class=\"icon\" *ngIf=\"icon\">\n      <ui-icon [name]=\"icon\" size=\"40\"></ui-icon>\n    </div>\n\n    <div class=\"text-content\">\n      <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate : lang }}</div>\n      <div class=\"body-text\" *ngIf=\"bodyText\">{{ bodyText }}</div>\n    </div>\n\n    <div class=\"actions\">\n      <ui-button class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"'primary'\" [label]=\"primaryButtonText\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"'secondary'\" [label]=\"secondaryButtonText\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"'tertiary'\" [label]=\"tertiaryButtonText\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n    </div>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:16px;line-height:24px;margin-bottom:8px}.empty-state-container .text-content .body-text{font-size:14px;line-height:20px}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ 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: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EmptyStateComponent, selector: "ui-empty-state", inputs: { showDefaultImg: "showDefaultImg", icon: "icon", title: "title", bodyText: "bodyText", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", tertiaryButtonText: "tertiaryButtonText", language: "language" }, outputs: { primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick", tertiaryButtonClick: "tertiaryButtonClick" }, ngImport: i0, template: "<ng-container>\n  <div class=\"empty-state-container\">\n\n    <div class=\"illustration\" *ngIf=\"showDefaultImg\">\n      <img [attr.src]=\"'/assets/images/illustration.png'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n    </div>\n\n    <div class=\"icon\" *ngIf=\"icon\">\n      <ui-icon [name]=\"icon\" size=\"40\"></ui-icon>\n    </div>\n\n    <div class=\"text-content\">\n      <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate : language }}</div>\n      <div class=\"body-text\" *ngIf=\"bodyText\">{{ bodyText }}</div>\n    </div>\n\n    <div class=\"actions\">\n      <ui-button class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"'primary'\" [label]=\"primaryButtonText\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"'secondary'\" [label]=\"secondaryButtonText\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"'tertiary'\" [label]=\"tertiaryButtonText\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n    </div>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:16px;line-height:24px;margin-bottom:8px}.empty-state-container .text-content .body-text{font-size:14px;line-height:20px}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ 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: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-empty-state', template: "<ng-container>\n  <div class=\"empty-state-container\">\n\n    <div class=\"illustration\" *ngIf=\"showDefaultImg\">\n      <img [attr.src]=\"'/assets/images/illustration.png'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n    </div>\n\n    <div class=\"icon\" *ngIf=\"icon\">\n      <ui-icon [name]=\"icon\" size=\"40\"></ui-icon>\n    </div>\n\n    <div class=\"text-content\">\n      <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate : lang }}</div>\n      <div class=\"body-text\" *ngIf=\"bodyText\">{{ bodyText }}</div>\n    </div>\n\n    <div class=\"actions\">\n      <ui-button class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"'primary'\" [label]=\"primaryButtonText\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"'secondary'\" [label]=\"secondaryButtonText\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"'tertiary'\" [label]=\"tertiaryButtonText\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n    </div>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:16px;line-height:24px;margin-bottom:8px}.empty-state-container .text-content .body-text{font-size:14px;line-height:20px}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'ui-empty-state', template: "<ng-container>\n  <div class=\"empty-state-container\">\n\n    <div class=\"illustration\" *ngIf=\"showDefaultImg\">\n      <img [attr.src]=\"'/assets/images/illustration.png'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n    </div>\n\n    <div class=\"icon\" *ngIf=\"icon\">\n      <ui-icon [name]=\"icon\" size=\"40\"></ui-icon>\n    </div>\n\n    <div class=\"text-content\">\n      <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate : language }}</div>\n      <div class=\"body-text\" *ngIf=\"bodyText\">{{ bodyText }}</div>\n    </div>\n\n    <div class=\"actions\">\n      <ui-button class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"'primary'\" [label]=\"primaryButtonText\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"'secondary'\" [label]=\"secondaryButtonText\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n      <ui-button class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"'tertiary'\" [label]=\"tertiaryButtonText\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n    </div>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:16px;line-height:24px;margin-bottom:8px}.empty-state-container .text-content .body-text{font-size:14px;line-height:20px}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { showDefaultImg: [{
                 type: Input
             }], icon: [{
@@ -5432,7 +5305,7 @@ class PaginatorComponent {
         this.paginatorChange.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: { pageSizeOptions: "pageSizeOptions", length: "length", pageSize: "pageSize", disabled: "disabled" }, outputs: { paginatorChange: "paginatorChange" }, ngImport: i0, template: "<mat-paginator\n  [disabled]=\"disabled\"\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button[disabled=true] svg{fill:#ededed!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important;fill:#888!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginatorComponent, selector: "ui-paginator", inputs: { pageSizeOptions: "pageSizeOptions", length: "length", pageSize: "pageSize", disabled: "disabled" }, outputs: { paginatorChange: "paginatorChange" }, ngImport: i0, template: "<mat-paginator\n  [disabled]=\"disabled\"\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button[disabled=true] svg{fill:#ededed!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important;fill:#888!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .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$4.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -5769,23 +5642,20 @@ class SliderComponent {
          * @default 1
          */
         this.step = 1;
+        /**
+         * The language to be used
+         *
+         * @property language
+         * @type {Language}
+         */
+        this.language = LanguageService.defaultLanguage;
         this.sliderValueChange = new EventEmitter();
         this.value = { start: 0, end: 100 };
-        this.lang = LanguageService.defaultLanguage;
         this.translationContext = 'SLIDER.';
         this.touchedControlName = '';
         this.onChange = (_) => { };
         this.onTouch = () => { };
     }
-    /**
-     * The language to be used
-     *
-     * @property language
-     * @type {Language}
-     */
-    set language(value) {
-        this.lang = value;
-    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -5833,7 +5703,7 @@ class SliderComponent {
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : lang }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : lang }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : lang : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : lang : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : lang }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : lang }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}\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: i2$7.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: i5$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: i5$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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: 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}\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: i2$7.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: i5$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: i5$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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: 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -5843,7 +5713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : lang }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : lang }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : lang : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : lang : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : lang }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : lang }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}\n"] }]
         }], propDecorators: { max: [{
                 type: Input
             }], min: [{