@ctrliq/quantic-components 1.61.4 → 1.62.1

package/dist/combobox/index.d.ts

@@ -31,6 +31,7 @@ export declare class Combobox extends Combobox_base {
     required: boolean;
     invalid: boolean;
     emptyLabel: string;
+    allowCustomValue: boolean;
     filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
     private _open;
     private _inputValue;
@@ -45,6 +46,7 @@ export declare class Combobox extends Combobox_base {
     private nextNavigableIndex;
     private openList;
     private closeList;
+    private commitCustomValue;
     private positionListbox;
     private selectOption;
     private handleInput;

package/dist/combobox/index.js

@@ -35,6 +35,7 @@ let Combobox = class Combobox extends A11yAttributesMixin(QuanticElement) {
         this.required = false;
         this.invalid = false;
         this.emptyLabel = 'No results';
+        this.allowCustomValue = false;
         this._open = false;
         this._inputValue = '';
         this._activeIndex = -1;
@@ -43,11 +44,17 @@ let Combobox = class Combobox extends A11yAttributesMixin(QuanticElement) {
         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 = '';
             }
@@ -102,15 +109,34 @@ let Combobox = class Combobox extends A11yAttributesMixin(QuanticElement) {
         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;
@@ -197,18 +223,23 @@ let Combobox = class Combobox extends A11yAttributesMixin(QuanticElement) {
                         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() {
@@ -233,7 +264,7 @@ let Combobox = class Combobox extends A11yAttributesMixin(QuanticElement) {
         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;
@@ -700,6 +731,15 @@ __decorate([
         description: 'Text shown in the listbox when no options match the input.',
     })
 ], 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.',
+    })
+], Combobox.prototype, "allowCustomValue", void 0);
 __decorate([
     prop({
         type: '(option: ComboboxOption, inputValue: string) => boolean',
@@ -717,7 +757,7 @@ __decorate([
 ], Combobox.prototype, "_activeIndex", void 0);
 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', {

package/dist/combobox/index.stories.d.ts

@@ -43,5 +43,8 @@ export declare const EmptyState: import("../shared/story").StoryObject<object>;
 export declare const WithDisabledOptions: import("../shared/story").StoryObject<object>;
 export declare const WithCustomFilter: import("../shared/story").StoryObject<object>;
 export declare const WithLongOptionLabels: import("../shared/story").StoryObject<object>;
+export declare const AllowCustomValue: import("../shared/story").StoryObject<object>;
+export declare const AllowCustomValueWithPreselected: import("../shared/story").StoryObject<object>;
+export declare const AllowCustomValueInAField: import("../shared/story").StoryObject<object>;
 export declare const InAField: import("../shared/story").StoryObject<object>;
 export declare const InAFieldWithValidation: import("../shared/story").StoryObject<object>;

package/dist/combobox/index.stories.js

@@ -107,6 +107,43 @@ export const WithLongOptionLabels = story().render(({ html }) => html `
     ></quantic-combobox>
   </div>
 `);
+export const AllowCustomValue = story().render(({ html, action }) => html `
+  <div style="max-width: 320px">
+    <quantic-combobox
+      placeholder="Type or pick a framework…"
+      allowCustomValue
+      .options=${frameworks}
+      @value-changed=${action('value-changed')}
+    ></quantic-combobox>
+  </div>
+`);
+export const AllowCustomValueWithPreselected = story().render(({ html, action }) => html `
+  <div style="max-width: 320px">
+    <quantic-combobox
+      placeholder="Type or pick a framework…"
+      value="react"
+      allowCustomValue
+      .options=${frameworks}
+      @value-changed=${action('value-changed')}
+    ></quantic-combobox>
+  </div>
+`);
+export const AllowCustomValueInAField = story().render(({ html, action }) => html `
+  <div style="max-width: 320px">
+    <quantic-combobox-field
+      label="Volume name"
+      hint="Pick an existing volume or type a new name."
+      placeholder="e.g. my-volume"
+      allowCustomValue
+      .options=${[
+    { label: 'vol-data-01', value: 'vol-data-01' },
+    { label: 'vol-scratch', value: 'vol-scratch' },
+    { label: 'vol-models-shared', value: 'vol-models-shared' },
+]}
+      @value-changed=${action('value-changed')}
+    ></quantic-combobox-field>
+  </div>
+`);
 export const InAField = story().render(({ html, action }) => html `
   <div style="max-width: 320px">
     <quantic-combobox-field

package/dist/field/combobox/combobox-field.component.js

@@ -10,6 +10,7 @@ export default renderAsField('combobox', Combobox, function (a11yContext) {
       .options=${this.options}
       .size=${this.size}
       .emptyLabel=${this.emptyLabel}
+      .allowCustomValue=${this.allowCustomValue}
       .filterFn=${this.filterFn}
       ?disabled=${this.disabled}
       ?required=${this.required}