@flywheel-io/vision 2.7.0-beta.1 → 2.7.1

package/fesm2022/flywheel-io-vision.mjs

@@ -3,7 +3,7 @@ import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, O
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
-import { BehaviorSubject, distinctUntilChanged, debounce, timer, of, Subscription, min, startWith, tap, switchMap, map } from 'rxjs';
+import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, startWith, tap, switchMap, map } from 'rxjs';
 import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1$5 from '@angular/cdk/table';
@@ -356,8 +356,12 @@ class FwAvatarComponent {
         return [this.size, this.variant, this.content, 'selected'].filter(Boolean).join(' ');
     }
     ;
-    get borderClass() { return this.bordered; }
-    get selectedClassApplied() { return this.selected(); }
+    get borderClass() {
+        return this.bordered;
+    }
+    get selectedClassApplied() {
+        return this.selected();
+    }
     loadImage() {
         this.isImageBroken = false;
     }
@@ -928,24 +932,10 @@ class FwTooltipPanelComponent {
         this.connectedPosition = computed(() => [positionMap$1[this.position()]]);
         this.color = 'dark';
         this.maxWidth = 200;
+        this.displayCaret = true;
         this.mouseLeave = new EventEmitter();
         this.delay = input('short');
         this.delayMs = computed(() => delayMap$1[this.delay()]);
-        /*
-        <ng-template
-        cdkConnectedOverlay
-        [cdkConnectedOverlayOrigin]="trigger"
-        [cdkConnectedOverlayOpen]="isOpen"
-        [cdkConnectedOverlayPositions]="connectedPosition()"
-        [cdkConnectedOverlayScrollStrategy]="this.overlayService.scrollStrategies.close()">
-        */
-        this.overlayService = inject(Overlay);
-        this.updateOverlayOnChange = effect(() => {
-            // this.overlayRef.origin = this.trigger();
-            // this.overlayRef.positions = this.connectedPosition();
-            // this.overlayRef.open = this.isOpen();
-            // this.overlayRef.scrollStrategy = this.overlayService.scrollStrategies.close();
-        });
     }
     get classes() {
         return ['fw-tooltip-panel', 'fw-tooltip-' + this.position].join(' ');
@@ -954,7 +944,7 @@ class FwTooltipPanelComponent {
         this.mouseLeave.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div\n  @fadeInFadeOut\n  class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n  [ngClass]=\"'fw-tooltip-' + position()\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <h5 class=\"vision-h5\">{{ title }}</h5>\n  <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "displayCaret", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "@fadeInFadeOut": "this.animation", "attr.class": "this.classes" } }, ngImport: i0, template: "<div\n  class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n  [ngClass]=\"'fw-tooltip-' + position()\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <h5 class=\"vision-h5\">{{ title }}</h5>\n  @if (displayCaret) {\n    <div class=\"fw-tooltip-caret\"></div>\n  }\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
             trigger('fadeInFadeOut', [
                 transition(':enter', [
                     style({ opacity: 0 }),
@@ -978,13 +968,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 animate('200ms', style({ opacity: 0 })),
                             ]),
                         ]),
-                    ], template: "<div\n  @fadeInFadeOut\n  class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n  [ngClass]=\"'fw-tooltip-' + position()\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <h5 class=\"vision-h5\">{{ title }}</h5>\n  <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"] }]
-        }], propDecorators: { title: [{
+                    ], template: "<div\n  class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n  [ngClass]=\"'fw-tooltip-' + position()\"\n  [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n  <ng-content></ng-content>\n  <h5 class=\"vision-h5\">{{ title }}</h5>\n  @if (displayCaret) {\n    <div class=\"fw-tooltip-caret\"></div>\n  }\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"] }]
+        }], propDecorators: { animation: [{
+                type: HostBinding,
+                args: ['@fadeInFadeOut']
+            }], title: [{
                 type: Input
             }], color: [{
                 type: Input
             }], maxWidth: [{
                 type: Input
+            }], displayCaret: [{
+                type: Input
             }], mouseLeave: [{
                 type: Output
             }], classes: [{
@@ -995,13 +990,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['mouseleave', ['$event']]
             }] } });
 
