@flywheel-io/vision 21.8.1-branch.vision-beta-publishing.8a3e1996.0 → 21.8.1

package/fesm2022/flywheel-io-vision.mjs

@@ -1,6 +1,6 @@
-import { NgClass, CommonModule, NgStyle, NgTemplateOutlet, DecimalPipe, SlicePipe, Location } from '@angular/common';
+import { NgClass, CommonModule, NgTemplateOutlet, NgStyle, DecimalPipe, SlicePipe, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, output, NgModule, HostBinding, model, signal, effect, HostListener, ViewEncapsulation, EventEmitter, Output, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, ContentChild, contentChild, NgZone, untracked, Injectable, DOCUMENT, numberAttribute, viewChildren, linkedSignal, ViewChildren, TemplateRef } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, output, NgModule, HostBinding, model, signal, effect, HostListener, inject, ElementRef, Input, ViewChild, ViewEncapsulation, contentChildren, EventEmitter, Output, ViewContainerRef, Directive, viewChild, ChangeDetectorRef, ContentChildren, forwardRef, DestroyRef, ContentChild, contentChild, NgZone, untracked, Injectable, DOCUMENT, numberAttribute, viewChildren, linkedSignal, ViewChildren, TemplateRef } from '@angular/core';
 import { BehaviorSubject, debounce, timer, distinctUntilChanged, min, Subject, takeUntil, of, Subscription, combineLatest, tap, switchMap, map } from 'rxjs';
 import * as i1$1 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer, STANDARD_DROPDOWN_BELOW_POSITIONS } from '@angular/cdk/overlay';
