@testgorilla/tgo-ui 2.26.10 → 2.26.12
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/spider-chart/spider-chart.component.d.ts +2 -0
- package/components/spider-chart/spider-chart.module.d.ts +3 -2
- package/components/universal-skills-spider-charts/universal-skills-spider-charts.component.d.ts +15 -1
- package/esm2022/components/card/card.component.mjs +2 -2
- package/esm2022/components/spider-chart/spider-chart.component.mjs +22 -4
- package/esm2022/components/spider-chart/spider-chart.module.mjs +4 -1
- package/esm2022/components/step/step.component.mjs +2 -2
- package/esm2022/components/stepper/stepper.component.mjs +3 -3
- package/esm2022/components/universal-skills-spider-charts/universal-skills-spider-charts.component.mjs +54 -31
- package/fesm2022/testgorilla-tgo-ui.mjs +80 -38
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
|
|
12
12
|
import * as i2$1 from '@angular/material/progress-bar';
|
|
13
13
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
14
14
|
import * as i4$6 from 'rxjs';
|
|
15
|
-
import { BehaviorSubject, map, Subject, combineLatest, startWith, debounceTime, ReplaySubject, switchMap, tap, Subscription, fromEvent, take, filter, first, delay
|
|
15
|
+
import { BehaviorSubject, map, Subject, combineLatest, startWith, debounceTime, ReplaySubject, switchMap, tap, Subscription, fromEvent, take, filter, first, delay } from 'rxjs';
|
|
16
16
|
import { HttpClientModule } from '@angular/common/http';
|
|
17
17
|
import * as i2$2 from '@angular/material/button';
|
|
18
18
|
import { MatButtonModule } from '@angular/material/button';
|
|
@@ -5967,11 +5967,11 @@ class CardComponent {
|
|
|
5967
5967
|
return this.selected && this.variant !== 'educative' && this.variant !== 'premium' && this.variant !== 'ai' && this.variant !== 'actionDriver' && this.variant !== 'neutral';
|
|
5968
5968
|
}
|
|
5969
5969
|
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 }); }
|
|
5970
|
-
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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\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:
|
|
5970
|
+
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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\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: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: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{box-shadow:0 4px 16px #24242414,0 0 0 2px #242424}.card-container[theme=dark].state:focus,.card-container[theme=light].state:focus{box-shadow:0 0 0 2px #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{box-shadow:0 0 0 2px #242424}.card-container[theme=dark]:focus-visible,.card-container[theme=light]:focus-visible{outline-offset:4px;outline:2px solid #242424;box-shadow:unset;animation:focus-ring-animation-main .4s forwards;border:2px solid #242424}.card-container[theme=dark]:focus-visible:before,.card-container[theme=light]:focus-visible: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 }); }
|
|
5971
5971
|
}
|
|
5972
5972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
|
|
5973
5973
|
type: Component,
|
|
5974
|
-
args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\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:
|
|
5974
|
+
args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" [ngClass]=\"[classes, isSelected ? 'selected' : '']\" [attr.theme]=\"applicationTheme\" tabindex=\"0\" >\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: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: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{box-shadow:0 4px 16px #24242414,0 0 0 2px #242424}.card-container[theme=dark].state:focus,.card-container[theme=light].state:focus{box-shadow:0 0 0 2px #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{box-shadow:0 0 0 2px #242424}.card-container[theme=dark]:focus-visible,.card-container[theme=light]:focus-visible{outline-offset:4px;outline:2px solid #242424;box-shadow:unset;animation:focus-ring-animation-main .4s forwards;border:2px solid #242424}.card-container[theme=dark]:focus-visible:before,.card-container[theme=light]:focus-visible: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"] }]
|
|
5975
5975
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5976
5976
|
type: Optional
|
|
5977
5977
|
}, {
|
|
@@ -11613,11 +11613,11 @@ class StepComponent {
|
|
|
11613
11613
|
}
|
|
11614
11614
|
}
|
|
11615
11615
|
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 }); }
|
|
11616
|
-
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;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{z-index:-1;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 }); }
|
|
11616
|
+
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 }); }
|
|
11617
11617
|
}
|
|
11618
11618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponent, decorators: [{
|
|
11619
11619
|
type: Component,
|
|
11620
|
-
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;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{z-index:-1;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"] }]
|
|
11620
|
+
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"] }]
|
|
11621
11621
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11622
11622
|
type: Optional
|
|
11623
11623
|
}, {
|
|
@@ -11966,11 +11966,11 @@ class StepperComponent {
|
|
|
11966
11966
|
}
|
|
11967
11967
|
}
|
|
11968
11968
|
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 }); }
|
|
11969
|
-
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,.stepper-wrapper[theme=light] .separator-line{z-index:-1}.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 }); }
|
|
11969
|
+
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 }); }
|
|
11970
11970
|
}
|
|
11971
11971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepperComponent, decorators: [{
|
|
11972
11972
|
type: Component,
|
|
11973
|
-
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,.stepper-wrapper[theme=light] .separator-line{z-index:-1}.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"] }]
|
|
11973
|
+
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"] }]
|
|
11974
11974
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11975
11975
|
type: Optional
|
|
11976
11976
|
}, {
|
|
@@ -16330,12 +16330,29 @@ class SpiderChartComponent {
|
|
|
16330
16330
|
return;
|
|
16331
16331
|
return !chartInstance.data.datasets[datasetIndex].hidden;
|
|
16332
16332
|
}
|
|
16333
|
+
getFirstLine(label) {
|
|
16334
|
+
const words = label.split(' ');
|
|
16335
|
+
let firstLine = '';
|
|
16336
|
+
for (const word of words) {
|
|
16337
|
+
if ((firstLine + word).length <= 20) {
|
|
16338
|
+
firstLine += (firstLine ? ' ' : '') + word;
|
|
16339
|
+
}
|
|
16340
|
+
else {
|
|
16341
|
+
break;
|
|
16342
|
+
}
|
|
16343
|
+
}
|
|
16344
|
+
return firstLine;
|
|
16345
|
+
}
|
|
16346
|
+
getSecondLine(label) {
|
|
16347
|
+
const firstLine = this.getFirstLine(label);
|
|
16348
|
+
return label.substring(firstLine.length).trim();
|
|
16349
|
+
}
|
|
16333
16350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n <div class=\"label\"
|
|
16351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$b.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
16335
16352
|
}
|
|
16336
16353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpiderChartComponent, decorators: [{
|
|
16337
16354
|
type: Component,
|
|
16338
|
-
args: [{ selector: 'ui-spider-chart', template: "<div class=\"container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n <div class=\"label\"
|
|
16355
|
+
args: [{ selector: 'ui-spider-chart', template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"label + ': ' + spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"] }]
|
|
16339
16356
|
}], propDecorators: { size: [{
|
|
16340
16357
|
type: Input
|
|
16341
16358
|
}], spiderChartData: [{
|
|
@@ -16373,6 +16390,7 @@ class SpiderChartComponentModule {
|
|
|
16373
16390
|
NgChartsModule,
|
|
16374
16391
|
MatTooltipModule,
|
|
16375
16392
|
UiTranslatePipe,
|
|
16393
|
+
MemoizeFuncPipe,
|
|
16376
16394
|
SpinnerComponentModule,
|
|
16377
16395
|
CommonModule], exports: [SpiderChartComponent] }); }
|
|
16378
16396
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpiderChartComponentModule, imports: [NgChartsModule,
|
|
@@ -16391,6 +16409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
16391
16409
|
NgChartsModule,
|
|
16392
16410
|
MatTooltipModule,
|
|
16393
16411
|
UiTranslatePipe,
|
|
16412
|
+
MemoizeFuncPipe,
|
|
16394
16413
|
SpinnerComponentModule,
|
|
16395
16414
|
CommonModule,
|
|
16396
16415
|
],
|
|
@@ -16847,6 +16866,20 @@ class UniversalSkillsSpiderChartsComponent {
|
|
|
16847
16866
|
* @memberof UniversalSkillsSpiderChartsComponent
|
|
16848
16867
|
*/
|
|
16849
16868
|
this.applicationTheme = 'light';
|
|
16869
|
+
/**
|
|
16870
|
+
* Defines if the component is loading
|
|
16871
|
+
* @property loading
|
|
16872
|
+
* @type {boolean}
|
|
16873
|
+
* @memberof UniversalSkillsSpiderChartsComponent
|
|
16874
|
+
*/
|
|
16875
|
+
this.loading = false;
|
|
16876
|
+
/**
|
|
16877
|
+
* Defines the size of the spider chart
|
|
16878
|
+
* @property size
|
|
16879
|
+
* @type {'small' | 'large'}
|
|
16880
|
+
* @memberof UniversalSkillsSpiderChartsComponent
|
|
16881
|
+
*/
|
|
16882
|
+
this.size = 'large';
|
|
16850
16883
|
this.translationContext = 'UNIVERSAL_SKILLS_REPORT.';
|
|
16851
16884
|
this.skillAreaSpiderChartData = [];
|
|
16852
16885
|
if (defaultAppTheme) {
|
|
@@ -16864,43 +16897,48 @@ class UniversalSkillsSpiderChartsComponent {
|
|
|
16864
16897
|
Object.values(this.skillAreaGroupMap).forEach(skillAreaGroup => {
|
|
16865
16898
|
const labelObservables = skillAreaGroup.skillAreaList.map(skillArea => this.uiTranslatePipe.transform(`${this.translationContext}SKILL_AREA_TYPES.${skillArea.skillAreaName}.TITLE`));
|
|
16866
16899
|
const labelDescriptionObservables = skillAreaGroup.skillAreaList.map(skillArea => this.uiTranslatePipe.transform(`${this.translationContext}SKILL_AREA_TYPES.${skillArea.skillAreaName}.DESCRIPTION`));
|
|
16867
|
-
|
|
16868
|
-
|
|
16869
|
-
|
|
16870
|
-
|
|
16871
|
-
|
|
16872
|
-
description: skillAreaGroup.description,
|
|
16873
|
-
spiderChartData: {
|
|
16874
|
-
labels: labels,
|
|
16875
|
-
labelDescription: labelDescriptions,
|
|
16876
|
-
plotData: skillAreaGroup.skillAreaList?.[0]?.poolPercentileScoring !== undefined
|
|
16877
|
-
? [
|
|
16878
|
-
{
|
|
16879
|
-
data: skillAreaGroup.skillAreaList.map(skillArea => skillArea.percentileScoring),
|
|
16880
|
-
databaseLabel: "This candidate's score",
|
|
16881
|
-
},
|
|
16882
|
-
{
|
|
16883
|
-
data: skillAreaGroup.skillAreaList.map(skillArea => skillArea.poolPercentileScoring ?? 0),
|
|
16884
|
-
databaseLabel: 'Average score of all candidates',
|
|
16885
|
-
},
|
|
16886
|
-
]
|
|
16887
|
-
: [
|
|
16888
|
-
{
|
|
16889
|
-
data: skillAreaGroup.skillAreaList.map(skillArea => skillArea.percentileScoring),
|
|
16890
|
-
databaseLabel: "This candidate's score",
|
|
16891
|
-
},
|
|
16892
|
-
],
|
|
16893
|
-
},
|
|
16900
|
+
const allObservables = [...labelObservables, ...labelDescriptionObservables];
|
|
16901
|
+
const translations = [];
|
|
16902
|
+
allObservables.forEach(observable => {
|
|
16903
|
+
observable.pipe(take(1)).subscribe(translation => {
|
|
16904
|
+
translations.push(translation);
|
|
16894
16905
|
});
|
|
16895
16906
|
});
|
|
16907
|
+
const labels = translations.slice(0, labelObservables.length);
|
|
16908
|
+
const labelDescriptions = translations.slice(labelObservables.length);
|
|
16909
|
+
this.skillAreaSpiderChartData.push({
|
|
16910
|
+
title: skillAreaGroup.title,
|
|
16911
|
+
description: skillAreaGroup.description,
|
|
16912
|
+
spiderChartData: {
|
|
16913
|
+
labels: labels,
|
|
16914
|
+
labelDescription: labelDescriptions,
|
|
16915
|
+
plotData: skillAreaGroup.skillAreaList?.[0]?.poolPercentileScoring !== undefined
|
|
16916
|
+
? [
|
|
16917
|
+
{
|
|
16918
|
+
data: skillAreaGroup.skillAreaList.map(skillArea => skillArea.percentileScoring),
|
|
16919
|
+
databaseLabel: "This candidate's score",
|
|
16920
|
+
},
|
|
16921
|
+
{
|
|
16922
|
+
data: skillAreaGroup.skillAreaList.map(skillArea => skillArea.poolPercentileScoring ?? 0),
|
|
16923
|
+
databaseLabel: 'Average score of all candidates',
|
|
16924
|
+
},
|
|
16925
|
+
]
|
|
16926
|
+
: [
|
|
16927
|
+
{
|
|
16928
|
+
data: skillAreaGroup.skillAreaList.map(skillArea => skillArea.percentileScoring),
|
|
16929
|
+
databaseLabel: "This candidate's score",
|
|
16930
|
+
},
|
|
16931
|
+
],
|
|
16932
|
+
},
|
|
16933
|
+
});
|
|
16896
16934
|
});
|
|
16897
16935
|
}
|
|
16898
16936
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: UniversalSkillsService }, { token: UiTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16899
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UniversalSkillsSpiderChartsComponent, selector: "ui-universal-skills-spider-charts", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList" }, ngImport: i0, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: ["size", "spiderChartData", "stepSize", "ariaLabel", "loading", "applicationTheme"] }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16937
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: UniversalSkillsSpiderChartsComponent, selector: "ui-universal-skills-spider-charts", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList", loading: "loading", size: "size" }, ngImport: i0, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\" [loading]=\"loading\" [size]=\"size\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: ["size", "spiderChartData", "stepSize", "ariaLabel", "loading", "applicationTheme"] }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16900
16938
|
}
|
|
16901
16939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, decorators: [{
|
|
16902
16940
|
type: Component,
|
|
16903
|
-
args: [{ selector: 'ui-universal-skills-spider-charts', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"] }]
|
|
16941
|
+
args: [{ selector: 'ui-universal-skills-spider-charts', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion class=\"universal-skills-spider-charts\" [label]=\"(spiderChartData.title | uiTranslate | async) || ''\" variant=\"filter\">\n <ui-spider-chart [spiderChartData]=\"spiderChartData.spiderChartData\" [loading]=\"loading\" [size]=\"size\"></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"] }]
|
|
16904
16942
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
16905
16943
|
type: Optional
|
|
16906
16944
|
}, {
|
|
@@ -16910,6 +16948,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
16910
16948
|
type: Input
|
|
16911
16949
|
}], skillAreaDataList: [{
|
|
16912
16950
|
type: Input
|
|
16951
|
+
}], loading: [{
|
|
16952
|
+
type: Input
|
|
16953
|
+
}], size: [{
|
|
16954
|
+
type: Input
|
|
16913
16955
|
}] } });
|
|
16914
16956
|
|
|
16915
16957
|
class UniversalSkillsSpiderChartsComponentModule {
|