@testgorilla/tgo-ui 2.26.15 → 2.26.17

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -11,7 +11,7 @@ import * as i4 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i4$5 from 'rxjs';
+import * as i8$3 from 'rxjs';
 import { BehaviorSubject, map, Subject, combineLatest, startWith, debounceTime, ReplaySubject, switchMap, tap, Subscription, fromEvent, take, filter, first, delay } from 'rxjs';
 import { HttpClientModule } from '@angular/common/http';
 import * as i2$2 from '@angular/material/button';
@@ -1413,6 +1413,9 @@ var FIELD$b = {
 	HIDE_PASSWORD: "Hide password",
 	ALL_PASSWORD_REQ_PASSED: "All password requirements are met."
 };
+var TABS = {
+	SELECTED: "selected"
+};
 var FILE_UPLOAD$b = {
 	DRAG_AND_DROP: "Drag and drop file here or click to upload",
 	DRAG_AND_DROP_OR: "Drag and drop or",
@@ -2133,6 +2136,7 @@ var en = {
 	COMMON: COMMON$b,
 	DIALOG: DIALOG$b,
 	FIELD: FIELD$b,
+	TABS: TABS,
 	FILE_UPLOAD: FILE_UPLOAD$b,
 	NAVBAR: NAVBAR$b,
 	PASSWORD: PASSWORD$b,
@@ -5991,11 +5995,11 @@ class CardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, selector: "ui-card", inputs: { size: "size", variant: "variant", applicationTheme: "applicationTheme", errors: "errors", selected: "selected" }, outputs: { cardSelected: "cardSelected" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"card-container\"\n  (keydown.enter)=\"selectCard()\"\n  (keydown.space)=\"selectCard()\"\n  (click)=\"selectCard()\"\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n  [attr.theme]=\"applicationTheme\"\n  tabindex=\"0\"\n>\n  <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n  <div class=\"error\" *ngFor=\"let error of safeErrors\">\n    <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span [innerHTML]=\"error\"></span>\n  </div>\n</div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.card-container{border:2px solid #E0E0E0;background:#fff;position:relative;transition:border .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:2px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424}.card-container[theme=dark].state:focus:not(:focus-visible),.card-container[theme=light].state:focus:not(:focus-visible){border-color:#242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:none}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline-offset:4px;outline:2px solid #242424;box-shadow:unset;animation:focus-ring-animation-main .4s forwards;border:2px solid #E0E0E0}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline-offset:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\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", "filled", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, selector: "ui-card", inputs: { size: "size", variant: "variant", applicationTheme: "applicationTheme", errors: "errors", selected: "selected" }, outputs: { cardSelected: "cardSelected" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"card-container\"\n  (keydown.enter)=\"selectCard()\"\n  (keydown.space)=\"selectCard()\"\n  (click)=\"selectCard()\"\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n  [attr.theme]=\"applicationTheme\"\n  tabindex=\"0\"\n>\n  <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n  <div class=\"error\" *ngFor=\"let error of safeErrors\">\n    <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span [innerHTML]=\"error\"></span>\n  </div>\n</div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.card-container{border:1px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state:focus:not(:focus-visible),.card-container[theme=light].state:focus:not(:focus-visible){border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\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", "filled", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"card-container\"\n  (keydown.enter)=\"selectCard()\"\n  (keydown.space)=\"selectCard()\"\n  (click)=\"selectCard()\"\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n  [attr.theme]=\"applicationTheme\"\n  tabindex=\"0\"\n>\n  <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n  <div class=\"error\" *ngFor=\"let error of safeErrors\">\n    <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span [innerHTML]=\"error\"></span>\n  </div>\n</div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.card-container{border:2px solid #E0E0E0;background:#fff;position:relative;transition:border .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:2px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424}.card-container[theme=dark].state:focus:not(:focus-visible),.card-container[theme=light].state:focus:not(:focus-visible){border-color:#242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:none}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline-offset:4px;outline:2px solid #242424;box-shadow:unset;animation:focus-ring-animation-main .4s forwards;border:2px solid #E0E0E0}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline-offset:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"] }]
+            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"card-container\"\n  (keydown.enter)=\"selectCard()\"\n  (keydown.space)=\"selectCard()\"\n  (click)=\"selectCard()\"\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n  [attr.theme]=\"applicationTheme\"\n  tabindex=\"0\"\n>\n  <ng-content></ng-content>\n</div>\n<div class=\"errors\" *ngIf=\"safeErrors?.length\">\n  <div class=\"error\" *ngFor=\"let error of safeErrors\">\n    <ui-icon [size]=\"'24'\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span [innerHTML]=\"error\"></span>\n  </div>\n</div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.card-container{border:1px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border-color:transparent}.card-container[theme=dark].ai:before,.card-container[theme=light].ai:before{z-index:-1;content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);top:-4px;left:-4px;position:absolute;background:#0165fc;background:linear-gradient(129deg,#0165fc 12%,#d410aa 88%);border-radius:11px}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state:focus:not(:focus-visible),.card-container[theme=light].state:focus:not(:focus-visible){border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -7014,7 +7018,7 @@ class FieldComponent {
          * @type {Boolean}
          * @memberof FieldComponent
          */
-        this.allowNegative = false;
+        this.allowNegative = true;
         /**
          * Show reserved content below form field
          * @property showBottomContent
@@ -11411,11 +11415,11 @@ class StepComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected", applicationTheme: "applicationTheme", position: "position", htmlDescription: "htmlDescription", boldLabel: "boldLabel", descriptionTpl: "descriptionTpl", labelTooltip: "labelTooltip", alwaysShowIcon: "alwaysShowIcon", context: "context" }, outputs: { stepSelected: "stepSelected" }, viewQueries: [{ propertyName: "stepElement", first: true, predicate: ["step"], descendants: true }], ngImport: i0, template: "@if (!mobileMode) {\n  <div\n    class=\"step-container\"\n    #step\n    [tabIndex]=\"0\"\n    [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n    [attr.theme]=\"applicationTheme\"\n    (keydown.enter)=\"onStepSelected(index)\"\n    (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n    (click)=\"onStepSelected(index)\"\n  >\n    <div class=\"step-icon\">\n      <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n      <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n        <ng-container [ngSwitch]=\"true\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                     [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <ng-template #lastStep>\n        <img\n          *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n          [alt]=\"'step-finish-image'\"\n          [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon-wrapper\">\n            <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                     [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <div class=\"steps-label\">\n      <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\"\n           [matTooltip]=\"labelTooltip ?? ''\">\n        {{ label }}\n      </div>\n\n      <div class=\"step-description-container\">\n        <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n          <div>{{ description.text }}</div>\n          <ui-icon *ngIf=\"description.iconName\" [name]=\"description.iconName\" [size]=\"'24'\"\n                   [matTooltip]=\"description.iconTooltip ?? ''\"></ui-icon>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n    </div>\n\n  </div>\n\n} @else {\n  <div class=\"mobile-step-container\"\n       #step\n       [tabIndex]=\"0\"\n       [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited, 'keyboard-focused': keyboardFocused() }\"\n       (keydown)=\"onKeydown($event)\"\n       (click)=\"onStepSelected(index)\"\n       [attr.theme]=\"applicationTheme\"\n       role=\"tab\"\n       [attr.aria-selected]=\"selected\"\n       [attr.aria-disabled]=\"disabled\"\n       [attr.aria-label]=\"label\"\n       [attr.aria-controls]=\"index\"\n       [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected", applicationTheme: "applicationTheme", position: "position", htmlDescription: "htmlDescription", boldLabel: "boldLabel", descriptionTpl: "descriptionTpl", labelTooltip: "labelTooltip", alwaysShowIcon: "alwaysShowIcon", context: "context" }, outputs: { stepSelected: "stepSelected" }, viewQueries: [{ propertyName: "stepElement", first: true, predicate: ["step"], descendants: true }], ngImport: i0, template: "@if (!mobileMode) {\n  <div\n    class=\"step-container\"\n    #step\n    [tabIndex]=\"disabled? -1 : 0\"\n    [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n    [attr.theme]=\"applicationTheme\"\n    (keydown.enter)=\"onStepSelected(index)\"\n    (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n    (click)=\"onStepSelected(index)\"\n  >\n    <div class=\"step-icon\">\n      <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n      <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n        <ng-container [ngSwitch]=\"true\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                     [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <ng-template #lastStep>\n        <img\n          *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n          [alt]=\"'step-finish-image'\"\n          [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon-wrapper\">\n            <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                     [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <div class=\"steps-label\">\n      <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\"\n           [matTooltip]=\"labelTooltip ?? ''\">\n        {{ label }}\n      </div>\n\n      <div class=\"step-description-container\">\n        <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n          <div>{{ description.text }}</div>\n          <ui-icon *ngIf=\"description.iconName\" [name]=\"description.iconName\" [size]=\"'24'\"\n                   [matTooltip]=\"description.iconTooltip ?? ''\"></ui-icon>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n    </div>\n\n  </div>\n\n} @else {\n  <div class=\"mobile-step-container\"\n       #step\n       [tabIndex]=\"disabled ? -1 : 0\"\n       [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited, 'keyboard-focused': keyboardFocused() }\"\n       (keydown)=\"onKeydown($event)\"\n       (click)=\"onStepSelected(index)\"\n       [attr.theme]=\"applicationTheme\"\n       role=\"tab\"\n       [attr.aria-selected]=\"selected\"\n       [attr.aria-disabled]=\"disabled\"\n       [attr.aria-label]=\"label\"\n       [attr.aria-controls]=\"index\"\n       [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!mobileMode) {\n  <div\n    class=\"step-container\"\n    #step\n    [tabIndex]=\"0\"\n    [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n    [attr.theme]=\"applicationTheme\"\n    (keydown.enter)=\"onStepSelected(index)\"\n    (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n    (click)=\"onStepSelected(index)\"\n  >\n    <div class=\"step-icon\">\n      <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n      <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n        <ng-container [ngSwitch]=\"true\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                     [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <ng-template #lastStep>\n        <img\n          *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n          [alt]=\"'step-finish-image'\"\n          [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon-wrapper\">\n            <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                     [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <div class=\"steps-label\">\n      <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\"\n           [matTooltip]=\"labelTooltip ?? ''\">\n        {{ label }}\n      </div>\n\n      <div class=\"step-description-container\">\n        <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n          <div>{{ description.text }}</div>\n          <ui-icon *ngIf=\"description.iconName\" [name]=\"description.iconName\" [size]=\"'24'\"\n                   [matTooltip]=\"description.iconTooltip ?? ''\"></ui-icon>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n    </div>\n\n  </div>\n\n} @else {\n  <div class=\"mobile-step-container\"\n       #step\n       [tabIndex]=\"0\"\n       [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited, 'keyboard-focused': keyboardFocused() }\"\n       (keydown)=\"onKeydown($event)\"\n       (click)=\"onStepSelected(index)\"\n       [attr.theme]=\"applicationTheme\"\n       role=\"tab\"\n       [attr.aria-selected]=\"selected\"\n       [attr.aria-disabled]=\"disabled\"\n       [attr.aria-label]=\"label\"\n       [attr.aria-controls]=\"index\"\n       [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!mobileMode) {\n  <div\n    class=\"step-container\"\n    #step\n    [tabIndex]=\"disabled? -1 : 0\"\n    [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n    [attr.theme]=\"applicationTheme\"\n    (keydown.enter)=\"onStepSelected(index)\"\n    (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n    (click)=\"onStepSelected(index)\"\n  >\n    <div class=\"step-icon\">\n      <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n      <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n        <ng-container [ngSwitch]=\"true\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                     [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <ng-template #lastStep>\n        <img\n          *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n          [alt]=\"'step-finish-image'\"\n          [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon-wrapper\">\n            <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                     [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <div class=\"steps-label\">\n      <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\"\n           [matTooltip]=\"labelTooltip ?? ''\">\n        {{ label }}\n      </div>\n\n      <div class=\"step-description-container\">\n        <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n          <div>{{ description.text }}</div>\n          <ui-icon *ngIf=\"description.iconName\" [name]=\"description.iconName\" [size]=\"'24'\"\n                   [matTooltip]=\"description.iconTooltip ?? ''\"></ui-icon>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n    </div>\n\n  </div>\n\n} @else {\n  <div class=\"mobile-step-container\"\n       #step\n       [tabIndex]=\"disabled ? -1 : 0\"\n       [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited, 'keyboard-focused': keyboardFocused() }\"\n       (keydown)=\"onKeydown($event)\"\n       (click)=\"onStepSelected(index)\"\n       [attr.theme]=\"applicationTheme\"\n       role=\"tab\"\n       [attr.aria-selected]=\"selected\"\n       [attr.aria-disabled]=\"disabled\"\n       [attr.aria-label]=\"label\"\n       [attr.aria-controls]=\"index\"\n       [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -11764,17 +11768,17 @@ class StepperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepperComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StepperComponent, selector: "ui-stepper", inputs: { setFirstStepAutoSelect: ["firstStepAutoSelect", "setFirstStepAutoSelect"], steps: "steps", setSelectedIndex: ["selectedIndex", "setSelectedIndex"], lastStepFinalIcon: "lastStepFinalIcon", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", position: "position", ariaRequired: "ariaRequired" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "stepperElement", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <div style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label }} {{ ((translationContext + 'SELECTED_OF') | uiTranslate : { selected: selectedIndex, total: itemSteps.length }) | async   }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= selectedIndex + 1 && itemSteps[selectedIndex + 1]?.isVisited )\n       ? ((translationContext + 'COMPLETED') | uiTranslate | async)\n       : ((translationContext + 'INCOMPLETE') | uiTranslate | async) }}\n     </span>\n  </div>\n  <div class=\"stepper-wrapper\" role=\"tablist\" [ngClass]=\"position\" [attr.theme]=\"applicationTheme\" *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); 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          [applicationTheme]=\"applicationTheme\"\n          [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineElement]=\"stepElement\" [position]=\"position\" 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           [tabIndex]=\"0\"\n           #stepper\n           [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n           (keydown.enter)=\"showStepsToggle()\"\n           (keydown.space)=\"showStepsToggle()\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [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 | async) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [size]=\"'24'\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></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              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.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;z-index:2}.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}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.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{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;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", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: StepComponent, selector: "ui-step", inputs: ["label", "isVisited", "submitted", "icon", "index", "selected", "isLast", "selectedIndex", "disabled", "prevStepIsVisited", "mobileMode", "finalIcon", "showIconWhenSelected", "applicationTheme", "position", "htmlDescription", "boldLabel", "descriptionTpl", "labelTooltip", "alwaysShowIcon", "context"], outputs: ["stepSelected"] }, { kind: "component", type: RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total", "variant", "icon", "buttonTooltip", "companyColor", "applicationTheme"], outputs: ["buttonClicked"] }, { kind: "directive", type: StepLineElementDirective, selector: "[stepLineElement]", inputs: ["stepLineElement", "position"] }, { 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: "17.3.12", type: StepperComponent, selector: "ui-stepper", inputs: { setFirstStepAutoSelect: ["firstStepAutoSelect", "setFirstStepAutoSelect"], steps: "steps", setSelectedIndex: ["selectedIndex", "setSelectedIndex"], lastStepFinalIcon: "lastStepFinalIcon", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", position: "position", ariaRequired: "ariaRequired" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "stepperElement", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <div style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label ?? '' }}\n       {{ (translationContext + 'SELECTED_OF' | uiTranslate : { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }) | async }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= (selectedIndex ?? 0) + 1 && itemSteps[selectedIndex + 1]?.isVisited)\n       ? (translationContext + 'COMPLETED' | uiTranslate | async)\n       : (translationContext + 'INCOMPLETE' | uiTranslate | async) }}\n     </span>\n  </div>\n  <div class=\"stepper-wrapper\" role=\"tablist\" [ngClass]=\"position\" [attr.theme]=\"applicationTheme\"\n       *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); 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          [applicationTheme]=\"applicationTheme\"\n          role=\"tab\"\n          [attr.aria-controls]=\"'step-panel-' + i\"\n          [attr.aria-selected]=\"i === selectedIndex\"\n          [attr.aria-label]=\"step.label\"\n          [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\"\n           [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineElement]=\"stepElement\" [position]=\"position\" 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           [tabIndex]=\"0\"\n           #stepper\n           [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n           (keydown.enter)=\"showStepsToggle()\"\n           (keydown.space)=\"showStepsToggle()\"\n           [attr.aria-expanded]=\"isOpen\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [value]=\"selectedIndex + 1\"\n                              [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\n              *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ (('COMMON.NEXT') | uiTranslate | async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [size]=\"'24'\"\n                   [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></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              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.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;z-index:2}.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}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;outline-offset:2px;border-radius:8px;border-color:#242424;animation:focus-ring-animation-main .4s forwards}.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{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;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", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: StepComponent, selector: "ui-step", inputs: ["label", "isVisited", "submitted", "icon", "index", "selected", "isLast", "selectedIndex", "disabled", "prevStepIsVisited", "mobileMode", "finalIcon", "showIconWhenSelected", "applicationTheme", "position", "htmlDescription", "boldLabel", "descriptionTpl", "labelTooltip", "alwaysShowIcon", "context"], outputs: ["stepSelected"] }, { kind: "component", type: RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total", "variant", "icon", "buttonTooltip", "companyColor", "applicationTheme"], outputs: ["buttonClicked"] }, { kind: "directive", type: StepLineElementDirective, selector: "[stepLineElement]", inputs: ["stepLineElement", "position"] }, { 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: "17.3.12", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label }} {{ ((translationContext + 'SELECTED_OF') | uiTranslate : { selected: selectedIndex, total: itemSteps.length }) | async   }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= selectedIndex + 1 && itemSteps[selectedIndex + 1]?.isVisited )\n       ? ((translationContext + 'COMPLETED') | uiTranslate | async)\n       : ((translationContext + 'INCOMPLETE') | uiTranslate | async) }}\n     </span>\n  </div>\n  <div class=\"stepper-wrapper\" role=\"tablist\" [ngClass]=\"position\" [attr.theme]=\"applicationTheme\" *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); 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          [applicationTheme]=\"applicationTheme\"\n          [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineElement]=\"stepElement\" [position]=\"position\" 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           [tabIndex]=\"0\"\n           #stepper\n           [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n           (keydown.enter)=\"showStepsToggle()\"\n           (keydown.space)=\"showStepsToggle()\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [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 | async) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [size]=\"'24'\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></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              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.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;z-index:2}.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}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.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{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;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 style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label ?? '' }}\n       {{ (translationContext + 'SELECTED_OF' | uiTranslate : { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }) | async }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= (selectedIndex ?? 0) + 1 && itemSteps[selectedIndex + 1]?.isVisited)\n       ? (translationContext + 'COMPLETED' | uiTranslate | async)\n       : (translationContext + 'INCOMPLETE' | uiTranslate | async) }}\n     </span>\n  </div>\n  <div class=\"stepper-wrapper\" role=\"tablist\" [ngClass]=\"position\" [attr.theme]=\"applicationTheme\"\n       *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); 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          [applicationTheme]=\"applicationTheme\"\n          role=\"tab\"\n          [attr.aria-controls]=\"'step-panel-' + i\"\n          [attr.aria-selected]=\"i === selectedIndex\"\n          [attr.aria-label]=\"step.label\"\n          [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\"\n           [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineElement]=\"stepElement\" [position]=\"position\" 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           [tabIndex]=\"0\"\n           #stepper\n           [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n           (keydown.enter)=\"showStepsToggle()\"\n           (keydown.space)=\"showStepsToggle()\"\n           [attr.aria-expanded]=\"isOpen\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [value]=\"selectedIndex + 1\"\n                              [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\n              *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ (('COMMON.NEXT') | uiTranslate | async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [size]=\"'24'\"\n                   [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></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              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.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;z-index:2}.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}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;outline-offset:2px;border-radius:8px;border-color:#242424;animation:focus-ring-animation-main .4s forwards}.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{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;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: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i4$5.Observable, decorators: [{
+                }] }, { type: i8$3.Observable, decorators: [{
                     type: Inject,
                     args: [IS_MOBILE_TOKEN]
                 }] }, { type: i2$3.FocusMonitor }, { type: i0.DestroyRef }], propDecorators: { setFirstStepAutoSelect: [{
@@ -13452,7 +13456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i0.DestroyRef }, { type: i4$5.Observable, decorators: [{
+                }] }, { type: i0.DestroyRef }, { type: i8$3.Observable, decorators: [{
                     type: Inject,
                     args: [IS_MOBILE_TOKEN]
                 }] }], propDecorators: { config: [{
@@ -13924,7 +13928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i4$5.Observable, decorators: [{
+                }] }, { type: i8$3.Observable, decorators: [{
                     type: Inject,
                     args: [IS_MOBILE_TOKEN]
                 }] }], propDecorators: { showBackButton: [{
@@ -14168,17 +14172,17 @@ class TabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.12", type: TabsComponent, selector: "ui-tabs", inputs: { companyColor: "companyColor", type: "type", animationDuration: "animationDuration", headerContentPadding: ["headerContentPadding", "headerContentPadding", (value) => value + 'px'], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], applicationTheme: "applicationTheme" }, outputs: { selectedTabIndex: "selectedTabIndex", selectedTab: "selectedTab" }, host: { properties: { "style.--color": "this.companyColor", "style.--header-content-padding": "this.headerContentPadding" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedTabChange)=\"onTabChange($event)\"\n>\n  <mat-tab\n    *ngFor=\"let tab of tabs; trackBy: trackByTabName\"\n    [disabled]=\"tab.disabled ?? false\"\n    [attr.aria-label]=\"tab?.ariaLabel\"\n  >\n    <ng-template mat-tab-label>\n      <a\n        data-test-role=\"tab-link\"\n        [attr.data-testid]=\"tab.tabName\"\n        class=\"tab-name\"\n        [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n        (click)=\"$event.preventDefault()\"\n        [tabindex]=\"-1\"\n      >\n        <ui-icon [size]=\"'24'\" [tabindex]=\"1\" class=\"left-icon\" [name]=\"tab.iconLeft!\" *ngIf=\"tab?.iconLeft\"></ui-icon>\n        <span class=\"label\">{{ tab.tabLabel }}</span>\n        <ui-icon\n          [size]=\"'24'\"\n          class=\"right-icon\"\n          [name]=\"tab.iconRight!\"\n          *ngIf=\"tab?.iconRight\"\n        ></ui-icon>\n      </a>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n  </mat-tab>\n</mat-tab-group>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #D3D3D3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mat-mdc-tab-label-container{padding:4px}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:0;z-index:10;border-radius:4px;outline-offset:2px;outline:3px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#000;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{height:64px!important;flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media (max-width: 600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$9.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.12", type: TabsComponent, selector: "ui-tabs", inputs: { companyColor: "companyColor", type: "type", animationDuration: "animationDuration", headerContentPadding: ["headerContentPadding", "headerContentPadding", (value) => value + 'px'], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], applicationTheme: "applicationTheme" }, outputs: { selectedTabIndex: "selectedTabIndex", selectedTab: "selectedTab" }, host: { properties: { "style.--color": "this.companyColor", "style.--header-content-padding": "this.headerContentPadding" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedTabChange)=\"onTabChange($event)\"\n  role=\"tablist\"\n>\n  <mat-tab\n    *ngFor=\"let tab of tabs; trackBy: trackByTabName;let i = index\"\n    [disabled]=\"tab.disabled ?? false\"\n    [attr.aria-label]=\"tab?.ariaLabel\"\n  >\n    <ng-template mat-tab-label>\n      <a\n        data-test-role=\"tab-link\"\n        [attr.data-testid]=\"tab.tabName\"\n        class=\"tab-name\"\n        [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n        (click)=\"$event.preventDefault()\"\n        [attr.aria-selected]=\"i === tabIndex()\"\n        [attr.aria-label]=\"tab.tabLabel + (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\"\n        role=\"tab\"\n      >\n        <ui-icon [size]=\"'24'\" [tabindex]=\"1\" class=\"left-icon\" [name]=\"tab.iconLeft!\" *ngIf=\"tab?.iconLeft\"></ui-icon>\n        <span class=\"label\">{{ tab.tabLabel }}</span>\n        <ui-icon\n          [size]=\"'24'\"\n          class=\"right-icon\"\n          [name]=\"tab.iconRight!\"\n          *ngIf=\"tab?.iconRight\"\n        ></ui-icon>\n      </a>\n    </ng-template>\n    <div\n      role=\"tabpanel\"\n      [attr.id]=\"'tabpanel-' + i\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n    </div>\n  </mat-tab>\n</mat-tab-group>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #D3D3D3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mat-mdc-tab-label-container{padding:4px}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#000;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{height:64px!important;flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media (max-width: 600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$9.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tabs', template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedTabChange)=\"onTabChange($event)\"\n>\n  <mat-tab\n    *ngFor=\"let tab of tabs; trackBy: trackByTabName\"\n    [disabled]=\"tab.disabled ?? false\"\n    [attr.aria-label]=\"tab?.ariaLabel\"\n  >\n    <ng-template mat-tab-label>\n      <a\n        data-test-role=\"tab-link\"\n        [attr.data-testid]=\"tab.tabName\"\n        class=\"tab-name\"\n        [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n        (click)=\"$event.preventDefault()\"\n        [tabindex]=\"-1\"\n      >\n        <ui-icon [size]=\"'24'\" [tabindex]=\"1\" class=\"left-icon\" [name]=\"tab.iconLeft!\" *ngIf=\"tab?.iconLeft\"></ui-icon>\n        <span class=\"label\">{{ tab.tabLabel }}</span>\n        <ui-icon\n          [size]=\"'24'\"\n          class=\"right-icon\"\n          [name]=\"tab.iconRight!\"\n          *ngIf=\"tab?.iconRight\"\n        ></ui-icon>\n      </a>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n  </mat-tab>\n</mat-tab-group>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #D3D3D3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mat-mdc-tab-label-container{padding:4px}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:0;z-index:10;border-radius:4px;outline-offset:2px;outline:3px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#000;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{height:64px!important;flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media (max-width: 600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"] }]
+            args: [{ selector: 'ui-tabs', template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedTabChange)=\"onTabChange($event)\"\n  role=\"tablist\"\n>\n  <mat-tab\n    *ngFor=\"let tab of tabs; trackBy: trackByTabName;let i = index\"\n    [disabled]=\"tab.disabled ?? false\"\n    [attr.aria-label]=\"tab?.ariaLabel\"\n  >\n    <ng-template mat-tab-label>\n      <a\n        data-test-role=\"tab-link\"\n        [attr.data-testid]=\"tab.tabName\"\n        class=\"tab-name\"\n        [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n        (click)=\"$event.preventDefault()\"\n        [attr.aria-selected]=\"i === tabIndex()\"\n        [attr.aria-label]=\"tab.tabLabel + (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\"\n        role=\"tab\"\n      >\n        <ui-icon [size]=\"'24'\" [tabindex]=\"1\" class=\"left-icon\" [name]=\"tab.iconLeft!\" *ngIf=\"tab?.iconLeft\"></ui-icon>\n        <span class=\"label\">{{ tab.tabLabel }}</span>\n        <ui-icon\n          [size]=\"'24'\"\n          class=\"right-icon\"\n          [name]=\"tab.iconRight!\"\n          *ngIf=\"tab?.iconRight\"\n        ></ui-icon>\n      </a>\n    </ng-template>\n    <div\n      role=\"tabpanel\"\n      [attr.id]=\"'tabpanel-' + i\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n    </div>\n  </mat-tab>\n</mat-tab-group>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #D3D3D3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mat-mdc-tab-label-container{padding:4px}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#000;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{height:64px!important;flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media (max-width: 600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i4$5.Observable, decorators: [{
+                }] }, { type: i8$3.Observable, decorators: [{
                     type: Inject,
                     args: [IS_MOBILE_TOKEN]
                 }] }], propDecorators: { companyColor: [{
@@ -14263,14 +14267,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class TabsComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TabsComponentModule, declarations: [TabsComponent], imports: [TabDirective, CommonModule, MatTabsModule, IconComponentModule], exports: [TabsComponent, TabDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TabsComponentModule, declarations: [TabsComponent], imports: [TabDirective, CommonModule, MatTabsModule, IconComponentModule, UiTranslatePipe], exports: [TabsComponent, TabDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponentModule, imports: [CommonModule, MatTabsModule, IconComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TabsComponent],
-                    imports: [TabDirective, CommonModule, MatTabsModule, IconComponentModule],
+                    imports: [TabDirective, CommonModule, MatTabsModule, IconComponentModule, UiTranslatePipe],
                     exports: [TabsComponent, TabDirective],
                 }]
         }] });