@flywheel-io/vision 19.2.0 → 19.3.0

package/fesm2022/flywheel-io-vision.mjs

@@ -6253,7 +6253,7 @@ class FwSelectMenuComponent {
         }
     }
     get disabledClass() {
-        return this.disabled;
+        return this.disabled();
     }
     get value() {
         return this._value;
@@ -6261,36 +6261,59 @@ class FwSelectMenuComponent {
     set value(newValue) {
         this.updateValue(newValue);
     }
-    constructor(_changeDetectorRef, ngControl) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor(ngControl) {
         this.ngControl = ngControl;
-        // bind it for the template
-        this.JSON = JSON;
-        this.options = [];
-        this.valueProperty = 'value';
-        this.useFullOptionAsValue = false;
-        this.titleProperty = 'title';
-        this.iconProperty = 'icon';
-        this.descriptionProperty = 'description';
-        this.showFilter = false;
-        this.showReset = false;
-        this.disabled = false;
-        this.errored = false;
-        this.width = '200px';
-        this.size = 'medium';
-        this.placeholder = 'Select something...';
+        this.options = input([]);
+        this.valueProperty = input('value');
+        this.useFullOptionAsValue = input(false);
+        this.titleProperty = input('title');
+        this.iconProperty = input('icon');
+        this.staticIcon = input(undefined);
+        this.descriptionProperty = input('description');
+        this.showFilter = input(false);
+        this.showReset = input(false);
+        this.disabled = input(false);
+        this.errored = input(false);
+        this.width = input('200px');
+        this.optionsWidth = input(undefined);
+        this.minOptionsHeight = input(undefined);
+        this.maxOptionsHeight = input(undefined);
+        this.size = input('medium');
+        this.placeholder = input('Select something...');
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
         this.filterChanged = new EventEmitter();
         this.selectValue = '';
-        this.selectTitle = '';
+        this.selectTitle = signal('');
         this.selectIcon = '';
-        this.filterValue = '';
+        this.filterValue = signal('');
         this.subscriptions = [];
         this._isOpen = false;
         this.focused = 0;
         this.inFocusOpen = false;
+        this.isTyping = signal(false);
+        // Computed signal for the input display value
+        this.inputDisplayValue = computed(() => this.isTyping() ? this.filterValue() : this.selectTitle());
         this._value = '';
+        this.filteredOptions = computed(() => {
+            const filter = this.filterValue();
+            const opts = this.options();
+            const tProp = this.titleProperty();
+            if (!filter || filter.trim() === '') {
+                return opts;
+            }
+            return opts.filter(opt => opt[tProp]?.toString().toLowerCase()
+                .includes(filter.toLowerCase()));
+        });
+        this.optionsWithValues = computed(() => {
+            const useFull = this.useFullOptionAsValue();
+            const valProp = this.valueProperty();
+            return this.filteredOptions().map(item => ({
+                raw: item,
+                trackingId: useFull ? JSON.stringify(item) : item?.[valProp]?.toString(),
+                value: useFull ? JSON.stringify(item) : item?.[valProp]?.toString(),
+            }));
+        });
         this.onTouched = () => {
         };
         // this is just a different way of binding the controlValueAccessor
@@ -6298,31 +6321,29 @@ class FwSelectMenuComponent {
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
-    }
-    ngOnChanges(changes) {
-        const currentOptions = changes.options?.currentValue;
-        // if the options change check if the title we should be displaying has changed
-        if (currentOptions && currentOptions !== changes.options?.previousValue) {
-            const selectedOption = currentOptions.find(item => item[this.valueProperty]?.toString() === this.selectValue);
+        // Watch for options changes to update the displayed title
+        effect(() => {
+            const currentOptions = this.options();
+            const vProp = this.valueProperty();
+            const tProp = this.titleProperty();
+            if (!currentOptions || currentOptions.length === 0) {
+                return;
+            }
+            const selectedOption = currentOptions.find(item => item[vProp]?.toString() === this.selectValue);
             if (selectedOption) {
-                this.selectTitle = selectedOption[this.titleProperty];
+                this.selectTitle.set(selectedOption[tProp]);
             }
-        }
+        });
     }
     ngAfterContentInit() {
-        if (!this.options || (this.options.length === 0 && this.menuItems && this.menuItems.length > 0)) {
-            this.options = [];
+        // When using content projection with <fw-menu-item> components,
+        // subscribe to their click events and set initial selected state
+        if (this.menuItems && this.menuItems.length > 0) {
             this.menuItems.forEach(item => {
-                this.options.push({
-                    value: item.value.toString(),
-                    title: item.title.toString(),
-                    icon: item.icon,
-                    description: item.description,
-                });
                 const sub = item.click.subscribe(value => this.menu.writeValue(value));
                 this.subscriptions.push(sub);
                 if (item.value.toString() === this.selectValue) {
-                    this.selectTitle = item.title.toString();
+                    this.selectTitle.set(item.title.toString());
                     this.selectIcon = item.icon;
                 }
             });
@@ -6351,11 +6372,6 @@ class FwSelectMenuComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
-        this._changeDetectorRef.markForCheck();
-    }
     writeValue(value) {
         value = value ?? '';
         if (value === this.value) {
@@ -6369,20 +6385,80 @@ class FwSelectMenuComponent {
             this.close();
             return;
         }
-        if (this.useFullOptionAsValue) {
+        if (this.useFullOptionAsValue()) {
             const parsedValue = JSON.parse(e);
             this.updateValue(parsedValue);
         }
         else {
             this.updateValue(e);
         }
+        this.isTyping.set(false);
         this.close();
+        this.inFocusOpen = false;
+    }
+    /**
+     * Get all available items for navigation, either from options or menuItems
+     */
+    getAvailableItems() {
+        // If using options input, return filtered options
+        if (this.options().length > 0) {
+            return this.filteredOptions();
+        }
+        // If using content projection, return non-disabled menu items
+        if (this.menuItems && this.menuItems.length > 0) {
+            return this.menuItems.filter(item => !item.disabled);
+        }
+        return [];
+    }
+    /**
+     * Update highlighting for the currently selected item
+     */
+    updateHighlighting() {
+        const currentValue = this.selectValue;
+        // Update highlighting for content-projected menu items
+        if (this.menuItems && 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();
+        }
+    }
+    /**
+     * Initialize focused index to the currently selected item
+     */
+    initializeFocusedIndex() {
+        const availableItems = this.getAvailableItems();
+        const currentValue = this.selectValue;
+        // Find the index of the currently selected item
+        const selectedIndex = availableItems.findIndex(item => {
+            if (item instanceof FwMenuItemComponent) {
+                return item.value === currentValue;
+            }
+            else {
+                // For options array items
+                const vProp = this.valueProperty();
+                const itemValue = this.useFullOptionAsValue()
+                    ? JSON.stringify(item)
+                    : item?.[vProp]?.toString();
+                return itemValue === currentValue;
+            }
+        });
+        // Set focused to the selected index
+        // If no item is selected (selectedIndex is -1), keep it at -1 so first arrow down goes to index 0
+        this.focused = selectedIndex;
+        // Also update the highlighting to show the current selection (if any)
+        this.updateHighlighting();
     }
     moveFocused(direction) {
+        const availableItems = this.getAvailableItems();
         switch (direction) {
             case 'down': {
                 this.focused++;
-                if (this.focused >= this.options.length) {
+                if (this.focused >= availableItems.length) {
                     this.focused = 0;
                 }
                 break;
@@ -6390,7 +6466,7 @@ class FwSelectMenuComponent {
             case 'up': {
                 this.focused--;
                 if (this.focused < 0) {
-                    this.focused = this.options.length - 1;
+                    this.focused = availableItems.length - 1;
                 }
                 break;
             }
@@ -6400,32 +6476,205 @@ class FwSelectMenuComponent {
             }
         }
     }
+    handleFocus() {
+        // Select all text when focusing the input
+        if (this.textInput?.inputRef?.nativeElement && !this.isTyping()) {
+            const input = this.textInput.inputRef.nativeElement;
+            // Select all text immediately - this will select the current value
+            input.select();
+        }
+    }
+    handleInputClick() {
+        // When clicking into the input, select all text if not already typing
+        if (this.textInput?.inputRef?.nativeElement && !this.isTyping()) {
+            const input = this.textInput.inputRef.nativeElement;
+            // Use setTimeout to override the click's cursor positioning
+            setTimeout(() => {
+                input.select();
+            }, 0);
+        }
+        // Initialize highlighting when dropdown opens via click
+        // Use setTimeout to ensure menu is rendered before we try to update it
+        setTimeout(() => {
+            if (this.trigger?.isOpen()) {
+                this.inFocusOpen = true;
+                this.preFocusValue = this.value;
+                this.initializeFocusedIndex();
+            }
+        }, 0);
+    }
     handleKeyDown(event) {
+        // Handle Enter key when typing
+        if (event.key === 'Enter' && this.isTyping()) {
+            event.preventDefault();
+            this.inFocusOpen = false;
+            // Select the currently focused option (respects arrow key navigation)
+            const availableItems = this.getAvailableItems();
+            let newValue;
+            if (availableItems.length > 0) {
+                // Select the item at the focused index (which may have been changed by arrow keys)
+                const selectedItem = availableItems[this.focused];
+                // Handle both options (objects) and menuItems (FwMenuItemComponent)
+                if (selectedItem instanceof FwMenuItemComponent) {
+                    newValue = selectedItem.value;
+                }
+                else {
+                    newValue = selectedItem;
+                }
+            }
+            else {
+                // No available items, keep current value
+                if (this.useFullOptionAsValue()) {
+                    try {
+                        newValue = JSON.parse(this.value);
+                    }
+                    catch {
+                        // If parse fails, keep the raw value
+                        newValue = this.value;
+                    }
+                }
+                else {
+                    newValue = this.value;
+                }
+            }
+            // Clear filter and exit typing mode FIRST
+            // This prevents onInputChange from interfering
+            this.filterValue.set('');
+            this.isTyping.set(false);
+            // Update the value (this will set selectTitle signal)
+            this.updateValue(newValue);
+            this.close();
+            return;
+        }
+        // Handle backspace to enter typing mode - only if text is selected or at the beginning
+        if (event.key === 'Backspace' && !this.isTyping() && this.selectTitle()) {
+            // Check if there's a text selection
+            let hasSelection = false;
+            if (this.textInput?.inputRef?.nativeElement) {
+                const input = this.textInput.inputRef.nativeElement;
+                const selectionStart = input.selectionStart ?? 0;
+                const selectionEnd = input.selectionEnd ?? 0;
+                hasSelection = selectionStart !== selectionEnd;
+            }
+            // Only enter typing mode if there's a selection (e.g., from clicking/tabbing in)
+            // Otherwise, let the browser handle backspace naturally without entering typing mode
+            if (hasSelection) {
+                this.isTyping.set(true);
+                this.trigger.open();
+                this._isOpen = true;
+                this.inFocusOpen = true;
+                this.preFocusValue = this.value;
+                this.initializeFocusedIndex();
+            }
+            // Let the default backspace behavior happen regardless
+            return;
+        }
+        // Handle backspace while already typing
+        if (event.key === 'Backspace' && this.isTyping()) {
+            // Let default behavior happen, onInputChange will handle it
+            return;
+        }
+        // Handle regular characters when entering typing mode (not already typing)
+        // Exclude navigation keys like Arrow keys, Home, End, etc.
+        const isNavigationKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown', 'Delete'].includes(event.key);
+        if (!this.trigger.isOpen() && !this.isTyping() && this.selectTitle() && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && !isNavigationKey) {
+            // Don't prevent default - let the browser handle the character insertion naturally
+            // Just switch to typing mode and the input event will update filterValue
+            this.isTyping.set(true);
+            this.trigger.open();
+            this._isOpen = true;
+            this.inFocusOpen = true;
+            this.preFocusValue = this.value;
+            this.initializeFocusedIndex();
+            // The input event will fire after this keydown, which will update filterValue
+            // and trigger the dropdown to show filtered options
+            return;
+        }
+        // Handle regular characters while already typing (including space)
+        if (this.isTyping() && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            // Let default behavior happen, onInputChange will handle it
+            return;
+        }
         if (this.trigger.isOpen()) {
             if (this.inFocusOpen) {
                 if (event.key === 'ArrowDown') {
+                    event.preventDefault();
                     this.moveFocused('down');
-                    this.updateValue(this.options[this.focused]);
+                    // Defer updateValue to avoid change detection errors
+                    setTimeout(() => {
+                        const availableItems = this.getAvailableItems();
+                        if (availableItems.length > 0) {
+                            const selectedItem = availableItems[this.focused];
+                            // Handle both options (objects) and menuItems (FwMenuItemComponent)
+                            if (selectedItem instanceof FwMenuItemComponent) {
+                                this.selectValue = selectedItem.value;
+                                // Manually update selected state for all menu items
+                                this.menuItems?.forEach(item => {
+                                    item.selected = item.value === this.selectValue;
+                                });
+                                this.updateValue(selectedItem.value);
+                            }
+                            else {
+                                // For options array items, set selectValue first for immediate highlighting
+                                const vProp = this.valueProperty();
+                                this.selectValue = this.useFullOptionAsValue()
+                                    ? JSON.stringify(selectedItem)
+                                    : selectedItem?.[vProp]?.toString();
+                                if (this.menu) {
+                                    this.menu.value = this.selectValue;
+                                    this.menu.updateLayout();
+                                }
+                                this.updateValue(selectedItem);
+                            }
+                        }
+                    }, 0);
                 }
-                if (event.key === 'ArrowUp') {
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
                     this.moveFocused('up');
-                    this.updateValue(this.options[this.focused]);
-                }
-                if (event.key === 'Tab') {
-                    this.close();
-                    this.inFocusOpen = false;
-                    this.updateValue(this.preFocusValue);
+                    // Defer updateValue to avoid change detection errors
+                    setTimeout(() => {
+                        const availableItems = this.getAvailableItems();
+                        if (availableItems.length > 0) {
+                            const selectedItem = availableItems[this.focused];
+                            // Handle both options (objects) and menuItems (FwMenuItemComponent)
+                            if (selectedItem instanceof FwMenuItemComponent) {
+                                this.selectValue = selectedItem.value;
+                                // Manually update selected state for all menu items
+                                this.menuItems?.forEach(item => {
+                                    item.selected = item.value === this.selectValue;
+                                });
+                                this.updateValue(selectedItem.value);
+                            }
+                            else {
+                                // For options array items, set selectValue first for immediate highlighting
+                                const vProp = this.valueProperty();
+                                this.selectValue = this.useFullOptionAsValue()
+                                    ? JSON.stringify(selectedItem)
+                                    : selectedItem?.[vProp]?.toString();
+                                if (this.menu) {
+                                    this.menu.value = this.selectValue;
+                                    this.menu.updateLayout();
+                                }
+                                this.updateValue(selectedItem);
+                            }
+                        }
+                    }, 0);
                 }
-                if (event.key === 'Enter') {
+                else if (event.key === 'Tab') {
+                    this.isTyping.set(false);
                     this.close();
                     this.inFocusOpen = false;
-                    const newValue = this.useFullOptionAsValue ? this.JSON.parse(this.value) : this.value;
-                    this.updateValue(newValue);
+                    // Defer updateValue to avoid change detection errors
+                    setTimeout(() => {
+                        this.updateValue(this.preFocusValue);
+                    }, 0);
                 }
             }
             else {
                 this.inFocusOpen = true;
                 this.preFocusValue = this.value;
+                this.initializeFocusedIndex();
             }
         }
         else {
@@ -6438,6 +6687,7 @@ class FwSelectMenuComponent {
     handleKeyUp(event) {
         if (this.trigger.isOpen()) {
             if (event.key === 'Escape') {
+                this.isTyping.set(false);
                 this.close();
                 this.inFocusOpen = false;
                 this.updateValue(this.preFocusValue);
@@ -6454,57 +6704,118 @@ class FwSelectMenuComponent {
     updateValue(newValue) {
         // do housekeeping first
         this.onTouched();
+        const vProp = this.valueProperty();
+        const tProp = this.titleProperty();
+        const iProp = this.iconProperty();
+        const fullOption = this.useFullOptionAsValue();
         // null guard
         if (!newValue) {
             this.selectValue = '';
-            this.selectTitle = '';
+            this.selectTitle.set('');
             this.selectIcon = '';
             return this.onChange(newValue);
         }
         if (typeof newValue === 'object') {
-            this.selectValue = newValue?.[this.valueProperty]?.toString();
-            this.selectTitle = newValue?.[this.titleProperty]?.toString();
-            this.selectIcon = newValue?.[this.iconProperty];
-            const changeToEmit = this.useFullOptionAsValue ? newValue : newValue[this.valueProperty];
+            this.selectValue = newValue?.[vProp]?.toString();
+            this.selectTitle.set(newValue?.[tProp]?.toString());
+            this.selectIcon = newValue?.[iProp];
+            const changeToEmit = fullOption ? newValue : newValue[vProp];
             return this.onChange(changeToEmit);
         }
-        // try and find a matching option
-        const matchedOption = this.options.find(option => {
-            const matchesValue = option[this.valueProperty] === newValue;
-            const matchesTitle = option[this.titleProperty] === newValue;
+        // try and find a matching option in the options array
+        const matchedOption = this.options().find(option => {
+            const matchesValue = option[vProp] === newValue || option[vProp]?.toString() === newValue?.toString();
+            const matchesTitle = option[tProp] === newValue || option[tProp]?.toString() === newValue?.toString();
             return matchesValue || matchesTitle;
         });
         if (matchedOption) {
-            this.selectValue = matchedOption[this.valueProperty]?.toString();
-            this.selectTitle = matchedOption[this.titleProperty]?.toString();
-            this.selectIcon = matchedOption[this.iconProperty];
-            const changeToEmit = this.useFullOptionAsValue ? matchedOption : matchedOption[this.valueProperty];
+            this.selectValue = matchedOption[vProp]?.toString();
+            this.selectTitle.set(matchedOption[tProp]?.toString());
+            this.selectIcon = matchedOption[iProp];
+            const changeToEmit = fullOption ? matchedOption : matchedOption[vProp];
             return this.onChange(changeToEmit);
         }
-        else {
-            // fall back to stringify
-            const stringified = newValue.toString() || '';
-            this.selectValue = stringified;
-            this.selectTitle = stringified;
-            return this.onChange(stringified);
+        // try and find a matching menu item in content projected items
+        const matchedMenuItem = this.menuItems?.find(item => item.value === newValue);
+        if (matchedMenuItem) {
+            this.selectValue = matchedMenuItem.value?.toString();
+            this.selectTitle.set(matchedMenuItem.title);
+            this.selectIcon = matchedMenuItem.icon;
+            return this.onChange(matchedMenuItem.value);
         }
+        // fall back to stringify
+        const stringified = newValue.toString() || '';
+        this.selectValue = stringified;
+        this.selectTitle.set(stringified);
+        return this.onChange(stringified);
     }
     handleReset() {
-        if (this.showReset) {
+        if (this.showReset()) {
             this.updateValue(null);
         }
     }
     close() {
         this.trigger.close();
-        this.filterValue = '';
-        this.filterChanged.emit(this.filterValue);
+        this.filterValue.set('');
+        this.filterChanged.emit(this.filterValue());
+        this._isOpen = false;
+        this.isTyping.set(false);
     }
     onFilterChanged(value) {
-        this.filterValue = value;
+        // Don't let the menu-container overwrite our filterValue when we're typing
+        if (this.isTyping()) {
+            return;
+        }
+        this.filterValue.set(value);
         this.filterChanged.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", useFullOptionAsValue: "useFullOptionAsValue", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", minOptionsHeight: "minOptionsHeight", maxOptionsHeight: "maxOptionsHeight", size: "size", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\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    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    [readOnly]=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container\n      [filterText]=\"filterValue\"\n      *ngIf=\"!disabled\" [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        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty]?.toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"useFullOptionAsValue ? JSON.stringify(item) : item?.[valueProperty]?.toString()\"\n            [icon]=\"item[iconProperty]\"\n            [disabled]=\"$any(item).disabled\"\n          >\n          </fw-menu-item>\n        </ng-container>\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  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] }); }
+    onInputChange(event) {
+        const inputElement = event.target;
+        const value = inputElement.value;
+        // Update filterValue with the current input value
+        this.filterValue.set(value);
+        // If there's a filter value and we're not already typing, enter typing mode
+        if (value && !this.isTyping()) {
+            this.isTyping.set(true);
+            this.inFocusOpen = true;
+            this.preFocusValue = this.value;
+            this.initializeFocusedIndex();
+        }
+        else {
+            // Reset focused index to 0 when filter changes (only if already typing)
+            this.focused = 0;
+        }
+        // Defer selectValue update to avoid ExpressionChangedAfterItHasBeenCheckedError
+        // This happens because we're updating state during change detection
+        setTimeout(() => {
+            // Update selectValue to first available item for highlighting
+            const availableItems = this.getAvailableItems();
+            if (availableItems.length > 0) {
+                const firstItem = availableItems[0];
+                // Handle both options (objects) and menuItems (FwMenuItemComponent)
+                if (firstItem instanceof FwMenuItemComponent) {
+                    this.selectValue = firstItem.value;
+                }
+                else {
+                    this.selectValue = this.useFullOptionAsValue()
+                        ? JSON.stringify(firstItem)
+                        : firstItem[this.valueProperty()]?.toString();
+                }
+            }
+            else {
+                // Clear selection when no items match
+                this.selectValue = '';
+            }
+        }, 0);
+        this.filterChanged.emit(this.filterValue());
+        // Auto-open dropdown when user starts typing
+        if (this.filterValue() && !this.trigger.isOpen()) {
+            this.trigger.open();
+            this._isOpen = true;
+        }
+    }
+    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: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, 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        [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            @if (optionsWithValues().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            } @else {\n              @if (isTyping() && filterValue()) {\n                <fw-menu-item\n                  title=\"No matches found...\"\n                  [disabled]=\"true\"\n                >\n                </fw-menu-item>\n              }\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", "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,
@@ -6518,8 +6829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         FwMenuComponent,
                         NgFor,
                         FwMenuItemComponent,
-                    ], template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\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    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    [readOnly]=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container\n      [filterText]=\"filterValue\"\n      *ngIf=\"!disabled\" [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        <ng-container *ngIf=\"menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of options\"\n            [title]=\"item[titleProperty]?.toString()\"\n            [description]=\"item[descriptionProperty]\"\n            [value]=\"useFullOptionAsValue ? JSON.stringify(item) : item?.[valueProperty]?.toString()\"\n            [icon]=\"item[iconProperty]\"\n            [disabled]=\"$any(item).disabled\"\n          >\n          </fw-menu-item>\n        </ng-container>\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  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$4.NgControl, decorators: [{
+                    ], 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        [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            @if (optionsWithValues().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            } @else {\n              @if (isTyping() && filterValue()) {\n                <fw-menu-item\n                  title=\"No matches found...\"\n                  [disabled]=\"true\"\n                >\n                </fw-menu-item>\n              }\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
@@ -6529,46 +6840,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.disabled']
-            }], options: [{
-                type: Input
-            }], valueProperty: [{
-                type: Input
-            }], useFullOptionAsValue: [{
-                type: Input
-            }], titleProperty: [{
-                type: Input
-            }], iconProperty: [{
-                type: Input
-            }], staticIcon: [{
-                type: Input
-            }], descriptionProperty: [{
-                type: Input
-            }], showFilter: [{
-                type: Input
-            }], showReset: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], errored: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], optionsWidth: [{
-                type: Input
-            }], minOptionsHeight: [{
-                type: Input
-            }], maxOptionsHeight: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
             }], trigger: [{
                 type: ViewChild,
                 args: [CdkMenuTrigger]
             }], menu: [{
                 type: ViewChild,
                 args: [FwMenuComponent]
+            }], textInput: [{
+                type: ViewChild,
+                args: [FwTextInputComponent]
             }], menuItems: [{
                 type: ContentChildren,
                 args: [FwMenuItemComponent, { descendants: true }]