npm - @flywheel-io/vision - Versions diffs - 19.3.2 → 19.4.0 - Mend

@flywheel-io/vision 19.3.2 → 19.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/components/menu/menu.component.d.ts +2 -0
package/components/select-menu/select-menu.component.d.ts +4 -3
package/components/tooltip/tooltip-panel/tooltip-panel.component.d.ts +8 -7
package/components/tooltip/tooltip.directive.d.ts +6 -2
package/components/typeahead/typeahead.component.d.ts +10 -4
package/fesm2022/flywheel-io-vision.mjs +207 -92
package/fesm2022/flywheel-io-vision.mjs.map +1 -1
package/package.json +1 -1

package/fesm2022/flywheel-io-vision.mjs CHANGED Viewed

@@ -920,25 +920,24 @@ class FwTooltipPanelComponent {
                 return unparsed;
             },
         });
-        this.title = '';
+        this.title = input('');
         this.isOpen = input(false);
         this.position = input('below');
         this.connectedPosition = computed(() => [positionMap$1[this.position()]]);
-        this.color = 'dark';
-        this.maxWidth = 200;
-        this.displayCaret = true;
-        this.mouseLeave = new EventEmitter();
+        this.positionClass = computed(() => `fw-tooltip-${this.position()}`);
+        this.color = input('dark');
+        this.maxWidth = input(200);
+        this.displayCaret = input(true);
         this.delay = input('short');
         this.delayMs = computed(() => delayMap$1[this.delay()]);
