@flywheel-io/vision 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/dialog/dialog.component.d.ts +1 -1
- package/components/text-input/text-input.component.d.ts +3 -2
- package/esm2020/components/card/card-content/card-content.component.mjs +2 -2
- package/esm2020/components/dialog/dialog.component.mjs +7 -7
- package/esm2020/components/menu/menu-container/menu-container.component.mjs +1 -1
- package/esm2020/components/select-menu/select-menu.component.mjs +1 -1
- package/esm2020/components/stepper/step.component.mjs +2 -2
- package/esm2020/components/text-input/text-input.component.mjs +10 -6
- package/fesm2015/flywheel-io-vision.mjs +21 -17
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +21 -17
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
- package/scss/material/theme.scss +1 -1
- package/styles.css +128 -128
|
@@ -720,10 +720,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
720
720
|
class FwCardContentComponent {
|
|
721
721
|
}
|
|
722
722
|
FwCardContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
723
|
-
FwCardContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwCardContentComponent, selector: "fw-card-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{overflow:hidden}:host
|
|
723
|
+
FwCardContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwCardContentComponent, selector: "fw-card-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,:host p{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}:host{overflow:hidden}:host h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}:host h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}:host h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}:host h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}:host h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}:host p{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}:host p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow-y:hidden;text-overflow:ellipsis;line-height:140%;color:var(--typography-muted)}:host img{max-width:100%;margin:auto;border-radius:4px;border:1px solid var(--separations-base, #1e3154)}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
724
724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCardContentComponent, decorators: [{
|
|
725
725
|
type: Component,
|
|
726
|
-
args: [{ selector: 'fw-card-content', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.ShadowDom, styles: [":host{overflow:hidden}:host
|
|
726
|
+
args: [{ selector: 'fw-card-content', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.ShadowDom, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2,:host p{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}:host{overflow:hidden}:host h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}:host h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}:host h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}:host h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}:host h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}:host p{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}:host p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow-y:hidden;text-overflow:ellipsis;line-height:140%;color:var(--typography-muted)}:host img{max-width:100%;margin:auto;border-radius:4px;border:1px solid var(--separations-base, #1e3154)}\n"] }]
|
|
727
727
|
}] });
|
|
728
728
|
|
|
729
729
|
class FwCardFooterComponent {
|
|
@@ -951,12 +951,12 @@ class FwDialogHeaderComponent {
|
|
|
951
951
|
}
|
|
952
952
|
FwDialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogHeaderComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
953
953
|
FwDialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwDialogHeaderComponent, selector: "fw-dialog-header", host: { properties: { "style": "this.style" } }, ngImport: i0, template: `
|
|
954
|
-
|
|
954
|
+
<ng-content></ng-content>`, isInline: true });
|
|
955
955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogHeaderComponent, decorators: [{
|
|
956
956
|
type: Component,
|
|
957
957
|
args: [{
|
|
958
958
|
template: `
|
|
959
|
-
|
|
959
|
+
<ng-content></ng-content>`,
|
|
960
960
|
selector: 'fw-dialog-header',
|
|
961
961
|
}]
|
|
962
962
|
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { style: [{
|
|
@@ -967,12 +967,12 @@ class FwDialogContentComponent {
|
|
|
967
967
|
}
|
|
968
968
|
FwDialogContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
969
969
|
FwDialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwDialogContentComponent, selector: "fw-dialog-content", ngImport: i0, template: `
|
|
970
|
-
|
|
970
|
+
<ng-content></ng-content>`, isInline: true });
|
|
971
971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogContentComponent, decorators: [{
|
|
972
972
|
type: Component,
|
|
973
973
|
args: [{
|
|
974
974
|
template: `
|
|
975
|
-
|
|
975
|
+
<ng-content></ng-content>`,
|
|
976
976
|
selector: 'fw-dialog-content',
|
|
977
977
|
}]
|
|
978
978
|
}] });
|
|
@@ -992,12 +992,12 @@ class FwDialogActionsComponent {
|
|
|
992
992
|
}
|
|
993
993
|
FwDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogActionsComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
994
994
|
FwDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwDialogActionsComponent, selector: "fw-dialog-actions", host: { properties: { "style": "this.style" } }, ngImport: i0, template: `
|
|
995
|
-
|
|
995
|
+
<ng-content></ng-content>`, isInline: true });
|
|
996
996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwDialogActionsComponent, decorators: [{
|
|
997
997
|
type: Component,
|
|
998
998
|
args: [{
|
|
999
999
|
template: `
|
|
1000
|
-
|
|
1000
|
+
<ng-content></ng-content>`,
|
|
1001
1001
|
selector: 'fw-dialog-actions',
|
|
1002
1002
|
}]
|
|
1003
1003
|
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { style: [{
|
|
@@ -2481,12 +2481,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2481
2481
|
|
|
2482
2482
|
class FwTextInputComponent {
|
|
2483
2483
|
constructor() {
|
|
2484
|
+
this.disabled = false;
|
|
2484
2485
|
this.size = 'medium';
|
|
2485
2486
|
// we bind this to host because that's where angular form apis put the error classes
|
|
2486
2487
|
this.error = false;
|
|
2487
2488
|
this.value = '';
|
|
2488
2489
|
this.externalControl = null;
|
|
2489
|
-
this.disabled = false;
|
|
2490
2490
|
this.onTouch = () => {
|
|
2491
2491
|
};
|
|
2492
2492
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -2517,19 +2517,21 @@ class FwTextInputComponent {
|
|
|
2517
2517
|
}
|
|
2518
2518
|
}
|
|
2519
2519
|
FwTextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2520
|
-
FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", placeholder: "placeholder", readOnly: "readOnly", size: "size", error: "error" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
|
|
2520
|
+
FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", error: "error" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
|
|
2521
2521
|
provide: NG_VALUE_ACCESSOR,
|
|
2522
2522
|
useExisting: FwTextInputComponent,
|
|
2523
2523
|
multi: true,
|
|
2524
|
-
}], ngImport: i0, template: "<div class=\"full-container\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n <input\n type=\"text\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\">\n\n <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n </div>\n <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n</div>\n", styles: [".full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);
|
|
2524
|
+
}], ngImport: i0, template: "<div class=\"full-container\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n <input\n type=\"text\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\">\n\n <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n </div>\n <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);margin-left:6px}.full-container .error-text{display:none;margin-top:4px;color:var(--red-base);margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
|
|
2525
2525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, decorators: [{
|
|
2526
2526
|
type: Component,
|
|
2527
2527
|
args: [{ selector: 'fw-text-input', providers: [{
|
|
2528
2528
|
provide: NG_VALUE_ACCESSOR,
|
|
2529
2529
|
useExisting: FwTextInputComponent,
|
|
2530
2530
|
multi: true,
|
|
2531
|
-
}], template: "<div class=\"full-container\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n <input\n type=\"text\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\">\n\n <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n </div>\n <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n</div>\n", styles: [".full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);
|
|
2532
|
-
}], propDecorators: {
|
|
2531
|
+
}], template: "<div class=\"full-container\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n <input\n type=\"text\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\">\n\n <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n </div>\n <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);margin-left:6px}.full-container .error-text{display:none;margin-top:4px;color:var(--red-base);margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
|
|
2532
|
+
}], propDecorators: { disabled: [{
|
|
2533
|
+
type: Input
|
|
2534
|
+
}], leftIcon: [{
|
|
2533
2535
|
type: Input
|
|
2534
2536
|
}], rightIcon: [{
|
|
2535
2537
|
type: Input
|
|
@@ -2537,6 +2539,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2537
2539
|
type: Input
|
|
2538
2540
|
}], helperText: [{
|
|
2539
2541
|
type: Input
|
|
2542
|
+
}], errorText: [{
|
|
2543
|
+
type: Input
|
|
2540
2544
|
}], placeholder: [{
|
|
2541
2545
|
type: Input
|
|
2542
2546
|
}], readOnly: [{
|
|
@@ -2617,7 +2621,7 @@ class FwMenuContainerComponent {
|
|
|
2617
2621
|
}
|
|
2618
2622
|
}
|
|
2619
2623
|
FwMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
2620
|
-
FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div cdkMenu>\n <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n placeholder=\"Search\" leftIcon=\"search\" autofocus\n [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n </fw-text-input>\n </div>\n <div class=\"menu-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["leftIcon", "rightIcon", "context", "helperText", "placeholder", "readOnly", "size", "error"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2624
|
+
FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div cdkMenu>\n <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n placeholder=\"Search\" leftIcon=\"search\" autofocus\n [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n </fw-text-input>\n </div>\n <div class=\"menu-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2621
2625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
|
|
2622
2626
|
type: Component,
|
|
2623
2627
|
args: [{ selector: 'fw-menu-container', encapsulation: ViewEncapsulation.None, template: "<div cdkMenu>\n <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n placeholder=\"Search\" leftIcon=\"search\" autofocus\n [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n </fw-text-input>\n </div>\n <div class=\"menu-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
|
|
@@ -3283,7 +3287,7 @@ FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
3283
3287
|
useExisting: forwardRef(() => FwSelectMenuComponent),
|
|
3284
3288
|
multi: true,
|
|
3285
3289
|
},
|
|
3286
|
-
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [(ngModel)]=\"selectTitle\"\n [leftIcon]=\"selectIcon\"\n rightIcon=\"chevron-down\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [disabled]=\"disabled\"\n [ngModel]=\"selectValue\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["leftIcon", "rightIcon", "context", "helperText", "placeholder", "readOnly", "size", "error"] }] });
|
|
3290
|
+
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [(ngModel)]=\"selectTitle\"\n [leftIcon]=\"selectIcon\"\n rightIcon=\"chevron-down\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [disabled]=\"disabled\"\n [ngModel]=\"selectValue\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }] });
|
|
3287
3291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
3288
3292
|
type: Component,
|
|
3289
3293
|
args: [{ selector: 'fw-select', providers: [
|
|
@@ -3648,10 +3652,10 @@ class FwStepComponent {
|
|
|
3648
3652
|
}
|
|
3649
3653
|
}
|
|
3650
3654
|
FwStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3651
|
-
FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done" }, outputs: { select: "select" }, ngImport: i0, template: "<div\n [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n [class.disabled]=\"disabled\"\n [class.active]=\"active\"\n [class.completed]=\"completed\"\n [class.done]=\"done\"\n (click)=\"handleClick()\">\n <div class=\"step-connector\"></div>\n <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n <div\n class=\"step-decorator-wrapper\"\n [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n <fw-icon>done-check</fw-icon>\n </div>\n </div>\n <ng-template #notDone>\n <div *ngIf=\"variant==='number'\" class=\"step-number\">\n <h5>{{ stepNumber }}</h5>\n </div>\n <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n <fw-icon>{{ icon }}</fw-icon>\n </div>\n <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n <ng-content select=\"fw-step-decorator\"></ng-content>\n </div>\n </ng-template>\n <div class=\"step-text\">\n <h4>{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:
|
|
3655
|
+
FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done" }, outputs: { select: "select" }, ngImport: i0, template: "<div\n [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n [class.disabled]=\"disabled\"\n [class.active]=\"active\"\n [class.completed]=\"completed\"\n [class.done]=\"done\"\n (click)=\"handleClick()\">\n <div class=\"step-connector\"></div>\n <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n <div\n class=\"step-decorator-wrapper\"\n [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n <fw-icon>done-check</fw-icon>\n </div>\n </div>\n <ng-template #notDone>\n <div *ngIf=\"variant==='number'\" class=\"step-number\">\n <h5>{{ stepNumber }}</h5>\n </div>\n <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n <fw-icon>{{ icon }}</fw-icon>\n </div>\n <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n <ng-content select=\"fw-step-decorator\"></ng-content>\n </div>\n </ng-template>\n <div class=\"step-text\">\n <h4>{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
|
|
3652
3656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, decorators: [{
|
|
3653
3657
|
type: Component,
|
|
3654
|
-
args: [{ selector: 'fw-step', template: "<div\n [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n [class.disabled]=\"disabled\"\n [class.active]=\"active\"\n [class.completed]=\"completed\"\n [class.done]=\"done\"\n (click)=\"handleClick()\">\n <div class=\"step-connector\"></div>\n <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n <div\n class=\"step-decorator-wrapper\"\n [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n <fw-icon>done-check</fw-icon>\n </div>\n </div>\n <ng-template #notDone>\n <div *ngIf=\"variant==='number'\" class=\"step-number\">\n <h5>{{ stepNumber }}</h5>\n </div>\n <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n <fw-icon>{{ icon }}</fw-icon>\n </div>\n <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n <ng-content select=\"fw-step-decorator\"></ng-content>\n </div>\n </ng-template>\n <div class=\"step-text\">\n <h4>{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:
|
|
3658
|
+
args: [{ selector: 'fw-step', template: "<div\n [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n [class.disabled]=\"disabled\"\n [class.active]=\"active\"\n [class.completed]=\"completed\"\n [class.done]=\"done\"\n (click)=\"handleClick()\">\n <div class=\"step-connector\"></div>\n <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n <div\n class=\"step-decorator-wrapper\"\n [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n <fw-icon>done-check</fw-icon>\n </div>\n </div>\n <ng-template #notDone>\n <div *ngIf=\"variant==='number'\" class=\"step-number\">\n <h5>{{ stepNumber }}</h5>\n </div>\n <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n <fw-icon>{{ icon }}</fw-icon>\n </div>\n <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n <ng-content select=\"fw-step-decorator\"></ng-content>\n </div>\n </ng-template>\n <div class=\"step-text\">\n <h4>{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"] }]
|
|
3655
3659
|
}], propDecorators: { stepNumber: [{
|
|
3656
3660
|
type: Input
|
|
3657
3661
|
}], color: [{
|