@flywheel-io/vision 1.0.1 → 1.0.2

package/components/text-input/text-input.component.d.ts

@@ -1,17 +1,18 @@
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class FwTextInputComponent implements ControlValueAccessor {
+    disabled?: boolean;
     leftIcon?: string;
     rightIcon?: string;
     context?: string;
     helperText?: string;
+    errorText?: string;
     placeholder?: string;
     readOnly?: boolean;
     size?: 'small' | 'medium' | 'large';
     error?: boolean;
     value: string;
     externalControl: FormControl;
-    disabled: boolean;
     onTouch: () => void;
     onChange: (value: string) => void;
     writeValue(obj: string): void;
@@ -21,5 +22,5 @@ export declare class FwTextInputComponent implements ControlValueAccessor {
     changeHandler(event: KeyboardEvent): void;
     blurHandler(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwTextInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwTextInputComponent, "fw-text-input", never, { "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; "context": "context"; "helperText": "helperText"; "placeholder": "placeholder"; "readOnly": "readOnly"; "size": "size"; "error": "error"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwTextInputComponent, "fw-text-input", never, { "disabled": "disabled"; "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; "context": "context"; "helperText": "helperText"; "errorText": "errorText"; "placeholder": "placeholder"; "readOnly": "readOnly"; "size": "size"; "error": "error"; }, {}, never, never, false>;
 }

package/esm2020/components/menu/menu-container/menu-container.component.mjs

@@ -44,7 +44,7 @@ export class FwMenuContainerComponent {
     }
 }
 FwMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div cdkMenu>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.FwTextInputComponent, selector: "fw-text-input", inputs: ["leftIcon", "rightIcon", "context", "helperText", "placeholder", "readOnly", "size", "error"] }], encapsulation: i0.ViewEncapsulation.None });
+FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div cdkMenu>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-menu-container', encapsulation: ViewEncapsulation.None, template: "<div cdkMenu>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]

package/esm2020/components/select-menu/select-menu.component.mjs

@@ -84,7 +84,7 @@ FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => FwSelectMenuComponent),
             multi: true,
         },
-    ], 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.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: i5.FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: i6.FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: i7.FwTextInputComponent, selector: "fw-text-input", inputs: ["leftIcon", "rightIcon", "context", "helperText", "placeholder", "readOnly", "size", "error"] }] });
+    ], 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.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: i5.FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: i6.FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: i7.FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-select', providers: [

package/esm2020/components/stepper/step.component.mjs

@@ -18,10 +18,10 @@ export class FwStepComponent {
     }
 }
 FwStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done" }, outputs: { select: "select" }, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:100%}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled{opacity:.4}:host .disabled .step-text{color:var(--typography-muted)}: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: i2.FwIconComponent, selector: "fw-icon" }] });
+FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done" }, outputs: { select: "select" }, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-step', template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:100%}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled{opacity:.4}:host .disabled .step-text{color:var(--typography-muted)}: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"] }]
+            args: [{ selector: 'fw-step', template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"] }]
         }], propDecorators: { stepNumber: [{
                 type: Input
             }], color: [{

package/esm2020/components/text-input/text-input.component.mjs

@@ -5,12 +5,12 @@ import * as i1 from "@angular/common";
 import * as i2 from "../icon/icon.component";
 export class FwTextInputComponent {
     constructor() {
+        this.disabled = false;
         this.size = 'medium';
         // we bind this to host because that's where angular form apis put the error classes
         this.error = false;
         this.value = '';
         this.externalControl = null;
-        this.disabled = false;
         this.onTouch = () => {
         };
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -41,19 +41,21 @@ export class FwTextInputComponent {
     }
 }
 FwTextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", placeholder: "placeholder", readOnly: "readOnly", size: "size", error: "error" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
+FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", error: "error" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: FwTextInputComponent,
             multi: true,
-        }], ngImport: i0, template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n</div>\n", styles: [".full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:130%;margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{color:var(--red-base)}: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" }] });
+        }], ngImport: i0, template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);margin-left:6px}.full-container .error-text{display:none;margin-top:4px;color:var(--red-base);margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-text-input', providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: FwTextInputComponent,
                             multi: true,
-                        }], template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n</div>\n", styles: [".full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:130%;margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{color:var(--red-base)}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
-        }], propDecorators: { leftIcon: [{
+                        }], template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);margin-left:6px}.full-container .error-text{display:none;margin-top:4px;color:var(--red-base);margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], leftIcon: [{
                 type: Input
             }], rightIcon: [{
                 type: Input
@@ -61,6 +63,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], helperText: [{
                 type: Input
+            }], errorText: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], readOnly: [{
@@ -73,4 +77,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }, {
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0L3RleHQtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC90ZXh0LWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQXFDLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFZdEYsTUFBTSxPQUFPLG9CQUFvQjtJQVZqQztRQWtCVyxTQUFJLEdBQWtDLFFBQVEsQ0FBQztRQUN4RCxvRkFBb0Y7UUFDN0MsVUFBSyxHQUFhLEtBQUssQ0FBQztRQUUvRCxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsb0JBQWUsR0FBZ0IsSUFBSSxDQUFDO1FBQ3BDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFVixZQUFPLEdBQUcsR0FBUyxFQUFFO1FBQzVCLENBQUMsQ0FBQztRQUNGLDZEQUE2RDtRQUN0RCxhQUFRLEdBQUcsQ0FBQyxLQUFhLEVBQVEsRUFBRTtRQUMxQyxDQUFDLENBQUM7S0E4Qkg7SUE1QkMsVUFBVSxDQUFDLEdBQVc7UUFDcEIsSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUM7SUFDbkIsQ0FBQztJQUVELDhEQUE4RDtJQUM5RCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCw4REFBOEQ7SUFDOUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFvQjtRQUNoQyxJQUFJLENBQUMsS0FBSyxHQUFJLEtBQUssQ0FBQyxNQUEyQixDQUFDLEtBQUssQ0FBQztRQUN0RCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMxQixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQzs7aUhBaERVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHlSQU5wQixDQUFDO1lBQ1YsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsb0JBQW9CO1lBQ2pDLEtBQUssRUFBRSxJQUFJO1NBQ1osQ0FBQywwQkNYSix5cEJBb0JBOzJGRFBhLG9CQUFvQjtrQkFWaEMsU0FBUzsrQkFDRSxlQUFlLGFBR2QsQ0FBQzs0QkFDVixPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLHNCQUFzQjs0QkFDakMsS0FBSyxFQUFFLElBQUk7eUJBQ1osQ0FBQzs4QkFJTyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFFaUMsS0FBSztzQkFBM0MsV0FBVzt1QkFBQyxlQUFlOztzQkFBRyxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBGb3JtQ29udHJvbCwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Z3LXRleHQtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RleHQtaW5wdXQuY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbe1xuICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgIHVzZUV4aXN0aW5nOiBGd1RleHRJbnB1dENvbXBvbmVudCxcbiAgICBtdWx0aTogdHJ1ZSxcbiAgfV0sXG59KVxuZXhwb3J0IGNsYXNzIEZ3VGV4dElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuXG4gIEBJbnB1dCgpIGxlZnRJY29uPzogc3RyaW5nO1xuICBASW5wdXQoKSByaWdodEljb24/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNvbnRleHQ/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGhlbHBlclRleHQ/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyPzogc3RyaW5nO1xuICBASW5wdXQoKSByZWFkT25seT86IGJvb2xlYW47XG4gIEBJbnB1dCgpIHNpemU/OiAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ21lZGl1bSc7XG4gIC8vIHdlIGJpbmQgdGhpcyB0byBob3N0IGJlY2F1c2UgdGhhdCdzIHdoZXJlIGFuZ3VsYXIgZm9ybSBhcGlzIHB1dCB0aGUgZXJyb3IgY2xhc3Nlc1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmVycm9yZWQnKSBASW5wdXQoKSBlcnJvcj86IGJvb2xlYW4gPSBmYWxzZTtcblxuICB2YWx1ZSA9ICcnO1xuICBleHRlcm5hbENvbnRyb2w6IEZvcm1Db250cm9sID0gbnVsbDtcbiAgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBwdWJsaWMgb25Ub3VjaCA9ICgpOiB2b2lkID0+IHtcbiAgfTtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby11bnVzZWQtdmFyc1xuICBwdWJsaWMgb25DaGFuZ2UgPSAodmFsdWU6IHN0cmluZyk6IHZvaWQgPT4ge1xuICB9O1xuXG4gIHdyaXRlVmFsdWUob2JqOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gb2JqO1xuICB9XG5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaCA9IGZuO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gIH1cblxuICBjaGFuZ2VIYW5kbGVyKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZSA9IChldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWU7XG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcbiAgICB0aGlzLm9uVG91Y2goKTtcbiAgfVxuXG4gIGJsdXJIYW5kbGVyKCk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaCgpO1xuICB9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJmdWxsLWNvbnRhaW5lclwiPlxuICA8ZGl2IGNsYXNzPVwiaW5wdXQtY29udGFpbmVyXCIgW2NsYXNzXT1cInNpemVcIj5cbiAgICA8ZnctaWNvbiAqbmdJZj1cIiEhbGVmdEljb25cIj57eyBsZWZ0SWNvbiB9fTwvZnctaWNvbj5cblxuICAgIDxpbnB1dFxuICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgKGtleXVwKT1cImNoYW5nZUhhbmRsZXIoJGV2ZW50KVwiXG4gICAgICAoYmx1cik9XCJibHVySGFuZGxlcigpXCJcbiAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXIgfHwgJydcIlxuICAgICAgW3JlYWRPbmx5XT1cInJlYWRPbmx5XCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuXG4gICAgPHAgY2xhc3M9XCJjb250ZXh0XCIgKm5nSWY9XCIhIWNvbnRleHRcIj57eyBjb250ZXh0IH19PC9wPlxuXG4gICAgPGZ3LWljb24gY2xhc3M9XCJlcnJvci1pY29uXCI+d2FybmluZy1jaXJjbGU8L2Z3LWljb24+XG4gICAgPGZ3LWljb24gKm5nSWY9XCIhIXJpZ2h0SWNvblwiPnt7IHJpZ2h0SWNvbiB9fTwvZnctaWNvbj5cbiAgPC9kaXY+XG4gIDxwIGNsYXNzPVwiaGVscGVyLXRleHRcIiAqbmdJZj1cIiEhaGVscGVyVGV4dFwiPnt7IGhlbHBlclRleHQgfX08L3A+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0L3RleHQtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC1pbnB1dC90ZXh0LWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQXFDLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFZdEYsTUFBTSxPQUFPLG9CQUFvQjtJQVZqQztRQVlXLGFBQVEsR0FBYSxLQUFLLENBQUM7UUFRM0IsU0FBSSxHQUFrQyxRQUFRLENBQUM7UUFDeEQsb0ZBQW9GO1FBQzdDLFVBQUssR0FBYSxLQUFLLENBQUM7UUFFL0QsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUNYLG9CQUFlLEdBQWdCLElBQUksQ0FBQztRQUU3QixZQUFPLEdBQUcsR0FBUyxFQUFFO1FBQzVCLENBQUMsQ0FBQztRQUNGLDZEQUE2RDtRQUN0RCxhQUFRLEdBQUcsQ0FBQyxLQUFhLEVBQVEsRUFBRTtRQUMxQyxDQUFDLENBQUM7S0E4Qkg7SUE1QkMsVUFBVSxDQUFDLEdBQVc7UUFDcEIsSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUM7SUFDbkIsQ0FBQztJQUVELDhEQUE4RDtJQUM5RCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCw4REFBOEQ7SUFDOUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFvQjtRQUNoQyxJQUFJLENBQUMsS0FBSyxHQUFJLEtBQUssQ0FBQyxNQUEyQixDQUFDLEtBQUssQ0FBQztRQUN0RCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMxQixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQzs7aUhBakRVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHVVQU5wQixDQUFDO1lBQ1YsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsb0JBQW9CO1lBQ2pDLEtBQUssRUFBRSxJQUFJO1NBQ1osQ0FBQywwQkNYSiw4dEJBcUJBOzJGRFJhLG9CQUFvQjtrQkFWaEMsU0FBUzsrQkFDRSxlQUFlLGFBR2QsQ0FBQzs0QkFDVixPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLHNCQUFzQjs0QkFDakMsS0FBSyxFQUFFLElBQUk7eUJBQ1osQ0FBQzs4QkFJTyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRWlDLEtBQUs7c0JBQTNDLFdBQVc7dUJBQUMsZUFBZTs7c0JBQUcsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgRm9ybUNvbnRyb2wsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmdy10ZXh0LWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RleHQtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90ZXh0LWlucHV0LmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW3tcbiAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICB1c2VFeGlzdGluZzogRndUZXh0SW5wdXRDb21wb25lbnQsXG4gICAgbXVsdGk6IHRydWUsXG4gIH1dLFxufSlcbmV4cG9ydCBjbGFzcyBGd1RleHRJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcblxuICBASW5wdXQoKSBkaXNhYmxlZD86IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgbGVmdEljb24/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHJpZ2h0SWNvbj86IHN0cmluZztcbiAgQElucHV0KCkgY29udGV4dD86IHN0cmluZztcbiAgQElucHV0KCkgaGVscGVyVGV4dD86IHN0cmluZztcbiAgQElucHV0KCkgZXJyb3JUZXh0Pzogc3RyaW5nO1xuICBASW5wdXQoKSBwbGFjZWhvbGRlcj86IHN0cmluZztcbiAgQElucHV0KCkgcmVhZE9ubHk/OiBib29sZWFuO1xuICBASW5wdXQoKSBzaXplPzogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyA9ICdtZWRpdW0nO1xuICAvLyB3ZSBiaW5kIHRoaXMgdG8gaG9zdCBiZWNhdXNlIHRoYXQncyB3aGVyZSBhbmd1bGFyIGZvcm0gYXBpcyBwdXQgdGhlIGVycm9yIGNsYXNzZXNcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5lcnJvcmVkJykgQElucHV0KCkgZXJyb3I/OiBib29sZWFuID0gZmFsc2U7XG5cbiAgdmFsdWUgPSAnJztcbiAgZXh0ZXJuYWxDb250cm9sOiBGb3JtQ29udHJvbCA9IG51bGw7XG5cbiAgcHVibGljIG9uVG91Y2ggPSAoKTogdm9pZCA9PiB7XG4gIH07XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tdW51c2VkLXZhcnNcbiAgcHVibGljIG9uQ2hhbmdlID0gKHZhbHVlOiBzdHJpbmcpOiB2b2lkID0+IHtcbiAgfTtcblxuICB3cml0ZVZhbHVlKG9iajogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZSA9IG9iajtcbiAgfVxuXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2ggPSBmbjtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICB9XG5cbiAgY2hhbmdlSGFuZGxlcihldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIHRoaXMudmFsdWUgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlO1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XG4gICAgdGhpcy5vblRvdWNoKCk7XG4gIH1cblxuICBibHVySGFuZGxlcigpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2goKTtcbiAgfVxuXG59XG4iLCI8ZGl2IGNsYXNzPVwiZnVsbC1jb250YWluZXJcIj5cbiAgPGRpdiBjbGFzcz1cImlucHV0LWNvbnRhaW5lclwiIFtjbGFzc109XCJzaXplXCI+XG4gICAgPGZ3LWljb24gKm5nSWY9XCIhIWxlZnRJY29uXCI+e3sgbGVmdEljb24gfX08L2Z3LWljb24+XG5cbiAgICA8aW5wdXRcbiAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgIChrZXl1cCk9XCJjaGFuZ2VIYW5kbGVyKCRldmVudClcIlxuICAgICAgKGJsdXIpPVwiYmx1ckhhbmRsZXIoKVwiXG4gICAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyIHx8ICcnXCJcbiAgICAgIFtyZWFkT25seV09XCJyZWFkT25seVwiXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIj5cblxuICAgIDxwIGNsYXNzPVwiY29udGV4dFwiICpuZ0lmPVwiISFjb250ZXh0XCI+e3sgY29udGV4dCB9fTwvcD5cblxuICAgIDxmdy1pY29uIGNsYXNzPVwiZXJyb3ItaWNvblwiPndhcm5pbmctY2lyY2xlPC9mdy1pY29uPlxuICAgIDxmdy1pY29uICpuZ0lmPVwiISFyaWdodEljb25cIj57eyByaWdodEljb24gfX08L2Z3LWljb24+XG4gIDwvZGl2PlxuICA8cCBjbGFzcz1cImhlbHBlci10ZXh0XCIgKm5nSWY9XCIhIWhlbHBlclRleHRcIj57eyBoZWxwZXJUZXh0IH19PC9wPlxuICA8cCBjbGFzcz1cImVycm9yLXRleHRcIiAqbmdJZj1cIiEhZXJyb3JUZXh0XCI+e3sgZXJyb3JUZXh0IH19PC9wPlxuPC9kaXY+XG4iXX0=

package/fesm2015/flywheel-io-vision.mjs

@@ -2481,12 +2481,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class FwTextInputComponent {
     constructor() {
+        this.disabled = false;
         this.size = 'medium';
         // we bind this to host because that's where angular form apis put the error classes
         this.error = false;
         this.value = '';
         this.externalControl = null;
-        this.disabled = false;
         this.onTouch = () => {
         };
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -2517,19 +2517,21 @@ class FwTextInputComponent {
     }
 }
 FwTextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", placeholder: "placeholder", readOnly: "readOnly", size: "size", error: "error" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
+FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTextInputComponent, selector: "fw-text-input", inputs: { disabled: "disabled", leftIcon: "leftIcon", rightIcon: "rightIcon", context: "context", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", error: "error" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: FwTextInputComponent,
             multi: true,
-        }], ngImport: i0, template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n</div>\n", styles: [".full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:130%;margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{color:var(--red-base)}: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" }] });
+        }], ngImport: i0, template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);margin-left:6px}.full-container .error-text{display:none;margin-top:4px;color:var(--red-base);margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTextInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-text-input', providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: FwTextInputComponent,
                             multi: true,
-                        }], template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n</div>\n", styles: [".full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:130%;margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{color:var(--red-base)}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
-        }], propDecorators: { leftIcon: [{
+                        }], template: "<div class=\"full-container\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon *ngIf=\"!!leftIcon\">{{ leftIcon }}</fw-icon>\n\n    <input\n      type=\"text\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\">\n\n    <p class=\"context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n  </div>\n  <p class=\"helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4,.full-container .helper-text,.full-container .error-text{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text{margin-top:4px;color:var(--typography-light);margin-left:6px}.full-container .error-text{display:none;margin-top:4px;color:var(--red-base);margin-left:6px}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.ng-touched.ng-invalid .helper-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], leftIcon: [{
                 type: Input
             }], rightIcon: [{
                 type: Input
@@ -2537,6 +2539,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], helperText: [{
                 type: Input
+            }], errorText: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], readOnly: [{
@@ -2617,7 +2621,7 @@ class FwMenuContainerComponent {
     }
 }
 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 });
-FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div cdkMenu>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["leftIcon", "rightIcon", "context", "helperText", "placeholder", "readOnly", "size", "error"] }], encapsulation: i0.ViewEncapsulation.None });
+FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div cdkMenu>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-menu-container', encapsulation: ViewEncapsulation.None, template: "<div cdkMenu>\n  <div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n    <fw-text-input\n      placeholder=\"Search\" leftIcon=\"search\" autofocus\n      [(ngModel)]=\"filterText\" (ngModelChange)=\"filterTextChange($event)\">\n    </fw-text-input>\n  </div>\n  <div class=\"menu-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fw-menu-container{display:block;border-radius:8px;background:var(--card-background);overflow:hidden auto}.fw-menu-container.border-default{border:1px solid var(--separations-base)}.fw-menu-container .filter-box{padding:8px;border-bottom:1px solid var(--separations-base)}.fw-menu-container .menu-wrapper{padding:6px 4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
@@ -3283,7 +3287,7 @@ FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => FwSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [(ngModel)]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [ngModel]=\"selectValue\"\n        (ngModelChange)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["leftIcon", "rightIcon", "context", "helperText", "placeholder", "readOnly", "size", "error"] }] });
+    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [(ngModel)]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [ngModel]=\"selectValue\"\n        (ngModelChange)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "variant", "collapsed", "multiSelect", "useCheckbox", "openWidth", "collapsedWidth", "value"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "hidden", "collapsed", "href", "target", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "leftIcon", "rightIcon", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "error"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-select', providers: [
@@ -3648,10 +3652,10 @@ class FwStepComponent {
     }
 }
 FwStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done" }, outputs: { select: "select" }, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:100%}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled{opacity:.4}:host .disabled .step-text{color:var(--typography-muted)}: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" }] });
+FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done" }, outputs: { select: "select" }, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-step', template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:100%}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled{opacity:.4}:host .disabled .step-text{color:var(--typography-muted)}: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"] }]
+            args: [{ selector: 'fw-step', template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5>{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon>{{ icon }}</fw-icon>\n      </div>\n      <div *ngIf=\"variant==='decorator'\" class=\"step-decorator\">\n        <ng-content select=\"fw-step-decorator\"></ng-content>\n      </div>\n    </ng-template>\n    <div class=\"step-text\">\n      <h4>{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:last-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast);border-radius:64px;font-size:16px}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number,:host .step-color-error.completed .step-icon{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number,:host .step-color-warning.completed .step-icon{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number,:host .step-color-success.completed .step-icon{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number,:host .step-color-info.completed .step-icon{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .disabled .step-icon{opacity:.4}:host .disabled .step-text{color:var(--typography-muted);opacity:.4}:host .disabled .step-text h4{color:var(--typography-muted)}:host .disabled .step-text .description{color:var(--typography-muted)}:host .disabled .step-number{color:var(--typography-muted);border-color:var(--separations-base);background-color:var(--slate-focus)}:host .disabled .step-icon{color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"] }]
         }], propDecorators: { stepNumber: [{
                 type: Input
             }], color: [{