@spartan-ng/brain 0.0.1-alpha.613 → 0.0.1-alpha.628

package/fesm2022/spartan-ng-brain-combobox.mjs

@@ -1,6 +1,6 @@
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, inject, forwardRef, Injector, input, booleanAttribute, linkedSignal, computed, model, contentChild, ElementRef, contentChildren, effect, Renderer2, TemplateRef, ViewContainerRef, PLATFORM_ID, signal } from '@angular/core';
+import { Directive, InjectionToken, inject, forwardRef, Injector, input, booleanAttribute, linkedSignal, computed, model, contentChild, ElementRef, contentChildren, signal, afterNextRender, effect, untracked, Renderer2, TemplateRef, ViewContainerRef, PLATFORM_ID } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 import { stringifyAsLabel } from '@spartan-ng/brain/core';
@@ -17,8 +17,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }] });
 
 const BrnComboboxItemToken = new InjectionToken('BrnComboboxItemToken');
-function provideBrnComboboxItem(Combobox) {
-    return { provide: BrnComboboxItemToken, useExisting: Combobox };
+function provideBrnComboboxItem(comboboxItem) {
+    return { provide: BrnComboboxItemToken, useExisting: comboboxItem };
 }
 
 const comboboxContainsFilter = (item, query, collator, itemToString) => {
@@ -69,6 +69,7 @@ function getDefaultConfig() {
         filter: (itemValue, search, collator, itemToString) => comboboxContainsFilter(itemValue, search, collator, itemToString),
         isItemEqualToValue: (itemValue, selectedValue) => Object.is(itemValue, selectedValue),
         itemToString: undefined,
+        autoHighlight: false,
     };
 }
 const BrnComboboxConfigToken = new InjectionToken('BrnComboboxConfig');
@@ -109,6 +110,10 @@ class BrnCombobox {
     itemToString = input(this._config.itemToString);
     /** A custom filter function to use when searching. */
     filter = input(this._config.filter);
+    /** Whether to auto-highlight the first matching item. */
+    autoHighlight = input(this._config.autoHighlight, {
+        transform: booleanAttribute,
+    });
     /** The selected value of the combobox. */
     value = model(null);
     /** The current search query. */
@@ -131,6 +136,8 @@ class BrnCombobox {
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
     /** @internal Whether the combobox is expanded */
     isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open');
+    _comboboxInput = signal(undefined);
+    mode = computed(() => this._comboboxInput()?.mode() || 'combobox');
     _onChange;
     _onTouched;
     constructor() {
@@ -143,6 +150,24 @@ class BrnCombobox {
             this.search.set('');
             this.keyManager.setActiveItem(-1);
         });
+        afterNextRender(() => {
+            effect(() => {
+                if (!this.autoHighlight() || !this.isExpanded() || !this.search())
+                    return;
+                const hasVisibleItems = this.visibleItems();
+                untracked(() => {
+                    if (hasVisibleItems) {
+                        this.keyManager.setFirstItemActive();
+                    }
+                    else {
+                        this.keyManager.setActiveItem(-1);
+                    }
+                });
+            }, { injector: this._injector });
+        });
+    }
+    registerComboboxInput(input) {
+        this._comboboxInput.set(input);
     }
     isSelected(itemValue) {
         return this.isItemEqualToValue()(itemValue, this.value());
@@ -157,14 +182,20 @@ class BrnCombobox {
         if (!this.isExpanded())
             return;
         const value = this.keyManager.activeItem?.value();
-        if (value === undefined)
-            return;
-        this.select(value);
+        if (value) {
+            this.select(value);
+        }
+        else {
+            this.close();
+        }
     }
     resetValue() {
         this.value.set(null);
         this._onChange?.(null);
     }
+    resetSearch() {
+        this.search.set('');
+    }
     removeValue(_) {
         console.warn('BrnComboboxChipRemove only works with multiple selection comboboxes.');
     }
@@ -195,7 +226,7 @@ class BrnCombobox {
         this._disabled.set(isDisabled);
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnCombobox, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, providers: [provideBrnComboboxBase(BrnCombobox), BRN_COMBOBOX_VALUE_ACCESSOR], queries: [{ propertyName: "_searchInputWrapper", first: true, predicate: BrnComboboxInputWrapper, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnCombobox, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, providers: [provideBrnComboboxBase(BrnCombobox), BRN_COMBOBOX_VALUE_ACCESSOR], queries: [{ propertyName: "_searchInputWrapper", first: true, predicate: BrnComboboxInputWrapper, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCombobox, decorators: [{
             type: Directive,
@@ -369,7 +400,15 @@ class BrnComboboxClear {
     _templateRef = inject(TemplateRef);
     _viewContainerRef = inject(ViewContainerRef);
     /** Determine if the combobox has a value */
-    _hasValue = computed(() => this._combobox.value() !== null);
+    _hasValue = computed(() => {
+        const mode = this._combobox.mode();
+        if (mode === 'combobox') {
+            return this._combobox.value() !== null;
+        }
+        else {
+            return this._combobox.search() !== '';
+        }
+    });
     constructor() {
         effect(() => {
             this._viewContainerRef.clear();
@@ -385,7 +424,12 @@ class BrnComboboxClear {
         });
     }
     clear() {
-        this._combobox.resetValue();
+        if (this._combobox.mode() === 'combobox') {
+            this._combobox.resetValue();
+        }
+        else {
+            this._combobox.resetSearch();
+        }
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnComboboxClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BrnComboboxClear, isStandalone: true, selector: "[brnComboboxClear]", ngImport: i0 });
@@ -463,31 +507,26 @@ class BrnComboboxInput {
     _el = inject(ElementRef);
     _combobox = injectBrnComboboxBase();
     _content = inject(BrnComboboxContent, { optional: true });
-    _mode = computed(() => (this._content ? 'popup' : 'combobox'));
+    mode = computed(() => (this._content ? 'popup' : 'combobox'));
     /** The id of the combobox input */
     id = input(`brn-combobox-input-${++BrnComboboxInput._id}`);
     disabled = this._combobox.disabledState;
     /** Whether the combobox panel is expanded */
     _isExpanded = this._combobox.isExpanded;
     constructor() {
+        this._combobox.registerComboboxInput?.(this);
         effect(() => {
-            const mode = this._mode();
+            const mode = this.mode();
             const value = this._combobox.value();
             const search = this._combobox.search();
-            switch (mode) {
-                case 'combobox':
-                    if (value && search === '') {
-                        this._el.nativeElement.value = stringifyAsLabel(value, this._combobox.itemToString());
-                    }
-                    else if (search === '') {
-                        this._el.nativeElement.value = '';
-                    }
-                    break;
-                case 'popup':
-                    if (search === '') {
-                        this._el.nativeElement.value = '';
-                    }
-                    break;
+            // In combobox mode we want to display the label of the selected value if no search is active
+            if (mode === 'combobox' && value && search === '') {
+                this._el.nativeElement.value = stringifyAsLabel(value, this._combobox.itemToString());
+                return;
+            }
+            // Otherwise we want to update the input value to the search value
+            if (this._el.nativeElement.value !== search) {
+                this._el.nativeElement.value = search;
             }
         });
     }
@@ -495,7 +534,7 @@ class BrnComboboxInput {
         const value = event.target.value;
         this._combobox.search.set(value);
         this._combobox.open();
-        if (value === '' && this._mode() === 'combobox') {
+        if (value === '' && this.mode() === 'combobox') {
             this._combobox.resetValue();
         }
     }
@@ -669,6 +708,10 @@ class BrnComboboxMultiple {
     itemToString = input(this._config.itemToString);
     /** A custom filter function to use when searching. */
     filter = input(this._config.filter);
+    /** Whether to auto-highlight the first matching item. */
+    autoHighlight = input(this._config.autoHighlight, {
+        transform: booleanAttribute,
+    });
     /** The selected values of the combobox. */
     value = model(null);
     /** The current search query. */
@@ -690,6 +733,7 @@ class BrnComboboxMultiple {
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
     /** @internal Whether the autocomplete is expanded */
     isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open');
+    mode = signal('combobox').asReadonly();
     _onChange;
     _onTouched;
     constructor() {
@@ -702,6 +746,21 @@ class BrnComboboxMultiple {
             this.search.set('');
             this.keyManager.setActiveItem(-1);
         });
+        afterNextRender(() => {
+            effect(() => {
+                if (!this.autoHighlight() || !this.isExpanded() || !this.search())
+                    return;
+                const hasVisibleItems = this.visibleItems();
+                untracked(() => {
+                    if (hasVisibleItems) {
+                        this.keyManager.setFirstItemActive();
+                    }
+                    else {
+                        this.keyManager.setActiveItem(-1);
+                    }
+                });
+            }, { injector: this._injector });
+        });
     }
     isSelected(itemValue) {
         return this.value()?.some((v) => this.isItemEqualToValue()(itemValue, v)) ?? false;
@@ -726,14 +785,20 @@ class BrnComboboxMultiple {
         if (!this.isExpanded())
             return;
         const value = this.keyManager.activeItem?.value();
-        if (value === undefined)
-            return;
-        this.select(value);
+        if (value) {
+            this.select(value);
+        }
+        else {
+            this.close();
+        }
     }
     resetValue() {
         this.value.set(null);
         this._onChange?.(null);
     }
+    resetSearch() {
+        this.search.set('');
+    }
     removeValue(itemValue) {
         const selected = this.value() ?? [];
         this.value.set(selected.filter((value) => !this.isItemEqualToValue()(itemValue, value)) ?? []);
@@ -771,7 +836,7 @@ class BrnComboboxMultiple {
         this._disabled.set(isDisabled);
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnComboboxMultiple, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnComboboxMultiple, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, providers: [provideBrnComboboxBase(BrnComboboxMultiple), BRN_COMBOBOX_MULTIPLE_VALUE_ACCESSOR], queries: [{ propertyName: "_searchInputWrapper", first: true, predicate: BrnComboboxInputWrapper, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnComboboxMultiple, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, providers: [provideBrnComboboxBase(BrnComboboxMultiple), BRN_COMBOBOX_MULTIPLE_VALUE_ACCESSOR], queries: [{ propertyName: "_searchInputWrapper", first: true, predicate: BrnComboboxInputWrapper, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnComboboxMultiple, decorators: [{
             type: Directive,