@@ -407,6 +407,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Component for a circular progress spinner supporting determinate and indeterminate modes
+ * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-progress-spinner--docs)
+ */
+class FwProgressSpinnerComponent {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        /** Mode of the progress spinner. **/
+        this.mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Size of the progress spinner. **/
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Color of the progress spinner. **/
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Whether to show the value percentage label on the progress spinner. **/
+        this.showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+        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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, 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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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@if (showValue()) {\n  <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", 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, imports: [NgClass, NgTemplateOutlet], 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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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@if (showValue()) {\n  <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\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"] }]
+        }], propDecorators: { _determinateCircle: [{
+                type: ViewChild,
+                args: ['determinateSpinner']
+            }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], value: [{
+                type: Input
+            }] } });
+
+/**
+ * Component for a styled action button with configurable color, size, variant, and optional icons
+ * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-button--docs)
+ */
+class FwButtonComponent {
+    constructor() {
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+        this.leftIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leftIcon" }] : /* istanbul ignore next */ []));
+        this.rightIcon = input(undefined, ...(ngDevMode ? [{ debugName: "rightIcon" }] : /* istanbul ignore next */ []));
+        /** When true, marks this button as the initial focus target when it's the first-rendered child of a `cdkTrapFocus`/CDK Dialog focus trap. */
+        this.focusInitial = input(false, ...(ngDevMode ? [{ debugName: "focusInitial" }] : /* istanbul ignore next */ []));
+    }
+    get classes() {
+        return ['fw-button', this.size(), this.fullWidth() ? 'full-width' : null].filter(Boolean).join(' ');
+    }
+    getMappedColor() {
+        const color = this.color();
+        switch (color) {
+            case 'primary':
+            case 'secondary':
+            case 'slate':
+                return color;
+            case 'danger':
+                return 'red';
+            case 'warning':
+                return 'orange';
+            case 'success':
+                return 'green';
+            default:
+                return undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwButtonComponent, isStandalone: true, selector: "fw-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, focusInitial: { classPropertyName: "focusInitial", publicName: "focusInitial", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [class]=\"[color() + '-' + variant(), size()]\"\n  [disabled]=\"disabled()\"\n  [attr.cdkFocusInitial]=\"focusInitial() ? '' : null\"\n>\n  @if (variant() === 'progress') {\n    <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\"></fw-progress-spinner>\n  }\n  @if (!!leftIcon() && variant() !== 'progress') {\n    <fw-icon>{{ leftIcon() }}</fw-icon>\n  }\n  @if (!leftIcon()) {\n    <div class=\"spacer\"></div>\n  }\n  <span><ng-content></ng-content></span>\n  @if (!!rightIcon()) {\n    <fw-icon>{{ rightIcon() }}</fw-icon>\n  }\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px;width:20px;min-width:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px;width:24px;min-width:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.primary-progress{background-color:transparent;color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress{background-color:var(--primary-hover);color:var(--primary-base)}.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)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.secondary-progress{background-color:transparent;color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:var(--secondary-hover);color:var(--secondary-base)}.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)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.slate-progress{background-color:transparent;color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress{background-color:var(--slate-hover);color:var(--slate-base)}.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)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.danger-progress{background-color:transparent;color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress{background-color:var(--red-hover);color:var(--red-base)}.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)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.skeleton-progress{background-color:transparent;color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress{background-color:var(---hover);color:var(---base)}.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)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.warning-progress{background-color:transparent;color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress{background-color:var(--orange-hover);color:var(--orange-base)}.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)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.success-progress{background-color:transparent;color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress{background-color:var(--green-hover);color:var(--green-base)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-button', imports: [FwProgressSpinnerComponent, FwIconComponent], template: "<button\n  [type]=\"type()\"\n  [class]=\"[color() + '-' + variant(), size()]\"\n  [disabled]=\"disabled()\"\n  [attr.cdkFocusInitial]=\"focusInitial() ? '' : null\"\n>\n  @if (variant() === 'progress') {\n    <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\"></fw-progress-spinner>\n  }\n  @if (!!leftIcon() && variant() !== 'progress') {\n    <fw-icon>{{ leftIcon() }}</fw-icon>\n  }\n  @if (!leftIcon()) {\n    <div class=\"spacer\"></div>\n  }\n  <span><ng-content></ng-content></span>\n  @if (!!rightIcon()) {\n    <fw-icon>{{ rightIcon() }}</fw-icon>\n  }\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px;width:20px;min-width:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px;width:24px;min-width:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.primary-progress{background-color:transparent;color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress{background-color:var(--primary-hover);color:var(--primary-base)}.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)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.secondary-progress{background-color:transparent;color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:var(--secondary-hover);color:var(--secondary-base)}.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)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.slate-progress{background-color:transparent;color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress{background-color:var(--slate-hover);color:var(--slate-base)}.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)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.danger-progress{background-color:transparent;color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress{background-color:var(--red-hover);color:var(--red-base)}.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)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.skeleton-progress{background-color:transparent;color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress{background-color:var(---hover);color:var(---base)}.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)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.warning-progress{background-color:transparent;color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress{background-color:var(--orange-hover);color:var(--orange-base)}.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)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.success-progress{background-color:transparent;color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress{background-color:var(--green-hover);color:var(--green-base)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"] }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['attr.class']
+            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], focusInitial: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusInitial", required: false }] }] } });
+
 var LayoutWidth;
 (function (LayoutWidth) {
     LayoutWidth["Small"] = "small";
@@ -431,6 +572,7 @@ class FwLayoutContextComponent {
             };
             return widthMap[this.width()];
         }, ...(ngDevMode ? [{ debugName: "widthPx" }] : /* istanbul ignore next */ []));
