@flywheel-io/vision 1.13.0 → 1.14.0

package/fesm2015/flywheel-io-vision.mjs

@@ -41,13 +41,13 @@ class FwIconComponent {
         let size = '';
         switch (this.size) {
             case 'small':
-                size = 'font-size: 22px;';
+                size = 'font-size: 22px; min-width: 22px; width: 22px;';
                 break;
             case 'medium':
-                size = 'font-size: 24px;';
+                size = 'font-size: 24px; min-width: 24px; width: 24px;';
                 break;
             case 'large':
-                size = 'font-size: 28px;';
+                size = 'font-size: 28px; min-width: 28px; width: 28px;';
                 break;
         }
         let color = '';
@@ -103,10 +103,10 @@ class FwIconButtonComponent {
     ;
 }
 FwIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: { color: "color", icon: "icon", size: "size", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.class": "this.classes", "tabindex": "this.tabindex" } }, ngImport: i0, template: "<button [disabled]=\"disabled\"\n        [class]=\"color + '-button'\"\n        [class.selected-button]=\"selected\"\n        [tabindex]=\"tabindex\">\n    <fw-icon>{{ icon }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host.small{min-height:30px;min-width:30px}:host.small fw-icon{font-size:22px}:host.medium{min-height:36px;min-width:36px}:host.medium fw-icon{font-size:24px}:host.large{min-height:40px;min-width:40px}:host.large fw-icon{font-size:28px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: { color: "color", icon: "icon", size: "size", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.class": "this.classes", "tabindex": "this.tabindex" } }, ngImport: i0, template: "<button [disabled]=\"disabled\"\n        [class]=\"color + '-button'\"\n        [class.selected-button]=\"selected\"\n        [tabindex]=\"tabindex\">\n    <fw-icon>{{ icon }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host.small{min-height:30px;min-width:30px}:host.small fw-icon{font-size:22px;min-width:22px;width:22px}:host.medium{min-height:36px;min-width:36px}:host.medium fw-icon{font-size:24px;min-width:24px;width:24px}:host.large{min-height:40px;min-width:40px}:host.large fw-icon{font-size:28px;min-width:28px;width:28px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-icon-button', template: "<button [disabled]=\"disabled\"\n        [class]=\"color + '-button'\"\n        [class.selected-button]=\"selected\"\n        [tabindex]=\"tabindex\">\n    <fw-icon>{{ icon }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host.small{min-height:30px;min-width:30px}:host.small fw-icon{font-size:22px}:host.medium{min-height:36px;min-width:36px}:host.medium fw-icon{font-size:24px}:host.large{min-height:40px;min-width:40px}:host.large fw-icon{font-size:28px}\n"] }]
