@flywheel-io/vision 20.1.0 → 20.1.2

package/fesm2022/flywheel-io-vision.mjs

@@ -1,6 +1,6 @@
 import { NgClass, CommonModule, NgIf, NgStyle, NgTemplateOutlet, NgFor, SlicePipe, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
+import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, effect, HostListener, ViewEncapsulation, EventEmitter, Output, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
 import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer } from '@angular/cdk/overlay';
@@ -375,6 +375,10 @@ class FwAvatarComponent {
         this.hasedColor = computed(() => pickColorViaHash(this.colorSeed()), ...(ngDevMode ? [{ debugName: "hasedColor" }] : []));
         this.colorToDisplay = computed(() => this.colorSeed() ? this.hasedColor() : namedColorMap[this.color()], ...(ngDevMode ? [{ debugName: "colorToDisplay" }] : []));
         this.isImageBroken = signal(false, ...(ngDevMode ? [{ debugName: "isImageBroken" }] : []));
+        this.reloadImageOnUrlChange = effect(() => {
+            this.imageUrl(); // establish dependency
+            this.isImageBroken.set(false);
+        }, ...(ngDevMode ? [{ debugName: "reloadImageOnUrlChange" }] : []));
     }
     onClick() {
         if (this.selectable()) {
@@ -388,7 +392,7 @@ class FwAvatarComponent {
         this.isImageBroken.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FwAvatarComponent, isStandalone: true, selector: "fw-avatar", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange", selected: "selectedChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n  @switch (content()) {\n    @case ('image') {\n      @if (!isImageBroken()) {\n        <img\n          [alt]=\"imageAltText()\"\n          [src]=\"imageUrl()\"\n          (load)=\"loadImage()\"\n          (error)=\"errorImage()\">\n      } @else {\n        @if (initial()) {\n          <span class=\"initial\">{{ initial() }}</span>\n        } @else {\n          <fw-icon>{{ icon() }}</fw-icon>\n        }\n      }\n    }\n    @case ('icon') {\n      <fw-icon>{{ icon() }}</fw-icon>\n    }\n    @case ('initial') {\n      @if (initial()) {\n        <span class=\"initial\">{{ initial() }}</span>\n      } @else {\n        <fw-icon>{{ icon() }}</fw-icon>\n      }\n    }\n  }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FwAvatarComponent, isStandalone: true, selector: "fw-avatar", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange", selected: "selectedChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n  @switch (content()) {\n    @case ('image') {\n      @if (!isImageBroken()) {\n        <img\n          [alt]=\"imageAltText()\"\n          [src]=\"imageUrl()\"\n          (load)=\"loadImage()\"\n          (error)=\"errorImage()\">\n      } @else {\n        @if (initial()) {\n          <span class=\"initial\">{{ initial() }}</span>\n        } @else {\n          <fw-icon>{{ icon() }}</fw-icon>\n        }\n      }\n    }\n    @case ('icon') {\n      <fw-icon>{{ icon() }}</fw-icon>\n    }\n    @case ('initial') {\n      @if (initial()) {\n        <span class=\"initial\">{{ initial() }}</span>\n      } @else {\n        <fw-icon>{{ icon() }}</fw-icon>\n      }\n    }\n  }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwAvatarComponent, decorators: [{
             type: Component,
@@ -396,7 +400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         FwIconComponent,
                     ], host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n  @switch (content()) {\n    @case ('image') {\n      @if (!isImageBroken()) {\n        <img\n          [alt]=\"imageAltText()\"\n          [src]=\"imageUrl()\"\n          (load)=\"loadImage()\"\n          (error)=\"errorImage()\">\n      } @else {\n        @if (initial()) {\n          <span class=\"initial\">{{ initial() }}</span>\n        } @else {\n          <fw-icon>{{ icon() }}</fw-icon>\n        }\n      }\n    }\n    @case ('icon') {\n      <fw-icon>{{ icon() }}</fw-icon>\n    }\n    @case ('initial') {\n      @if (initial()) {\n        <span class=\"initial\">{{ initial() }}</span>\n      } @else {\n        <fw-icon>{{ icon() }}</fw-icon>\n      }\n    }\n  }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n  @switch (content()) {\n    @case ('image') {\n      @if (!isImageBroken()) {\n        <img\n          [alt]=\"imageAltText()\"\n          [src]=\"imageUrl()\"\n          (load)=\"loadImage()\"\n          (error)=\"errorImage()\">\n      } @else {\n        @if (initial()) {\n          <span class=\"initial\">{{ initial() }}</span>\n        } @else {\n          <fw-icon>{{ icon() }}</fw-icon>\n        }\n      }\n    }\n    @case ('icon') {\n      <fw-icon>{{ icon() }}</fw-icon>\n    }\n    @case ('initial') {\n      @if (initial()) {\n        <span class=\"initial\">{{ initial() }}</span>\n      } @else {\n        <fw-icon>{{ icon() }}</fw-icon>\n      }\n    }\n  }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
         }], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], colorSeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorSeed", required: false }] }, { type: i0.Output, args: ["colorSeedChange"] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], imageAltText: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAltText", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], initial: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -6231,7 +6235,7 @@ class FwMultiSelectMenuComponent {
         this.titleProperty = 'title';
         this.iconProperty = 'icon';
         // behaviour
-        this.emptyText = 'No matches found...';
+        this.emptyText = 'No results found';
         this.placeholder = 'Select something...';
         this.disabled = false;
         this.useCheckbox = false;
@@ -7147,7 +7151,7 @@ class FwSelectMenuComponent {
         const iProp = this.iconProperty();
         const fullOption = this.useFullOptionAsValue();
         // null guard
-        if (!newValue) {
+        if (newValue === null || newValue === undefined) {
             this.selectValue.set('');
             this.selectIcon = undefined;
             return this.onChange(newValue);
@@ -10115,7 +10119,7 @@ class FwTypeaheadComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "syncSearchValueToInput" }] : []));
         this.allowNew = input(true, ...(ngDevMode ? [{ debugName: "allowNew" }] : []));
-        this.placeholder = input('Enter tags...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.placeholder = input('Start typing...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.displayedPlaceholder = computed(() => {
             if (this.selectType() === 'single') {
                 return this.value()[0] || this.placeholder();
@@ -10334,7 +10338,7 @@ class FwTypeaheadComponent {
                 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 class=\"full-container\">\n  <div\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      data-testid=\"typeahead-input\"\n      [class.highlight-placeholder]=\"highlightPlaceholder()\"\n      [placeholder]=\"displayedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKey($event)\"\n      (blur)=\"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</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 (mousedown)=\"$event.preventDefault()\">\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(option)\"\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(searchValue())\"\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.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: ["maxWidth", "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", "focusedChange"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i5.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 }); }
+        ], 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    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      data-testid=\"typeahead-input\"\n      [class.highlight-placeholder]=\"highlightPlaceholder()\"\n      [placeholder]=\"displayedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKey($event)\"\n      (blur)=\"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</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 (mousedown)=\"$event.preventDefault()\">\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(option)\"\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 results found\" [disabled]=\"true\"/>\n          }\n        }\n      }\n      @if(displayNewOption()) {\n        <fw-menu-item\n          (click)=\"handleOptionClick(searchValue())\"\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.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: ["maxWidth", "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", "focusedChange"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i5.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: "20.3.19", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
             type: Component,
@@ -10356,7 +10360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         },
                     ], host: {
                         '[class.fw-touched]': 'touched()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n  <div\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      data-testid=\"typeahead-input\"\n      [class.highlight-placeholder]=\"highlightPlaceholder()\"\n      [placeholder]=\"displayedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKey($event)\"\n      (blur)=\"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</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 (mousedown)=\"$event.preventDefault()\">\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(option)\"\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(searchValue())\"\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.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n  <div\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      data-testid=\"typeahead-input\"\n      [class.highlight-placeholder]=\"highlightPlaceholder()\"\n      [placeholder]=\"displayedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKey($event)\"\n      (blur)=\"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</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 (mousedown)=\"$event.preventDefault()\">\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(option)\"\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 results found\" [disabled]=\"true\"/>\n          }\n        }\n      }\n      @if(displayNewOption()) {\n        <fw-menu-item\n          (click)=\"handleOptionClick(searchValue())\"\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.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
         }], propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click']