@testgorilla/tgo-ui 1.12.0 → 1.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/tabs/tabs.component.module.d.ts +1 -1
- package/esm2022/components/step/step.component.mjs +3 -3
- package/esm2022/components/tabs/tabs.component.module.mjs +4 -3
- package/fesm2022/testgorilla-tgo-ui.mjs +5 -4
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,6 @@ import * as i4 from "@angular/material/tabs";
|
|
|
6
6
|
import * as i5 from "../icon/icon.component.module";
|
|
7
7
|
export declare class TabsComponentModule {
|
|
8
8
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponentModule, never>;
|
|
9
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<TabsComponentModule, [typeof i1.TabsComponent, typeof i2.TabDirective], [typeof i3.CommonModule, typeof i4.MatTabsModule, typeof i5.IconComponentModule],
|
|
9
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<TabsComponentModule, [typeof i1.TabsComponent, typeof i2.TabDirective], [typeof i3.CommonModule, typeof i4.MatTabsModule, typeof i5.IconComponentModule], [typeof i1.TabsComponent]>;
|
|
10
10
|
static ɵinj: i0.ɵɵInjectorDeclaration<TabsComponentModule>;
|
|
11
11
|
}
|
|
@@ -54,11 +54,11 @@ export class StepComponent {
|
|
|
54
54
|
this.stepSelected.emit(index);
|
|
55
55
|
}
|
|
56
56
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n <span class=\"label\">{{ label }}</span>\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;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;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}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
58
58
|
}
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
61
|
-
args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/
|
|
61
|
+
args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n <span class=\"label\">{{ label }}</span>\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;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;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}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"] }]
|
|
62
62
|
}], propDecorators: { label: [{
|
|
63
63
|
type: Input
|
|
64
64
|
}], isVisited: [{
|
|
@@ -88,4 +88,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
88
88
|
}], stepSelected: [{
|
|
89
89
|
type: Output
|
|
90
90
|
}] } });
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zdGVwL3N0ZXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RlcC9zdGVwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFTaEcsTUFBTSxPQUFPLGFBQWE7SUFOMUI7UUE0QkU7Ozs7V0FJRztRQUNNLFNBQUksR0FBeUIsRUFBRSxDQUFDO1FBOEJ6Qzs7OztXQUlHO1FBQ00sYUFBUSxHQUFHLEtBQUssQ0FBQztRQUUxQjs7OztXQUlHO1FBQ00sc0JBQWlCLEdBQXdCLEtBQUssQ0FBQztRQUV4RDs7OztXQUlHO1FBQ00sZUFBVSxHQUFHLEtBQUssQ0FBQztRQUU1Qjs7OztXQUlHO1FBQ00sY0FBUyxHQUFHLEtBQUssQ0FBQztRQUUzQjs7OztXQUlHO1FBQ00seUJBQW9CLEdBQUcsS0FBSyxDQUFDO1FBRXRDOzs7O1dBSUc7UUFDTyxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FTckQ7SUFQQyxJQUFjLHNCQUFzQjtRQUNsQyxPQUFPLENBQUMsSUFBSSxDQUFDLG9CQUFvQixJQUFJLENBQUMsSUFBSSxDQUFDLG9CQUFvQixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3JGLENBQUM7SUFFUyxjQUFjLENBQUMsS0FBYTtRQUNwQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNoQyxDQUFDOytHQXpHVSxhQUFhO21HQUFiLGFBQWEsMGFDVDFCLHduR0FzRkE7OzRGRDdFYSxhQUFhO2tCQU56QixTQUFTOytCQUNFLFNBQVMsbUJBR0YsdUJBQXVCLENBQUMsTUFBTTs4QkFRdEMsS0FBSztzQkFBYixLQUFLO2dCQU9HLFNBQVM7c0JBQWpCLEtBQUs7Z0JBT0csU0FBUztzQkFBakIsS0FBSztnQkFPRyxJQUFJO3NCQUFaLEtBQUs7Z0JBT0csS0FBSztzQkFBYixLQUFLO2dCQU9HLFFBQVE7c0JBQWhCLEtBQUs7Z0JBT0csTUFBTTtzQkFBZCxLQUFLO2dCQU9HLGFBQWE7c0JBQXJCLEtBQUs7Z0JBT0csUUFBUTtzQkFBaEIsS0FBSztnQkFPRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBT0csVUFBVTtzQkFBbEIsS0FBSztnQkFPRyxTQUFTO3NCQUFqQixLQUFLO2dCQU9HLG9CQUFvQjtzQkFBNUIsS0FBSztnQkFPSSxZQUFZO3NCQUFyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uTmFtZSB9IGZyb20gJy4uL2ljb24vaWNvbi5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3VpLXN0ZXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vc3RlcC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N0ZXAuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFN0ZXBDb21wb25lbnQge1xuICAvKipcbiAgICogSW5wdXQgcHJvcGVydHkgZm9yIHRoZSBsYWJlbCBvZiB0aGUgc3RlcC5cbiAgICpcbiAgICogQG1lbWJlcm9mIFN0ZXBDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIElucHV0IHByb3BlcnR5IGluZGljYXRpbmcgd2hldGhlciB0aGUgc3RlcCBoYXMgYmVlbiB2aXNpdGVkLlxuICAgKlxuICAgKiBAbWVtYmVyb2YgU3RlcENvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgaXNWaXNpdGVkOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBJbnB1dCBwcm9wZXJ0eSBpbmRpY2F0aW5nIHdoZXRoZXIgdGhlIGZvcm0gaGFzIGJlZW4gc3VibWl0dGVkLlxuICAgKlxuICAgKiBAbWVtYmVyb2YgU3RlcENvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgc3VibWl0dGVkOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBJbnB1dCBwcm9wZXJ0eSBmb3IgdGhlIGljb24gYXNzb2NpYXRlZCB3aXRoIHRoZSBzdGVwLlxuICAgKlxuICAgKiBAbWVtYmVyb2YgU3RlcENvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgaWNvbjogSWNvbk5hbWUgfCB1bmRlZmluZWQgPSAnJztcblxuICAvKipcbiAgICogSW5wdXQgcHJvcGVydHkgZm9yIHRoZSBpbmRleCBvZiB0aGUgc3RlcC5cbiAgICpcbiAgICogQG1lbWJlcm9mIFN0ZXBDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGluZGV4OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIElucHV0IHByb3BlcnR5IGluZGljYXRpbmcgd2hldGhlciB0aGUgc3RlcCBpcyBjdXJyZW50bHkgc2VsZWN0ZWQuXG4gICAqXG4gICAqIEBtZW1iZXJvZiBTdGVwQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBzZWxlY3RlZDogYm9vbGVhbjtcblxuICAvKipcbiAgICogSW5wdXQgcHJvcGVydHkgaW5kaWNhdGluZyB3aGV0aGVyIHRoZSBzdGVwIGlzIHRoZSBsYXN0IHN0ZXAgaW4gdGhlIHN0ZXBwZXIuXG4gICAqXG4gICAqIEBtZW1iZXJvZiBTdGVwQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBpc0xhc3Q6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIElucHV0IHByb3BlcnR5IGluZGljYXRpbmcgdGhlIHNlbGVjdGVkIGluZGV4IGluIHRoZSBzdGVwcGVyLlxuICAgKlxuICAgKiBAbWVtYmVyb2YgU3RlcENvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgc2VsZWN0ZWRJbmRleDogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBJbnB1dCBwcm9wZXJ0eSBpbmRpY2F0aW5nIHdoZXRoZXIgdGhlIHN0ZXAgaXMgZGlzYWJsZWQuXG4gICAqXG4gICAqIEBtZW1iZXJvZiBTdGVwQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBJbnB1dCBwcm9wZXJ0eSBpbmRpY2F0aW5nIHdoZXRoZXIgdGhlIHByZXZpb3VzIHN0ZXAgaGFzIGJlZW4gdmlzaXRlZC5cbiAgICpcbiAgICogQG1lbWJlcm9mIFN0ZXBDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHByZXZTdGVwSXNWaXNpdGVkOiBib29sZWFuIHwgdW5kZWZpbmVkID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIElucHV0IHByb3BlcnR5IGluZGljYXRpbmcgd2hldGhlciB0aGUgY29tcG9uZW50IGlzIGluIG1vYmlsZSBtb2RlLlxuICAgKlxuICAgKiBAbWVtYmVyb2YgU3RlcENvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgbW9iaWxlTW9kZSA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBJbnB1dCBwcm9wZXJ0eSBpbmRpY2F0aW5nIHdoZXRoZXIgdGhlIGZpbmFsIGljb24gc2hvdWxkIGJlIGRpc3BsYXllZC5cbiAgICpcbiAgICogQG1lbWJlcm9mIFN0ZXBDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGZpbmFsSWNvbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBJbnB1dCBwcm9wZXJ0eSBpbmRpY2F0aW5nIHRvIGRpc3BsYXkgaWNvbiB3aGVuIHN0ZXAgaXMgc2VsZWN0ZWQuXG4gICAqXG4gICAqIEBtZW1iZXJvZiBTdGVwQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBzaG93SWNvbldoZW5TZWxlY3RlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBFdmVudCBlbWl0dGVkIHdoZW4gdGhlIHN0ZXAgd2FzIGNsaWNrZWQuXG4gICAqIEB0eXBlIHtudW1iZXJ9XG4gICAqIEBtZW1iZXJvZiBTdGVwQ29tcG9uZW50XG4gICAqL1xuICBAT3V0cHV0KCkgc3RlcFNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgcHJvdGVjdGVkIGdldCBoYXNMYXN0U3RlcERlZmF1bHRJY29uKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhdGhpcy5zaG93SWNvbldoZW5TZWxlY3RlZCB8fCAodGhpcy5zaG93SWNvbldoZW5TZWxlY3RlZCAmJiAhdGhpcy5zZWxlY3RlZCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb25TdGVwU2VsZWN0ZWQoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMuc3RlcFNlbGVjdGVkLmVtaXQoaW5kZXgpO1xuICB9XG59XG4iLCI8ZGl2XG4gICpuZ0lmPVwiIW1vYmlsZU1vZGU7IGVsc2UgbW9iaWxlXCJcbiAgY2xhc3M9XCJzdGVwLWNvbnRhaW5lclwiXG4gIFt0YWJJbmRleF09XCIwXCJcbiAgW25nQ2xhc3NdPVwie1xuICAgICd2aXNpdGVkLW5leHQnOiBpc1Zpc2l0ZWQgJiYgaW5kZXggPiBzZWxlY3RlZEluZGV4LFxuICAgICd2aXNpdGVkLXByZXYnOiBpc1Zpc2l0ZWQgJiYgaW5kZXggPCBzZWxlY3RlZEluZGV4LFxuICAgICdhY3RpdmUnOiBzZWxlY3RlZCxcbiAgICAnbGFzdC1zdGVwJzogZmluYWxJY29uICYmIGhhc0xhc3RTdGVwRGVmYXVsdEljb24sXG4gICAgJ2Rpc2FibGVkJzogZGlzYWJsZWQsXG4gIH1cIlxuICAoY2xpY2spPVwib25TdGVwU2VsZWN0ZWQoaW5kZXgpXCJcbj5cbiAgPGRpdiBjbGFzcz1cInN0ZXAtaWNvblwiPlxuICAgIDxkaXYgY2xhc3M9XCJsaW5lXCIgKm5nSWY9XCJpbmRleFwiIFtuZ0NsYXNzXT1cInsgdmlzaXRlZDogcHJldlN0ZXBJc1Zpc2l0ZWQgfVwiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJpY29uLXdyYXBwZXJcIiAqbmdJZj1cIiFmaW5hbEljb247IGVsc2UgbGFzdFN0ZXBcIj5cbiAgICAgIDxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cInRydWVcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiaXNWaXNpdGVkICYmICFzZWxlY3RlZFwiPlxuICAgICAgICAgIDx1aS1pY29uIFtzaXplXT1cIicyNCdcIiBbbmFtZV09XCInQ2hlY2snXCJcbiAgICAgICAgICAgICAgICAgICBbY29sb3JdPVwiaXNWaXNpdGVkICYmIGluZGV4IDwgc2VsZWN0ZWRJbmRleCA/ICd3aGl0ZScgOiAncGV0cm9sJ1wiPjwvdWktaWNvbj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwic2VsZWN0ZWQgJiYgISFpY29uXCI+XG4gICAgICAgICAgPHVpLWljb24gW3NpemVdPVwiJzI0J1wiIFtuYW1lXT1cImljb24hXCIgW2NvbG9yXT1cIid3aGl0ZSdcIj48L3VpLWljb24+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoRGVmYXVsdD5cbiAgICAgICAgICB7eyBpbmRleCArIDEgfX1cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cblxuICAgIDxuZy10ZW1wbGF0ZSAjbGFzdFN0ZXA+XG4gICAgICA8aW1nICpuZ0lmPVwiaGFzTGFzdFN0ZXBEZWZhdWx0SWNvbjsgZWxzZSBzdGVwSWNvblwiIFthbHRdPVwiJ3N0ZXAtZmluaXNoLWltYWdlJ1wiIFthdHRyLnNyY109XCInL2ltYWdlcy9zdGVwLWZpbmlzaC5zdmcnXCI+XG5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjc3RlcEljb24+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpY29uLXdyYXBwZXJcIj5cbiAgICAgICAgICA8dWktaWNvbiAqbmdJZj1cImljb247IGVsc2Ugc3RlcEluZGV4XCIgW3NpemVdPVwiJzI0J1wiIFtuYW1lXT1cImljb25cIiBbY29sb3JdPVwiJ3doaXRlJ1wiPjwvdWktaWNvbj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgI3N0ZXBJbmRleD5cbiAgICAgICAgICAgIHt7IGluZGV4ICsgMSB9fVxuICAgICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLXRlbXBsYXRlPlxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwic3RlcC1sYWJlbFwiICpuZ0lmPVwibGFiZWxcIj5cbiAgICB7eyBsYWJlbCB9fVxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI21vYmlsZT5cbiAgPGRpdiBjbGFzcz1cIm1vYmlsZS1zdGVwLWNvbnRhaW5lclwiIFtuZ0NsYXNzXT1cInsgJ2FjdGl2ZSc6IHNlbGVjdGVkLCAnZGlzYWJsZWQnOiBkaXNhYmxlZCwgJ3Zpc2l0ZWQnOiBpc1Zpc2l0ZWQgfVwiIChjbGljayk9XCJvblN0ZXBTZWxlY3RlZChpbmRleClcIj5cbiAgICA8ZGl2IGNsYXNzPVwic3RlcFwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFmaW5hbEljb247IGVsc2UgbGFzdFN0ZXBcIj5cbiAgICAgICAgPGRpdiBbbmdTd2l0Y2hdPVwidHJ1ZVwiIGNsYXNzPVwiaWNvblwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cImlzVmlzaXRlZCAmJiAhc2VsZWN0ZWRcIj5cbiAgICAgICAgICAgIDx1aS1pY29uIFtzaXplXT1cIicxNidcIiBbbmFtZV09XCInQ2hlY2snXCIgW2NvbG9yXT1cIid3aGl0ZSdcIj48L3VpLWljb24+XG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCJzZWxlY3RlZCAmJiAhIWljb25cIj5cbiAgICAgICAgICAgIDx1aS1pY29uIFtzaXplXT1cIicxNidcIiBbbmFtZV09XCJpY29uIVwiIFtjb2xvcl09XCInd2hpdGUnXCI+PC91aS1pY29uPlxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hEZWZhdWx0PlxuICAgICAgICAgICAge3sgaW5kZXggKyAxIH19XG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjbGFzdFN0ZXA+XG4gICAgICAgIDxpbWcgKm5nSWY9XCJoYXNMYXN0U3RlcERlZmF1bHRJY29uOyBlbHNlIHN0ZXBJY29uXCIgW2FsdF09XCInc3RlcC1maW5pc2gtaW1hZ2UnXCIgW3dpZHRoXT1cIjI0XCIgW2hlaWdodF09XCIyNFwiIFthdHRyLnNyY109XCInL2ltYWdlcy9zdGVwLWZpbmlzaC5zdmcnXCI+XG5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNzdGVwSWNvbj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvblwiPlxuICAgICAgICAgICAgPHVpLWljb24gKm5nSWY9XCJpY29uOyBlbHNlIHN0ZXBJbmRleFwiIFtzaXplXT1cIicyNCdcIiBbbmFtZV09XCJpY29uXCIgW2NvbG9yXT1cIid3aGl0ZSdcIj48L3VpLWljb24+XG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgI3N0ZXBJbmRleD5cbiAgICAgICAgICAgICAge3sgaW5kZXggKyAxIH19XG4gICAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDxzcGFuIGNsYXNzPVwibGFiZWxcIj57eyBsYWJlbCB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -10,7 +10,7 @@ export class TabsComponentModule {
|
|
|
10
10
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabsComponentModule, declarations: [TabsComponent,
|
|
11
11
|
TabDirective], imports: [CommonModule,
|
|
12
12
|
MatTabsModule,
|
|
13
|
-
IconComponentModule] }); }
|
|
13
|
+
IconComponentModule], exports: [TabsComponent] }); }
|
|
14
14
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabsComponentModule, imports: [CommonModule,
|
|
15
15
|
MatTabsModule,
|
|
16
16
|
IconComponentModule] }); }
|
|
@@ -26,7 +26,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
26
26
|
CommonModule,
|
|
27
27
|
MatTabsModule,
|
|
28
28
|
IconComponentModule
|
|
29
|
-
]
|
|
29
|
+
],
|
|
30
|
+
exports: [TabsComponent]
|
|
30
31
|
}]
|
|
31
32
|
}] });
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFicy90YWJzLmNvbXBvbmVudC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2pELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNwRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBZ0IvQyxNQUFNLE9BQU8sbUJBQW1COytHQUFuQixtQkFBbUI7Z0hBQW5CLG1CQUFtQixpQkFWNUIsYUFBYTtZQUNiLFlBQVksYUFHWixZQUFZO1lBQ1osYUFBYTtZQUNiLG1CQUFtQixhQUVYLGFBQWE7Z0hBRVosbUJBQW1CLFlBTjVCLFlBQVk7WUFDWixhQUFhO1lBQ2IsbUJBQW1COzs0RkFJVixtQkFBbUI7a0JBWi9CLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLGFBQWE7d0JBQ2IsWUFBWTtxQkFDYjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixhQUFhO3dCQUNiLG1CQUFtQjtxQkFDcEI7b0JBQ0QsT0FBTyxFQUFFLENBQUMsYUFBYSxDQUFDO2lCQUN6QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVGFic0NvbXBvbmVudCB9IGZyb20gJy4vdGFicy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWF0VGFic01vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9tYXRlcmlhbC90YWJzXCI7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50TW9kdWxlIH0gZnJvbSBcIi4uL2ljb24vaWNvbi5jb21wb25lbnQubW9kdWxlXCI7XG5pbXBvcnQgeyBUYWJEaXJlY3RpdmUgfSBmcm9tICcuL3RhYi5kaXJlY3RpdmUnO1xuXG5cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgVGFic0NvbXBvbmVudCxcbiAgICBUYWJEaXJlY3RpdmVcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBNYXRUYWJzTW9kdWxlLFxuICAgIEljb25Db21wb25lbnRNb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1RhYnNDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIFRhYnNDb21wb25lbnRNb2R1bGUgeyB9XG4iXX0=
|
|
@@ -4572,11 +4572,11 @@ class StepComponent {
|
|
|
4572
4572
|
this.stepSelected.emit(index);
|
|
4573
4573
|
}
|
|
4574
4574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/
|
|
4575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n <span class=\"label\">{{ label }}</span>\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;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;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}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4576
4576
|
}
|
|
4577
4577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, decorators: [{
|
|
4578
4578
|
type: Component,
|
|
4579
|
-
args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/
|
|
4579
|
+
args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\" (click)=\"onStepSelected(index)\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n <span class=\"label\">{{ label }}</span>\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;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;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}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"] }]
|
|
4580
4580
|
}], propDecorators: { label: [{
|
|
4581
4581
|
type: Input
|
|
4582
4582
|
}], isVisited: [{
|
|
@@ -6371,7 +6371,7 @@ class TabsComponentModule {
|
|
|
6371
6371
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabsComponentModule, declarations: [TabsComponent,
|
|
6372
6372
|
TabDirective], imports: [CommonModule,
|
|
6373
6373
|
MatTabsModule,
|
|
6374
|
-
IconComponentModule] }); }
|
|
6374
|
+
IconComponentModule], exports: [TabsComponent] }); }
|
|
6375
6375
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabsComponentModule, imports: [CommonModule,
|
|
6376
6376
|
MatTabsModule,
|
|
6377
6377
|
IconComponentModule] }); }
|
|
@@ -6387,7 +6387,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
6387
6387
|
CommonModule,
|
|
6388
6388
|
MatTabsModule,
|
|
6389
6389
|
IconComponentModule
|
|
6390
|
-
]
|
|
6390
|
+
],
|
|
6391
|
+
exports: [TabsComponent]
|
|
6391
6392
|
}]
|
|
6392
6393
|
}] });
|
|
6393
6394
|
|