@flywheel-io/vision 1.0.2 → 1.0.4
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/README.md +1 -1
- package/components/alert/alert.component.d.ts +1 -1
- package/components/card/card.component.d.ts +1 -1
- package/components/chip/chip.component.d.ts +2 -2
- package/components/dialog/dialog-confirm.component.d.ts +2 -2
- package/components/dialog/dialog-simple.component.d.ts +2 -2
- package/components/dialog/dialog.component.d.ts +1 -1
- package/components/menu/menu-item/menu-item.component.d.ts +3 -2
- package/components/menu/menu.module.d.ts +2 -4
- package/components/section-heading/section-heading.component.d.ts +1 -1
- package/components/stepper/step.component.d.ts +5 -3
- package/components/stepper/stepper.component.d.ts +1 -1
- package/components/tabs/tab/tab.component.d.ts +1 -1
- package/components/tabs/tabs.component.d.ts +2 -1
- package/esm2020/components/alert/alert.component.mjs +1 -1
- package/esm2020/components/card/card.component.mjs +1 -1
- package/esm2020/components/chip/chip.component.mjs +1 -1
- package/esm2020/components/dialog/dialog-confirm.component.mjs +1 -1
- package/esm2020/components/dialog/dialog-simple.component.mjs +1 -1
- package/esm2020/components/dialog/dialog.component.mjs +1 -1
- package/esm2020/components/menu/menu-container/menu-container.component.mjs +3 -3
- package/esm2020/components/menu/menu-item/menu-item.component.mjs +6 -4
- package/esm2020/components/menu/menu.component.mjs +6 -4
- package/esm2020/components/menu/menu.module.mjs +1 -9
- package/esm2020/components/section-heading/section-heading.component.mjs +3 -3
- package/esm2020/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +1 -1
- package/esm2020/components/select-menu/select-menu.component.mjs +1 -1
- package/esm2020/components/stepper/step.component.mjs +56 -3
- package/esm2020/components/stepper/stepper.component.mjs +1 -1
- package/esm2020/components/tabs/tab/tab.component.mjs +1 -1
- package/esm2020/components/tabs/tabs.component.mjs +7 -4
- package/esm2020/components/text-input/text-input.component.mjs +2 -2
- package/fesm2015/flywheel-io-vision.mjs +80 -27
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +80 -27
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -45,14 +45,14 @@ FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
45
45
|
provide: NG_VALUE_ACCESSOR,
|
|
46
46
|
useExisting: FwTextInputComponent,
|
|
47
47
|
multi: true,
|
|
48
|
-
}], 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{
|
|
48
|
+
}], 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,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.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.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-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: i2.FwIconComponent, selector: "fw-icon" }] });
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{ selector: 'fw-text-input', providers: [{
|
|
52
52
|
provide: NG_VALUE_ACCESSOR,
|
|
53
53
|
useExisting: FwTextInputComponent,
|
|
54
54
|
multi: true,
|
|
55
|
-
}], 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{
|
|
55
|
+
}], 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,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.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.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
|
|
56
56
|
}], propDecorators: { disabled: [{
|
|
57
57
|
type: Input
|
|
58
58
|
}], leftIcon: [{
|
|
@@ -18,13 +18,10 @@ import * as i5 from '@angular/cdk/portal';
|
|
|
18
18
|
import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
19
19
|
import { takeUntil } from 'rxjs/operators';
|
|
20
20
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
21
|
-
import * as i3$
|
|
21
|
+
import * as i3$1 from '@angular/forms';
|
|
22
22
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
23
|
-
import * as i3$1 from '@angular/material/checkbox';
|
|
24
|
-
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
25
23
|
import * as i2$1 from '@angular/cdk/menu';
|
|
26
24
|
import { CdkMenuModule, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
27
|
-
import { MatMenuModule } from '@angular/material/menu';
|
|
28
25
|
|
|
29
26
|
class FwIconComponent {
|
|
30
27
|
constructor() {
|
|
@@ -2252,6 +2249,7 @@ class FwMenuItemComponent {
|
|
|
2252
2249
|
this.variant = 'default';
|
|
2253
2250
|
this.size = 'default';
|
|
2254
2251
|
this.showCheckbox = false;
|
|
2252
|
+
this.multiSelect = false;
|
|
2255
2253
|
this.hidden = false;
|
|
2256
2254
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
2257
2255
|
this.click = new EventEmitter();
|
|
@@ -2275,10 +2273,10 @@ class FwMenuItemComponent {
|
|
|
2275
2273
|
}
|
|
2276
2274
|
}
|
|
2277
2275
|
FwMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2278
|
-
FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", variant: "variant", size: "size", title: "title", description: "description", icon: "icon", disabled: "disabled", showCheckbox: "showCheckbox", hidden: "hidden", collapsed: "collapsed", href: "href", target: "target", focused: "focused", selected: "selected" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox\">\n <
|
|
2276
|
+
FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", variant: "variant", size: "size", title: "title", description: "description", icon: "icon", disabled: "disabled", showCheckbox: "showCheckbox", multiSelect: "multiSelect", hidden: "hidden", collapsed: "collapsed", href: "href", target: "target", focused: "focused", selected: "selected" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <input\n type=\"checkbox\"\n value=\"true\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <input\n type=\"radio\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </div>\n <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4>{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\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" }] });
|
|
2279
2277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
2280
2278
|
type: Component,
|
|
2281
|
-
args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox\">\n <
|
|
2279
|
+
args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <input\n type=\"checkbox\"\n value=\"true\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <input\n type=\"radio\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </div>\n <fw-icon *ngIf=\"icon\" class=\"menu-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4>{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex}:host>div{display:flex;flex:1;text-decoration:none}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:100%}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"] }]
|
|
2282
2280
|
}], propDecorators: { value: [{
|
|
2283
2281
|
type: Input
|
|
2284
2282
|
}], variant: [{
|
|
@@ -2295,6 +2293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2295
2293
|
type: Input
|
|
2296
2294
|
}], showCheckbox: [{
|
|
2297
2295
|
type: Input
|
|
2296
|
+
}], multiSelect: [{
|
|
2297
|
+
type: Input
|
|
2298
2298
|
}], hidden: [{
|
|
2299
2299
|
type: Input
|
|
2300
2300
|
}], collapsed: [{
|
|
@@ -2403,6 +2403,9 @@ class FwMenuComponent {
|
|
|
2403
2403
|
if (this.useCheckbox !== undefined) {
|
|
2404
2404
|
item.showCheckbox = this.useCheckbox;
|
|
2405
2405
|
}
|
|
2406
|
+
if (this.multiSelect !== undefined) {
|
|
2407
|
+
item.multiSelect = this.multiSelect;
|
|
2408
|
+
}
|
|
2406
2409
|
item.disabled = this.disabled;
|
|
2407
2410
|
if (this.value) {
|
|
2408
2411
|
item.selected = this.value === item.value || this.value.includes(item.value);
|
|
@@ -2422,7 +2425,7 @@ FwMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
2422
2425
|
provide: NG_VALUE_ACCESSOR,
|
|
2423
2426
|
useExisting: FwMenuComponent,
|
|
2424
2427
|
multi: true,
|
|
2425
|
-
}], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"fw-menu\"\n
|
|
2428
|
+
}], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"fw-menu\"\n [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: openWidth || 'inherit', collapsedWidth: collapsedWidth || '44px'}}\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%}\n"], animations: [
|
|
2426
2429
|
trigger('openClose', [
|
|
2427
2430
|
// ...
|
|
2428
2431
|
state('open', style({
|
|
@@ -2455,7 +2458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2455
2458
|
animate('.33s ease-in-out'),
|
|
2456
2459
|
]),
|
|
2457
2460
|
]),
|
|
2458
|
-
], template: "<div\n class=\"fw-menu\"\n
|
|
2461
|
+
], template: "<div\n class=\"fw-menu\"\n [@openClose]=\"{value: collapsed?'closed':'open', params: {openWidth: openWidth || 'inherit', collapsedWidth: collapsedWidth || '44px'}}\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;max-height:100%}\n"] }]
|
|
2459
2462
|
}], propDecorators: { disabled: [{
|
|
2460
2463
|
type: Input
|
|
2461
2464
|
}], size: [{
|
|
@@ -2521,14 +2524,14 @@ FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
2521
2524
|
provide: NG_VALUE_ACCESSOR,
|
|
2522
2525
|
useExisting: FwTextInputComponent,
|
|
2523
2526
|
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 <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{
|
|
2527
|
+
}], 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,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.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.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-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
2528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, decorators: [{
|
|
2526
2529
|
type: Component,
|
|
2527
2530
|
args: [{ selector: 'fw-text-input', providers: [{
|
|
2528
2531
|
provide: NG_VALUE_ACCESSOR,
|
|
2529
2532
|
useExisting: FwTextInputComponent,
|
|
2530
2533
|
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 <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{
|
|
2534
|
+
}], 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,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px}.full-container .error-text{color:var(--red-base);display:none}.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.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-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
2535
|
}], propDecorators: { disabled: [{
|
|
2533
2536
|
type: Input
|
|
2534
2537
|
}], leftIcon: [{
|
|
@@ -2621,10 +2624,10 @@ class FwMenuContainerComponent {
|
|
|
2621
2624
|
}
|
|
2622
2625
|
}
|
|
2623
2626
|
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 });
|
|
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
|
|
2627
|
+
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>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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 });
|
|
2625
2628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
|
|
2626
2629
|
type: Component,
|
|
2627
|
-
args: [{ selector: 'fw-menu-container', encapsulation: ViewEncapsulation.None, template: "<div
|
|
2630
|
+
args: [{ selector: 'fw-menu-container', encapsulation: ViewEncapsulation.None, template: "<div>\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"] }]
|
|
2628
2631
|
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { width: [{
|
|
2629
2632
|
type: Input
|
|
2630
2633
|
}], maxHeight: [{
|
|
@@ -2680,8 +2683,6 @@ FwMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
|
2680
2683
|
FormsModule,
|
|
2681
2684
|
FwIconButtonModule,
|
|
2682
2685
|
FwIconModule,
|
|
2683
|
-
MatCheckboxModule,
|
|
2684
|
-
MatMenuModule,
|
|
2685
2686
|
FwTextInputModule], exports: [FwMenuComponent,
|
|
2686
2687
|
FwMenuContainerComponent,
|
|
2687
2688
|
FwMenuHeaderComponent,
|
|
@@ -2692,8 +2693,6 @@ FwMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
|
2692
2693
|
FormsModule,
|
|
2693
2694
|
FwIconButtonModule,
|
|
2694
2695
|
FwIconModule,
|
|
2695
|
-
MatCheckboxModule,
|
|
2696
|
-
MatMenuModule,
|
|
2697
2696
|
FwTextInputModule] });
|
|
2698
2697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuModule, decorators: [{
|
|
2699
2698
|
type: NgModule,
|
|
@@ -2704,8 +2703,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2704
2703
|
FormsModule,
|
|
2705
2704
|
FwIconButtonModule,
|
|
2706
2705
|
FwIconModule,
|
|
2707
|
-
MatCheckboxModule,
|
|
2708
|
-
MatMenuModule,
|
|
2709
2706
|
FwTextInputModule,
|
|
2710
2707
|
],
|
|
2711
2708
|
exports: [
|
|
@@ -2883,10 +2880,10 @@ class FwSectionHeadingComponent {
|
|
|
2883
2880
|
}
|
|
2884
2881
|
}
|
|
2885
2882
|
FwSectionHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2886
|
-
FwSectionHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSectionHeadingComponent, selector: "fw-section-heading", inputs: { title: "title", description: "description", backButton: "backButton", icon: "icon" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-icon\"></ng-content>\n <div>\n <h2 class=\"section-heading\">{{ title }}</h2>\n <p *ngIf=\"description\">{{ description }}</p>\n <ng-content select=\"p\"></ng-content>\n </div>\n</div>\n<div class=\"right-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: BackButtonComponent, selector: "fw-back-button" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2883
|
+
FwSectionHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSectionHeadingComponent, selector: "fw-section-heading", inputs: { title: "title", description: "description", backButton: "backButton", icon: "icon" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-icon\"></ng-content>\n <div>\n <h2 class=\"section-heading\">{{ title }}\n <ng-content select=\"fw-chip\"></ng-content>\n </h2>\n <p *ngIf=\"description\">{{ description }}</p>\n <ng-content select=\"p\"></ng-content>\n </div>\n</div>\n<div class=\"right-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { kind: "component", type: BackButtonComponent, selector: "fw-back-button" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2887
2884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSectionHeadingComponent, decorators: [{
|
|
2888
2885
|
type: Component,
|
|
2889
|
-
args: [{ selector: 'fw-section-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-icon\"></ng-content>\n <div>\n <h2 class=\"section-heading\">{{ title }}</h2>\n <p *ngIf=\"description\">{{ description }}</p>\n <ng-content select=\"p\"></ng-content>\n </div>\n</div>\n<div class=\"right-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"] }]
|
|
2886
|
+
args: [{ selector: 'fw-section-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n <fw-back-button *ngIf=\"backButton\"></fw-back-button>\n <fw-icon *ngIf=\"icon\" class=\"heading-icon\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-icon\"></ng-content>\n <div>\n <h2 class=\"section-heading\">{{ title }}\n <ng-content select=\"fw-chip\"></ng-content>\n </h2>\n <p *ngIf=\"description\">{{ description }}</p>\n <ng-content select=\"p\"></ng-content>\n </div>\n</div>\n<div class=\"right-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".fw-section-heading{width:100%;display:flex;justify-content:space-between;align-items:center}.fw-section-heading .heading-area{display:flex;align-items:center;gap:20px}.fw-section-heading .heading-area h2{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p{color:var(--typography-muted);margin:0;display:flex;align-items:center;gap:8px}.fw-section-heading .heading-area p a{color:var(--typography-muted)}.fw-section-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-section-heading .right-content{display:flex;gap:10px}\n"] }]
|
|
2890
2887
|
}], ctorParameters: function () { return []; }, propDecorators: { class: [{
|
|
2891
2888
|
type: HostBinding,
|
|
2892
2889
|
args: ['attr.class']
|
|
@@ -3154,7 +3151,7 @@ FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
3154
3151
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
3155
3152
|
multi: true,
|
|
3156
3153
|
},
|
|
3157
|
-
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <div\n class=\"chip-grid\"\n [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of value | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n more</span>\n <input\n type=\"text\" #textInput\n class=\"placeholder\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n </div>\n <input\n type=\"text\" #textInitialInput\n *ngIf=\"!value || value.length===0\"\n class=\"placeholder\" [placeholder]=\"placeholder\"\n (focus)=\"handleTouched()\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [multiSelect]=\"true\"\n [useCheckbox]=\"useCheckbox\"\n [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n [ngModel]=\"selectedValues\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of filteredOptions\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n <fw-menu-item\n *ngIf=\"filteredOptions && filteredOptions.length===0\"\n [disabled]=\"true\" label=\"No options\">\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 .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\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$
|
|
3154
|
+
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <div\n class=\"chip-grid\"\n [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of value | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n more</span>\n <input\n type=\"text\" #textInput\n class=\"placeholder\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n </div>\n <input\n type=\"text\" #textInitialInput\n *ngIf=\"!value || value.length===0\"\n class=\"placeholder\" [placeholder]=\"placeholder\"\n (focus)=\"handleTouched()\"\n (keydown)=\"handleKeyDown($event)\" (keyup)=\"handleKeyUp($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n <fw-menu\n [multiSelect]=\"true\"\n [useCheckbox]=\"useCheckbox\"\n [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n [ngModel]=\"selectedValues\"\n (ngModelChange)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of filteredOptions\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n <fw-menu-item\n *ngIf=\"filteredOptions && filteredOptions.length===0\"\n [disabled]=\"true\" label=\"No options\">\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 .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:6px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);cursor:pointer}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid .max-exceeded{font-size:12px}\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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }, { 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", "multiSelect", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
|
|
3158
3155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
3159
3156
|
type: Component,
|
|
3160
3157
|
args: [{ selector: 'fw-multi-select', providers: [
|
|
@@ -3287,7 +3284,7 @@ FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
3287
3284
|
useExisting: forwardRef(() => FwSelectMenuComponent),
|
|
3288
3285
|
multi: true,
|
|
3289
3286
|
},
|
|
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$
|
|
3287
|
+
], 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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", "multiSelect", "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"] }] });
|
|
3291
3288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
3292
3289
|
type: Component,
|
|
3293
3290
|
args: [{ selector: 'fw-select', providers: [
|
|
@@ -3650,12 +3647,63 @@ class FwStepComponent {
|
|
|
3650
3647
|
this.select.emit(this.stepNumber);
|
|
3651
3648
|
}
|
|
3652
3649
|
}
|
|
3650
|
+
ngOnChanges(changes) {
|
|
3651
|
+
if (changes.status) {
|
|
3652
|
+
this.active = false;
|
|
3653
|
+
this.disabled = false;
|
|
3654
|
+
this.completed = false;
|
|
3655
|
+
this.done = false;
|
|
3656
|
+
this.color = 'slate';
|
|
3657
|
+
switch (changes.status.currentValue) {
|
|
3658
|
+
case 'active':
|
|
3659
|
+
this.active = true;
|
|
3660
|
+
break;
|
|
3661
|
+
case 'completed':
|
|
3662
|
+
this.completed = true;
|
|
3663
|
+
break;
|
|
3664
|
+
case 'done':
|
|
3665
|
+
this.done = true;
|
|
3666
|
+
break;
|
|
3667
|
+
case 'disabled':
|
|
3668
|
+
this.disabled = true;
|
|
3669
|
+
break;
|
|
3670
|
+
case 'error':
|
|
3671
|
+
this.color = 'error';
|
|
3672
|
+
break;
|
|
3673
|
+
case 'warning':
|
|
3674
|
+
this.color = 'warning';
|
|
3675
|
+
break;
|
|
3676
|
+
case 'info':
|
|
3677
|
+
this.color = 'info';
|
|
3678
|
+
break;
|
|
3679
|
+
case 'default':
|
|
3680
|
+
default:
|
|
3681
|
+
// handled in init
|
|
3682
|
+
break;
|
|
3683
|
+
}
|
|
3684
|
+
}
|
|
3685
|
+
if (changes.active && changes.active.previousValue === false) {
|
|
3686
|
+
this.status = 'active';
|
|
3687
|
+
}
|
|
3688
|
+
if (changes.completed && changes.completed.previousValue === false) {
|
|
3689
|
+
this.status = 'completed';
|
|
3690
|
+
}
|
|
3691
|
+
if (changes.done && changes.done.previousValue === false) {
|
|
3692
|
+
this.status = 'done';
|
|
3693
|
+
}
|
|
3694
|
+
if (changes.disabled && changes.disabled.previousValue === false) {
|
|
3695
|
+
this.status = 'disabled';
|
|
3696
|
+
}
|
|
3697
|
+
if (this.color === 'slate' && !this.active && !this.completed && !this.done && !this.disabled) {
|
|
3698
|
+
this.status = 'default';
|
|
3699
|
+
}
|
|
3700
|
+
}
|
|
3653
3701
|
}
|
|
3654
3702
|
FwStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
3703
|
+
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", status: "status" }, outputs: { select: "select" }, usesOnChanges: true, 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:first-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);color:var(--typography-muted);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 .active .step-connector{background-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:transparent;border:none;color:var(--primary-base)}: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 .done .step-connector{background-color:var(--green-base)}: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{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}: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{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}: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{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}: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{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}: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" }] });
|
|
3656
3704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, decorators: [{
|
|
3657
3705
|
type: Component,
|
|
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
|
|
3706
|
+
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:first-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);color:var(--typography-muted);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 .active .step-connector{background-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:transparent;border:none;color:var(--primary-base)}: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 .done .step-connector{background-color:var(--green-base)}: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{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}: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{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}: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{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}: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{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}: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"] }]
|
|
3659
3707
|
}], propDecorators: { stepNumber: [{
|
|
3660
3708
|
type: Input
|
|
3661
3709
|
}], color: [{
|
|
@@ -3680,6 +3728,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3680
3728
|
type: Input
|
|
3681
3729
|
}], done: [{
|
|
3682
3730
|
type: Input
|
|
3731
|
+
}], status: [{
|
|
3732
|
+
type: Input
|
|
3683
3733
|
}], select: [{
|
|
3684
3734
|
type: Output
|
|
3685
3735
|
}] } });
|
|
@@ -3911,12 +3961,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3911
3961
|
|
|
3912
3962
|
class FwTabsComponent {
|
|
3913
3963
|
constructor() {
|
|
3964
|
+
this.bordered = false;
|
|
3914
3965
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
3915
3966
|
this.select = new EventEmitter();
|
|
3916
3967
|
this.subscriptions = [];
|
|
3917
3968
|
}
|
|
3918
3969
|
get cssClass() {
|
|
3919
|
-
return ['fw-tabs'].join(' ');
|
|
3970
|
+
return ['fw-tabs', this.bordered ? 'bordered' : ''].join(' ');
|
|
3920
3971
|
}
|
|
3921
3972
|
ngOnDestroy() {
|
|
3922
3973
|
for (const subscription of this.subscriptions) {
|
|
@@ -3953,14 +4004,16 @@ class FwTabsComponent {
|
|
|
3953
4004
|
}
|
|
3954
4005
|
}
|
|
3955
4006
|
FwTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3956
|
-
FwTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTabsComponent, selector: "fw-tabs", inputs: { activeTabIndex: "activeTabIndex", activeTab: "activeTab" }, outputs: { select: "select" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "tabs", predicate: FwTabComponent }], ngImport: i0, template: "<ng-content select=\"fw-tab\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;overflow-x:auto;align-items:center}\n"] });
|
|
4007
|
+
FwTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTabsComponent, selector: "fw-tabs", inputs: { activeTabIndex: "activeTabIndex", activeTab: "activeTab", bordered: "bordered" }, outputs: { select: "select" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "tabs", predicate: FwTabComponent }], ngImport: i0, template: "<ng-content select=\"fw-tab\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;overflow-x:auto;align-items:center}:host.bordered{border-bottom:1px solid var(--separations-divider)}\n"] });
|
|
3957
4008
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTabsComponent, decorators: [{
|
|
3958
4009
|
type: Component,
|
|
3959
|
-
args: [{ selector: 'fw-tabs', template: "<ng-content select=\"fw-tab\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;overflow-x:auto;align-items:center}\n"] }]
|
|
4010
|
+
args: [{ selector: 'fw-tabs', template: "<ng-content select=\"fw-tab\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;overflow-x:auto;align-items:center}:host.bordered{border-bottom:1px solid var(--separations-divider)}\n"] }]
|
|
3960
4011
|
}], propDecorators: { activeTabIndex: [{
|
|
3961
4012
|
type: Input
|
|
3962
4013
|
}], activeTab: [{
|
|
3963
4014
|
type: Input
|
|
4015
|
+
}], bordered: [{
|
|
4016
|
+
type: Input
|
|
3964
4017
|
}], select: [{
|
|
3965
4018
|
type: Output
|
|
3966
4019
|
}], tabs: [{
|