-    }
-    get classes() {
-        return ['fw-tooltip-panel', 'fw-tooltip-' + this.position].join(' ');
+        this.contentClass = input('');
+        this.mouseLeave = new EventEmitter();
     }
     hidePopover(e) {
         this.mouseLeave.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTooltipPanelComponent, isStandalone: true, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTooltipPanelComponent, isStandalone: true, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, 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: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "displayCaret", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "class.fw-tooltip-panel": "true", "class": "positionClass()", "@fadeInFadeOut": "this.animation" } }, 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 [ngClass]=\"contentClass()\" class=\"vision-h5\">{{ title() }}</h5>\n  @if (displayCaret()) {\n    <div class=\"fw-tooltip-caret\"></div>\n  }\n</div>\n", styles: [".fw-tooltip-content-wrapper{display:inline-block;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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
             trigger('fadeInFadeOut', [
                 transition(':enter', [
                     style({ opacity: 0 }),
@@ -948,11 +947,11 @@ class FwTooltipPanelComponent {
                     animate('200ms', style({ opacity: 0 })),
                 ]),
             ]),
-        ], encapsulation: i0.ViewEncapsulation.None }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.None, animations: [
+            args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.Emulated, animations: [
                         trigger('fadeInFadeOut', [
                             transition(':enter', [
                                 style({ opacity: 0 }),
@@ -962,23 +961,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                                 animate('200ms', style({ opacity: 0 })),
                             ]),
                         ]),
-                    ], imports: [NgClass, NgStyle], 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"] }]
+                    ], host: {
+                        '[class.fw-tooltip-panel]': 'true',
+                        '[class]': 'positionClass()',
+                    }, imports: [NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, 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 [ngClass]=\"contentClass()\" class=\"vision-h5\">{{ title() }}</h5>\n  @if (displayCaret()) {\n    <div class=\"fw-tooltip-caret\"></div>\n  }\n</div>\n", styles: [".fw-tooltip-content-wrapper{display:inline-block;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: [{
-                type: HostBinding,
-                args: ['attr.class']
             }], hidePopover: [{
                 type: HostListener,
                 args: ['mouseleave', ['$event']]
@@ -1004,7 +995,7 @@ const positionMap = {
 /* eslint-enable @rx-angular/prefer-no-layout-sensitive-apis */
 /**
  * Directive for displaying extra context on hover
- * @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
+ * @see [Vision Storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
  */
 class FwTooltipDirective {
     constructor() {
@@ -1015,6 +1006,7 @@ class FwTooltipDirective {
         /***** Internal Refs *****/
         this.overlayRef = signal(undefined);
         this.tooltipRef = signal(undefined);
+        this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
         /***** Inputs *****/
         // a lot of these ideally wouldn't be models,
         // but it makes it easier to interact with this from derivative directives
@@ -1039,6 +1031,12 @@ class FwTooltipDirective {
         this.maxWidth = model(200, {
             alias: 'fwTooltipMaxWidthPx',
         });
+        /**
+         * Custom class to apply to the content of the tooltip
+         */
+        this.contentClass = model('', {
+            alias: 'fwTooltipClass',
+        });
         /**
          * amount of delay before the tooltip displays
          *
@@ -1095,6 +1093,7 @@ class FwTooltipDirective {
                 this.hideTooltip();
             });
         });
+        this.openDelayTimer = 0;
         // updates the tooltip panel's caret position if a fallback position is used
         this.handlePositionChange = effect(() => {
             this.positionChangeSub?.unsubscribe();
@@ -1110,13 +1109,11 @@ class FwTooltipDirective {
                 });
                 if (newPositionName) {
                     this.tooltipRef()?.setInput('position', newPositionName);
-                    this.tooltipRef()?.changeDetectorRef.detectChanges();
                 }
             });
         });
     }
     ngOnInit() {
-        this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
         this.overlayRef.set(this.overlayService.create());
     }
     showTooltip() {
@@ -1124,6 +1121,9 @@ class FwTooltipDirective {
             return;
         }
         const overlayRef = this.overlayRef();
+        if (!overlayRef) {
+            return;
+        }
         overlayRef.updatePositionStrategy(this.positionStrategy());
         if (this.openDelayTimer) {
             return;
@@ -1135,12 +1135,12 @@ class FwTooltipDirective {
             tooltipRef.setInput('position', this.position());
             tooltipRef.setInput('maxWidth', this.maxWidth());
             tooltipRef.setInput('displayCaret', this.displayCaret());
-            tooltipRef.changeDetectorRef.detectChanges();
+            tooltipRef.setInput('contentClass', this.contentClass());
         }, this.delayMs());
     }
     hideTooltip() {
         window.clearTimeout(this.openDelayTimer);
-        this.openDelayTimer = undefined;
+        this.openDelayTimer = 0;
         this.overlayRef()?.detach();
         this.tooltipRef.set(undefined);
     }
@@ -1149,7 +1149,7 @@ class FwTooltipDirective {
         this.hideTooltip();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", 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 }, contentClass: { classPropertyName: "contentClass", publicName: "fwTooltipClass", 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", contentClass: "fwTooltipClassChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipDirective, decorators: [{
             type: Directive,
@@ -1186,7 +1186,7 @@ class FwTooltipComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipComponent, isStandalone: true, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipComponent, isStandalone: true, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipComponent, decorators: [{
             type: Component,
@@ -4417,7 +4417,7 @@ class FwMenuItemComponent {
             evt.stopPropagation();
             return;
         }
-        if (this.value) {
+        if (this.value !== undefined && this.value !== null) {
             this.click.emit(this.value);
             evt.stopPropagation();
         }
@@ -4515,6 +4515,7 @@ class FwMenuComponent {
         this.onTouched = () => {
         };
         this.subscriptions = [];
+        this.menuItemSubscriptions = [];
     }
     ngOnChanges() {
         this.updateLayout();
@@ -4523,17 +4524,27 @@ class FwMenuComponent {
         for (const subscription of this.subscriptions) {
             subscription.unsubscribe();
         }
+        for (const subscription of this.menuItemSubscriptions) {
+            subscription.unsubscribe();
+        }
     }
-    ngAfterContentInit() {
-        this.menuItems.forEach(item => {
+    subscribeToMenuItems(items) {
+        // Clear old menu item subscriptions
+        for (const subscription of this.menuItemSubscriptions) {
+            subscription.unsubscribe();
+        }
+        this.menuItemSubscriptions = [];
+        items.forEach(item => {
             const sub = item.click.subscribe(value => this.handleSelect(value));
-            this.subscriptions.push(sub);
+            this.menuItemSubscriptions.push(sub);
         });
+    }
+    ngAfterContentInit() {
+        // Initial subscription
+        this.subscribeToMenuItems(this.menuItems);
+        // Re-subscribe when menu items change
         const menuItemChangeSub = this.menuItems.changes.subscribe((newMenuItems) => {
-            newMenuItems.forEach(item => {
-                const sub = item.click.subscribe(value => this.handleSelect(value));
-                this.subscriptions.push(sub);
-            });
+            this.subscribeToMenuItems(newMenuItems);
             this.updateLayout();
         });
         this.subscriptions.push(menuItemChangeSub);
@@ -4830,7 +4841,7 @@ class FwTextInputComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FwTextInputComponent,
                 multi: true,
-            }], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n    </fw-icon>\n    <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n    <input\n      #input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [attr.maxlength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n    >\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip ? errorText : ''\">warning-circle</fw-icon>\n    <fw-icon\n      *ngIf=\"!!rightIcon\"\n      (click)=\"useActionableIcons?onRightIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n    </fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"vision-p4 error-text\" *ngIf=\"!!errorText && !errorInIconTooltip\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
+            }], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n  <div class=\"input-container\" [class]=\"size\">\n    <fw-icon\n      *ngIf=\"!!leftIcon\"\n      (click)=\"useActionableIcons?onLeftIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n    </fw-icon>\n    <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n    <input\n      #input\n      *ngIf=\"!textInput\"\n      [type]=\"type\"\n      (keyup)=\"changeHandler($event)\"\n      (blur)=\"blurHandler()\"\n      [value]=\"value\"\n      [attr.maxlength]=\"maxLength\"\n      [placeholder]=\"placeholder || ''\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n    >\n    <ng-content select=\"input\"></ng-content>\n    <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n    <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip ? errorText : ''\">warning-circle</fw-icon>\n    <fw-icon\n      *ngIf=\"!!rightIcon\"\n      (click)=\"useActionableIcons?onRightIconClick():null\"\n      [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n    </fw-icon>\n    <ng-content></ng-content>\n  </div>\n  <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n  <p class=\"vision-p4 error-text\" *ngIf=\"!!errorText && !errorInIconTooltip\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTextInputComponent, decorators: [{
             type: Component,
@@ -6267,14 +6278,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 class FwSelectMenuComponent {
     outsideClick(evt) {
-        if (this._isOpen && evt.nodeName !== 'INPUT') {
+        // Check if click is inside the overlay (menu items) but NOT on the input trigger
+        const clickedElement = evt.target;
+        const overlayPane = clickedElement.closest('.cdk-overlay-pane');
+        const clickedInsideOverlay = overlayPane && !clickedElement.closest('fw-text-input');
+        // Don't process outside clicks when clicking on menu items (but not the trigger input)
+        if (clickedInsideOverlay) {
+            return;
+        }
+        if (this._isOpen && evt.target.nodeName !== 'INPUT') {
             this.onTouched();
             this.close();
             this._isOpen = false;
         }
+        // Sync _isOpen state with actual trigger state
         if (this.trigger && this.trigger.isOpen()) {
             this._isOpen = true;
         }
+        else {
+            this._isOpen = false;
+        }
     }
     get disabledClass() {
         return this.disabled();
@@ -6321,8 +6344,33 @@ class FwSelectMenuComponent {
         this.inFocusOpen = false;
         this.isTyping = signal(false);
         // Computed signal for the input display value
-        this.inputDisplayValue = computed(() => this.isTyping() ? this.filterValue() : this.selectTitle());
+        // Don't show the title if it's the same as the value (means we haven't resolved it yet)
+        this.inputDisplayValue = computed(() => {
+            if (this.isTyping()) {
+                return this.filterValue();
+            }
+            const title = this.selectTitle();
+            const value = this.selectValue;
+            // If title equals value, it means we haven't resolved the proper title yet, show empty
+            if (title === value && this.menuItems().length > 0) {
+                return '';
+            }
+            return title;
+        });
         this._value = '';
+        // Watch for menu items changes and re-subscribe
+        this.menuItemsWatcher = effect(() => {
+            const items = this.menuItems();
+            // Only subscribe if we have items
+            // Use setTimeout to defer until after Angular has set the input properties
+            if (items.length > 0) {
+                untracked(() => {
+                    setTimeout(() => {
+                        this.subscribeToMenuItems();
+                    }, 0);
+                });
+            }
+        });
         this.filteredOptions = computed(() => {
             const filter = this.filterValue();
             const opts = this.options();
@@ -6363,18 +6411,26 @@ class FwSelectMenuComponent {
             }
         });
     }
-    ngAfterContentInit() {
-        // When using content projection with <fw-menu-item> components,
-        // subscribe to their click events and set initial selected state
-        if (this.menuItems().length > 0) {
-            this.menuItems().forEach(item => {
-                const sub = item.click.subscribe(value => this.menu()?.writeValue(value));
-                this.subscriptions.push(sub);
-                if (item.value.toString() === this.selectValue) {
-                    this.selectTitle.set(item.title.toString());
-                    this.selectIcon = item.icon;
-                }
+    subscribeToMenuItems() {
+        // Clear old subscriptions
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions = [];
+        const items = this.menuItems();
+        // Subscribe to current menu items
+        for (const item of items) {
+            const sub = item.click.subscribe(value => {
+                this.menu()?.writeValue(value);
             });
+            this.subscriptions.push(sub);
+        }
+        // Update title/icon if we have a selectValue but no title (or wrong title)
+        // This handles the case where writeValue was called before menu items existed
+        if (this.selectValue && items.length > 0) {
+            const matchingItem = items.find(item => item.value?.toString() === this.selectValue);
+            if (matchingItem) {
+                this.selectTitle.set(matchingItem.title.toString());
+                this.selectIcon = matchingItem.icon;
+            }
         }
     }
     ngOnDestroy() {
@@ -6456,15 +6512,9 @@ class FwSelectMenuComponent {
     updateHighlighting() {
         const currentValue = this.selectValue;
         // Update highlighting for content-projected menu items
-        if (this.menuItems().length > 0) {
-            this.menuItems().forEach(item => {
-                item.selected = item.value === currentValue;
-            });
-        }
-        // Update highlighting for options-based menu items via menu component
-        if (this.menu() && this.options().length > 0) {
-            this.menu().value = currentValue;
-            this.menu()?.updateLayout();
+        const projectedItems = this.menuItems();
+        for (let i = 0; i < projectedItems.length; i++) {
+            projectedItems[i].selected = projectedItems[i].value === currentValue;
         }
     }
     /**
@@ -6652,7 +6702,13 @@ class FwSelectMenuComponent {
                                 this.menuItems().forEach(item => {
                                     item.selected = item.value === this.selectValue;
                                 });
-                                this.updateValue(selectedItem.value);
+                                // Scroll the focused item into view
+                                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                                selectedItem.scrollIntoView();
+                                // Only update value if not in typing mode to avoid re-rendering all options
+                                if (!this.isTyping()) {
+                                    this.updateValue(selectedItem.value);
+                                }
                             }
                             else {
                                 // For options array items, set selectValue first for immediate highlighting
@@ -6660,11 +6716,13 @@ class FwSelectMenuComponent {
                                 this.selectValue = this.useFullOptionAsValue()
                                     ? JSON.stringify(selectedItem)
                                     : selectedItem?.[vProp]?.toString();
-                                if (this.menu()) {
-                                    this.menu().value = this.selectValue;
-                                    this.menu()?.updateLayout();
+                                // Update highlighting to show the focused item
+                                this.updateHighlighting();
+                                // Don't call updateValue during arrow navigation while typing
+                                // Just update selectValue for highlighting, actual value update happens on Enter
+                                if (!this.isTyping()) {
+                                    this.updateValue(selectedItem);
                                 }
-                                this.updateValue(selectedItem);
                             }
                         }
                     }, 0);
@@ -6684,7 +6742,13 @@ class FwSelectMenuComponent {
                                 this.menuItems().forEach(item => {
                                     item.selected = item.value === this.selectValue;
                                 });
-                                this.updateValue(selectedItem.value);
+                                // Scroll the focused item into view
+                                // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+                                selectedItem.scrollIntoView();
+                                // Only update value if not in typing mode to avoid re-rendering all options
+                                if (!this.isTyping()) {
+                                    this.updateValue(selectedItem.value);
+                                }
                             }
                             else {
                                 // For options array items, set selectValue first for immediate highlighting
@@ -6692,11 +6756,13 @@ class FwSelectMenuComponent {
                                 this.selectValue = this.useFullOptionAsValue()
                                     ? JSON.stringify(selectedItem)
                                     : selectedItem?.[vProp]?.toString();
-                                if (this.menu()) {
-                                    this.menu().value = this.selectValue;
-                                    this.menu()?.updateLayout();
+                                // Update highlighting to show the focused item
+                                this.updateHighlighting();
+                                // Don't call updateValue during arrow navigation while typing
+                                // Just update selectValue for highlighting, actual value update happens on Enter
+                                if (!this.isTyping()) {
+                                    this.updateValue(selectedItem);
                                 }
-                                this.updateValue(selectedItem);
                             }
                         }
                     }, 0);
@@ -6857,7 +6923,7 @@ class FwSelectMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i1$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\n    [leftIcon]=\"staticIcon() || selectIcon || null\"\n    [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder()\"\n    [size]=\"size()\"\n    [error]=\"errored() || (invalid && touched)\"\n    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterText]=\"filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue\" (change)=\"handleClick($any($event))\">\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"item.raw[descriptionProperty()]\"\n                [value]=\"item.value\"\n                [icon]=\"item.raw[iconProperty()]\"\n                [disabled]=\"$any(item.raw).disabled\"\n              >\n              </fw-menu-item>\n            }\n          }\n          <div #menuContentWrapper>\n            <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n          </div>\n        </fw-menu>\n      </fw-menu-container>\n    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\n    [leftIcon]=\"staticIcon() || selectIcon || null\"\n    [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder()\"\n    [size]=\"size()\"\n    [error]=\"errored() || (invalid && touched)\"\n    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterText]=\"menuItems().length > 0 ? '' : filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue\" (change)=\"handleClick($any($event))\">\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"item.raw[descriptionProperty()]\"\n                [value]=\"item.value\"\n                [icon]=\"item.raw[iconProperty()]\"\n                [disabled]=\"$any(item.raw).disabled\"\n              >\n              </fw-menu-item>\n            }\n          }\n          <div #menuContentWrapper>\n            <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n          </div>\n        </fw-menu>\n      </fw-menu-container>\n    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
@@ -6871,14 +6937,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         FwMenuComponent,
                         NgFor,
                         FwMenuItemComponent,
-                    ], template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\n    [leftIcon]=\"staticIcon() || selectIcon || null\"\n    [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder()\"\n    [size]=\"size()\"\n    [error]=\"errored() || (invalid && touched)\"\n    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterText]=\"filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue\" (change)=\"handleClick($any($event))\">\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"item.raw[descriptionProperty()]\"\n                [value]=\"item.value\"\n                [icon]=\"item.raw[iconProperty()]\"\n                [disabled]=\"$any(item.raw).disabled\"\n              >\n              </fw-menu-item>\n            }\n          }\n          <div #menuContentWrapper>\n            <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n          </div>\n        </fw-menu>\n      </fw-menu-container>\n    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"] }]
+                    ], template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\n    [leftIcon]=\"staticIcon() || selectIcon || null\"\n    [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder()\"\n    [size]=\"size()\"\n    [error]=\"errored() || (invalid && touched)\"\n    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterText]=\"menuItems().length > 0 ? '' : filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue\" (change)=\"handleClick($any($event))\">\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"item.raw[descriptionProperty()]\"\n                [value]=\"item.value\"\n                [icon]=\"item.raw[iconProperty()]\"\n                [disabled]=\"$any(item.raw).disabled\"\n              >\n              </fw-menu-item>\n            }\n          }\n          <div #menuContentWrapper>\n            <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n          </div>\n        </fw-menu>\n      </fw-menu-container>\n    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
                 }] }], propDecorators: { outsideClick: [{
                 type: HostListener,
-                args: ['document:click', ['$event.target']]
+                args: ['document:click', ['$event']]
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.disabled']
@@ -9450,13 +9516,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  */
 class FwTypeaheadComponent {
     constructor() {
-        this.trigger = viewChild(CdkMenuTrigger);
+        this.trigger = viewChild.required(CdkMenuTrigger);
         this.changeDetector = inject(ChangeDetectorRef);
         this.loading = model(false);
         this.disabled = model(false);
+        this.touched = signal(false);
+        this.hasAmbiguousInput = signal(false);
         this.onChange = (_) => {
         };
         this.onTouched = () => {
+            this.touched.set(true);
         };
         this.value = model([]);
         this.value$ = toObservable(this.value);
@@ -9467,6 +9536,7 @@ class FwTypeaheadComponent {
         this.minOptionsHeight = input('0px');
         this.optionsWidth = input('');
         this.maxHeight = input('');
+        this.selectType = input('multiple');
         this.notifyOnValueChanges = effect(() => {
             this.onChange(this.value());
         });
@@ -9474,7 +9544,16 @@ class FwTypeaheadComponent {
         this.searchValueChanges$ = toObservable(this.searchValue);
         this.allowNew = input(true);
         this.placeholder = input('Enter tags...');
-        this.showPlaceholder = computed(() => this.value().length === 0);
+        this.errorText = signal('');
+        this.displayedPlaceholder = computed(() => {
+            if (this.selectType() === 'single') {
+                return this.value()[0] || this.placeholder();
+            }
+            else {
+                return this.value().length === 0 ? this.placeholder() : '';
+            }
+        });
+        this.highlightPlaceholder = computed(() => this.selectType() === 'single' && this.value().length === 1);
         /**
          * Options after they've been both filtered for matching the search and already selected
          */
@@ -9516,22 +9595,31 @@ class FwTypeaheadComponent {
             return this.allowNew() && !alreadySelected && (!directMatch || loading);
         });
         this.addValue = (newValue) => {
-            const isInOptions = this.filteredOptions().includes(newValue);
+            const isInOptions = this.filteredOptions()?.includes(newValue);
             const isNewWhileDisallowed = !this.allowNew() && !isInOptions;
             const isDuplicate = this.value().includes(newValue.toLowerCase());
             if (isNewWhileDisallowed || isDuplicate) {
                 return;
             }
-            this.value.update(prevValue => [
-                ...prevValue || [],
-                newValue,
-            ]);
+            if (this.selectType() === 'single') {
+                this.value.set([newValue]);
+                this.trigger().close();
+            }
+            else {
+                this.value.update(prevValue => [
+                    ...prevValue || [],
+                    newValue,
+                ]);
+            }
         };
         this.handleOptionClick = (optionValue) => {
             this.onTouched();
-            this.addValue(optionValue);
-            this.focusInput();
             this.searchValue.set('');
+            // Clear error state when an option is selected
+            this.hasAmbiguousInput.set(false);
+            this.errorText.set('');
+            this.focusInput();
+            this.addValue(optionValue);
         };
         this.resetFocusOnOptionsChange = effect(() => {
             if (this.displayedOptions() || this.searchValue()) {
@@ -9547,9 +9635,12 @@ class FwTypeaheadComponent {
             return onlyOne ? this.searchValue() : options[focused]?.value;
         });
         this.inputRef = viewChild.required('input');
+        // eslint doesn't like keynames as object properties
         /* eslint-disable @typescript-eslint/naming-convention */
         this.keyHandlerMap = {
-            'Enter': () => {
+            'Enter': (event) => {
+                event.preventDefault();
+                event.stopPropagation();
                 this.onTouched();
                 const newValue = this.focusedOption() || this.searchValue();
                 const duplicate = this.value().find(val => val.toLowerCase() === newValue.toLowerCase());
@@ -9558,6 +9649,9 @@ class FwTypeaheadComponent {
                 }
                 this.addValue(newValue);
                 this.searchValue.set('');
+                // Clear error state when Enter is pressed to commit input
+                this.hasAmbiguousInput.set(false);
+                this.errorText.set('');
             },
             'ArrowDown': () => {
                 this.moveFocused('down');
@@ -9573,7 +9667,7 @@ class FwTypeaheadComponent {
                 return !searchIsEmpty;
             },
             'Tab': () => {
-                if (this.trigger().isOpen) {
+                if (this.trigger().isOpen()) {
                     this.trigger().close();
                 }
             },
@@ -9588,22 +9682,34 @@ class FwTypeaheadComponent {
     writeValue(incomingValue) {
         this.value.set(incomingValue);
     }
+    clearValue() {
+        this.value.set([]);
+    }
     registerOnChange(onChangeFn) {
         this.onChange = onChangeFn;
     }
     registerOnTouched(onTouchedFn) {
-        this.onTouched = onTouchedFn;
+        this.onTouched = () => {
+            this.touched.set(true);
+            onTouchedFn();
+        };
     }
     onClick(event) {
         event.preventDefault();
         event.stopPropagation();
     }
     handleSearchChange(event) {
-        if (this.trigger().closed) {
+        const keyIsAlphanumeric = event.key.length === 1;
+        if (this.trigger().closed && keyIsAlphanumeric) {
             this.trigger().open();
         }
         const value = event.target.value;
         this.searchValue.set(value);
+        // Clear error state when user starts typing or clears the input
+        if (!value.trim() || this.hasAmbiguousInput()) {
+            this.hasAmbiguousInput.set(false);
+            this.errorText.set('');
+        }
     }
     closeChip(chipValue) {
         const currentValue = this.value();
@@ -9613,7 +9719,7 @@ class FwTypeaheadComponent {
         // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
         this.changeDetector.detectChanges();
     }
-    focusInput(e = null) {
+    focusInput(e) {
         e?.preventDefault();
         e?.stopPropagation();
         e?.stopImmediatePropagation();
@@ -9622,6 +9728,12 @@ class FwTypeaheadComponent {
     }
     onFocusLoss(_) {
         this.onTouched();
+        // Check if there's text in the search field that wasn't committed
+        const hasUncommittedText = this.searchValue().trim().length > 0;
+        if (hasUncommittedText) {
+            this.hasAmbiguousInput.set(true);
+            this.errorText.set('Field contains ambiguous input, please either clear, select from available options, or press enter to include input.');
+        }
     }
     /* eslint-enable */
     handleKey(e) {
@@ -9654,13 +9766,13 @@ class FwTypeaheadComponent {
         newlyFocused.scrollIntoView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectType: { classPropertyName: "selectType", publicName: "selectType", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" }, properties: { "class.errored": "hasAmbiguousInput()", "class.fw-touched": "touched()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FwTypeaheadComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  (click)=\"focusInput($event)\"\n  class=\"input-container\"\n  [ngClass]=\"{ 'disabled': disabled() }\"\n  [style.max-height]=\"maxHeight()\"\n  [cdkMenuTriggerFor]=\"menuContent\"\n  fwMenuRegister\n  #inputContainer>\n  <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n    @for(val of value(); track val) {\n      <fw-chip\n        color=\"primary\"\n        [showClose]=\"true\"\n        [title]=\"val\"\n        [selectable]=\"false\"\n        (close)=\"closeChip(val)\"\n      />\n    }\n  </fw-chip-list>\n  <input\n    test-id=\"typeahead-input\"\n    [placeholder]=\"showPlaceholder() ? placeholder() : ''\"\n    [disabled]=\"disabled()\"\n    [value]=\"searchValue()\"\n    (keyup)=\"handleSearchChange($event)\"\n    (keydown)=\"handleKey($event)\"\n    (focusout)=\"onFocusLoss($event)\"\n    #input\n    type=\"text\"\n  />\n  @if(loading()) {\n    <fw-progress-spinner size=\"small\"/>\n  }\n</div>\n<ng-template #menuContent>\n    <fw-menu-container\n      [maxHeight]=\"maxOptionsHeight()\"\n      [minHeight]=\"minOptionsHeight()\"\n      [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n    >\n      <fw-menu>\n        @if(loading() && !displayNewOption()) {\n          <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n        } @else if(!loading()) {\n          @for (option of filteredOptions(); track option) {\n            <fw-menu-item\n              (click)=\"handleOptionClick($event)\"\n              (mouseenter)=\"setFocusByValue(option)\"\n              [title]=\"option\"\n              [focused]=\"focusedOption() === option\"\n              [value]=\"option\"\n            />\n          }\n          @empty {\n            @if (!displayNewOption()) {\n              <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n            }\n          }\n        }\n        @if(displayNewOption()) {\n          <fw-menu-item\n            (click)=\"handleOptionClick($event)\"\n            (mouseenter)=\"setFocusByValue(searchValue())\"\n            [title]=\"searchValue()\"\n            [value]=\"searchValue()\"\n            [focused]=\"focusedOption() === searchValue()\">\n            <p class=\"new-tag\">New</p>\n          </fw-menu-item>\n        }\n      </fw-menu>\n    </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$3.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list", inputs: ["resizeDebounceMs", "disableOverflow"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n  <div\n    (click)=\"focusInput($event)\"\n    class=\"input-container\"\n    [class.disabled]=\"disabled()\"\n    [style.max-height]=\"maxHeight()\"\n    [cdkMenuTriggerFor]=\"menuContent\"\n    fwMenuRegister\n    #inputContainer>\n    @if (selectType() === 'multiple') {\n      <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n        @for(val of value(); track val) {\n          <fw-chip\n            color=\"primary\"\n            [showClose]=\"true\"\n            [title]=\"val\"\n            [selectable]=\"false\"\n            (close)=\"closeChip(val)\"\n          />\n        }\n      </fw-chip-list>\n    }\n    <input\n      test-id=\"typeahead-input\"\n      [class.highlight-placeholder]=\"highlightPlaceholder()\"\n      [placeholder]=\"displayedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [value]=\"searchValue()\"\n      (keyup)=\"handleSearchChange($event)\"\n      (keydown)=\"handleKey($event)\"\n      (focusout)=\"onFocusLoss($event)\"\n      #input\n      type=\"text\"\n    />\n    @if(loading()) {\n      <fw-progress-spinner size=\"small\"/>\n    }\n    @if(selectType() === 'single' && value().length === 1) {\n      <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n    }\n  </div>\n  @if(errorText()) {\n    <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n  }\n</div>\n<ng-template #menuContent>\n    <fw-menu-container\n      [maxHeight]=\"maxOptionsHeight()\"\n      [minHeight]=\"minOptionsHeight()\"\n      [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n    >\n      <fw-menu>\n        @if(loading() && !displayNewOption()) {\n          <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n        } @else if(!loading()) {\n          @for (option of filteredOptions(); track option) {\n            <fw-menu-item\n              (click)=\"handleOptionClick($event)\"\n              (mouseenter)=\"setFocusByValue(option)\"\n              [title]=\"option\"\n              [focused]=\"focusedOption() === option\"\n              [value]=\"option\"\n            />\n          }\n          @empty {\n            @if (!displayNewOption()) {\n              <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n            }\n          }\n        }\n        @if(displayNewOption()) {\n          <fw-menu-item\n            (click)=\"handleOptionClick($event)\"\n            (mouseenter)=\"setFocusByValue(searchValue())\"\n            [title]=\"searchValue()\"\n            [value]=\"searchValue()\"\n            [focused]=\"focusedOption() === searchValue()\">\n            <p class=\"new-tag\">New</p>\n          </fw-menu-item>\n        }\n      </fw-menu>\n    </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host .error-text{color:var(--red-base);margin:4px 0 0}:host.errored .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$3.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list", inputs: ["resizeDebounceMs", "disableOverflow"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
             type: Component,
@@ -9673,14 +9785,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         MenuRegisterDirective,
                         FwProgressModule,
                         FwChipListComponent,
-                        NgClass,
+                        FwIconComponent,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => FwTypeaheadComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (click)=\"focusInput($event)\"\n  class=\"input-container\"\n  [ngClass]=\"{ 'disabled': disabled() }\"\n  [style.max-height]=\"maxHeight()\"\n  [cdkMenuTriggerFor]=\"menuContent\"\n  fwMenuRegister\n  #inputContainer>\n  <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n    @for(val of value(); track val) {\n      <fw-chip\n        color=\"primary\"\n        [showClose]=\"true\"\n        [title]=\"val\"\n        [selectable]=\"false\"\n        (close)=\"closeChip(val)\"\n      />\n    }\n  </fw-chip-list>\n  <input\n    test-id=\"typeahead-input\"\n    [placeholder]=\"showPlaceholder() ? placeholder() : ''\"\n    [disabled]=\"disabled()\"\n    [value]=\"searchValue()\"\n    (keyup)=\"handleSearchChange($event)\"\n    (keydown)=\"handleKey($event)\"\n    (focusout)=\"onFocusLoss($event)\"\n    #input\n    type=\"text\"\n  />\n  @if(loading()) {\n    <fw-progress-spinner size=\"small\"/>\n  }\n</div>\n<ng-template #menuContent>\n    <fw-menu-container\n      [maxHeight]=\"maxOptionsHeight()\"\n      [minHeight]=\"minOptionsHeight()\"\n      [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n    >\n      <fw-menu>\n        @if(loading() && !displayNewOption()) {\n          <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n        } @else if(!loading()) {\n          @for (option of filteredOptions(); track option) {\n            <fw-menu-item\n              (click)=\"handleOptionClick($event)\"\n              (mouseenter)=\"setFocusByValue(option)\"\n              [title]=\"option\"\n              [focused]=\"focusedOption() === option\"\n              [value]=\"option\"\n            />\n          }\n          @empty {\n            @if (!displayNewOption()) {\n              <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n            }\n          }\n        }\n        @if(displayNewOption()) {\n          <fw-menu-item\n            (click)=\"handleOptionClick($event)\"\n            (mouseenter)=\"setFocusByValue(searchValue())\"\n            [title]=\"searchValue()\"\n            [value]=\"searchValue()\"\n            [focused]=\"focusedOption() === searchValue()\">\n            <p class=\"new-tag\">New</p>\n          </fw-menu-item>\n        }\n      </fw-menu>\n    </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
+                    ], host: {
+                        '[class.errored]': 'hasAmbiguousInput()',
+                        '[class.fw-touched]': 'touched()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n  <div\n    (click)=\"focusInput($event)\"\n    class=\"input-container\"\n    [class.disabled]=\"disabled()\"\n    [style.max-height]=\"maxHeight()\"\n    [cdkMenuTriggerFor]=\"menuContent\"\n    fwMenuRegister\n    #inputContainer>\n    @if (selectType() === 'multiple') {\n      <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n        @for(val of value(); track val) {\n          <fw-chip\n            color=\"primary\"\n            [showClose]=\"true\"\n            [title]=\"val\"\n            [selectable]=\"false\"\n            (close)=\"closeChip(val)\"\n          />\n        }\n      </fw-chip-list>\n    }\n    <input\n      test-id=\"typeahead-input\"\n      [class.highlight-placeholder]=\"highlightPlaceholder()\"\n      [placeholder]=\"displayedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [value]=\"searchValue()\"\n      (keyup)=\"handleSearchChange($event)\"\n      (keydown)=\"handleKey($event)\"\n      (focusout)=\"onFocusLoss($event)\"\n      #input\n      type=\"text\"\n    />\n    @if(loading()) {\n      <fw-progress-spinner size=\"small\"/>\n    }\n    @if(selectType() === 'single' && value().length === 1) {\n      <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n    }\n  </div>\n  @if(errorText()) {\n    <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n  }\n</div>\n<ng-template #menuContent>\n    <fw-menu-container\n      [maxHeight]=\"maxOptionsHeight()\"\n      [minHeight]=\"minOptionsHeight()\"\n      [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n    >\n      <fw-menu>\n        @if(loading() && !displayNewOption()) {\n          <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n        } @else if(!loading()) {\n          @for (option of filteredOptions(); track option) {\n            <fw-menu-item\n              (click)=\"handleOptionClick($event)\"\n              (mouseenter)=\"setFocusByValue(option)\"\n              [title]=\"option\"\n              [focused]=\"focusedOption() === option\"\n              [value]=\"option\"\n            />\n          }\n          @empty {\n            @if (!displayNewOption()) {\n              <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n            }\n          }\n        }\n        @if(displayNewOption()) {\n          <fw-menu-item\n            (click)=\"handleOptionClick($event)\"\n            (mouseenter)=\"setFocusByValue(searchValue())\"\n            [title]=\"searchValue()\"\n            [value]=\"searchValue()\"\n            [focused]=\"focusedOption() === searchValue()\">\n            <p class=\"new-tag\">New</p>\n          </fw-menu-item>\n        }\n      </fw-menu>\n    </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host .error-text{color:var(--red-base);margin:4px 0 0}:host.errored .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
         }], propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click']