@testgorilla/tgo-ui 2.20.10 → 2.20.11
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/segmented-button/segmented-button.component.d.ts +0 -1
- package/components/step/step.component.d.ts +26 -2
- package/components/step/step.component.module.d.ts +2 -1
- package/components/stepper/stepper.model.d.ts +4 -0
- package/esm2022/components/segmented-button/segmented-button.component.mjs +4 -7
- package/esm2022/components/step/step.component.mjs +18 -3
- package/esm2022/components/step/step.component.module.mjs +5 -4
- package/esm2022/components/stepper/stepper.component.mjs +3 -3
- package/esm2022/components/stepper/stepper.model.mjs +1 -1
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/testgorilla-tgo-ui.mjs +25 -14
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +2 -2
- package/public-api.d.ts +2 -0
|
@@ -8156,6 +8156,14 @@ class StepComponent {
|
|
|
8156
8156
|
* @memberof StepComponent
|
|
8157
8157
|
*/
|
|
8158
8158
|
this.boldLabel = false;
|
|
8159
|
+
/**
|
|
8160
|
+
*
|
|
8161
|
+
* Always show step icon instead of number
|
|
8162
|
+
*
|
|
8163
|
+
* @type {boolean}
|
|
8164
|
+
* @memberof StepComponent
|
|
8165
|
+
*/
|
|
8166
|
+
this.alwaysShowIcon = false;
|
|
8159
8167
|
/**
|
|
8160
8168
|
* Event emitted when the step was clicked.
|
|
8161
8169
|
* @type {number}
|
|
@@ -8173,11 +8181,11 @@ class StepComponent {
|
|
|
8173
8181
|
this.stepSelected.emit(index);
|
|
8174
8182
|
}
|
|
8175
8183
|
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: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n 'vertical': position === 'vertical'\n }\"\n [attr.theme]=\"applicationTheme\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img\n *ngIf=\"hasLastStepDefaultIcon; 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; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\">\n {{ label }}\n </div>\n\n <div *ngIf=\"safeDescription\" [innerHTML]=\"safeDescription\"></div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\"\n [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\"\n (click)=\"onStepSelected(index)\"\n [attr.theme]=\"applicationTheme\"\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</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#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.vertical{flex-direction:row;padding:24px 12px;max-width:238px}.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{text-align:start;-webkit-line-clamp:3}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;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 .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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8184
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n 'disabled': disabled,\n 'vertical': position === 'vertical'\n }\"\n [attr.theme]=\"applicationTheme\"\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]=\"'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\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\" [matTooltip]=\"labelTooltip ?? ''\">\n {{ label }}\n </div>\n\n <div *ngIf=\"safeDescription\" [innerHTML]=\"safeDescription\"></div>\n\n <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\" [ngTemplateOutletContext]=\"{ label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\"\n [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\"\n (click)=\"onStepSelected(index)\"\n [attr.theme]=\"applicationTheme\"\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</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#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.vertical{flex-direction:row;padding:24px 12px;max-width:238px}.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{text-align:start;-webkit-line-clamp:3}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;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 .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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8177
8185
|
}
|
|
8178
8186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponent, decorators: [{
|
|
8179
8187
|
type: Component,
|
|
8180
|
-
args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n 'vertical': position === 'vertical'\n }\"\n [attr.theme]=\"applicationTheme\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img\n *ngIf=\"hasLastStepDefaultIcon; 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; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\">\n {{ label }}\n </div>\n\n <div *ngIf=\"safeDescription\" [innerHTML]=\"safeDescription\"></div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\"\n [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\"\n (click)=\"onStepSelected(index)\"\n [attr.theme]=\"applicationTheme\"\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</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#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.vertical{flex-direction:row;padding:24px 12px;max-width:238px}.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{text-align:start;-webkit-line-clamp:3}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;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 .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}\n"] }]
|
|
8188
|
+
args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n 'disabled': disabled,\n 'vertical': position === 'vertical'\n }\"\n [attr.theme]=\"applicationTheme\"\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]=\"'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\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\" [matTooltip]=\"labelTooltip ?? ''\">\n {{ label }}\n </div>\n\n <div *ngIf=\"safeDescription\" [innerHTML]=\"safeDescription\"></div>\n\n <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\" [ngTemplateOutletContext]=\"{ label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\"\n [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\"\n (click)=\"onStepSelected(index)\"\n [attr.theme]=\"applicationTheme\"\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</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#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.vertical{flex-direction:row;padding:24px 12px;max-width:238px}.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{text-align:start;-webkit-line-clamp:3}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;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 .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}\n"] }]
|
|
8181
8189
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8182
8190
|
type: Optional
|
|
8183
8191
|
}, {
|
|
@@ -8217,6 +8225,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8217
8225
|
type: Input
|
|
8218
8226
|
}], boldLabel: [{
|
|
8219
8227
|
type: Input
|
|
8228
|
+
}], descriptionTpl: [{
|
|
8229
|
+
type: Input
|
|
8230
|
+
}], labelTooltip: [{
|
|
8231
|
+
type: Input
|
|
8232
|
+
}], alwaysShowIcon: [{
|
|
8233
|
+
type: Input
|
|
8220
8234
|
}], stepSelected: [{
|
|
8221
8235
|
type: Output
|
|
8222
8236
|
}] } });
|
|
@@ -8466,11 +8480,11 @@ class StepperComponent {
|
|
|
8466
8480
|
this.isOpen = false;
|
|
8467
8481
|
}
|
|
8468
8482
|
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 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8469
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StepperComponent, selector: "ui-stepper", inputs: { steps: "steps", selectedIndex: "selectedIndex", lastStepFinalIcon: "lastStepFinalIcon", language: "language", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", position: "position", ariaRequired: "ariaRequired" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-container>\n <div class=\"stepper-wrapper\" [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 ></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 <div class=\"progress-step\">\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 : language) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n <ng-template #finalStep>\n <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : language }}</span>\n </ng-template>\n </div>\n </div>\n\n <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n <ui-icon [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}.test:after{content:\"22222ffff\";font-family:Roboto,sans-serif}.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:238px;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 .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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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"], 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$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StepperComponent, selector: "ui-stepper", inputs: { steps: "steps", selectedIndex: "selectedIndex", lastStepFinalIcon: "lastStepFinalIcon", language: "language", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", position: "position", ariaRequired: "ariaRequired" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-container>\n <div class=\"stepper-wrapper\" [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 ></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 <div class=\"progress-step\">\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 : language) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n <ng-template #finalStep>\n <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : language }}</span>\n </ng-template>\n </div>\n </div>\n\n <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n <ui-icon [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}.test:after{content:\"22222ffff\";font-family:Roboto,sans-serif}.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:238px;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 .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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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"], 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$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8470
8484
|
}
|
|
8471
8485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepperComponent, decorators: [{
|
|
8472
8486
|
type: Component,
|
|
8473
|
-
args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"stepper-wrapper\" [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 ></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 <div class=\"progress-step\">\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 : language) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n <ng-template #finalStep>\n <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : language }}</span>\n </ng-template>\n </div>\n </div>\n\n <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n <ui-icon [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}.test:after{content:\"22222ffff\";font-family:Roboto,sans-serif}.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:238px;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 .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"] }]
|
|
8487
|
+
args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"stepper-wrapper\" [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 ></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 <div class=\"progress-step\">\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 : language) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n <ng-template #finalStep>\n <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : language }}</span>\n </ng-template>\n </div>\n </div>\n\n <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n <ui-icon [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}.test:after{content:\"22222ffff\";font-family:Roboto,sans-serif}.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:238px;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 .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"] }]
|
|
8474
8488
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8475
8489
|
type: Optional
|
|
8476
8490
|
}, {
|
|
@@ -8501,14 +8515,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8501
8515
|
|
|
8502
8516
|
class StepComponentModule {
|
|
8503
8517
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8504
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StepComponentModule, declarations: [StepComponent], imports: [CommonModule, IconComponentModule], exports: [StepComponent] }); }
|
|
8505
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponentModule, imports: [CommonModule, IconComponentModule] }); }
|
|
8518
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StepComponentModule, declarations: [StepComponent], imports: [CommonModule, IconComponentModule, MatTooltipModule], exports: [StepComponent] }); }
|
|
8519
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponentModule, imports: [CommonModule, IconComponentModule, MatTooltipModule] }); }
|
|
8506
8520
|
}
|
|
8507
8521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepComponentModule, decorators: [{
|
|
8508
8522
|
type: NgModule,
|
|
8509
8523
|
args: [{
|
|
8510
8524
|
declarations: [StepComponent],
|
|
8511
|
-
imports: [CommonModule, IconComponentModule],
|
|
8525
|
+
imports: [CommonModule, IconComponentModule, MatTooltipModule],
|
|
8512
8526
|
exports: [StepComponent],
|
|
8513
8527
|
}]
|
|
8514
8528
|
}] });
|
|
@@ -11030,6 +11044,7 @@ class SegmentedButtonComponent {
|
|
|
11030
11044
|
set value(v) {
|
|
11031
11045
|
this._value = v;
|
|
11032
11046
|
this.onChange(v);
|
|
11047
|
+
this.buttonSelected.emit(v);
|
|
11033
11048
|
}
|
|
11034
11049
|
get value() {
|
|
11035
11050
|
return this._value;
|
|
@@ -11077,10 +11092,6 @@ class SegmentedButtonComponent {
|
|
|
11077
11092
|
registerOnTouched(fn) {
|
|
11078
11093
|
this.onTouch = fn;
|
|
11079
11094
|
}
|
|
11080
|
-
manualChangeValue({ value }) {
|
|
11081
|
-
this.value = value;
|
|
11082
|
-
this.buttonSelected.emit(value);
|
|
11083
|
-
}
|
|
11084
11095
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentedButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11085
11096
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SegmentedButtonComponent, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig", disabled: "disabled", fullWidth: "fullWidth", value: "value", applicationTheme: "applicationTheme" }, outputs: { buttonSelected: "buttonSelected" }, providers: [
|
|
11086
11097
|
{
|
|
@@ -11088,7 +11099,7 @@ class SegmentedButtonComponent {
|
|
|
11088
11099
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
11089
11100
|
multi: true,
|
|
11090
11101
|
},
|
|
11091
|
-
], ngImport: i0, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11102
|
+
], ngImport: i0, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [(value)]=\"value\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11092
11103
|
}
|
|
11093
11104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
11094
11105
|
type: Component,
|
|
@@ -11098,7 +11109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
11098
11109
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
11099
11110
|
multi: true,
|
|
11100
11111
|
},
|
|
11101
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n
|
|
11112
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [(value)]=\"value\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"] }]
|
|
11102
11113
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11103
11114
|
type: Optional
|
|
11104
11115
|
}, {
|
|
@@ -11861,5 +11872,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
11861
11872
|
* Generated bundle index. Do not edit.
|
|
11862
11873
|
*/
|
|
11863
11874
|
|
|
11864
|
-
export { AMOUNT_TAG_WIDTH, AccordionComponent, AccordionComponentModule, AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarBackgroundColor, AvatarComponent, AvatarComponentModule, AvatarSize, BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, Color, ColumnAlignment, ColumnAlignmentEnum, ColumnType, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DeprecatedPaginatorComponent, DeprecatedPaginatorComponentModule, DeprecatedTableComponent, DeprecatedTableComponentModule, DialogComponent, DialogComponentModule, DialogService, DividerComponent, DividerComponentModule, DropdownComponent, DropdownComponentModule, DropdownVariation, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, EmptyStateComponent, EmptyStateComponentModule, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, IS_MOBILE_TOKEN, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, IconsService, Language, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, OverflowMenuComponent, OverflowMenuComponentModule, Padding, PageHeaderComponent, PageHeaderModule, PaginatorComponent, PaginatorComponentModule, PasswordComponent, PasswordComponentModule, PasswordStrengthComponent, PasswordStrengthComponentModule, PhoneInputComponent, PhoneInputComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadialProgressComponent, RadialProgressComponentModule, RadialProgressSizeEnum, RadialProgressSizeValue, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, RebrandBadgeColorEnum, ScaleComponent, ScaleComponentModule, SegmentedBarComponent, SegmentedBarComponentModule, SegmentedButtonComponent, SegmentedButtonComponentModule, SideSheetComponent, SideSheetComponentModule, SideSheetService, SkeletonComponent, SliderComponent, SliderComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, StepperComponent, StepperComponentModule, TabDirective, TableComponent, TableComponentModule, TabsComponent, TabsComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, iconSize };
|
|
11875
|
+
export { AMOUNT_TAG_WIDTH, AccordionComponent, AccordionComponentModule, AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarBackgroundColor, AvatarComponent, AvatarComponentModule, AvatarSize, BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, Color, ColumnAlignment, ColumnAlignmentEnum, ColumnType, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DeprecatedPaginatorComponent, DeprecatedPaginatorComponentModule, DeprecatedTableComponent, DeprecatedTableComponentModule, DialogComponent, DialogComponentModule, DialogService, DividerComponent, DividerComponentModule, DropdownComponent, DropdownComponentModule, DropdownVariation, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, EmptyStateComponent, EmptyStateComponentModule, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, IS_MOBILE_TOKEN, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, IconsService, Language, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, OverflowMenuComponent, OverflowMenuComponentModule, Padding, PageHeaderComponent, PageHeaderModule, PaginatorComponent, PaginatorComponentModule, PasswordComponent, PasswordComponentModule, PasswordStrengthComponent, PasswordStrengthComponentModule, PhoneInputComponent, PhoneInputComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadialProgressComponent, RadialProgressComponentModule, RadialProgressSizeEnum, RadialProgressSizeValue, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, RebrandBadgeColorEnum, ScaleComponent, ScaleComponentModule, SegmentedBarComponent, SegmentedBarComponentModule, SegmentedButtonComponent, SegmentedButtonComponentModule, SideSheetComponent, SideSheetComponentModule, SideSheetService, SkeletonComponent, SliderComponent, SliderComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, StepComponent, StepComponentModule, StepperComponent, StepperComponentModule, TabDirective, TableComponent, TableComponentModule, TabsComponent, TabsComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, iconSize };
|
|
11865
11876
|
//# sourceMappingURL=testgorilla-tgo-ui.mjs.map
|