+            args: [{ selector: 'fw-icon-button', template: "<button [disabled]=\"disabled\"\n        [class]=\"color + '-button'\"\n        [class.selected-button]=\"selected\"\n        [tabindex]=\"tabindex\">\n    <fw-icon>{{ icon }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host.small{min-height:30px;min-width:30px}:host.small fw-icon{font-size:22px;min-width:22px;width:22px}:host.medium{min-height:36px;min-width:36px}:host.medium fw-icon{font-size:24px;min-width:24px;width:24px}:host.large{min-height:40px;min-width:40px}:host.large fw-icon{font-size:28px;min-width:28px;width:28px}\n"] }]
         }], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -239,10 +239,10 @@ class FwAppIconComponent {
     }
 }
 FwAppIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { title: "title", icon: "icon", imageUrl: "imageUrl", color: "color", fontColor: "fontColor", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { title: "title", icon: "icon", imageUrl: "imageUrl", color: "color", fontColor: "fontColor", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px;width:16px;min-width:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px;width:20px;min-width:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px;width:32px;min-width:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px;width:48px;min-width:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
+            args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"App Icon\">\n  <fw-icon *ngIf=\"icon\" [ngClass]=\"fontColor\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"title\">{{ title }}</p>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium,:host .app-locked{box-shadow:0 2px 5px #0000001a}.vision-shadow-small,:host .app-badge{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.primary .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.primary .icon-wrapper>fw-icon.transparent{color:transparent}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper>fw-icon.base{color:var(--typography-base)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid var(--separations-base)}:host.light .icon-wrapper>fw-icon{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host.transparent .icon-wrapper{background-color:transparent;outline:1px solid transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px;width:16px;min-width:16px}:host.small .icon-wrapper img{height:24px;width:24px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px;width:20px;min-width:20px}:host.medium .icon-wrapper img{height:32px;width:32px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px;width:32px;min-width:32px}:host.large .icon-wrapper img{height:48px;width:48px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px;width:48px;min-width:48px}:host.extra-large .icon-wrapper img{height:64px;width:64px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], icon: [{
@@ -453,10 +453,10 @@ class FwCrumbComponent {
     }
 }
 FwCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwCrumbComponent, selector: "fw-crumb", inputs: { title: "title", description: "description", href: "href", last: "last" }, outputs: { click: "click" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\">\n  <h3 class=\"vision-h3\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<fw-icon *ngIf=\"!last\">chevron-forward</fw-icon>\n", styles: [":host{display:flex;align-items:center}:host>div{cursor:pointer}:host h3{margin:0;color:var(--typography-base)}:host p{margin:0;color:var(--typography-muted)}:host fw-icon{font-size:20px;margin:0 10px;color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwCrumbComponent, selector: "fw-crumb", inputs: { title: "title", description: "description", href: "href", last: "last" }, outputs: { click: "click" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\">\n  <h3 class=\"vision-h3\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<fw-icon *ngIf=\"!last\" size=\"medium\" color=\"slate\">chevron-forward</fw-icon>\n", styles: [":host{display:flex;align-items:center}:host>div{cursor:pointer}:host h3{margin:0;color:var(--typography-base)}:host p{margin:0;color:var(--typography-muted)}:host fw-icon{margin:0 10px;color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-crumb', template: "<div (click)=\"handleClick($event)\">\n  <h3 class=\"vision-h3\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<fw-icon *ngIf=\"!last\">chevron-forward</fw-icon>\n", styles: [":host{display:flex;align-items:center}:host>div{cursor:pointer}:host h3{margin:0;color:var(--typography-base)}:host p{margin:0;color:var(--typography-muted)}:host fw-icon{font-size:20px;margin:0 10px;color:var(--typography-light)}\n"] }]
+            args: [{ selector: 'fw-crumb', template: "<div (click)=\"handleClick($event)\">\n  <h3 class=\"vision-h3\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<fw-icon *ngIf=\"!last\" size=\"medium\" color=\"slate\">chevron-forward</fw-icon>\n", styles: [":host{display:flex;align-items:center}:host>div{cursor:pointer}:host h3{margin:0;color:var(--typography-base)}:host p{margin:0;color:var(--typography-muted)}:host fw-icon{margin:0 10px;color:var(--typography-light)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -642,10 +642,10 @@ class FwButtonComponent {
     }
 }
 FwButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonComponent, selector: "fw-button", inputs: { color: "color", size: "size", variant: "variant", type: "type", disabled: "disabled", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<button [type]=\"type\" [class]=\"[color + '-' + variant, size]\" [disabled]=\"disabled\">\n  <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\" *ngIf=\"variant==='progress'\"></fw-progress-spinner>\n  <fw-icon *ngIf=\"!!leftIcon && variant!=='progress'\">{{ leftIcon }}</fw-icon>\n  <div class=\"spacer\" *ngIf=\"!leftIcon\"></div>\n  <span><ng-content></ng-content></span>\n  <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-progress{background-color:transparent;background-color:var(--primary-hover);color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress span{opacity:.6}.primary-progress:disabled{opacity:.6;cursor:not-allowed}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{background-color:transparent;color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{background-color:transparent;color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:transparent;background-color:var(--secondary-hover);color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress span{opacity:.6}.secondary-progress:disabled{opacity:.6;cursor:not-allowed}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{background-color:transparent;color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{background-color:transparent;color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-progress{background-color:transparent;background-color:var(--slate-hover);color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress span{opacity:.6}.slate-progress:disabled{opacity:.6;cursor:not-allowed}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{background-color:transparent;color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{background-color:transparent;color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-progress{background-color:transparent;background-color:var(--red-hover);color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress span{opacity:.6}.danger-progress:disabled{opacity:.6;cursor:not-allowed}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{background-color:transparent;color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{background-color:transparent;color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-progress{background-color:transparent;background-color:var(---hover);color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress span{opacity:.6}.skeleton-progress:disabled{opacity:.6;cursor:not-allowed}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{background-color:transparent;color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{background-color:transparent;color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-progress{background-color:transparent;background-color:var(--orange-hover);color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress span{opacity:.6}.warning-progress:disabled{opacity:.6;cursor:not-allowed}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{background-color:transparent;color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{background-color:transparent;color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-progress{background-color:transparent;background-color:var(--green-hover);color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }] });
+FwButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonComponent, selector: "fw-button", inputs: { color: "color", size: "size", variant: "variant", type: "type", disabled: "disabled", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<button [type]=\"type\" [class]=\"[color + '-' + variant, size]\" [disabled]=\"disabled\">\n  <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\" *ngIf=\"variant==='progress'\"></fw-progress-spinner>\n  <fw-icon *ngIf=\"!!leftIcon && variant!=='progress'\">{{ leftIcon }}</fw-icon>\n  <div class=\"spacer\" *ngIf=\"!leftIcon\"></div>\n  <span><ng-content></ng-content></span>\n  <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px;width:20px;min-width:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px;width:24px;min-width:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-progress{background-color:transparent;background-color:var(--primary-hover);color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress span{opacity:.6}.primary-progress:disabled{opacity:.6;cursor:not-allowed}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{background-color:transparent;color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{background-color:transparent;color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:transparent;background-color:var(--secondary-hover);color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress span{opacity:.6}.secondary-progress:disabled{opacity:.6;cursor:not-allowed}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{background-color:transparent;color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{background-color:transparent;color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-progress{background-color:transparent;background-color:var(--slate-hover);color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress span{opacity:.6}.slate-progress:disabled{opacity:.6;cursor:not-allowed}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{background-color:transparent;color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{background-color:transparent;color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-progress{background-color:transparent;background-color:var(--red-hover);color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress span{opacity:.6}.danger-progress:disabled{opacity:.6;cursor:not-allowed}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{background-color:transparent;color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{background-color:transparent;color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-progress{background-color:transparent;background-color:var(---hover);color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress span{opacity:.6}.skeleton-progress:disabled{opacity:.6;cursor:not-allowed}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{background-color:transparent;color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{background-color:transparent;color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-progress{background-color:transparent;background-color:var(--orange-hover);color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress span{opacity:.6}.warning-progress:disabled{opacity:.6;cursor:not-allowed}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{background-color:transparent;color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{background-color:transparent;color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-progress{background-color:transparent;background-color:var(--green-hover);color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-button', template: "<button [type]=\"type\" [class]=\"[color + '-' + variant, size]\" [disabled]=\"disabled\">\n  <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\" *ngIf=\"variant==='progress'\"></fw-progress-spinner>\n  <fw-icon *ngIf=\"!!leftIcon && variant!=='progress'\">{{ leftIcon }}</fw-icon>\n  <div class=\"spacer\" *ngIf=\"!leftIcon\"></div>\n  <span><ng-content></ng-content></span>\n  <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-progress{background-color:transparent;background-color:var(--primary-hover);color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress span{opacity:.6}.primary-progress:disabled{opacity:.6;cursor:not-allowed}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{background-color:transparent;color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{background-color:transparent;color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:transparent;background-color:var(--secondary-hover);color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress span{opacity:.6}.secondary-progress:disabled{opacity:.6;cursor:not-allowed}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{background-color:transparent;color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{background-color:transparent;color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-progress{background-color:transparent;background-color:var(--slate-hover);color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress span{opacity:.6}.slate-progress:disabled{opacity:.6;cursor:not-allowed}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{background-color:transparent;color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{background-color:transparent;color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-progress{background-color:transparent;background-color:var(--red-hover);color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress span{opacity:.6}.danger-progress:disabled{opacity:.6;cursor:not-allowed}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{background-color:transparent;color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{background-color:transparent;color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-progress{background-color:transparent;background-color:var(---hover);color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress span{opacity:.6}.skeleton-progress:disabled{opacity:.6;cursor:not-allowed}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{background-color:transparent;color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{background-color:transparent;color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-progress{background-color:transparent;background-color:var(--orange-hover);color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress span{opacity:.6}.warning-progress:disabled{opacity:.6;cursor:not-allowed}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{background-color:transparent;color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{background-color:transparent;color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-progress{background-color:transparent;background-color:var(--green-hover);color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'fw-button', template: "<button [type]=\"type\" [class]=\"[color + '-' + variant, size]\" [disabled]=\"disabled\">\n  <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\" *ngIf=\"variant==='progress'\"></fw-progress-spinner>\n  <fw-icon *ngIf=\"!!leftIcon && variant!=='progress'\">{{ leftIcon }}</fw-icon>\n  <div class=\"spacer\" *ngIf=\"!leftIcon\"></div>\n  <span><ng-content></ng-content></span>\n  <fw-icon *ngIf=\"!!rightIcon\">{{ rightIcon }}</fw-icon>\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px;width:20px;min-width:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px;width:24px;min-width:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base);border:1px solid var(--separations-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-progress{background-color:transparent;background-color:var(--primary-hover);color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress span{opacity:.6}.primary-progress:disabled{opacity:.6;cursor:not-allowed}.secondary-solid{background-color:var(--secondary-base);color:var(--typography-contrast)}.secondary-solid:hover{background-color:var(--secondary-medium)}.secondary-solid:active{background-color:var(--secondary-dark)}.secondary-ghost{background-color:transparent;color:var(--secondary-base)}.secondary-ghost:hover{background-color:var(--secondary-hover)}.secondary-ghost:active{background-color:var(--secondary-focus)}.secondary-outline{background-color:transparent;color:var(--secondary-base);border:1px solid var(--separations-base)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:transparent;background-color:var(--secondary-hover);color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress span{opacity:.6}.secondary-progress:disabled{opacity:.6;cursor:not-allowed}.slate-solid{background-color:var(--slate-base);color:var(--typography-contrast)}.slate-solid:hover{background-color:var(--slate-medium)}.slate-solid:active{background-color:var(--slate-dark)}.slate-ghost{background-color:transparent;color:var(--slate-base)}.slate-ghost:hover{background-color:var(--slate-hover)}.slate-ghost:active{background-color:var(--slate-focus)}.slate-outline{background-color:transparent;color:var(--slate-base);border:1px solid var(--separations-base)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-progress{background-color:transparent;background-color:var(--slate-hover);color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress span{opacity:.6}.slate-progress:disabled{opacity:.6;cursor:not-allowed}.danger-solid{background-color:var(--red-base);color:var(--typography-contrast)}.danger-solid:hover{background-color:var(--red-medium)}.danger-solid:active{background-color:var(--red-dark)}.danger-ghost{background-color:transparent;color:var(--red-base)}.danger-ghost:hover{background-color:var(--red-hover)}.danger-ghost:active{background-color:var(--red-focus)}.danger-outline{background-color:transparent;color:var(--red-base);border:1px solid var(--separations-base)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-progress{background-color:transparent;background-color:var(--red-hover);color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress span{opacity:.6}.danger-progress:disabled{opacity:.6;cursor:not-allowed}.skeleton-solid{background-color:var(---base);color:var(--typography-contrast)}.skeleton-solid:hover{background-color:var(---medium)}.skeleton-solid:active{background-color:var(---dark)}.skeleton-ghost{background-color:transparent;color:var(---base)}.skeleton-ghost:hover{background-color:var(---hover)}.skeleton-ghost:active{background-color:var(---focus)}.skeleton-outline{background-color:transparent;color:var(---base);border:1px solid var(--separations-base)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-progress{background-color:transparent;background-color:var(---hover);color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress span{opacity:.6}.skeleton-progress:disabled{opacity:.6;cursor:not-allowed}.warning-solid{background-color:var(--orange-base);color:var(--typography-contrast)}.warning-solid:hover{background-color:var(--orange-medium)}.warning-solid:active{background-color:var(--orange-dark)}.warning-ghost{background-color:transparent;color:var(--orange-base)}.warning-ghost:hover{background-color:var(--orange-hover)}.warning-ghost:active{background-color:var(--orange-focus)}.warning-outline{background-color:transparent;color:var(--orange-base);border:1px solid var(--separations-base)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-progress{background-color:transparent;background-color:var(--orange-hover);color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress span{opacity:.6}.warning-progress:disabled{opacity:.6;cursor:not-allowed}.success-solid{background-color:var(--green-base);color:var(--typography-contrast)}.success-solid:hover{background-color:var(--green-medium)}.success-solid:active{background-color:var(--green-dark)}.success-ghost{background-color:transparent;color:var(--green-base)}.success-ghost:hover{background-color:var(--green-hover)}.success-ghost:active{background-color:var(--green-focus)}.success-outline{background-color:transparent;color:var(--green-base);border:1px solid var(--separations-base)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-progress{background-color:transparent;background-color:var(--green-hover);color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"] }]
         }], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -1452,10 +1452,10 @@ class FwChipComponent {
     }
 }
 FwChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwChipComponent, selector: "fw-chip", inputs: { value: "value", variant: "variant", color: "color", icon: "icon", title: "title", description: "description", showClose: "showClose", disabled: "disabled", selected: "selected", selectable: "selectable" }, outputs: { close: "close", select: "select" }, ngImport: i0, template: "<div [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n  [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n  <fw-icon *ngIf=\"icon\" class=\"chip-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-avatar\"></ng-content>\n  <div class=\"chip-text\" *ngIf=\"title\">\n    <span>{{ title }}</span>\n    <span *ngIf=\"description\" class=\"description\">{{ description }}</span>\n  </div>\n  <fw-icon class=\"close-icon\" *ngIf=\"showClose\" (click)=\"handleClose($event)\">\n    close\n  </fw-icon>\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px}.chip .chip-icon{align-items:flex-start;font-size:16px}.chip .chip-text{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap}.chip .chip-text .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwChipComponent, selector: "fw-chip", inputs: { value: "value", variant: "variant", color: "color", icon: "icon", title: "title", description: "description", showClose: "showClose", disabled: "disabled", selected: "selected", selectable: "selectable" }, outputs: { close: "close", select: "select" }, ngImport: i0, template: "<div\n  [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n  [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n  <fw-icon *ngIf=\"icon\" class=\"chip-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-avatar\"></ng-content>\n  <div class=\"chip-text\" *ngIf=\"title\">\n    <span>{{ title }}</span>\n    <span *ngIf=\"description\" class=\"description\">{{ description }}</span>\n  </div>\n  <div class=\"close-icon\" *ngIf=\"showClose\" (click)=\"handleClose($event)\">\n    <fw-icon>close</fw-icon>\n  </div>\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px}.chip .chip-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.chip .chip-text{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap}.chip .chip-text .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;min-width:12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip .close-icon>fw-icon{font-size:12px;min-width:12px;width:12px;height:12px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-chip', template: "<div [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n  [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n  <fw-icon *ngIf=\"icon\" class=\"chip-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-avatar\"></ng-content>\n  <div class=\"chip-text\" *ngIf=\"title\">\n    <span>{{ title }}</span>\n    <span *ngIf=\"description\" class=\"description\">{{ description }}</span>\n  </div>\n  <fw-icon class=\"close-icon\" *ngIf=\"showClose\" (click)=\"handleClose($event)\">\n    close\n  </fw-icon>\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px}.chip .chip-icon{align-items:flex-start;font-size:16px}.chip .chip-text{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap}.chip .chip-text .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}\n"] }]
+            args: [{ selector: 'fw-chip', template: "<div\n  [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n  [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n  <fw-icon *ngIf=\"icon\" class=\"chip-icon\">{{ icon }}</fw-icon>\n  <ng-content select=\"fw-avatar\"></ng-content>\n  <div class=\"chip-text\" *ngIf=\"title\">\n    <span>{{ title }}</span>\n    <span *ngIf=\"description\" class=\"description\">{{ description }}</span>\n  </div>\n  <div class=\"close-icon\" *ngIf=\"showClose\" (click)=\"handleClose($event)\">\n    <fw-icon>close</fw-icon>\n  </div>\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px}.chip .chip-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.chip .chip-text{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap}.chip .chip-text .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;min-width:12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip .close-icon>fw-icon{font-size:12px;min-width:12px;width:12px;height:12px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], variant: [{
@@ -2520,6 +2520,7 @@ const allIcons = [
     'clap-applause-hands',
     'clip-attachment',
     'clock-history',
+    'clock-hour-4',
     'clock-loading',
     'close-circled',
     'close',
@@ -2552,6 +2553,7 @@ const allIcons = [
     'document-file-zip',
     'document-status-done-checkmark',
     'document-visible',
+    'documents-file',
     'documents-files',
     'done-check-tracked',
     'done-check',
@@ -2567,6 +2569,7 @@ const allIcons = [
     'email',
     'embed-circle',
     'exchange',
+    'expand-pathfinder-dot-square-segmentation',
     'facebook',
     'file-blank-image-load-mask',
     'file-download',
@@ -2583,6 +2586,7 @@ const allIcons = [
     'flip-vertical',
     'floppy-save',
     'flywheel-mark-logo',
+    'flywheel-viewer-mark-logo',
     'folder-add',
     'folder-blank',
     'folder-checked',
@@ -2724,6 +2728,9 @@ const allIcons = [
     'show-visible',
     'smiley-emoji-face',
     'speed-dashboard',
+    'square-fill',
+    'square-fill-outline',
+    'square-outline',
     'star',
     'stars-light-sparkle',
     'stomach',
@@ -2797,10 +2804,10 @@ class FwLayoutContextComponent {
     ;
 }
 FwLayoutContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwLayoutContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutContextComponent, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwLayoutContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwLayoutContextComponent, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwLayoutContextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-layout-context', template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"] }]
+            args: [{ selector: 'fw-layout-context', template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], icon: [{
@@ -3966,10 +3973,10 @@ class FwMenuItemComponent {
     }
 }
 FwMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", size: "size", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", showCheckbox: "showCheckbox", checkboxColor: "checkboxColor", multiSelect: "multiSelect", hidden: "hidden", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", focused: "focused", selected: "selected", variant: "variant" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <fw-checkbox\n        [disabled]=\"disabled\"\n        [color]=\"checkboxColor\"\n        [checked]=\"selected\">\n      </fw-checkbox>\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <fw-radio-button\n        [value]=\"value\"\n        [color]=\"checkboxColor\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n      </fw-radio-button>\n    </div>\n    <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content select=\"p\"></ng-content>\n      <ng-content select=\"fw-badge\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-icon-button\"></ng-content>\n      <fw-icon-button\n        [size]=\"'small'\"\n        [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n        *ngIf=\"subItems.length>0\"\n        (click)=\"toggleSubItemsView()\">\n      </fw-icon-button>\n    </div>\n  </div>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["checked", "disabled", "size", "color", "title", "focused"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["checked", "value", "group", "disabled", "size", "color", "title", "focused"], outputs: ["change"] }] });
+FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", size: "size", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", showCheckbox: "showCheckbox", checkboxColor: "checkboxColor", multiSelect: "multiSelect", hidden: "hidden", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", focused: "focused", selected: "selected", variant: "variant" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <fw-checkbox\n        [disabled]=\"disabled\"\n        [color]=\"checkboxColor\"\n        [checked]=\"selected\">\n      </fw-checkbox>\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <fw-radio-button\n        [value]=\"value\"\n        [color]=\"checkboxColor\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n      </fw-radio-button>\n    </div>\n    <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content select=\"p\"></ng-content>\n      <ng-content select=\"fw-badge\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-icon-button\"></ng-content>\n      <fw-icon-button\n        [size]=\"'small'\"\n        [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n        *ngIf=\"subItems.length>0\"\n        (click)=\"toggleSubItemsView()\">\n      </fw-icon-button>\n    </div>\n  </div>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px;min-width:32px;width:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px;min-width:20px;width:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["checked", "disabled", "size", "color", "title", "focused"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["checked", "value", "group", "disabled", "size", "color", "title", "focused"], outputs: ["change"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <fw-checkbox\n        [disabled]=\"disabled\"\n        [color]=\"checkboxColor\"\n        [checked]=\"selected\">\n      </fw-checkbox>\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <fw-radio-button\n        [value]=\"value\"\n        [color]=\"checkboxColor\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n      </fw-radio-button>\n    </div>\n    <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content select=\"p\"></ng-content>\n      <ng-content select=\"fw-badge\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-icon-button\"></ng-content>\n      <fw-icon-button\n        [size]=\"'small'\"\n        [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n        *ngIf=\"subItems.length>0\"\n        (click)=\"toggleSubItemsView()\">\n      </fw-icon-button>\n    </div>\n  </div>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"] }]
+            args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n  <div\n    [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n    [class.disabled]=\"disabled\">\n    <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n      <fw-checkbox\n        [disabled]=\"disabled\"\n        [color]=\"checkboxColor\"\n        [checked]=\"selected\">\n      </fw-checkbox>\n    </div>\n    <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n      <fw-radio-button\n        [value]=\"value\"\n        [color]=\"checkboxColor\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\">\n      </fw-radio-button>\n    </div>\n    <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n    <ng-content select=\"fw-avatar\"></ng-content>\n    <div class=\"menu-text\" *ngIf=\"title\">\n      <h4 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n    <div class=\"key-text vision-p2\">\n      <ng-content select=\"p\"></ng-content>\n      <ng-content select=\"fw-badge\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-icon-button\"></ng-content>\n      <fw-icon-button\n        [size]=\"'small'\"\n        [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n        *ngIf=\"subItems.length>0\"\n        (click)=\"toggleSubItemsView()\">\n      </fw-icon-button>\n    </div>\n  </div>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px;min-width:32px;width:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px;min-width:20px;width:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], size: [{
@@ -4417,14 +4424,14 @@ FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             provide: NG_VALUE_ACCESSOR,
             useExisting: FwTextInputComponent,
             multi: true,
-        }], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">\n      {{ leftIcon }}\n    </fw-icon>\n    <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n    <input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n    >\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon\n      *ngIf=\"!!rightIcon\"\n      (click)=\"useActionableIcons?onRightIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">\n      {{ rightIcon }}\n    </fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"vision-p4 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{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+        }], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n    </fw-icon>\n    <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n    <input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n    >\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon\n      *ngIf=\"!!rightIcon\"\n      (click)=\"useActionableIcons?onRightIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n    </fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"vision-p4 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{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 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\" [ngClass]=\"{'disabled': disabled}\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">\n      {{ leftIcon }}\n    </fw-icon>\n    <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n    <input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n    >\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon\n      *ngIf=\"!!rightIcon\"\n      (click)=\"useActionableIcons?onRightIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">\n      {{ rightIcon }}\n    </fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"vision-p4 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{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px}.medium{height:36px}.medium>fw-icon{font-size:20px}.large{height:40px}.large>fw-icon{font-size:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+                        }], template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n    </fw-icon>\n    <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n    <input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n    >\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n    <fw-icon\n      *ngIf=\"!!rightIcon\"\n      (click)=\"useActionableIcons?onRightIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n    </fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"vision-p4 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{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], useActionableIcons: [{
@@ -5097,10 +5104,10 @@ class FwNavbarItemComponent {
     }
 }
 FwNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarItemComponent, selector: "fw-navbar-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", subItemsTooltipTitle: "subItemsTooltipTitle", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!hidden\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n      <div\n        [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n        [class.disabled]=\"disabled\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n        <ng-content select=\"fw-avatar\"></ng-content>\n        <div class=\"navbar-text\" *ngIf=\"title\">\n          <h5 class=\"vision-h5\">{{ title }}</h5>\n          <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n        </div>\n        <div class=\"key-text vision-p2\">\n          <ng-content select=\"p\"></ng-content>\n          <ng-content select=\"fw-badge\"></ng-content>\n          <ng-content select=\"fw-icon\"></ng-content>\n          <ng-content select=\"fw-icon-button\"></ng-content>\n          <fw-tooltip\n            *ngIf=\"subItems.length>0 && !collapsed\"\n            [title]=\"subItemsTooltipTitle\"\n            position=\"right\">\n            <fw-icon-button\n              [size]=\"'small'\"\n              [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n              (click)=\"toggleSubItemsView($event)\">\n            </fw-icon-button>\n          </fw-tooltip>\n        </div>\n      </div>\n    </fw-tooltip>\n  </a>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger"] }] });
+FwNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarItemComponent, selector: "fw-navbar-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", subItemsTooltipTitle: "subItemsTooltipTitle", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!hidden\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n      <div\n        [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n        [class.disabled]=\"disabled\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n        <ng-content select=\"fw-avatar\"></ng-content>\n        <div class=\"navbar-text\" *ngIf=\"title\">\n          <h5 class=\"vision-h5\">{{ title }}</h5>\n          <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n        </div>\n        <div class=\"key-text vision-p2\">\n          <ng-content select=\"p\"></ng-content>\n          <ng-content select=\"fw-badge\"></ng-content>\n          <ng-content select=\"fw-icon\"></ng-content>\n          <ng-content select=\"fw-icon-button\"></ng-content>\n          <fw-tooltip\n            *ngIf=\"subItems.length>0 && !collapsed\"\n            [title]=\"subItemsTooltipTitle\"\n            position=\"right\">\n            <fw-icon-button\n              [size]=\"'small'\"\n              [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n              (click)=\"toggleSubItemsView($event)\">\n            </fw-icon-button>\n          </fw-tooltip>\n        </div>\n      </div>\n    </fw-tooltip>\n  </a>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-navbar-item', template: "<div *ngIf=\"!hidden\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n      <div\n        [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n        [class.disabled]=\"disabled\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n        <ng-content select=\"fw-avatar\"></ng-content>\n        <div class=\"navbar-text\" *ngIf=\"title\">\n          <h5 class=\"vision-h5\">{{ title }}</h5>\n          <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n        </div>\n        <div class=\"key-text vision-p2\">\n          <ng-content select=\"p\"></ng-content>\n          <ng-content select=\"fw-badge\"></ng-content>\n          <ng-content select=\"fw-icon\"></ng-content>\n          <ng-content select=\"fw-icon-button\"></ng-content>\n          <fw-tooltip\n            *ngIf=\"subItems.length>0 && !collapsed\"\n            [title]=\"subItemsTooltipTitle\"\n            position=\"right\">\n            <fw-icon-button\n              [size]=\"'small'\"\n              [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n              (click)=\"toggleSubItemsView($event)\">\n            </fw-icon-button>\n          </fw-tooltip>\n        </div>\n      </div>\n    </fw-tooltip>\n  </a>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"] }]
+            args: [{ selector: 'fw-navbar-item', template: "<div *ngIf=\"!hidden\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n      <div\n        [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n        [class.disabled]=\"disabled\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n        <ng-content select=\"fw-avatar\"></ng-content>\n        <div class=\"navbar-text\" *ngIf=\"title\">\n          <h5 class=\"vision-h5\">{{ title }}</h5>\n          <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n        </div>\n        <div class=\"key-text vision-p2\">\n          <ng-content select=\"p\"></ng-content>\n          <ng-content select=\"fw-badge\"></ng-content>\n          <ng-content select=\"fw-icon\"></ng-content>\n          <ng-content select=\"fw-icon-button\"></ng-content>\n          <fw-tooltip\n            *ngIf=\"subItems.length>0 && !collapsed\"\n            [title]=\"subItemsTooltipTitle\"\n            position=\"right\">\n            <fw-icon-button\n              [size]=\"'small'\"\n              [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n              (click)=\"toggleSubItemsView($event)\">\n            </fw-icon-button>\n          </fw-tooltip>\n        </div>\n      </div>\n    </fw-tooltip>\n  </a>\n</div>\n<div class=\"item-subitems\">\n  <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], title: [{
@@ -5366,10 +5373,10 @@ class FwPaginatorComponent {
     }
 }
 FwPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorComponent, selector: "fw-paginator", inputs: { size: "size", color: "color", shape: "shape", variant: "variant", disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSize: "pageSize", maxPagesShown: "maxPagesShown", length: "length", alignment: "alignment", selectorTitle: "selectorTitle" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4 class=\"vision-h4\">{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorComponent, selector: "fw-paginator", inputs: { size: "size", color: "color", shape: "shape", variant: "variant", disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSize: "pageSize", maxPagesShown: "maxPagesShown", length: "length", alignment: "alignment", selectorTitle: "selectorTitle" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon size=\"small\" color=\"typography\">arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon size=\"small\" color=\"typography\">chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4 class=\"vision-h4\">{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon size=\"small\" color=\"typography\">chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon size=\"small\" color=\"typography\">arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-paginator', template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon>arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon>chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4 class=\"vision-h4\">{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon>chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon>arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
+            args: [{ selector: 'fw-paginator', template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n  <div class=\"pages-list\">\n    <button\n      *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\"\n      (click)=\"firstPage()\">\n      <fw-icon size=\"small\" color=\"typography\">arrow-back-collapse</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showPrevious\"\n      class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n      <fw-icon size=\"small\" color=\"typography\">chevron-back</fw-icon>\n    </button>\n    <button\n      [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n      [disabled]=\"disabled\"\n      *ngFor=\"let page of getPages()\"\n      (click)=\"setPage(page.pageIndex)\"\n    >\n      <h4 class=\"vision-h4\">{{ page.number }}</h4>\n    </button>\n    <button\n      *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"nextPage()\">\n      <fw-icon size=\"small\" color=\"typography\">chevron-forward</fw-icon>\n    </button>\n    <button\n      *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n      (click)=\"lastPage()\">\n      <fw-icon size=\"small\" color=\"typography\">arrow-forward-collapse</fw-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], color: [{
@@ -7497,10 +7504,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", status: "status" }, outputs: { select: "select" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon>done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5 class=\"vision-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 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-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{opacity:.4;color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwStepComponent, selector: "fw-step", inputs: { stepNumber: "stepNumber", color: "color", variant: "variant", alignment: "alignment", backgroundColor: "backgroundColor", title: "title", description: "description", icon: "icon", disabled: "disabled", active: "active", completed: "completed", done: "done", status: "status" }, outputs: { select: "select" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]\"\n  [class.disabled]=\"disabled\"\n  [class.active]=\"active\"\n  [class.completed]=\"completed\"\n  [class.done]=\"done\"\n  (click)=\"handleClick()\">\n  <div class=\"step-connector\"></div>\n  <div class=\"step-content\" [style]=\"{backgroundColor: backgroundColor}\">\n    <div\n      class=\"step-decorator-wrapper\"\n      [style]=\"{outlineColor: backgroundColor, backgroundColor: backgroundColor}\">\n      <div *ngIf=\"done; else notDone\" class=\"step-done\" [style]=\"{outlineColor: backgroundColor}\">\n        <fw-icon size=\"small\">done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5 class=\"vision-h5\">{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon size=\"small\">{{ 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 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-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{opacity:.4;color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 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 class=\"vision-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 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-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{opacity:.4;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 size=\"small\">done-check</fw-icon>\n      </div>\n    </div>\n    <ng-template #notDone>\n      <div *ngIf=\"variant==='number'\" class=\"step-number\">\n        <h5 class=\"vision-h5\">{{ stepNumber }}</h5>\n      </div>\n      <div *ngIf=\"variant==='icon'\" class=\"step-icon\">\n        <fw-icon size=\"small\">{{ 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 class=\"vision-h4\">{{ title }}</h4>\n      <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n    </div>\n  </div>\n</div>\n", styles: [":host{box-sizing:border-box;position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center}:host .step-connector{position:absolute;left:-50%;right:0;top:17px;height:1px;width:100%;background-color:var(--separations-base);z-index:49}:host:first-of-type .step-connector{display:none}:host .step-content{position:relative;z-index:50}:host .step-number{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;padding:9px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;border:1px solid var(--separations-base);background:var(--slate-hover)}:host .step-number h5{color:inherit;margin:0}:host .step-icon{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);color:var(--typography-muted);font-size:24px}:host .step-decorator{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;background-color:var(--card-background);font-size:24px}:host .step-done{box-sizing:border-box;display:flex;width:24px;height:24px;margin:5px 8px;flex-direction:column;justify-content:center;align-items:center;border-radius:64px;color:var(--typography-contrast);background-color:var(--green-base);font-size:16px}:host .step-text{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--typography-muted);font-size:14px;font-weight:500;line-height:130%}:host .step-text h4{margin:0;white-space:nowrap;color:var(--typography-muted)}:host .step-text p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .step-text .description{color:var(--typography-muted);font-size:10px;font-weight:400;line-height:12px}:host .step-alignment-center .step-content{background-color:transparent!important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .step-alignment-center .step-content .step-text{align-items:center}:host .step-alignment-left .step-content{background-color:var(--card-background);padding-right:10px;display:flex;flex-direction:row}:host .active .step-number{background-color:transparent;border:1px solid var(--primary-base);color:var(--primary-base)}:host .active .step-icon{color:var(--primary-base)}:host .active .step-text{color:var(--primary-base)}:host .active .step-text h4{color:var(--primary-base)}:host .active .step-connector{background-color:var(--primary-base)}:host .completed .step-number,:host .completed .step-icon{background-color:var(--primary-base);border:1px solid var(--primary-base);color:var(--typography-contrast)}:host .completed .step-icon{background-color:transparent;border:none;color:var(--primary-base)}:host .completed .step-text{color:var(--typography-base)}:host .completed .step-text h4{color:var(--typography-base)}:host .completed .step-connector{background-color:var(--primary-base)}:host .completed:not(.done){cursor:pointer}:host .done .step-connector{background-color:var(--green-base)}:host .step-color-error .step-number{background-color:var(--red-hover);color:var(--red-base)}:host .step-color-error .step-icon{color:var(--red-base)}:host .step-color-error .step-text{color:var(--red-base)}:host .step-color-error .step-text h4{color:var(--red-base)}:host .step-color-error .step-text .description{color:var(--red-base)}:host .step-color-error.active{color:var(--red-base)}:host .step-color-error.active .step-number{border-color:var(--red-base);color:var(--red-base)}:host .step-color-error.completed .step-number{color:var(--typography-contrast);border-color:var(--red-base);background-color:var(--red-base)}:host .step-color-error.completed .step-icon{background-color:transparent;border:none}:host .step-color-warning .step-number{background-color:var(--orange-hover);color:var(--orange-base)}:host .step-color-warning .step-icon{color:var(--orange-base)}:host .step-color-warning .step-text{color:var(--orange-base)}:host .step-color-warning .step-text h4{color:var(--orange-base)}:host .step-color-warning .step-text .description{color:var(--orange-base)}:host .step-color-warning.active{color:var(--orange-base)}:host .step-color-warning.active .step-number{border-color:var(--orange-base);color:var(--orange-base)}:host .step-color-warning.completed .step-number{color:var(--typography-contrast);border-color:var(--orange-base);background-color:var(--orange-base)}:host .step-color-warning.completed .step-icon{background-color:transparent;border:none}:host .step-color-success .step-number{background-color:var(--green-hover);color:var(--green-base)}:host .step-color-success .step-icon{color:var(--green-base)}:host .step-color-success .step-text{color:var(--green-base)}:host .step-color-success .step-text h4{color:var(--green-base)}:host .step-color-success .step-text .description{color:var(--green-base)}:host .step-color-success.active{color:var(--green-base)}:host .step-color-success.active .step-number{border-color:var(--green-base);color:var(--green-base)}:host .step-color-success.completed .step-number{color:var(--typography-contrast);border-color:var(--green-base);background-color:var(--green-base)}:host .step-color-success.completed .step-icon{background-color:transparent;border:none}:host .step-color-info .step-number{background-color:var(--primary-hover);color:var(--primary-base)}:host .step-color-info .step-icon{color:var(--primary-base)}:host .step-color-info .step-text{color:var(--primary-base)}:host .step-color-info .step-text h4{color:var(--primary-base)}:host .step-color-info .step-text .description{color:var(--primary-base)}:host .step-color-info.active{color:var(--primary-base)}:host .step-color-info.active .step-number{background-color:var(--typography-contrast);border-color:var(--primary-base);color:var(--primary-base)}:host .step-color-info.completed .step-number{color:var(--typography-contrast);border-color:var(--primary-base);background-color:var(--primary-base)}:host .step-color-info.completed .step-icon{background-color:transparent;border:none}:host .disabled .step-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{opacity:.4;color:var(--typography-muted);background-color:var(--typography-contrast);border-color:var(--typography-contrast)}\n"] }]
         }], propDecorators: { stepNumber: [{
                 type: Input
             }], color: [{
@@ -7993,7 +8000,7 @@ FwTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
         // Prevent nested tables from seeing this table's StickyPositioningListener.
         { provide: STICKY_POSITIONING_LISTENER, useValue: null },
-    ], exportAs: ["fwTable"], usesInheritance: true, ngImport: i0, template: "<ng-container headerRowOutlet></ng-container>\n<ng-container rowOutlet></ng-container>\n<ng-container noDataRowOutlet></ng-container>\n<ng-container footerRowOutlet></ng-container>\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,.fw-table .fw-header-row .fw-header-cell,.fw-table .fw-footer-row .fw-footer-cell{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,.fw-table .fw-row .fw-cell{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-table{background-color:var(--card-background);max-height:100%;width:100%;overflow:auto;border-collapse:separate;border-spacing:0;display:block;position:relative}.fw-table .fw-cell-div{display:flex;align-items:center;gap:8px}.fw-table .fw-cell-div fw-avatar{margin:-10px 0}.fw-table .fw-cell-div fw-checkbox{margin:-10px 0}.fw-table .fw-header-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-header-row .fw-header-cell{display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;border-bottom:1px solid var(--separations-base);height:56px;overflow:hidden}.fw-table .fw-header-row .fw-header-cell fw-icon{font-size:18px;color:var(--typography-light)}.fw-table .fw-header-row.fw-table-sticky{position:sticky;top:0;background:inherit;z-index:100}.fw-table .fw-footer-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-footer-row .fw-footer-cell{border-top:1px solid var(--separations-base);display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;height:52px;margin-top:-1px;overflow:hidden}.fw-table .fw-footer-row .fw-footer-cell fw-icon{font-size:18px;color:var(--typography-light)}.fw-table .fw-footer-row.fw-table-sticky{position:sticky;bottom:0;background:inherit;z-index:100}.fw-table .fw-row{min-width:100%;display:flex;align-items:center;color:var(--typography-muted)}.fw-table .fw-row:hover{background-color:var(--slate-hover)}.fw-table .fw-row.selected{background-color:var(--primary-hover)}.fw-table .fw-row .fw-cell{display:flex;align-items:center;flex:1;color:var(--typography-muted);border-bottom:1px solid var(--separations-base);border-top:1px solid transparent;cursor:pointer;padding:16px 8px 16px 16px;box-sizing:border-box;height:52px;overflow:hidden}.fw-table .fw-row .fw-cell.no-wrap{white-space:nowrap}.fw-table .fw-row .fw-cell.flex-cell{flex:1}.fw-table .fw-row .fw-cell p{align-items:center;color:var(--typography-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fw-table .fw-row .fw-cell .link{color:var(--primary-base);display:block;align-items:center}.fw-table .fw-row .fw-cell fw-avatar{margin-right:8px}.fw-table .fw-row:last-child .fw-cell{border-bottom:1px solid transparent}table.fw-table{display:table}table.fw-table tr.fw-header-row{display:table-row}table.fw-table tr.fw-header-row th.fw-header-cell{display:table-cell}table.fw-table tr.fw-row{display:table-row}table.fw-table tr.fw-row td.fw-cell{display:table-cell}table.fw-table tr.fw-footer-row{display:table-row}table.fw-table tr.fw-footer-row td.fw-footer-cell{display:table-cell}\n"], dependencies: [{ kind: "directive", type: i1$4.DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: i1$4.HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: i1$4.FooterRowOutlet, selector: "[footerRowOutlet]" }, { kind: "directive", type: i1$4.NoDataRowOutlet, selector: "[noDataRowOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    ], exportAs: ["fwTable"], usesInheritance: true, ngImport: i0, template: "<ng-container headerRowOutlet></ng-container>\n<ng-container rowOutlet></ng-container>\n<ng-container noDataRowOutlet></ng-container>\n<ng-container footerRowOutlet></ng-container>\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,.fw-table .fw-header-row .fw-header-cell,.fw-table .fw-footer-row .fw-footer-cell{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,.fw-table .fw-row .fw-cell{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-table{background-color:var(--card-background);max-height:100%;width:100%;overflow:auto;border-collapse:separate;border-spacing:0;display:block;position:relative}.fw-table .fw-cell-div{display:flex;align-items:center;gap:8px}.fw-table .fw-cell-div fw-avatar{margin:-10px 0}.fw-table .fw-cell-div fw-checkbox{margin:-10px 0}.fw-table .fw-header-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-header-row .fw-header-cell{display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;border-bottom:1px solid var(--separations-base);height:56px;overflow:hidden}.fw-table .fw-header-row .fw-header-cell fw-icon{font-size:18px;width:18px;max-width:18px;color:var(--typography-light)}.fw-table .fw-header-row.fw-table-sticky{position:sticky;top:0;background:inherit;z-index:100}.fw-table .fw-footer-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-footer-row .fw-footer-cell{border-top:1px solid var(--separations-base);display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;height:52px;margin-top:-1px;overflow:hidden}.fw-table .fw-footer-row .fw-footer-cell fw-icon{font-size:18px;width:18px;max-width:18px;color:var(--typography-light)}.fw-table .fw-footer-row.fw-table-sticky{position:sticky;bottom:0;background:inherit;z-index:100}.fw-table .fw-row{min-width:100%;display:flex;align-items:center;color:var(--typography-muted)}.fw-table .fw-row:hover{background-color:var(--slate-hover)}.fw-table .fw-row.selected{background-color:var(--primary-hover)}.fw-table .fw-row .fw-cell{display:flex;align-items:center;flex:1;color:var(--typography-muted);border-bottom:1px solid var(--separations-base);border-top:1px solid transparent;cursor:pointer;padding:16px 8px 16px 16px;box-sizing:border-box;height:52px;overflow:hidden}.fw-table .fw-row .fw-cell.no-wrap{white-space:nowrap}.fw-table .fw-row .fw-cell.flex-cell{flex:1}.fw-table .fw-row .fw-cell p{align-items:center;color:var(--typography-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fw-table .fw-row .fw-cell .link{color:var(--primary-base);display:block;align-items:center}.fw-table .fw-row .fw-cell fw-avatar{margin-right:8px}.fw-table .fw-row:last-child .fw-cell{border-bottom:1px solid transparent}table.fw-table{display:table}table.fw-table tr.fw-header-row{display:table-row}table.fw-table tr.fw-header-row th.fw-header-cell{display:table-cell}table.fw-table tr.fw-row{display:table-row}table.fw-table tr.fw-row td.fw-cell{display:table-cell}table.fw-table tr.fw-footer-row{display:table-row}table.fw-table tr.fw-footer-row td.fw-footer-cell{display:table-cell}\n"], dependencies: [{ kind: "directive", type: i1$4.DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: i1$4.HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: i1$4.FooterRowOutlet, selector: "[footerRowOutlet]" }, { kind: "directive", type: i1$4.NoDataRowOutlet, selector: "[noDataRowOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-table, table[fw-table]', exportAs: 'fwTable', providers: [
@@ -8003,7 +8010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
                         // Prevent nested tables from seeing this table's StickyPositioningListener.
                         { provide: STICKY_POSITIONING_LISTENER, useValue: null },
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container headerRowOutlet></ng-container>\n<ng-container rowOutlet></ng-container>\n<ng-container noDataRowOutlet></ng-container>\n<ng-container footerRowOutlet></ng-container>\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,.fw-table .fw-header-row .fw-header-cell,.fw-table .fw-footer-row .fw-footer-cell{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,.fw-table .fw-row .fw-cell{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-table{background-color:var(--card-background);max-height:100%;width:100%;overflow:auto;border-collapse:separate;border-spacing:0;display:block;position:relative}.fw-table .fw-cell-div{display:flex;align-items:center;gap:8px}.fw-table .fw-cell-div fw-avatar{margin:-10px 0}.fw-table .fw-cell-div fw-checkbox{margin:-10px 0}.fw-table .fw-header-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-header-row .fw-header-cell{display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;border-bottom:1px solid var(--separations-base);height:56px;overflow:hidden}.fw-table .fw-header-row .fw-header-cell fw-icon{font-size:18px;color:var(--typography-light)}.fw-table .fw-header-row.fw-table-sticky{position:sticky;top:0;background:inherit;z-index:100}.fw-table .fw-footer-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-footer-row .fw-footer-cell{border-top:1px solid var(--separations-base);display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;height:52px;margin-top:-1px;overflow:hidden}.fw-table .fw-footer-row .fw-footer-cell fw-icon{font-size:18px;color:var(--typography-light)}.fw-table .fw-footer-row.fw-table-sticky{position:sticky;bottom:0;background:inherit;z-index:100}.fw-table .fw-row{min-width:100%;display:flex;align-items:center;color:var(--typography-muted)}.fw-table .fw-row:hover{background-color:var(--slate-hover)}.fw-table .fw-row.selected{background-color:var(--primary-hover)}.fw-table .fw-row .fw-cell{display:flex;align-items:center;flex:1;color:var(--typography-muted);border-bottom:1px solid var(--separations-base);border-top:1px solid transparent;cursor:pointer;padding:16px 8px 16px 16px;box-sizing:border-box;height:52px;overflow:hidden}.fw-table .fw-row .fw-cell.no-wrap{white-space:nowrap}.fw-table .fw-row .fw-cell.flex-cell{flex:1}.fw-table .fw-row .fw-cell p{align-items:center;color:var(--typography-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fw-table .fw-row .fw-cell .link{color:var(--primary-base);display:block;align-items:center}.fw-table .fw-row .fw-cell fw-avatar{margin-right:8px}.fw-table .fw-row:last-child .fw-cell{border-bottom:1px solid transparent}table.fw-table{display:table}table.fw-table tr.fw-header-row{display:table-row}table.fw-table tr.fw-header-row th.fw-header-cell{display:table-cell}table.fw-table tr.fw-row{display:table-row}table.fw-table tr.fw-row td.fw-cell{display:table-cell}table.fw-table tr.fw-footer-row{display:table-row}table.fw-table tr.fw-footer-row td.fw-footer-cell{display:table-cell}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container headerRowOutlet></ng-container>\n<ng-container rowOutlet></ng-container>\n<ng-container noDataRowOutlet></ng-container>\n<ng-container footerRowOutlet></ng-container>\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,.fw-table .fw-header-row .fw-header-cell,.fw-table .fw-footer-row .fw-footer-cell{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,.fw-table .fw-row .fw-cell{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.fw-table{background-color:var(--card-background);max-height:100%;width:100%;overflow:auto;border-collapse:separate;border-spacing:0;display:block;position:relative}.fw-table .fw-cell-div{display:flex;align-items:center;gap:8px}.fw-table .fw-cell-div fw-avatar{margin:-10px 0}.fw-table .fw-cell-div fw-checkbox{margin:-10px 0}.fw-table .fw-header-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-header-row .fw-header-cell{display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;border-bottom:1px solid var(--separations-base);height:56px;overflow:hidden}.fw-table .fw-header-row .fw-header-cell fw-icon{font-size:18px;width:18px;max-width:18px;color:var(--typography-light)}.fw-table .fw-header-row.fw-table-sticky{position:sticky;top:0;background:inherit;z-index:100}.fw-table .fw-footer-row{min-width:100%;display:flex;align-items:center}.fw-table .fw-footer-row .fw-footer-cell{border-top:1px solid var(--separations-base);display:flex;align-items:center;flex:1;box-sizing:border-box;padding:19px 8px 19px 16px;text-align:left;height:52px;margin-top:-1px;overflow:hidden}.fw-table .fw-footer-row .fw-footer-cell fw-icon{font-size:18px;width:18px;max-width:18px;color:var(--typography-light)}.fw-table .fw-footer-row.fw-table-sticky{position:sticky;bottom:0;background:inherit;z-index:100}.fw-table .fw-row{min-width:100%;display:flex;align-items:center;color:var(--typography-muted)}.fw-table .fw-row:hover{background-color:var(--slate-hover)}.fw-table .fw-row.selected{background-color:var(--primary-hover)}.fw-table .fw-row .fw-cell{display:flex;align-items:center;flex:1;color:var(--typography-muted);border-bottom:1px solid var(--separations-base);border-top:1px solid transparent;cursor:pointer;padding:16px 8px 16px 16px;box-sizing:border-box;height:52px;overflow:hidden}.fw-table .fw-row .fw-cell.no-wrap{white-space:nowrap}.fw-table .fw-row .fw-cell.flex-cell{flex:1}.fw-table .fw-row .fw-cell p{align-items:center;color:var(--typography-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fw-table .fw-row .fw-cell .link{color:var(--primary-base);display:block;align-items:center}.fw-table .fw-row .fw-cell fw-avatar{margin-right:8px}.fw-table .fw-row:last-child .fw-cell{border-bottom:1px solid transparent}table.fw-table{display:table}table.fw-table tr.fw-header-row{display:table-row}table.fw-table tr.fw-header-row th.fw-header-cell{display:table-cell}table.fw-table tr.fw-row{display:table-row}table.fw-table tr.fw-row td.fw-cell{display:table-cell}table.fw-table tr.fw-footer-row{display:table-row}table.fw-table tr.fw-footer-row td.fw-footer-cell{display:table-cell}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding
             }] } });
@@ -8156,10 +8163,10 @@ class FwTabComponent {
     }
 }
 FwTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTabComponent, selector: "fw-tab", inputs: { title: "title", panel: "panel", color: "color", icon: "icon", active: "active", disabled: "disabled", tabindex: "tabindex" }, outputs: { select: "select" }, host: { listeners: { "click": "onClick()", "window:keyup": "keyEvent($event)" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled", "role": "this.role", "tabindex": "this.tabindex", "class": "this.cssClass" } }, ngImport: i0, template: "<fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n<h4 class=\"vision-h4\">{{ title }}</h4>\n<ng-content select=\"fw-badge\"></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;padding:16px;gap:8px;border-bottom:2px solid transparent;cursor:pointer;height:45px;box-sizing:border-box}:host fw-icon{font-size:24px}:host h4{margin:0;color:var(--typography-muted);white-space:nowrap}:host.primary{color:var(--primary-base)}:host.primary:hover h4{color:var(--typography-base)}:host.primary.active{border-bottom:2px solid var(--primary-base)}:host.primary.active h4{color:var(--primary-base)}:host.primary:focus-visible{outline:2px dotted var(--primary-base)}:host.secondary{color:var(--secondary-base)}:host.secondary:hover h4{color:var(--secondary-base)}:host.secondary:focus-visible{outline:2px dotted var(--secondary-base)}:host.secondary.active{border-bottom:2px solid var(--secondary-base)}:host.secondary.active h4{color:var(--secondary-base)}:host.disabled{color:var(--typography-muted);cursor:not-allowed;opacity:.4}:host.disabled:focus-visible{outline:2px dotted var(--typography-muted)}:host.disabled.active{border-bottom:2px solid transparent}:host.disabled.active h4{color:var(--typography-muted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTabComponent, selector: "fw-tab", inputs: { title: "title", panel: "panel", color: "color", icon: "icon", active: "active", disabled: "disabled", tabindex: "tabindex" }, outputs: { select: "select" }, host: { listeners: { "click": "onClick()", "window:keyup": "keyEvent($event)" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled", "role": "this.role", "tabindex": "this.tabindex", "class": "this.cssClass" } }, ngImport: i0, template: "<fw-icon *ngIf=\"icon\" size=\"medium\">{{ icon }}</fw-icon>\n<h4 class=\"vision-h4\">{{ title }}</h4>\n<ng-content select=\"fw-badge\"></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;padding:16px;gap:8px;border-bottom:2px solid transparent;cursor:pointer;height:45px;box-sizing:border-box}:host h4{margin:0;color:var(--typography-muted);white-space:nowrap}:host.primary{color:var(--primary-base)}:host.primary:hover h4{color:var(--typography-base)}:host.primary.active{border-bottom:2px solid var(--primary-base)}:host.primary.active h4{color:var(--primary-base)}:host.primary:focus-visible{outline:2px dotted var(--primary-base)}:host.secondary{color:var(--secondary-base)}:host.secondary:hover h4{color:var(--secondary-base)}:host.secondary:focus-visible{outline:2px dotted var(--secondary-base)}:host.secondary.active{border-bottom:2px solid var(--secondary-base)}:host.secondary.active h4{color:var(--secondary-base)}:host.disabled{color:var(--typography-muted);cursor:not-allowed;opacity:.4}:host.disabled:focus-visible{outline:2px dotted var(--typography-muted)}:host.disabled.active{border-bottom:2px solid transparent}:host.disabled.active h4{color:var(--typography-muted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-tab', template: "<fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n<h4 class=\"vision-h4\">{{ title }}</h4>\n<ng-content select=\"fw-badge\"></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;padding:16px;gap:8px;border-bottom:2px solid transparent;cursor:pointer;height:45px;box-sizing:border-box}:host fw-icon{font-size:24px}:host h4{margin:0;color:var(--typography-muted);white-space:nowrap}:host.primary{color:var(--primary-base)}:host.primary:hover h4{color:var(--typography-base)}:host.primary.active{border-bottom:2px solid var(--primary-base)}:host.primary.active h4{color:var(--primary-base)}:host.primary:focus-visible{outline:2px dotted var(--primary-base)}:host.secondary{color:var(--secondary-base)}:host.secondary:hover h4{color:var(--secondary-base)}:host.secondary:focus-visible{outline:2px dotted var(--secondary-base)}:host.secondary.active{border-bottom:2px solid var(--secondary-base)}:host.secondary.active h4{color:var(--secondary-base)}:host.disabled{color:var(--typography-muted);cursor:not-allowed;opacity:.4}:host.disabled:focus-visible{outline:2px dotted var(--typography-muted)}:host.disabled.active{border-bottom:2px solid transparent}:host.disabled.active h4{color:var(--typography-muted)}\n"] }]
+            args: [{ selector: 'fw-tab', template: "<fw-icon *ngIf=\"icon\" size=\"medium\">{{ icon }}</fw-icon>\n<h4 class=\"vision-h4\">{{ title }}</h4>\n<ng-content select=\"fw-badge\"></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;padding:16px;gap:8px;border-bottom:2px solid transparent;cursor:pointer;height:45px;box-sizing:border-box}:host h4{margin:0;color:var(--typography-muted);white-space:nowrap}:host.primary{color:var(--primary-base)}:host.primary:hover h4{color:var(--typography-base)}:host.primary.active{border-bottom:2px solid var(--primary-base)}:host.primary.active h4{color:var(--primary-base)}:host.primary:focus-visible{outline:2px dotted var(--primary-base)}:host.secondary{color:var(--secondary-base)}:host.secondary:hover h4{color:var(--secondary-base)}:host.secondary:focus-visible{outline:2px dotted var(--secondary-base)}:host.secondary.active{border-bottom:2px solid var(--secondary-base)}:host.secondary.active h4{color:var(--secondary-base)}:host.disabled{color:var(--typography-muted);cursor:not-allowed;opacity:.4}:host.disabled:focus-visible{outline:2px dotted var(--typography-muted)}:host.disabled.active{border-bottom:2px solid transparent}:host.disabled.active h4{color:var(--typography-muted)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], panel: [{