@ctrliq/quantic-components 1.61.4 → 1.62.1

package/dist/quantic-components.js

@@ -52579,6 +52579,7 @@
             this.required = false;
             this.invalid = false;
             this.emptyLabel = 'No results';
+            this.allowCustomValue = false;
             this._open = false;
             this._inputValue = '';
             this._activeIndex = -1;
@@ -52587,11 +52588,17 @@
             this.internals = this.attachInternals();
         }
         updated(changedProperties) {
-            if (changedProperties.has('value') || changedProperties.has('options')) {
+            const valueChanged = changedProperties.has('value');
+            const optionsChanged = changedProperties.has('options');
+            const customValueChanged = changedProperties.has('allowCustomValue');
+            if (valueChanged || customValueChanged || (optionsChanged && !this._open)) {
                 const selected = this.options.find((o) => o.value === this.value);
                 if (selected) {
                     this._inputValue = selected.label;
                 }
+                else if (this.allowCustomValue) {
+                    this._inputValue = this.value;
+                }
                 else {
                     this._inputValue = '';
                 }
@@ -52646,15 +52653,34 @@
             await this.updateComplete;
             this.positionListbox();
         }
-        closeList() {
+        closeList(commit = false) {
             if (!this._open)
                 return;
             this._open = false;
             this._activeIndex = -1;
             this.cleanup?.();
             this.cleanup = undefined;
-            const selected = this.options.find((o) => o.value === this.value);
-            this._inputValue = selected?.label ?? '';
+            if (this.allowCustomValue && commit) {
+                this.commitCustomValue();
+            }
+            else {
+                const selected = this.options.find((o) => o.value === this.value);
+                this._inputValue =
+                    selected?.label ?? (this.allowCustomValue ? this.value : '');
+            }
+        }
+        commitCustomValue() {
+            const trimmed = this._inputValue.trim();
+            this._inputValue = trimmed;
+            if (trimmed === this.value)
+                return;
+            this.value = trimmed;
+            this.internals.setFormValue(trimmed);
+            this.dispatchEvent(new CustomEvent('value-changed', {
+                detail: { value: trimmed },
+                bubbles: true,
+                composed: true,
+            }));
         }
         positionListbox() {
             const listbox = this._listboxRef.value;
@@ -52741,18 +52767,23 @@
                             this.selectOption(opt);
                         }
                     }
+                    else if (this.allowCustomValue && this._inputValue.trim()) {
+                        e.preventDefault();
+                        this.closeList(true);
+                        this.commitCustomValue();
+                    }
                     break;
                 case 'Escape':
                     e.preventDefault();
                     this.closeList();
                     break;
                 case 'Tab':
-                    this.closeList();
+                    this.closeList(true);
                     break;
             }
         }
         handleBlur() {
-            this.closeList();
+            this.closeList(true);
             this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));
         }
         handleFocus() {
@@ -52777,7 +52808,7 @@
             this.value = state;
             this.internals.setFormValue(state);
             const selected = this.options.find((o) => o.value === state);
-            this._inputValue = selected?.label ?? '';
+            this._inputValue = selected?.label ?? (this.allowCustomValue ? state : '');
         }
         formDisabledCallback(disabled) {
             this.disabled = disabled;
@@ -53244,6 +53275,15 @@
             description: 'Text shown in the listbox when no options match the input.',
         })
     ], exports.Combobox.prototype, "emptyLabel", void 0);
+    __decorate([
+        prop({
+            type: 'boolean',
+            default: 'false',
+            description: 'When true, the user can type a value that does not match any option. ' +
+                'The typed text is preserved on blur/Enter and surfaced through the value-changed event. ' +
+                'When false (default), only values from the options list are accepted.',
+        })
+    ], exports.Combobox.prototype, "allowCustomValue", void 0);
     __decorate([
         prop({
             type: '(option: ComboboxOption, inputValue: string) => boolean',
@@ -53261,7 +53301,7 @@
     ], exports.Combobox.prototype, "_activeIndex", void 0);
     exports.Combobox = __decorate([
         event('value-changed', {
-            description: 'Fired when the user selects an option from the list.',
+            description: 'Fired when the user selects an option from the list, or commits a custom value when allowCustomValue is enabled.',
             detail: '{ value: string }',
         }),
         event('input-changed', {
@@ -60027,6 +60067,7 @@
       .options=${this.options}
       .size=${this.size}
       .emptyLabel=${this.emptyLabel}
+      .allowCustomValue=${this.allowCustomValue}
       .filterFn=${this.filterFn}
       ?disabled=${this.disabled}
       ?required=${this.required}
@@ -66408,7 +66449,7 @@
         }
         updated(changed) {
             super.updated(changed);
-            if (changed.has('split') && !changed.has('panes')) {
+            if (changed.has('split')) {
                 this.sizes = parseSplit(this.split, this.panes.length);
                 this.applySizes();
             }