-const positionMap = {
-    'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
-    'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
-    'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: -3 },
-    'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
-    'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
-};
 const delayMap = {
     'none': 0,
     'short': 400,
@@ -1010,49 +998,97 @@ const delayMap = {
 const delayNameToMs = (name) => {
     return delayMap[name];
 };
+const positionMap = {
+    'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
+    'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: -3 },
+    'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
+    'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
+    'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
+};
+/**
+ * Directive for displaying extra context on hover
+ * @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
+ */
 class FwTooltipDirective {
     constructor() {
-        // External Context
+        /***** External Context *****/
         this.elementRef = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.overlayService = inject(Overlay);
-        // Internal refs
+        /***** Internal Refs *****/
         this.overlayRef = signal(undefined);
         this.tooltipRef = signal(undefined);
-        // Inputs
-        this.delayMs = input(400, {
-            transform: delayNameToMs,
-            alias: 'fwTooltipDelay',
-        });
+        /***** Inputs *****/
         // a lot of these ideally wouldn't be models,
         // but it makes it easier to interact with this from derivative directives
-        this.title = model('undefined', {
+        // VS Code pulls the input that shares a name with the directive for giving context
+        // so putting the top level comment on this input
+        /**
+         * Directive for displaying extra context on hover
+         * @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
+         */
+        this.title = model('Placeholder', {
             alias: 'fwTooltip',
         });
+        /**
+         * direction relative to the parent component that the tooltip will attempt to position itself to
+         */
         this.position = model('above', {
             alias: 'fwTooltipPosition',
         });
+        /**
+         * maximum width of the tooltip in pixels
+         */
         this.maxWidth = model(200, {
             alias: 'fwTooltipMaxWidthPx',
         });
+        /**
+         * amount of delay before the tooltip displays
+         *
+         * none (0ms),
+         * short (400ms),
+         * long (700ms)
+         */
+        this.delayMs = input(400, {
+            transform: delayNameToMs,
+            alias: 'fwTooltipDelay',
+        });
+        /**
+         * whether or not the tooltip should have a caret
+         */
+        this.displayCaret = input(true, {
+            alias: 'fwTooltipCaret',
+        });
         this.enabled = model(true, {
-            alias: 'fwTooltipEnabled'
+            alias: 'fwTooltipEnabled',
+        });
+        /***** Derived State *****/
+        this.connectedPositions = computed(() => {
+            // falback positions for if it doesn't fit in the specified position
+            // tend towards closer first i.e. 'above' will try 'left' and 'right' before resorting to 'below
+            const positionPreferenceOrderMap = {
+                'above': ['above', 'right', 'left', 'below'],
+                'right': ['right', 'below', 'above', 'left'],
+                'below': ['below', 'left', 'right', 'above'],
+                'left': ['left', 'above', 'below', 'right'],
+            };
+            const fallbackNamedPositions = positionPreferenceOrderMap[this.position()];
+            const connectedPositions = fallbackNamedPositions.map(name => positionMap[name]);
+            return connectedPositions;
         });
-        // derived state
-        this.connectedPosition = computed(() => [positionMap[this.position()]]);
         this.positionStrategy = computed(() => {
             const positionBuilder = this.overlayService.position();
             const withOrigin = positionBuilder.flexibleConnectedTo(this.elementRef);
-            const completedStrategy = withOrigin.withPositions(this.connectedPosition());
+            const completedStrategy = withOrigin.withPositions(this.connectedPositions());
             return completedStrategy;
         });
         this.overlayConfig = computed(() => ({
             positionStrategy: this.positionStrategy(),
-            maxWidth: this.maxWidth(),
+            maxWidth: Number(this.maxWidth()),
             ScrollStrategyOptions: this.overlayService.scrollStrategies.close(),
             disposeOnNavigation: true,
         }));
-        // effects and methods
+        /***** Effects and Methods *****/
         this.addMouseEventListeners = effect(() => {
             const nativeElement = this.elementRef.nativeElement;
             nativeElement.addEventListener('mouseenter', () => {
@@ -1062,6 +1098,25 @@ class FwTooltipDirective {
                 this.hideTooltip();
             });
         });
+        // updates the tooltip panel's caret position if a fallback position is used
+        this.handlePositionChange = effect(() => {
+            this.positionChangeSub?.unsubscribe();
+            this.positionChangeSub = this.positionStrategy().positionChanges.subscribe(positionChange => {
+                const newPosition = positionChange.connectionPair;
+                const positionNames = Object.keys(positionMap);
+                const newPositionName = positionNames.find(name => {
+                    const pos = positionMap[name];
+                    return pos.originX === newPosition.originX &&
+                        pos.originY === newPosition.originY &&
+                        pos.overlayX === newPosition.overlayX &&
+                        pos.overlayY === newPosition.overlayY;
+                });
+                if (newPositionName) {
+                    this.tooltipRef().setInput('position', newPositionName);
+                    this.tooltipRef().changeDetectorRef.detectChanges();
+                }
+            });
+        });
     }
     ngOnInit() {
         this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
@@ -1081,20 +1136,23 @@ class FwTooltipDirective {
             this.tooltipRef.set(tooltipRef);
             tooltipRef.setInput('title', this.title());
             tooltipRef.setInput('position', this.position());
+            tooltipRef.setInput('maxWidth', this.maxWidth());
+            tooltipRef.setInput('displayCaret', this.displayCaret());
             tooltipRef.changeDetectorRef.detectChanges();
         }, this.delayMs());
     }
     hideTooltip() {
-        const animationDelayMs = 200;
-        this.closeDelayTimer = window.setTimeout(() => {
-            window.clearTimeout(this.openDelayTimer);
-            this.openDelayTimer = undefined;
-            this.overlayRef().detach();
-            this.tooltipRef.set(undefined);
-        }, animationDelayMs);
+        window.clearTimeout(this.openDelayTimer);
+        this.openDelayTimer = undefined;
+        this.overlayRef().detach();
+        this.tooltipRef.set(undefined);
+    }
+    ngOnDestroy() {
+        this.positionChangeSub?.unsubscribe();
+        this.hideTooltip();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipDirective, isStandalone: true, selector: "[fwTooltip]", inputs: { delayMs: { classPropertyName: "delayMs", publicName: "fwTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "fwTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fwTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "fwTooltipMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "fwTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "fwTooltipChange", position: "fwTooltipPositionChange", maxWidth: "fwTooltipMaxWidthPxChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipDirective, isStandalone: true, selector: "[fwTooltip]", inputs: { title: { classPropertyName: "title", publicName: "fwTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fwTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "fwTooltipMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, delayMs: { classPropertyName: "delayMs", publicName: "fwTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "fwTooltipCaret", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "fwTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "fwTooltipChange", position: "fwTooltipPositionChange", maxWidth: "fwTooltipMaxWidthPxChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipDirective, decorators: [{
             type: Directive,
@@ -1106,7 +1164,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 /**
  * component for giving extra context when a user hovers something
- * @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
+ * @deprecated use the [tooltip directive](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs) instead, intend to remove in v3
+ * @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-wrapped-tooltip--docs)
  */
 class FwTooltipComponent {
     constructor() {
@@ -1131,7 +1190,7 @@ class FwTooltipComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes", "attr.title": "this.attrTitle" } }, ngImport: i0, template: "<div\n  [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n  [fwTooltip]=\"title\"\n  [fwTooltipDelay]=\"delay()\"\n  [fwTooltipPosition]=\"position\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltipDelay", "fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes", "attr.title": "this.attrTitle" } }, ngImport: i0, template: "<div\n  [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n  [fwTooltip]=\"title\"\n  [fwTooltipDelay]=\"delay()\"\n  [fwTooltipPosition]=\"position\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, decorators: [{
             type: Component,
@@ -1207,6 +1266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 class FwAvatarListComponent {
     constructor() {
+        this.subscriptions = [];
         this.hostElement = inject(ElementRef);
         this.avatars = contentChildren(FwAvatarComponent);
         this.avatarElementRefs = contentChildren(FwAvatarComponent, { read: ElementRef });
@@ -1226,13 +1286,15 @@ class FwAvatarListComponent {
     }
     ngOnInit() {
         // wire up resize observer to rxjs and debouce
-        const resize$ = new BehaviorSubject(null);
-        const recalcOnResize$ = resize$.pipe(distinctUntilChanged(), debounce(() => timer(this.resizeDebounceMs())));
+        const resize$ = new BehaviorSubject([]);
+        const recalcOnResize$ = resize$.pipe(debounce(() => timer(this.resizeDebounceMs())), // debounce otherwise it can run EVERY frame
+        distinctUntilChanged());
         const resizeObserver = new ResizeObserver((resizeEntries) => {
             resize$.next(resizeEntries);
         });
         resizeObserver.observe(this.hostElement.nativeElement, {});
-        recalcOnResize$.subscribe(() => this.calcOverflow());
+        const sub = recalcOnResize$.subscribe(() => this.calcOverflow());
+        this.subscriptions.push(sub);
     }
     calcOverflow() {
         const hostRect = this.hostElement.nativeElement.getBoundingClientRect();
@@ -1252,24 +1314,28 @@ class FwAvatarListComponent {
                 overflowingAvatars.push(lastVisibleAvatar);
             }
             this.hiddenAvatars.set(overflowingAvatars);
-            overflowingAvatars.forEach(hiddenChip => {
-                hiddenChip.classList.add('hidden');
+            overflowingAvatars.forEach(overflowAvatar => {
+                overflowAvatar.classList.add('hidden');
             });
         }
         else {
             this.moreText().nativeElement.classList.add('hidden');
         }
+        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
         this.changeDetector.detectChanges();
     }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwAvatarListComponent, isStandalone: true, selector: "fw-avatar-list", inputs: { resizeDebounceMs: { classPropertyName: "resizeDebounceMs", publicName: "resizeDebounceMs", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "avatars", predicate: FwAvatarComponent, isSignal: true }, { propertyName: "avatarElementRefs", predicate: FwAvatarComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "moreText", first: true, predicate: ["moreText"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"fw-avatar\"></ng-content>\n<fw-tooltip> <!--TODO: figure out how to get a tooltip-->\n  <p #moreText> +{{hiddenAvatars().length}} </p>\n</fw-tooltip>\n", styles: [":host{display:flex;align-items:center;flex-basis:max-content;flex-flow:row nowrap;justify-content:flex-start;max-height:36px;overflow:hidden}:host ::ng-deep fw-avatar:not(:first-child){margin-left:-4px}:host p{line-height:100%;cursor:default;margin:0;padding-left:8px;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FwAvatarModule }, { kind: "ngmodule", type: FwTooltipModule }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwAvatarListComponent, isStandalone: true, selector: "fw-avatar-list", inputs: { resizeDebounceMs: { classPropertyName: "resizeDebounceMs", publicName: "resizeDebounceMs", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "avatars", predicate: FwAvatarComponent, isSignal: true }, { propertyName: "avatarElementRefs", predicate: FwAvatarComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "moreText", first: true, predicate: ["moreText"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"fw-avatar\"></ng-content>\n<fw-tooltip> <!--TODO: figure out how to get a tooltip-->\n  <p #moreText> +{{hiddenAvatars().length}} </p>\n</fw-tooltip>\n", styles: [":host{display:flex;align-items:center;flex-basis:max-content;flex-flow:row nowrap;justify-content:flex-start;min-height:36px;max-height:36px;overflow:hidden}:host ::ng-deep fw-avatar:not(:first-child){margin-left:-4px}:host p{line-height:100%;cursor:default;margin:0;text-align:center;padding-left:8px;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FwAvatarModule }, { kind: "ngmodule", type: FwTooltipModule }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-avatar-list', standalone: true, imports: [
                         FwAvatarModule,
                         FwTooltipModule,
-                    ], template: "<ng-content select=\"fw-avatar\"></ng-content>\n<fw-tooltip> <!--TODO: figure out how to get a tooltip-->\n  <p #moreText> +{{hiddenAvatars().length}} </p>\n</fw-tooltip>\n", styles: [":host{display:flex;align-items:center;flex-basis:max-content;flex-flow:row nowrap;justify-content:flex-start;max-height:36px;overflow:hidden}:host ::ng-deep fw-avatar:not(:first-child){margin-left:-4px}:host p{line-height:100%;cursor:default;margin:0;padding-left:8px;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"fw-avatar\"></ng-content>\n<fw-tooltip> <!--TODO: figure out how to get a tooltip-->\n  <p #moreText> +{{hiddenAvatars().length}} </p>\n</fw-tooltip>\n", styles: [":host{display:flex;align-items:center;flex-basis:max-content;flex-flow:row nowrap;justify-content:flex-start;min-height:36px;max-height:36px;overflow:hidden}:host ::ng-deep fw-avatar:not(:first-child){margin-left:-4px}:host p{line-height:100%;cursor:default;margin:0;text-align:center;padding-left:8px;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"] }]
         }] });
 
 class FwBadgeComponent {
@@ -3150,6 +3216,7 @@ class FwDialogConfirmComponent {
         this.confirmButtonIcon = 'done-check';
         this.cancelButtonText = 'Cancel';
         this.contentTitle = 'Are you sure?';
+        this.showConfirmButtonIcon = true;
         this.showClose = false;
         this.width = 'extra-small';
         // eslint-disable-next-line @angular-eslint/no-output-native
@@ -3198,11 +3265,11 @@ class FwDialogConfirmComponent {
         }, 300);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, deps: [{ token: i1$3.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", showClose: "showClose", width: "width", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"confirmButtonIcon\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\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: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", showConfirmButtonIcon: "showConfirmButtonIcon", showClose: "showClose", width: "width", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\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: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"confirmButtonIcon\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
+            args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n  [width]=\"width\"\n  [title]=\"title\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [showClose]=\"showClose\"\n  [ngClass]=\"dialogClasses\">\n  <fw-dialog-content>\n    <div class=\"dialog-content-confirm\">\n      <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\" *ngIf=\"contentIcon\">\n        {{ contentIcon }}\n      </fw-icon>\n      <p class=\"vision-p2 content-title\" *ngIf=\"contentTitle\">\n        {{ contentTitle }}\n      </p>\n      <p class=\"vision-p2 content-text\" *ngIf=\"contentText\">\n        {{ contentText }}\n      </p>\n    </div>\n  </fw-dialog-content>\n  <fw-dialog-actions>\n    <fw-button\n      variant=\"outline\"\n      *ngIf=\"cancelButtonText\"\n      color=\"slate\"\n      (click)=\"handleCloseButton()\">\n      {{ cancelButtonText }}\n    </fw-button>\n    <fw-button\n      variant=\"solid\"\n      *ngIf=\"confirmButtonText\"\n      [color]=\"confirmColor\"\n      [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n      (click)=\"confirm.emit()\">\n      {{ confirmButtonText }}\n    </fw-button>\n  </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DialogRef, decorators: [{
                     type: Optional
                 }] }, { type: i0.ElementRef }], propDecorators: { title: [{
@@ -3225,6 +3292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], contentText: [{
                 type: Input
+            }], showConfirmButtonIcon: [{
+                type: Input
             }], showClose: [{
                 type: Input
             }], width: [{
@@ -3537,16 +3606,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+class FwTagComponent {
+    constructor() {
+        this.size = 'small';
+        this.color = 'slate';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwTagComponent, selector: "fw-tag", inputs: { size: "size", color: "color", icon: "icon", title: "title" }, ngImport: i0, template: "<div [ngClass]=\"['tag', 'tag-'+size, 'tag-'+color]\">\n  <fw-icon *ngIf=\"icon\" class=\"tag-icon\">{{ icon }}</fw-icon>\n  <div class=\"tag-text\" *ngIf=\"title\">\n    <span>{{ title }}</span>\n  </div>\n</div>\n", styles: [".tag{box-sizing:border-box;border-radius:4px;padding:0 6px 0 4px;display:inline-flex;gap:4px;align-items:center}.tag .tag-text{font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:500;line-height:120%;white-space:wrap}.tag.tag-small{height:16px}.tag.tag-small .tag-icon{align-items:flex-start;font-size:12px;min-width:12px;width:12px}.tag.tag-large{height:24px}.tag.tag-large .tag-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.tag.tag-slate{color:var(--slate-base);background-color:var(--slate-hover)}.tag.tag-slate:hover{background-color:var(--slate-focus)}.tag.tag-primary{color:var(--primary-base);background-color:var(--primary-hover)}.tag.tag-primary:hover{background-color:var(--primary-focus)}.tag.tag-secondary{color:var(--secondary-base);background-color:var(--secondary-hover)}.tag.tag-secondary:hover{background-color:var(--secondary-focus)}.tag.tag-orange{color:var(--orange-base);background-color:var(--orange-hover)}.tag.tag-orange:hover{background-color:var(--orange-focus)}.tag.tag-green{color:var(--green-base);background-color:var(--green-hover)}.tag.tag-green:hover{background-color:var(--green-focus)}.tag.tag-red{color:var(--red-base);background-color:var(--red-hover)}.tag.tag-red:hover{background-color:var(--red-focus)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-tag', template: "<div [ngClass]=\"['tag', 'tag-'+size, 'tag-'+color]\">\n  <fw-icon *ngIf=\"icon\" class=\"tag-icon\">{{ icon }}</fw-icon>\n  <div class=\"tag-text\" *ngIf=\"title\">\n    <span>{{ title }}</span>\n  </div>\n</div>\n", styles: [".tag{box-sizing:border-box;border-radius:4px;padding:0 6px 0 4px;display:inline-flex;gap:4px;align-items:center}.tag .tag-text{font-family:Inter,sans-serif;font-size:10px;font-style:normal;font-weight:500;line-height:120%;white-space:wrap}.tag.tag-small{height:16px}.tag.tag-small .tag-icon{align-items:flex-start;font-size:12px;min-width:12px;width:12px}.tag.tag-large{height:24px}.tag.tag-large .tag-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.tag.tag-slate{color:var(--slate-base);background-color:var(--slate-hover)}.tag.tag-slate:hover{background-color:var(--slate-focus)}.tag.tag-primary{color:var(--primary-base);background-color:var(--primary-hover)}.tag.tag-primary:hover{background-color:var(--primary-focus)}.tag.tag-secondary{color:var(--secondary-base);background-color:var(--secondary-hover)}.tag.tag-secondary:hover{background-color:var(--secondary-focus)}.tag.tag-orange{color:var(--orange-base);background-color:var(--orange-hover)}.tag.tag-orange:hover{background-color:var(--orange-focus)}.tag.tag-green{color:var(--green-base);background-color:var(--green-hover)}.tag.tag-green:hover{background-color:var(--green-focus)}.tag.tag-red{color:var(--red-base);background-color:var(--red-hover)}.tag.tag-red:hover{background-color:var(--red-focus)}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
 class FwFormHeadingComponent {
     constructor() {
         this.class = 'fw-form-heading';
+        this.statusColor = 'slate';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: { title: "title", description: "description", status: "status" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n  <div>\n    <h4 class=\"vision-h4 section-heading\">{{ title }}\n      <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n      <ng-content select=\"fw-tooltip\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h4>\n    <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4 .status{color:var(--primary-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-form-heading .right-content{display:flex;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: { title: "title", description: "description", required: "required", status: "status", statusColor: "statusColor" }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<div class=\"heading-area\">\n  <div>\n    <div class=\"section-heading\">\n      <h4 class=\"vision-h4\">\n        <span>{{ title }}</span>\n        <span *ngIf=\"required\" class=\"required\">*</span>\n      </h4>\n      <fw-tag *ngIf=\"status\" [color]=\"statusColor\" [title]=\"status\"></fw-tag>\n      <ng-content select=\"fw-tooltip\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-chip\"></ng-content>\n    </div>\n    <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area .section-heading{display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0}.fw-form-heading .heading-area h4 .required{margin-left:4px;color:var(--red-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-form-heading .right-content{display:flex;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwTagComponent, selector: "fw-tag", inputs: ["size", "color", "icon", "title"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-form-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n  <div>\n    <h4 class=\"vision-h4 section-heading\">{{ title }}\n      <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n      <ng-content select=\"fw-tooltip\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-chip\"></ng-content>\n    </h4>\n    <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4 .status{color:var(--primary-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-form-heading .right-content{display:flex;gap:8px}\n"] }]
+            args: [{ selector: 'fw-form-heading', encapsulation: ViewEncapsulation.None, template: "<div class=\"heading-area\">\n  <div>\n    <div class=\"section-heading\">\n      <h4 class=\"vision-h4\">\n        <span>{{ title }}</span>\n        <span *ngIf=\"required\" class=\"required\">*</span>\n      </h4>\n      <fw-tag *ngIf=\"status\" [color]=\"statusColor\" [title]=\"status\"></fw-tag>\n      <ng-content select=\"fw-tooltip\"></ng-content>\n      <ng-content select=\"fw-icon\"></ng-content>\n      <ng-content select=\"fw-chip\"></ng-content>\n    </div>\n    <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n    <ng-content select=\"p\"></ng-content>\n  </div>\n</div>\n<div class=\"right-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-form-heading{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}.fw-form-heading .heading-area{display:flex;align-items:center;padding-left:4px;margin-bottom:8px}.fw-form-heading .heading-area .section-heading{display:flex;align-items:center;gap:5px}.fw-form-heading .heading-area h4{color:var(--typography-base);margin:0}.fw-form-heading .heading-area h4 .required{margin-left:4px;color:var(--red-base)}.fw-form-heading .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}.fw-form-heading .heading-area p a{color:var(--typography-muted)}.fw-form-heading .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}.fw-form-heading .right-content{display:flex;gap:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['attr.class']
@@ -3554,18 +3645,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], description: [{
                 type: Input
+            }], required: [{
+                type: Input
             }], status: [{
                 type: Input
+            }], statusColor: [{
+                type: Input
             }] } });
 
+class FwTagModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, declarations: [FwTagComponent], imports: [CommonModule,
+            FwIconModule], exports: [FwTagComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, imports: [CommonModule,
+            FwIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTagModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwIconModule,
+                    ],
+                    exports: [
+                        FwTagComponent,
+                    ],
+                    declarations: [
+                        FwTagComponent,
+                    ],
+                }]
+        }] });
+
 class FwFormHeadingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, declarations: [FwFormHeadingComponent], imports: [CommonModule,
             FwButtonModule,
-            FwIconModule], exports: [FwFormHeadingComponent] }); }
+            FwIconModule,
+            FwTagModule], exports: [FwFormHeadingComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, imports: [CommonModule,
             FwButtonModule,
-            FwIconModule] }); }
+            FwIconModule,
+            FwTagModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwFormHeadingModule, decorators: [{
             type: NgModule,
@@ -3574,6 +3694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CommonModule,
                         FwButtonModule,
                         FwIconModule,
+                        FwTagModule,
                     ],
                     exports: [
                         FwFormHeadingComponent,
@@ -3669,36 +3790,36 @@ const allIcons = [
     'add-new-create',
     'add-row-above',
     'add-row-below',
-    'add-server-databases-endpoint',
     'add-server',
+    'add-server-databases-endpoint',
     'add-user',
     'ai',
     'apple',
     'apply-copy-duplicate',
     'archive-documents-box-big',
     'arrange-filter-sort',
+    'arrow',
     'arrow-annotate',
-    'arrow-back-collapse',
     'arrow-back',
+    'arrow-back-collapse',
     'arrow-down',
-    'arrow-forward-collapse',
     'arrow-forward',
+    'arrow-forward-collapse',
     'arrow-redo',
-    'arrow-rotate-restore',
     'arrow-rotate',
+    'arrow-rotate-restore',
     'arrow-undo',
+    'arrow-up',
     'arrow-up-high-priority',
     'arrow-up-low-priority',
-    'arrow-up',
-    'arrow',
     'barcode-serial',
     'barcode-stack-scan',
     'bell-notification',
     'bezier-curve',
     'blocks-code-test-checkmark',
     'book-lab-flask',
-    'bookmark-plus-add',
     'bookmark',
+    'bookmark-plus-add',
     'brain',
     'brightness-photo-edit',
     'browser-internet-web-windows',
@@ -3714,22 +3835,22 @@ const allIcons = [
     'chart-trend-square',
     'chat-messages-bubble',
     'check-mark-certificate',
-    'checklist-tasks-chechmark-square',
     'checklist',
+    'checklist-tasks-chechmark-square',
     'chevron-back',
     'chevron-down',
     'chevron-forward',
     'chevron-input-number',
     'chevron-up',
-    'circle-ellipses',
     'circle',
+    'circle-ellipses',
     'clap-applause-hands',
     'clip-attachment',
     'clock-history',
     'clock-hour-4',
     'clock-loading',
-    'close-circled',
     'close',
+    'close-circled',
     'closed-freehand-vector-poly',
     'cloud-network-add',
     'cloud-storage-checkmark',
@@ -3764,21 +3885,22 @@ const allIcons = [
     'document-file-zip',
     'document-status-done-checkmark',
     'document-visible',
-    'documents-file-checkmark',
     'documents-file',
+    'documents-file-checkmark',
+    'documents-file-move-arrow-right',
     'documents-files',
-    'done-check-tracked',
     'done-check',
-    'download-status',
+    'done-check-tracked',
     'download',
+    'download-status',
     'drag-drop-indicator',
     'draw-rectangle',
     'earth-globe-fail',
+    'edit',
     'edit-boxed',
     'edit-erase',
-    'edit',
-    'email-mail-checkmark-group',
     'email',
+    'email-mail-checkmark-group',
     'embed-circle',
     'exchange',
     'expand-pathfinder-dot-square-segmentation',
@@ -3787,13 +3909,13 @@ const allIcons = [
     'file-blank-search',
     'file-download',
     'file-text',
-    'files-library-content',
-    'files-library',
     'files',
+    'files-library',
+    'files-library-content',
+    'filter',
     'filter-sort-add',
     'filter-sort-check-mark',
     'filter-sort-delete',
-    'filter',
     'flag',
     'flip-horizontal',
     'flip-vertical',
@@ -3806,6 +3928,7 @@ const allIcons = [
     'folder-copy-expand-arrow-down',
     'folder-copy-expand-arrow-up',
     'folder-group',
+    'folder-move',
     'folder-open',
     'folder-share',
     'form-metadata-element',
@@ -3814,15 +3937,15 @@ const allIcons = [
     'full-screen-zoom',
     'git-add-branch',
     'git-branch',
-    'git-merge-draft',
     'git-merge',
+    'git-merge-draft',
     'git-pull-request-2',
     'github-color-login',
     'gitlab',
     'graduate-hat',
     'grid-dot-square',
-    'grid-layout-9-square',
     'grid-layout',
+    'grid-layout-9-square',
     'hammer-legal-square',
     'hammer-screwdriver',
     'hand-money-currency',
@@ -3834,8 +3957,8 @@ const allIcons = [
     'image-photo-copy-left-down',
     'image-picture-square',
     'information-circle',
-    'invoice-checkmark-paid',
     'invoice',
+    'invoice-checkmark-paid',
     'italic',
     'items-group-elements',
     'key',
@@ -3844,22 +3967,21 @@ const allIcons = [
     'label-tag',
     'laptop-health-medical-cross',
     'layers',
-    'layout-grid',
     'layout',
+    'layout-grid',
     'line',
-    'link-unlink',
     'link',
+    'link-unlink',
     'linkedin',
     'linux',
-    'list-paragraph-number',
     'list-paragraph',
+    'list-paragraph-number',
     'list-test-lab-flask',
     'livewire-tool',
     'loading-status-checkmark',
-    'lock-unlock',
     'lock',
+    'lock-unlock',
     'logout',
-    'lung',
     'lungs',
     'markdown',
     'measure-angle',
@@ -3873,26 +3995,27 @@ const allIcons = [
     'message-chat-question-support',
     'message-checkmark-sent',
     'message-question-checkmark',
-    'microphone-mic-rec-circle',
     'microphone-mic-rec',
+    'microphone-mic-rec-circle',
     'microphone-mic-recording-circle',
     'minus',
     'modalities',
     'molecule',
+    'money',
     'money-coin',
     'money-dollar',
-    'money',
     'monitor-computer',
     'mouse-big',
+    'mouse-scroll',
     'move',
     'music-play-resume',
     'music-stop',
     'mute',
     'network-storage-alert',
+    'notebook',
     'notebook-add-plus',
     'notebook-open',
     'notebook-pen-edit',
-    'notebook',
     'notes-pen',
     'object-search-zoom-plus',
     'open',
@@ -3910,24 +4033,25 @@ const allIcons = [
     'protective-mask',
     'question-circle',
     'quote',
-    'radiology-scan-circle',
     'radiology-scan',
+    'radiology-scan-circle',
     'reader-studies',
+    'rotate',
     'rotate-arrow-manual',
     'rotate-item-left',
     'rotate-item-right',
     'rotate-refresh',
-    'rotate',
-    'ruler-bidirectional',
     'ruler',
+    'ruler-bidirectional',
     'scanner',
+    'search',
     'search-loop',
     'search-user-profile-person',
     'search-zoom-minus',
     'search-zoom-plus',
-    'search',
     'section-form-element',
     'send-message-share',
+    'server',
     'server-checkmark',
     'server-database-endpoint',
     'server-databases-checkmark-user',
@@ -3935,15 +4059,14 @@ const allIcons = [
     'server-databases-download',
     'server-databases-key-protection',
     'server-databases-minimal-download',
-    'server-databases-sync-import',
     'server-databases-sync',
+    'server-databases-sync-import',
     'server-upload',
-    'server',
     'servers-database',
     'setting-gear',
     'settings-adjust',
-    'settings-gear-square',
     'settings-gear',
+    'settings-gear-square',
     'settings-select',
     'shapes-objects',
     'share',
@@ -3951,8 +4074,8 @@ const allIcons = [
     'show-visible',
     'smiley-emoji-face',
     'speed-dashboard',
-    'square-fill-outline',
     'square-fill',
+    'square-fill-outline',
     'square-outline',
     'star',
     'stars-light-sparkle',
@@ -3961,8 +4084,8 @@ const allIcons = [
     'stretch-vertical',
     'substract-group',
     'switch',
-    'target-space-object-select',
     'target',
+    'target-space-object-select',
     'tasklist-to-do-checkmark',
     'technology-cube-3d',
     'test-lab-flask',
@@ -3974,6 +4097,7 @@ const allIcons = [
     'text-long',
     'text-short-form-element',
     'text-underline',
+    'thumbs-down-dislike',
     'thumbs-up-like',
     'timer-clock-style',
     'trash-delete',
@@ -3981,6 +4105,7 @@ const allIcons = [
     'undone-uncheck-untracked',
     'unlimited-repeat-subscription-circle',
     'upload',
+    'user',
     'user-checked',
     'user-delete-cross',
     'user-document',
@@ -3990,12 +4115,11 @@ const allIcons = [
     'user-profile-cards-pool',
     'user-profile-group-discovery',
     'user-setting-gear',
-    'user',
     'video-player-controls',
     'visible-eye-hidden',
     'volume-full',
-    'warning-circle',
     'warning',
+    'warning-circle',
     'window-finder-resize-arrow-down',
     'window-finder-resize-arrow-up',
     'window-resize-left',
@@ -4718,14 +4842,20 @@ class FwMenuCloseTriggersDirective {
     constructor() {
         this._isOpen = false;
     }
-    outsideClick() {
-        if (this._isOpen && this.triggers && this.triggers.length > 0) {
+    outsideClick(event) {
+        const target = event.target;
+        // Check is close under fw-menu-container (overlay)
+        const clickedInsideMenu = target.closest('fw-menu-container') !== null;
+        // Check is clicked on trigger
+        const clickedOnTrigger = target.closest('[cdkMenuTriggerFor]') !== null;
+        if (!clickedInsideMenu && !clickedOnTrigger && this._isOpen && this.triggers?.length > 0) {
+            // Close menu if click outside menu and trigger
             this.triggers.forEach(trigger => {
                 trigger.close();
             });
             this._isOpen = false;
         }
-        if (this.triggers && this.triggers.length > 0) {
+        if (this.triggers?.length > 0) {
             this.triggers.forEach(trigger => {
                 if (trigger.isOpen()) {
                     this._isOpen = true;
@@ -4734,19 +4864,19 @@ class FwMenuCloseTriggersDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuCloseTriggersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FwMenuCloseTriggersDirective, selector: "[fwMenuCloseTriggers]", host: { listeners: { "document:click": "outsideClick()" } }, queries: [{ propertyName: "triggers", predicate: CdkMenuTrigger, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FwMenuCloseTriggersDirective, selector: "[fwMenuCloseTriggers]", host: { listeners: { "document:click": "outsideClick($event)" } }, queries: [{ propertyName: "triggers", predicate: CdkMenuTrigger, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuCloseTriggersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fwMenuCloseTriggers]',
                 }]
-        }], propDecorators: { outsideClick: [{
-                type: HostListener,
-                args: ['document:click']
-            }], triggers: [{
+        }], propDecorators: { triggers: [{
                 type: ContentChildren,
                 args: [CdkMenuTrigger, { descendants: true }]
+            }], outsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class FwMenuContainerComponent {
@@ -5817,6 +5947,11 @@ class FwMultiSelectMenuComponent {
     // handles all the display side effects of a value change
     updateValue(incomingValues) {
         if (!incomingValues) {
+            this.selectedValues.clear();
+            this.selectedOptions = [];
+            this._value = [];
+            this.change.emit(this._value);
+            this.postSelectSideEffects();
             return;
         }
         this.selectedValues.clear();
@@ -6363,7 +6498,7 @@ class FwPaginatorAdvancedComponent {
         };
     }
     firstPage() {
-        const evt = this.buildPageEvent(1);
+        const evt = this.buildPageEvent(0);
         this.pageIndex = 0;
         this.page.emit(evt);
     }
@@ -8695,6 +8830,7 @@ class FwChipListComponent {
         else {
             this.moreText().nativeElement.classList.add('hidden');
         }
+        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
         this.changeDetector.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8718,8 +8854,10 @@ class FwTypeaheadComponent {
         this.changeDetector = inject(ChangeDetectorRef);
         this.loading = model(false);
         this.disabled = model(false);
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
+        this.onChange = (_) => {
+        };
+        this.onTouched = () => {
+        };
         this.value = model([]);
         this.optionsInput = input([], { alias: 'options' });
         this.maxOptionsHeight = input('400px');
@@ -8846,12 +8984,14 @@ class FwTypeaheadComponent {
         const newValue = currentValue.filter(val => val !== chipValue);
         this.value.set(newValue);
         this.focusInput();
+        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
         this.changeDetector.detectChanges();
     }
     focusInput(e = null) {
         e?.preventDefault();
         e?.stopPropagation();
         e?.stopImmediatePropagation();
+        // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
         this.inputRef().nativeElement.focus();
     }
     /* eslint-enable */
@@ -8922,22 +9062,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class FwWrappedInputComponent {
     constructor() {
+        this.statusColor = 'slate';
         this.class = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwWrappedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", description: "description", helperText: "helperText", errorText: "errorText" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n  <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", status: "status", statusColor: "statusColor", description: "description", helperText: "helperText", errorText: "errorText", required: "required" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n  <fw-form-heading\n    *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n    [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n  </fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "required", "status", "statusColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwWrappedInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n  <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"] }]
+            args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n  <fw-form-heading\n    *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n    [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n  </fw-form-heading>\n  <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n  <ng-content\n    select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
+            }], status: [{
+                type: Input
+            }], statusColor: [{
+                type: Input
             }], description: [{
                 type: Input
             }], helperText: [{
                 type: Input
             }], errorText: [{
                 type: Input
+            }], required: [{
+                type: Input
             }], class: [{
                 type: HostBinding,
                 args: ['class.fw-wrapped-input']