@flywheel-io/vision 1.5.1 → 1.6.1

package/fesm2020/flywheel-io-vision.mjs

@@ -1,10 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, EventEmitter, Output, NgModule, ContentChildren, Directive, ViewEncapsulation, forwardRef, HostListener, Optional, Injectable, Inject, SkipSelf, Pipe, SimpleChange, ContentChild, ViewChild, ViewChildren } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, EventEmitter, Output, NgModule, ContentChildren, ViewEncapsulation, ViewChild, Directive, forwardRef, HostListener, Optional, Injectable, Inject, SkipSelf, Pipe, SimpleChange, ContentChild, ViewChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
 import * as i8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/cdk/dialog';
@@ -15,6 +13,8 @@ import { of, Subject, BehaviorSubject, Subscription, min } from 'rxjs';
 import { isValidPhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import * as i3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/cdk/portal';
@@ -47,7 +47,12 @@ class FwIconComponent {
         }
         let color = '';
         if (this.color) {
-            color = `color: var(--${this.color}-base);`;
+            if (this.color === 'muted') {
+                color = 'color: var(--typography-muted);';
+            }
+            else {
+                color = `color: var(--${this.color}-base);`;
+            }
         }
         return this.sanitizer.bypassSecurityTrustStyle(`
       ${size}
@@ -505,6 +510,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+/** Based on [mat-progress-spinner](https://material.angular.io/components/progress-spinner/) */
+class FwProgressSpinnerComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        /** Mode of the progress spinner. **/
+        this.mode = 'indeterminate';
+        /** Size of the progress spinner. **/
+        this.size = 'medium';
+        /** Color of the progress spinner. **/
+        this.color = 'primary';
+        /** Whether to show the value percentage label on the progress spinner. **/
+        this.showValue = false;
+        this._value = 0;
+        this._diameter = 20;
+        this._strokeWidth = 3;
+    }
+    /** Value of the progress spinner. Defaults to zero. Mirrored to aria-valuenow. **/
+    get value() {
+        // return this.mode === 'determinate' ? this._value : 0;
+        return this._value;
+    }
+    set value(v) {
+        this._value = Math.max(0, Math.min(100, v || 0));
+    }
+    /** The diameter of the progress spinner (will set width and height of svg). */
+    get diameter() {
+        switch (this.size) {
+            case 'small':
+                this._diameter = 20;
+                this._strokeWidth = 3;
+                break;
+            case 'medium':
+                this._diameter = 36;
+                this._strokeWidth = 4;
+                break;
+        }
+        return this._diameter;
+    }
+    /** The radius of the spinner, adjusted for stroke width. */
+    _circleRadius() {
+        return (this.diameter - 10) / 2;
+    }
+    /** The view box of the spinner's svg element. */
+    _viewBox() {
+        const viewBox = this._circleRadius() * 2 + this._strokeWidth;
+        return `0 0 ${viewBox} ${viewBox}`;
+    }
+    /** The stroke circumference of the svg circle. */
+    _strokeCircumference() {
+        return 2 * Math.PI * this._circleRadius();
+    }
+    /** The dash offset of the svg circle. */
+    _strokeDashOffset() {
+        if (this.mode === 'determinate') {
+            return (this._strokeCircumference() * (100 - this._value)) / 100;
+        }
+        return null;
+    }
+    /** Stroke width of the circle in percent. */
+    _circleStrokeWidth() {
+        return (this._strokeWidth / this.diameter) * 100;
+    }
+}
+FwProgressSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwProgressSpinnerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+FwProgressSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: { mode: "mode", size: "size", color: "color", showValue: "showValue", value: "value" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode === \"indeterminate\"", "class.progress-small": "size === \"small\"", "class.progress-show-value": "this.showValue", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode === \"determinate\" ? value : null", "attr.mode": "mode" }, classAttribute: "fw-progress-spinner" }, viewQueries: [{ propertyName: "_determinateCircle", first: true, predicate: ["determinateSpinner"], descendants: true }], ngImport: i0, template: "<ng-template #circle>\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    [ngClass]=\"['progress-indeterminate-circle-graphic', color]\"\n    xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"progress-indeterminate-track\"\n      cx=\"50%\" cy=\"50%\"/>\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    [ngClass]=\"['progress-determinate-circle-graphic', color]\"\n    xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"progress-determinate-track\"\n      cx=\"50%\" cy=\"50%\"/>\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"progress-determinate-circle\"\n      cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n  <div class=\"progress-spinner-layer\">\n    <div class=\"progress-circle-clipper progress-circle-left\">\n      <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n    </div>\n    <div class=\"progress-circle-clipper progress-circle-right\">\n      <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n    </div>\n  </div>\n</div>\n<p [ngClass]=\"['progress-label','size-'+size, 'mode-'+mode]\" *ngIf=\"showValue\">{{ value }}%</p>\n", styles: [".fw-progress-spinner{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-progress-spinner', host: {
+                        'role': 'progressbar',
+                        'class': 'fw-progress-spinner',
+                        'tabindex': '-1',
+                        '[class.progress-indeterminate]': 'mode === "indeterminate"',
+                        '[class.progress-small]': 'size === "small"',
+                        '[class.progress-show-value]': 'this.showValue',
+                        '[style.width.px]': 'diameter',
+                        '[style.height.px]': 'diameter',
+                        // '[style.--progress-size]': 'diameter + "px"',
+                        // '[style.--progress-active-indicator-width]': 'diameter + "px"',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
+                        '[attr.mode]': 'mode',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #circle>\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    [ngClass]=\"['progress-indeterminate-circle-graphic', color]\"\n    xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"progress-indeterminate-track\"\n      cx=\"50%\" cy=\"50%\"/>\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n  <svg\n    [attr.viewBox]=\"_viewBox()\"\n    [ngClass]=\"['progress-determinate-circle-graphic', color]\"\n    xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"progress-determinate-track\"\n      cx=\"50%\" cy=\"50%\"/>\n    <circle\n      [attr.r]=\"_circleRadius()\"\n      [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n      [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n      [style.stroke-width.%]=\"_circleStrokeWidth()\"\n      class=\"progress-determinate-circle\"\n      cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n  <div class=\"progress-spinner-layer\">\n    <div class=\"progress-circle-clipper progress-circle-left\">\n      <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n    </div>\n    <div class=\"progress-circle-clipper progress-circle-right\">\n      <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n    </div>\n  </div>\n</div>\n<p [ngClass]=\"['progress-label','size-'+size, 'mode-'+mode]\" *ngIf=\"showValue\">{{ value }}%</p>\n", styles: [".fw-progress-spinner{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _determinateCircle: [{
+                type: ViewChild,
+                args: ['determinateSpinner']
+            }], mode: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], showValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
 class FwButtonComponent {
     constructor() {
         this.color = 'primary';
@@ -518,12 +621,28 @@ class FwButtonComponent {
     get classes() {
         return ['fw-button', this.size, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
     }
+    getMappedColor() {
+        switch (this.color) {
+            case 'primary':
+            case 'secondary':
+            case 'slate':
+                return this.color;
+            case 'danger':
+                return 'red';
+            case 'warning':
+                return 'orange';
+            case 'success':
+                return 'green';
+            default:
+                return undefined;
+        }
+    }
 }
 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", disabled: "disabled", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<button [class]=\"[color + '-' + variant, size]\" [disabled]=\"disabled\">\n  <fw-icon *ngIf=\"!!leftIcon\">{{ 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: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)}.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)}.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)}.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)}.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)}.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)}.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)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwButtonComponent, selector: "fw-button", inputs: { color: "color", size: "size", variant: "variant", disabled: "disabled", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<button [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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-button', template: "<button [class]=\"[color + '-' + variant, size]\" [disabled]=\"disabled\">\n  <fw-icon *ngIf=\"!!leftIcon\">{{ 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: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)}.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)}.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)}.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)}.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)}.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)}.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)}\n"] }]
+            args: [{ selector: 'fw-button', template: "<button [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"] }]
         }], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -669,6 +788,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['style']
             }] } });
 
+/** Based on [mat-progress-bar](https://material.angular.io/components/progress-bar/) */
+class FwProgressBarComponent {
+    constructor(_elementRef, _changeDetectorRef) {
+        this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        /** Mode of the progress bar. **/
+        this.mode = 'indeterminate';
+        /** Whether to show the value percentage label on the progress bar. **/
+        this.showValue = false;
+        this._value = 0;
+        this._bufferValue = 0;
+    }
+    /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. **/
+    get value() {
+        // return this.mode === 'determinate' ? this._value : 0;
+        return this._value;
+    }
+    set value(v) {
+        this._value = clamp(v || 0);
+        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+        this._changeDetectorRef.markForCheck();
+    }
+    /** Buffer value of the progress bar. Defaults to zero. */
+    get bufferValue() {
+        return this._bufferValue || 0;
+    }
+    set bufferValue(v) {
+        this._bufferValue = clamp(v || 0);
+        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+        this._changeDetectorRef.markForCheck();
+    }
+    /** Gets the transform style that should be applied to the primary bar. */
+    _getPrimaryBarTransform() {
+        return `scaleX(${this._isIndeterminate() ? 1 : this.value / 100})`;
+    }
+    /** Gets the `flex-basis` value that should be applied to the buffer bar. */
+    _getBufferBarFlexBasis() {
+        return `${this.mode === 'buffer' ? this.bufferValue : 100}%`;
+    }
+    /** Returns whether the progress bar is indeterminate. */
+    _isIndeterminate() {
+        return this.mode === 'indeterminate';
+    }
+}
+FwProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FwProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwProgressBarComponent, selector: "fw-progress-bar", inputs: { mode: "mode", showValue: "showValue", value: "value", bufferValue: "bufferValue" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode === \"indeterminate\"", "class.progress-show-value": "this.showValue", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "_isIndeterminate() ? null : value", "attr.mode": "mode" }, classAttribute: "fw-progress-bar progress progress-animation-ready" }, viewQueries: [{ propertyName: "_determinateCircle", first: true, predicate: ["determinateSpinner"], descendants: true }], ngImport: i0, template: "<div class=\"progress-wrapper\">\n  <div class=\"progress-buffer\" aria-hidden=\"true\">\n    <div\n      class=\"progress-buffer-bar\"\n      [style.flex-basis]=\"_getBufferBarFlexBasis()\"></div>\n    <div class=\"progress-buffer-dots\" *ngIf=\"mode === 'buffer'\"></div>\n  </div>\n  <div\n    class=\"progress-bar progress-primary-bar\"\n    aria-hidden=\"true\"\n    [style.transform]=\"_getPrimaryBarTransform()\">\n    <span class=\"progress-bar-inner\"></span>\n  </div>\n  <div class=\"progress-bar progress-secondary-bar\" aria-hidden=\"true\">\n    <span class=\"progress-bar-inner\"></span>\n  </div>\n</div>\n<p [ngClass]=\"['progress-label', 'mode-'+mode]\" *ngIf=\"showValue\">{{ value }}%</p>\n", styles: [".fw-progress-bar{display:block;text-align:start}.fw-progress-bar[mode=query]{transform:scaleX(-1)}.progress{position:relative;width:100%}.progress.progress-show-value{display:flex;align-items:center;height:14px}.progress.progress-show-value .progress-label{font-size:12px;color:var(--typography-muted);margin:0 0 0 8px}.progress-wrapper{position:relative;width:100%;transform:translateZ(0);outline:1px solid transparent;overflow-x:hidden;transition:opacity .25s 0ms cubic-bezier(.4,0,.6,1);height:4px;border-radius:4px}.progress-bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .25s 0ms cubic-bezier(.4,0,.6,1)}.progress-indeterminate .progress-bar{transition:none}[dir=rtl] .progress-bar{right:0;transform-origin:center right}.progress-bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--primary-base);border-top-width:4px;border-radius:4px}.progress-buffer{display:flex;position:absolute;top:0;bottom:0;margin:auto 0;width:100%;overflow:hidden;height:4px;border-radius:4px}.progress-buffer-dots{mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 10 4' xml:space='preserve' viewBox='0 0 10 4' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/svg%3E\");background-repeat:repeat-x;flex:auto;transform:rotate(180deg);animation:progress-buffering .25s infinite linear;background-color:var(--separations-divider)}[dir=rtl] .progress-buffer-dots{animation:progress-buffering-reverse .25s infinite linear;transform:rotate(0)}.progress-buffer-bar{flex:0 1 100%;transition:flex-basis .25s 0ms cubic-bezier(.4,0,.6,1);background-color:var(--separations-divider);border-radius:4px}.progress-primary-bar{transform:scaleX(0)}.progress-indeterminate .progress-primary-bar{left:-145.1666%}.progress-indeterminate.progress-animation-ready .progress-primary-bar{animation:progress-primary-indeterminate-translate 2s infinite linear}.progress-indeterminate.progress-animation-ready .progress-primary-bar>.progress-bar-inner{animation:progress-primary-indeterminate-scale 2s infinite linear}[dir=rtl] .progress.progress-animation-ready .progress-primary-bar{animation-name:progress-primary-indeterminate-translate-reverse}[dir=rtl] .progress.progress-indeterminate .progress-primary-bar{right:-145.1666%;left:auto}.progress-secondary-bar{display:none}.progress-indeterminate .progress-secondary-bar{left:-54.8889%;display:block}.progress-indeterminate.progress-animation-ready .progress-secondary-bar{animation:progress-secondary-indeterminate-translate 2s infinite linear}.progress-indeterminate.progress-animation-ready .progress-secondary-bar>.progress-bar-inner{animation:progress-secondary-indeterminate-scale 2s infinite linear}[dir=rtl] .progress.progress-animation-ready .progress-secondary-bar{animation-name:progress-secondary-indeterminate-translate-reverse}[dir=rtl] .progress.progress-indeterminate .progress-secondary-bar{right:-54.8889%;left:auto}@keyframes progress-buffering{0%{transform:rotate(180deg) translate(-10px)}}@keyframes progress-primary-indeterminate-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.7017,.4958);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.3024,.3813,.55,.9563);transform:translate(83.6714%)}to{transform:translate(200.611%)}}@keyframes progress-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.3347,.1248,.7858,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.6614)}to{transform:scaleX(.08)}}@keyframes progress-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515,.4096);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31,.284,.8,.7337);transform:translate(37.6519%)}48.35%{animation-timing-function:cubic-bezier(.4,.627,.6,.902);transform:translate(84.3862%)}to{transform:translate(160.2778%)}}@keyframes progress-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.205,.0571,.5766,.4539);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.1523,.1964,.6483,1.0043);transform:scaleX(.4571)}44.15%{animation-timing-function:cubic-bezier(.2578,-.0032,.2118,1.3818);transform:scaleX(.7279)}to{transform:scaleX(.08)}}@keyframes progress-primary-indeterminate-translate-reverse{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.7017,.4958);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.3024,.3814,.55,.9563);transform:translate(-83.6714%)}to{transform:translate(-200.611%)}}@keyframes progress-secondary-indeterminate-translate-reverse{0%{animation-timing-function:cubic-bezier(.15,0,.515,.4096);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.3103,.284,.8,.7337);transform:translate(-37.6519%)}48.35%{animation-timing-function:cubic-bezier(.4,.627,.6,.902);transform:translate(-84.3861%)}to{transform:translate(-160.2778%)}}@keyframes progress-buffering-reverse{0%{transform:translate(-10px)}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-progress-bar', host: {
+                        'role': 'progressbar',
+                        'class': 'fw-progress-bar progress progress-animation-ready',
+                        'tabindex': '-1',
+                        '[class.progress-indeterminate]': 'mode === "indeterminate"',
+                        '[class.progress-show-value]': 'this.showValue',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[attr.aria-valuenow]': '_isIndeterminate() ? null : value',
+                        '[attr.mode]': 'mode',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"progress-wrapper\">\n  <div class=\"progress-buffer\" aria-hidden=\"true\">\n    <div\n      class=\"progress-buffer-bar\"\n      [style.flex-basis]=\"_getBufferBarFlexBasis()\"></div>\n    <div class=\"progress-buffer-dots\" *ngIf=\"mode === 'buffer'\"></div>\n  </div>\n  <div\n    class=\"progress-bar progress-primary-bar\"\n    aria-hidden=\"true\"\n    [style.transform]=\"_getPrimaryBarTransform()\">\n    <span class=\"progress-bar-inner\"></span>\n  </div>\n  <div class=\"progress-bar progress-secondary-bar\" aria-hidden=\"true\">\n    <span class=\"progress-bar-inner\"></span>\n  </div>\n</div>\n<p [ngClass]=\"['progress-label', 'mode-'+mode]\" *ngIf=\"showValue\">{{ value }}%</p>\n", styles: [".fw-progress-bar{display:block;text-align:start}.fw-progress-bar[mode=query]{transform:scaleX(-1)}.progress{position:relative;width:100%}.progress.progress-show-value{display:flex;align-items:center;height:14px}.progress.progress-show-value .progress-label{font-size:12px;color:var(--typography-muted);margin:0 0 0 8px}.progress-wrapper{position:relative;width:100%;transform:translateZ(0);outline:1px solid transparent;overflow-x:hidden;transition:opacity .25s 0ms cubic-bezier(.4,0,.6,1);height:4px;border-radius:4px}.progress-bar{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;animation:none;transform-origin:top left;transition:transform .25s 0ms cubic-bezier(.4,0,.6,1)}.progress-indeterminate .progress-bar{transition:none}[dir=rtl] .progress-bar{right:0;transform-origin:center right}.progress-bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top-style:solid;border-color:var(--primary-base);border-top-width:4px;border-radius:4px}.progress-buffer{display:flex;position:absolute;top:0;bottom:0;margin:auto 0;width:100%;overflow:hidden;height:4px;border-radius:4px}.progress-buffer-dots{mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 10 4' xml:space='preserve' viewBox='0 0 10 4' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/svg%3E\");background-repeat:repeat-x;flex:auto;transform:rotate(180deg);animation:progress-buffering .25s infinite linear;background-color:var(--separations-divider)}[dir=rtl] .progress-buffer-dots{animation:progress-buffering-reverse .25s infinite linear;transform:rotate(0)}.progress-buffer-bar{flex:0 1 100%;transition:flex-basis .25s 0ms cubic-bezier(.4,0,.6,1);background-color:var(--separations-divider);border-radius:4px}.progress-primary-bar{transform:scaleX(0)}.progress-indeterminate .progress-primary-bar{left:-145.1666%}.progress-indeterminate.progress-animation-ready .progress-primary-bar{animation:progress-primary-indeterminate-translate 2s infinite linear}.progress-indeterminate.progress-animation-ready .progress-primary-bar>.progress-bar-inner{animation:progress-primary-indeterminate-scale 2s infinite linear}[dir=rtl] .progress.progress-animation-ready .progress-primary-bar{animation-name:progress-primary-indeterminate-translate-reverse}[dir=rtl] .progress.progress-indeterminate .progress-primary-bar{right:-145.1666%;left:auto}.progress-secondary-bar{display:none}.progress-indeterminate .progress-secondary-bar{left:-54.8889%;display:block}.progress-indeterminate.progress-animation-ready .progress-secondary-bar{animation:progress-secondary-indeterminate-translate 2s infinite linear}.progress-indeterminate.progress-animation-ready .progress-secondary-bar>.progress-bar-inner{animation:progress-secondary-indeterminate-scale 2s infinite linear}[dir=rtl] .progress.progress-animation-ready .progress-secondary-bar{animation-name:progress-secondary-indeterminate-translate-reverse}[dir=rtl] .progress.progress-indeterminate .progress-secondary-bar{right:-54.8889%;left:auto}@keyframes progress-buffering{0%{transform:rotate(180deg) translate(-10px)}}@keyframes progress-primary-indeterminate-translate{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.7017,.4958);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.3024,.3813,.55,.9563);transform:translate(83.6714%)}to{transform:translate(200.611%)}}@keyframes progress-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.3347,.1248,.7858,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.6614)}to{transform:scaleX(.08)}}@keyframes progress-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515,.4096);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.31,.284,.8,.7337);transform:translate(37.6519%)}48.35%{animation-timing-function:cubic-bezier(.4,.627,.6,.902);transform:translate(84.3862%)}to{transform:translate(160.2778%)}}@keyframes progress-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.205,.0571,.5766,.4539);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.1523,.1964,.6483,1.0043);transform:scaleX(.4571)}44.15%{animation-timing-function:cubic-bezier(.2578,-.0032,.2118,1.3818);transform:scaleX(.7279)}to{transform:scaleX(.08)}}@keyframes progress-primary-indeterminate-translate-reverse{0%{transform:translate(0)}20%{animation-timing-function:cubic-bezier(.5,0,.7017,.4958);transform:translate(0)}59.15%{animation-timing-function:cubic-bezier(.3024,.3814,.55,.9563);transform:translate(-83.6714%)}to{transform:translate(-200.611%)}}@keyframes progress-secondary-indeterminate-translate-reverse{0%{animation-timing-function:cubic-bezier(.15,0,.515,.4096);transform:translate(0)}25%{animation-timing-function:cubic-bezier(.3103,.284,.8,.7337);transform:translate(-37.6519%)}48.35%{animation-timing-function:cubic-bezier(.4,.627,.6,.902);transform:translate(-84.3861%)}to{transform:translate(-160.2778%)}}@keyframes progress-buffering-reverse{0%{transform:translate(-10px)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _determinateCircle: [{
+                type: ViewChild,
+                args: ['determinateSpinner']
+            }], mode: [{
+                type: Input
+            }], showValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], bufferValue: [{
+                type: Input
+            }] } });
+/** Clamps a value to be between two numbers, by default 0 and 100. */
+function clamp(v, min = 0, max = 100) {
+    return Math.max(min, Math.min(max, v));
+}
+
+class FwProgressModule {
+}
+FwProgressModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwProgressModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwProgressModule, declarations: [FwProgressBarComponent,
+        FwProgressSpinnerComponent], imports: [CommonModule], exports: [FwProgressBarComponent,
+        FwProgressSpinnerComponent] });
+FwProgressModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwProgressModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwProgressModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        FwProgressBarComponent,
+                        FwProgressSpinnerComponent,
+                    ],
+                    declarations: [
+                        FwProgressBarComponent,
+                        FwProgressSpinnerComponent,
+                    ],
+                }]
+        }] });
+
 class FwButtonModule {
 }
 FwButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -678,23 +897,23 @@ FwButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         FwButtonPrimaryDirective,
         FwButtonSecondaryDirective,
         FwButtonSuccessDirective], imports: [CommonModule,
-        MatButtonModule,
-        FwIconModule], exports: [FwButtonComponent,
+        FwIconModule,
+        FwProgressModule], exports: [FwButtonComponent,
         FwButtonDirective,
         FwButtonDangerDirective,
         FwButtonPrimaryDirective,
         FwButtonSecondaryDirective,
         FwButtonSuccessDirective] });
 FwButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonModule, imports: [CommonModule,
-        MatButtonModule,
-        FwIconModule] });
+        FwIconModule,
+        FwProgressModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        MatButtonModule,
                         FwIconModule,
+                        FwProgressModule,
                     ],
                     exports: [
                         FwButtonComponent,
@@ -974,18 +1193,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class FwCardHeaderComponent {
+    constructor() {
+        this.iconColor = 'primary';
+    }
 }
 FwCardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwCardHeaderComponent, selector: "fw-card-header", inputs: { title: "title", description: "description", leftIcon: "leftIcon" }, ngImport: i0, template: "<ng-content select=\"fw-app-icon\"></ng-content>\n<fw-icon *ngIf=\"leftIcon\">{{ leftIcon }}</fw-icon>\n<div class=\"card-header-title\">\n  <h3 *ngIf=\"title\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<div class=\"card-header-key\">\n  <ng-content></ng-content>\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,:host .card-header-key{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)}:host{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}:host fw-icon{color:var(--primary-base);font-size:22px}:host .card-header-title{flex:1}:host .card-header-title h3{flex:1;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .card-header-title p{color:var(--typography-muted);margin:0}:host .card-header-key{display:flex;align-items:flex-start;color:var(--typography-muted);gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] });
+FwCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwCardHeaderComponent, selector: "fw-card-header", inputs: { title: "title", description: "description", leftIcon: "leftIcon", iconColor: "iconColor" }, ngImport: i0, template: "<ng-content select=\"fw-app-icon\"></ng-content>\n<fw-icon [color]=\"iconColor\" *ngIf=\"leftIcon\">{{ leftIcon }}</fw-icon>\n<div class=\"card-header-title\">\n  <h3 *ngIf=\"title\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<div class=\"card-header-key\">\n  <ng-content></ng-content>\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,:host .card-header-key{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)}:host{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}:host fw-icon{font-size:22px}:host .card-header-title{flex:1}:host .card-header-title h3{flex:1;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .card-header-title p{color:var(--typography-muted);margin:0}:host .card-header-key{display:flex;align-items:flex-start;color:var(--typography-muted);gap:8px}\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: FwCardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-card-header', template: "<ng-content select=\"fw-app-icon\"></ng-content>\n<fw-icon *ngIf=\"leftIcon\">{{ leftIcon }}</fw-icon>\n<div class=\"card-header-title\">\n  <h3 *ngIf=\"title\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<div class=\"card-header-key\">\n  <ng-content></ng-content>\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,:host .card-header-key{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)}:host{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}:host fw-icon{color:var(--primary-base);font-size:22px}:host .card-header-title{flex:1}:host .card-header-title h3{flex:1;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .card-header-title p{color:var(--typography-muted);margin:0}:host .card-header-key{display:flex;align-items:flex-start;color:var(--typography-muted);gap:8px}\n"] }]
+            args: [{ selector: 'fw-card-header', template: "<ng-content select=\"fw-app-icon\"></ng-content>\n<fw-icon [color]=\"iconColor\" *ngIf=\"leftIcon\">{{ leftIcon }}</fw-icon>\n<div class=\"card-header-title\">\n  <h3 *ngIf=\"title\">{{ title }}</h3>\n  <p *ngIf=\"description\" class=\"vision-p3\">{{ description }}</p>\n</div>\n<div class=\"card-header-key\">\n  <ng-content></ng-content>\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,:host .card-header-key{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)}:host{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}:host fw-icon{font-size:22px}:host .card-header-title{flex:1}:host .card-header-title h3{flex:1;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-y:hidden;text-overflow:ellipsis}:host .card-header-title p{color:var(--typography-muted);margin:0}:host .card-header-key{display:flex;align-items:flex-start;color:var(--typography-muted);gap:8px}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
                 type: Input
             }], leftIcon: [{
                 type: Input
+            }], iconColor: [{
+                type: Input
             }] } });
 
 class FwCardModule {
@@ -3810,7 +4034,7 @@ class FwNavbarSubItemComponent {
     }
 }
 FwNavbarSubItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwNavbarSubItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarSubItemComponent, selector: "fw-navbar-sub-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", disabled: "disabled", hidden: "hidden", href: "href", target: "target", collapsed: "collapsed", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  [@openClose]=\"{value: collapsed?'closed':'open'}\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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      </div>\n    </div>\n  </a>\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(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}: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-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host .navbar-sub-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);min-height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-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"] }], animations: [
+FwNavbarSubItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarSubItemComponent, selector: "fw-navbar-sub-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", disabled: "disabled", hidden: "hidden", href: "href", target: "target", collapsed: "collapsed", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  [@openClose]=\"{value: collapsed?'closed':'open'}\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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      </div>\n    </div>\n  </a>\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 .navbar-sub-item:not(.disabled),:host.focused:not(.selected) .navbar-sub-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover .navbar-sub-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover .navbar-sub-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host .navbar-sub-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:30px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-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"] }], animations: [
         trigger('openClose', [
             // ...
             state('open', style({
@@ -3839,7 +4063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                                 animate('.33s ease-in-out'),
                             ]),
                         ]),
-                    ], template: "<div\n  *ngIf=\"!hidden\"\n  [@openClose]=\"{value: collapsed?'closed':'open'}\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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      </div>\n    </div>\n  </a>\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(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}: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-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host .navbar-sub-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);min-height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"] }]
+                    ], template: "<div\n  *ngIf=\"!hidden\"\n  [@openClose]=\"{value: collapsed?'closed':'open'}\">\n  <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n    <div\n      [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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      </div>\n    </div>\n  </a>\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 .navbar-sub-item:not(.disabled),:host.focused:not(.selected) .navbar-sub-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover .navbar-sub-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover .navbar-sub-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host .navbar-sub-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:30px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], title: [{
@@ -3885,6 +4109,12 @@ class FwNavbarItemComponent {
         this.updateLayout();
     }
     updateLayout() {
+        if (this.selected) {
+            this.iconColor = 'primary';
+        }
+        else {
+            this.iconColor = 'muted';
+        }
         if (this.subItems) {
             this.subItems.forEach(subItem => {
                 subItem.hidden = !(this.subItemsOpen && !this.collapsed);
@@ -3897,17 +4127,18 @@ class FwNavbarItemComponent {
             });
         }
     }
-    toggleSubItemsView() {
+    toggleSubItemsView(event) {
+        event.stopPropagation();
         this.subItemsOpen = !this.subItemsOpen;
         this.updateLayout();
         return false;
     }
 }
 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", 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    <div\n      [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n      </fw-tooltip>\n      <ng-content select=\"fw-avatar\"></ng-content>\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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()\">\n          </fw-icon-button>\n        </fw-tooltip>\n      </div>\n    </div>\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(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}: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:25px;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", "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", 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    <div\n      [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n      </fw-tooltip>\n      <ng-content select=\"fw-avatar\"></ng-content>\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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  </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", "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    <div\n      [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n      </fw-tooltip>\n      <ng-content select=\"fw-avatar\"></ng-content>\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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()\">\n          </fw-icon-button>\n        </fw-tooltip>\n      </div>\n    </div>\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(--slate-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-icon{color:var(--primary-base)}: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:25px;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    <div\n      [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n      [class.disabled]=\"disabled\">\n      <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n        <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n      </fw-tooltip>\n      <ng-content select=\"fw-avatar\"></ng-content>\n      <div class=\"navbar-text\" *ngIf=\"title\">\n        <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  </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"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], title: [{
@@ -4540,6 +4771,7 @@ class FwSelectMenuComponent {
         this.iconProperty = 'icon';
         this.descriptionProperty = 'description';
         this.showFilter = false;
+        this.showReset = false;
         this.disabled = false;
         this.width = '200px';
         this.placeholder = 'Select something...';
@@ -4661,16 +4893,16 @@ class FwSelectMenuComponent {
         if (this.trigger) {
             this.trigger.close();
         }
-        let selectedOption;
-        if (this.options && this.options.length > 0 && this.valueProperty) {
-            selectedOption = this.options.find(option => option[this.valueProperty] === value[this.valueProperty]);
-        }
-        if (value && this._valueType === 'object') {
+        if (value && this._valueType === 'object' && typeof value === 'object') {
             this.selectValue = value[this.valueProperty].toString();
             this.selectTitle = value[this.titleProperty].toString();
             this.selectIcon = value[this.iconProperty];
         }
         else {
+            let selectedOption;
+            if (this.options && this.options.length > 0 && this.valueProperty && this.value) {
+                selectedOption = this.options.find(option => option[this.valueProperty] === value[this.valueProperty]);
+            }
             if (selectedOption) {
                 this.selectValue = selectedOption[this.valueProperty].toString();
                 this.selectTitle = selectedOption[this.titleProperty].toString();
@@ -4694,15 +4926,20 @@ class FwSelectMenuComponent {
         }
         this.change.emit(value);
     }
+    handleReset() {
+        if (this.showReset) {
+            this.updateValue('');
+        }
+    }
 }
 FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", descriptionProperty: "descriptionProperty", showFilter: "showFilter", disabled: "disabled", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, providers: [
+FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => FwSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }] });
+    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-select', providers: [
@@ -4711,7 +4948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => FwSelectMenuComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    rightIcon=\"chevron-down\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
+                    ], template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (change)=\"handleClick($event)\">\n        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty].toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"item[valueProperty].toString()\"\n            [icon]=\"item[iconProperty]\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
@@ -4727,6 +4964,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], showFilter: [{
                 type: Input
+            }], showReset: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], width: [{
@@ -4880,7 +5119,7 @@ class FwPaginatorAdvancedComponent {
     }
 }
 FwPaginatorAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwPaginatorAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorAdvancedComponent, selector: "fw-paginator-advanced", inputs: { disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", length: "length", alignment: "alignment", selectorTitle: "selectorTitle", pageSize: "pageSize" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (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\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\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</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}: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: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "descriptionProperty", "showFilter", "disabled", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"], outputs: ["change"] }] });
+FwPaginatorAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorAdvancedComponent, selector: "fw-paginator-advanced", inputs: { disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", length: "length", alignment: "alignment", selectorTitle: "selectorTitle", pageSize: "pageSize" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (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\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\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</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}: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: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "descriptionProperty", "showFilter", "showReset", "disabled", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"], outputs: ["change"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-paginator-advanced', template: "<div [ngClass]=\"['paginator', alignment]\">\n  <div class=\"pages-selector\">\n    <div>\n      <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n      &nbsp;\n      <fw-select\n        [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n        [(ngModel)]=\"pageSize\">\n        <fw-menu-item\n          *ngFor=\"let size of pageSizeOptions\"\n          [value]=\"size.toString()\"\n          [title]=\"size.toString()\"\n          [selected]=\"pageSize.toString()===size.toString()\"\n          [disabled]=\"disabled\"\n        ></fw-menu-item>\n      </fw-select>\n    </div>\n    <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n      of {{ length }}</p>\n    <div>\n      <button\n        *ngIf=\"showFirst\"\n        class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() ||  disabled\" (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\"\n        (click)=\"previousPage()\">\n        <fw-icon>chevron-back</fw-icon>\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</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}: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"] }]
@@ -6644,5 +6883,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwValidators, LayoutWidth, MinimalTranslationService, TranslationService, genId, genMessageId };
+export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwLegacyChoiceDialogComponent, FwLegacyConfirmDialogComponent, FwLegacyDialogModule, FwLegacyDialogService, FwLegacyErrorDialogComponent, FwLegacyPortalDialogComponent, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwValidators, LayoutWidth, MinimalTranslationService, TranslationService, genId, genMessageId };
 //# sourceMappingURL=flywheel-io-vision.mjs.map