+        this.actionButtons = contentChildren(FwButtonComponent, ...(ngDevMode ? [{ debugName: "actionButtons" }] : /* istanbul ignore next */ []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
         this.iconColor = input('secondary', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
         this.parsedIconColor = computed(() => {
@@ -448,7 +590,7 @@ class FwLayoutContextComponent {
         this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "widthPx()", "attr.title": "null" }, classAttribute: "fw-layout-context" }, ngImport: i0, template: "@if (icon()) {\n  <fw-icon [color]=\"parsedIconColor()\">{{ icon() }}</fw-icon>\n}\n\n@if (title()) {\n  <h3>{{ title() }}</h3>\n}\n\n@if (description()) {\n  <p class=\"vision-p3\">{{ description() }}</p>\n} @else {\n  <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "widthPx()", "attr.title": "null" }, classAttribute: "fw-layout-context" }, queries: [{ propertyName: "actionButtons", predicate: FwButtonComponent, isSignal: true }], ngImport: i0, template: "@if (icon()) {\n  <fw-icon [color]=\"parsedIconColor()\">{{ icon() }}</fw-icon>\n}\n\n<div class=\"context-text\">\n  @if (title()) {\n    <h3>{{ title() }}</h3>\n  }\n\n  @if (description()) {\n    <p class=\"vision-p3\">{{ description() }}</p>\n  } @else {\n    <ng-content select=\"[slot='description']\"></ng-content>\n  }\n</div>\n\n@if (actionButtons().length > 0) {\n  <div class=\"context-actions\">\n    <ng-content select=\"fw-button\"></ng-content>\n  </div>\n}\n\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host .context-text{display:flex;flex-direction:column;align-items:center;width:100%;gap:8px}:host .context-text h3{margin:0}:host .context-text p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutContextComponent, decorators: [{
             type: Component,
@@ -456,8 +598,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         class: 'fw-layout-context',
                         '[style.width]': 'widthPx()',
                         '[attr.title]': 'null',
-                    }, template: "@if (icon()) {\n  <fw-icon [color]=\"parsedIconColor()\">{{ icon() }}</fw-icon>\n}\n\n@if (title()) {\n  <h3>{{ title() }}</h3>\n}\n\n@if (description()) {\n  <p class=\"vision-p3\">{{ description() }}</p>\n} @else {\n  <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n  <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}\n"] }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+                    }, template: "@if (icon()) {\n  <fw-icon [color]=\"parsedIconColor()\">{{ icon() }}</fw-icon>\n}\n\n<div class=\"context-text\">\n  @if (title()) {\n    <h3>{{ title() }}</h3>\n  }\n\n  @if (description()) {\n    <p class=\"vision-p3\">{{ description() }}</p>\n  } @else {\n    <ng-content select=\"[slot='description']\"></ng-content>\n  }\n</div>\n\n@if (actionButtons().length > 0) {\n  <div class=\"context-actions\">\n    <ng-content select=\"fw-button\"></ng-content>\n  </div>\n}\n\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host .context-text{display:flex;flex-direction:column;align-items:center;width:100%;gap:8px}:host .context-text h3{margin:0}:host .context-text p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], actionButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwButtonComponent), { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
 /**
  * Layout component for a 12-column responsive grid container
@@ -1525,147 +1667,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 }]
         }] });
 
-/**
- * Component for a circular progress spinner supporting determinate and indeterminate modes
- * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-progress-spinner--docs)
- */
-class FwProgressSpinnerComponent {
-    constructor() {
-        this._elementRef = inject(ElementRef);
-        /** Mode of the progress spinner. **/
-        this.mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-        /** Size of the progress spinner. **/
-        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        /** Color of the progress spinner. **/
-        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-        /** Whether to show the value percentage label on the progress spinner. **/
-        this.showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
-        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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, 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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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@if (showValue()) {\n  <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", 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, imports: [NgClass, NgTemplateOutlet], 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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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\"\n    focusable=\"false\"\n  >\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%\"\n      cy=\"50%\"\n    />\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%\"\n      cy=\"50%\"\n    />\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@if (showValue()) {\n  <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\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"] }]
-        }], propDecorators: { _determinateCircle: [{
-                type: ViewChild,
-                args: ['determinateSpinner']
-            }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], value: [{
-                type: Input
-            }] } });
-
-/**
- * Component for a styled action button with configurable color, size, variant, and optional icons
- * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-button--docs)
- */
-class FwButtonComponent {
-    constructor() {
-        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
-        this.leftIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leftIcon" }] : /* istanbul ignore next */ []));
-        this.rightIcon = input(undefined, ...(ngDevMode ? [{ debugName: "rightIcon" }] : /* istanbul ignore next */ []));
-        /** When true, marks this button as the initial focus target when it's the first-rendered child of a `cdkTrapFocus`/CDK Dialog focus trap. */
-        this.focusInitial = input(false, ...(ngDevMode ? [{ debugName: "focusInitial" }] : /* istanbul ignore next */ []));
-    }
-    get classes() {
-        return ['fw-button', this.size(), this.fullWidth() ? 'full-width' : null].filter(Boolean).join(' ');
-    }
-    getMappedColor() {
-        const color = this.color();
-        switch (color) {
-            case 'primary':
-            case 'secondary':
-            case 'slate':
-                return color;
-            case 'danger':
-                return 'red';
-            case 'warning':
-                return 'orange';
-            case 'success':
-                return 'green';
-            default:
-                return undefined;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwButtonComponent, isStandalone: true, selector: "fw-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, focusInitial: { classPropertyName: "focusInitial", publicName: "focusInitial", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [class]=\"[color() + '-' + variant(), size()]\"\n  [disabled]=\"disabled()\"\n  [attr.cdkFocusInitial]=\"focusInitial() ? '' : null\"\n>\n  @if (variant() === 'progress') {\n    <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\"></fw-progress-spinner>\n  }\n  @if (!!leftIcon() && variant() !== 'progress') {\n    <fw-icon>{{ leftIcon() }}</fw-icon>\n  }\n  @if (!leftIcon()) {\n    <div class=\"spacer\"></div>\n  }\n  <span><ng-content></ng-content></span>\n  @if (!!rightIcon()) {\n    <fw-icon>{{ rightIcon() }}</fw-icon>\n  }\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px;width:20px;min-width:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px;width:24px;min-width:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.primary-progress{background-color:transparent;color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress{background-color:var(--primary-hover);color:var(--primary-base)}.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)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.secondary-progress{background-color:transparent;color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:var(--secondary-hover);color:var(--secondary-base)}.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)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.slate-progress{background-color:transparent;color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress{background-color:var(--slate-hover);color:var(--slate-base)}.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)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.danger-progress{background-color:transparent;color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress{background-color:var(--red-hover);color:var(--red-base)}.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)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.skeleton-progress{background-color:transparent;color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress{background-color:var(---hover);color:var(---base)}.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)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.warning-progress{background-color:transparent;color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress{background-color:var(--orange-hover);color:var(--orange-base)}.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)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.success-progress{background-color:transparent;color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress{background-color:var(--green-hover);color:var(--green-base)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fw-button', imports: [FwProgressSpinnerComponent, FwIconComponent], template: "<button\n  [type]=\"type()\"\n  [class]=\"[color() + '-' + variant(), size()]\"\n  [disabled]=\"disabled()\"\n  [attr.cdkFocusInitial]=\"focusInitial() ? '' : null\"\n>\n  @if (variant() === 'progress') {\n    <fw-progress-spinner size=\"small\" [color]=\"getMappedColor()\"></fw-progress-spinner>\n  }\n  @if (!!leftIcon() && variant() !== 'progress') {\n    <fw-icon>{{ leftIcon() }}</fw-icon>\n  }\n  @if (!leftIcon()) {\n    <div class=\"spacer\"></div>\n  }\n  <span><ng-content></ng-content></span>\n  @if (!!rightIcon()) {\n    <fw-icon>{{ rightIcon() }}</fw-icon>\n  }\n</button>\n", styles: [":host.full-width{flex:1;display:flex}:host.full-width button{flex:1}button{cursor:pointer;font-family:Inter,sans-serif;font-size:14px;line-height:14px;font-style:normal;font-weight:500;display:inline-flex;height:36px;padding:12px;justify-content:center;align-items:center;gap:8px;flex-shrink:0;border:1px solid transparent;border-radius:8px}button .spacer{height:18px;width:0;margin-left:-8px}button fw-icon{height:18px;font-size:20px;width:20px;min-width:20px}button span{white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.large{font-size:16px;height:40px;padding:12px 14px}.large fw-icon{font-size:24px;width:24px;min-width:24px}.small{height:30px;padding:12px 10px}.primary-solid{background-color:var(--primary-base);color:var(--typography-contrast)}.primary-solid:hover{background-color:var(--primary-medium)}.primary-solid:active{background-color:var(--primary-dark)}.primary-ghost{background-color:transparent;color:var(--primary-base)}.primary-ghost:hover{background-color:var(--primary-hover)}.primary-ghost:active{background-color:var(--primary-focus)}.primary-outline{background-color:transparent;color:var(--primary-base)}.primary-outline:hover{background-color:var(--primary-hover)}.primary-outline:active{background-color:var(--primary-focus)}.primary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.primary-progress{background-color:transparent;color:var(--primary-base)}.primary-progress:hover{background-color:var(--primary-hover)}.primary-progress:active{background-color:var(--primary-focus)}.primary-progress{background-color:var(--primary-hover);color:var(--primary-base)}.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)}.secondary-outline:hover{background-color:var(--secondary-hover)}.secondary-outline:active{background-color:var(--secondary-focus)}.secondary-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.secondary-progress{background-color:transparent;color:var(--secondary-base)}.secondary-progress:hover{background-color:var(--secondary-hover)}.secondary-progress:active{background-color:var(--secondary-focus)}.secondary-progress{background-color:var(--secondary-hover);color:var(--secondary-base)}.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)}.slate-outline:hover{background-color:var(--slate-hover)}.slate-outline:active{background-color:var(--slate-focus)}.slate-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.slate-progress{background-color:transparent;color:var(--slate-base)}.slate-progress:hover{background-color:var(--slate-hover)}.slate-progress:active{background-color:var(--slate-focus)}.slate-progress{background-color:var(--slate-hover);color:var(--slate-base)}.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)}.danger-outline:hover{background-color:var(--red-hover)}.danger-outline:active{background-color:var(--red-focus)}.danger-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.danger-progress{background-color:transparent;color:var(--red-base)}.danger-progress:hover{background-color:var(--red-hover)}.danger-progress:active{background-color:var(--red-focus)}.danger-progress{background-color:var(--red-hover);color:var(--red-base)}.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)}.skeleton-outline:hover{background-color:var(---hover)}.skeleton-outline:active{background-color:var(---focus)}.skeleton-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.skeleton-progress{background-color:transparent;color:var(---base)}.skeleton-progress:hover{background-color:var(---hover)}.skeleton-progress:active{background-color:var(---focus)}.skeleton-progress{background-color:var(---hover);color:var(---base)}.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)}.warning-outline:hover{background-color:var(--orange-hover)}.warning-outline:active{background-color:var(--orange-focus)}.warning-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.warning-progress{background-color:transparent;color:var(--orange-base)}.warning-progress:hover{background-color:var(--orange-hover)}.warning-progress:active{background-color:var(--orange-focus)}.warning-progress{background-color:var(--orange-hover);color:var(--orange-base)}.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)}.success-outline:hover{background-color:var(--green-hover)}.success-outline:active{background-color:var(--green-focus)}.success-outline{border:1px solid var(--separations-base);background-color:var(--page-light)}.success-progress{background-color:transparent;color:var(--green-base)}.success-progress:hover{background-color:var(--green-hover)}.success-progress:active{background-color:var(--green-focus)}.success-progress{background-color:var(--green-hover);color:var(--green-base)}.success-progress span{opacity:.6}.success-progress:disabled{opacity:.6;cursor:not-allowed}\n"] }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], focusInitial: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusInitial", required: false }] }] } });
-
 class FwButtonDirective {
     constructor() {
         this.sanitizer = inject(DomSanitizer);