@akcelik/strct 1.20.0 → 1.22.0

package/fesm2022/akcelik-strct.mjs

@@ -7224,21 +7224,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 let comboboxCounter = 0;
 /**
- * Filterable single-select (autocomplete). CVA-compatible, fully keyboard
- * driven (↑/↓ to move, Enter to pick, Esc to close).
+ * Filterable select (autocomplete). CVA-compatible, fully keyboard driven
+ * (↑/↓ move, Home/End jump, Enter picks, Esc closes) with the shared select
+ * ergonomics: an aligned ✓ lead slot marks the current choice, the typed
+ * match is emphasised in each label, and disabled options gray out and are
+ * skipped.
+ *
  *   <strct-combobox [options]="opts" [(ngModel)]="selected" placeholder="Pick…" />
+ *
+ * Variants: `clearable` adds an × that resets the selection; `multiple`
+ * switches the value to an array and renders the picks as removable chips —
+ * the list stays open while picking and Backspace on an empty query removes
+ * the last chip. Options may carry `group` labels (rendered as headers),
+ * `disabled`, a leading `icon` and a secondary `description` line.
+ * `allowCustomValue` appends a "Use \"…\"" row while typing so the typed
+ * text itself can be committed as a free-form value.
  */
 class StrctCombobox {
-    host = inject((ElementRef));
+    host = inject(ElementRef);
+    inputEl = viewChild.required('input');
     listId = `strct-cbx-${++comboboxCounter}`;
-    /** Available options. */
+    /** Available options (`disabled` grays out; `group` renders headers). */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     /** Placeholder text when empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Show a skeleton placeholder while options are loading. */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show an × that resets the selection. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Multi-select: the value becomes an array and the picks render as
+     * removable chips; the list stays open while picking.
+     */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Text shown when the filter matches nothing (localizable). */
+    emptyText = input('No matches', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Accessible label of the × clear button (localizable). */
+    clearLabel = input('Clear selection', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label prefix of a chip's × button (localizable). */
+    removeLabel = input('Remove', ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Allow committing the typed text itself: while the query has no exact
+     * label match, a "Use \"…\"" row pinned to the list end (Enter or click)
+     * commits the raw text as the value — appended to the array in `multiple`.
+     */
+    allowCustomValue = input(false, { ...(ngDevMode ? { debugName: "allowCustomValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Verb prefix of the free-form row (localizable) — renders `Use "query"`. */
+    customText = input('Use', ...(ngDevMode ? [{ debugName: "customText" }] : /* istanbul ignore next */ []));
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Selection in `multiple` mode. */
+    values = signal([], ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -7250,19 +7286,79 @@ class StrctCombobox {
             return this.options();
         return this.options().filter((o) => o.label.toLowerCase().includes(q));
     }, ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    /** Flat option list (no headers) — keyboard navigation and ids live here. */
+    flat = computed(() => this.filtered(), ...(ngDevMode ? [{ debugName: "flat" }] : /* istanbul ignore next */ []));
+    /**
+     * The free-form query committable right now (allowCustomValue): a trimmed
+     * dirty query with no exact label match — and, in multiple mode, not
+     * already picked. Rendered as an extra row at index `flat().length`.
+     */
+    customRow = computed(() => {
+        if (!this.allowCustomValue() || !this.dirty())
+            return null;
+        const q = this.query().trim();
+        if (!q)
+            return null;
+        const ql = q.toLowerCase();
+        if (this.options().some((o) => o.label.toLowerCase() === ql))
+            return null;
+        if (this.multiple() && this.values().includes(q))
+            return null;
+        return q;
+    }, ...(ngDevMode ? [{ debugName: "customRow" }] : /* istanbul ignore next */ []));
+    /** Navigable row count: options plus the custom row when shown. */
+    navCount = computed(() => this.flat().length + (this.customRow() ? 1 : 0), ...(ngDevMode ? [{ debugName: "navCount" }] : /* istanbul ignore next */ []));
+    /** Render rows: group headers interleaved with their options. */
+    rows = computed(() => {
+        const out = [];
+        let lastGroup;
+        this.filtered().forEach((opt, index) => {
+            if (opt.group !== undefined && opt.group !== lastGroup) {
+                out.push({ key: `h:${opt.group}`, header: opt.group });
+            }
+            lastGroup = opt.group;
+            out.push({ key: `o:${index}`, opt, index });
+        });
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    hasSelection = computed(() => this.multiple() ? this.values().length > 0 : this.value() !== null, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
+    isSelected(v) {
+        return this.multiple() ? this.values().includes(v) : this.value() === v;
+    }
+    optionOf(v) {
+        return this.options().find((o) => o.value === v);
+    }
+    labelOf(v) {
+        return this.optionOf(v)?.label ?? String(v);
+    }
+    /** The typed match emphasised inside a label (first occurrence). */
+    segments(label) {
+        const q = this.dirty() ? this.query().toLowerCase().trim() : '';
+        const at = q ? label.toLowerCase().indexOf(q) : -1;
+        if (at < 0)
+            return { pre: label, match: '', post: '' };
+        return {
+            pre: label.slice(0, at),
+            match: label.slice(at, at + q.length),
+            post: label.slice(at + q.length),
+        };
+    }
+    focusInput() {
+        this.inputEl().nativeElement.focus();
+    }
     openList() {
         if (this.isDisabled())
             return;
         this.open.set(true);
-        this.activeIndex.set(this.indexOfValue());
+        this.activeIndex.set(this.initialIndex());
     }
     onType(event) {
         this.dirty.set(true);
         this.query.set(event.target.value);
         this.open.set(true);
-        this.activeIndex.set(0);
+        this.activeIndex.set(this.firstEnabled(0));
     }
     onKeydown(event) {
         switch (event.key) {
@@ -7276,15 +7372,36 @@ class StrctCombobox {
                 event.preventDefault();
                 this.move(-1);
                 break;
+            case 'Home':
+            case 'End':
+                if (!this.open())
+                    return;
+                event.preventDefault();
+                this.activeIndex.set(event.key === 'Home' ? this.firstEnabled(0) : this.lastEnabled());
+                this.scrollActiveIntoView();
+                break;
             case 'Enter': {
                 if (!this.open())
                     return;
                 event.preventDefault();
-                const opt = this.filtered()[this.activeIndex()];
-                if (opt)
+                const i = this.activeIndex();
+                if (i >= this.flat().length) {
+                    this.commitCustom();
+                    return;
+                }
+                const opt = this.flat()[i];
+                if (opt && !opt.disabled)
                     this.commit(opt);
                 break;
             }
+            case 'Backspace':
+                if (this.multiple() && !this.query() && this.values().length) {
+                    this.removeValue(this.values()[this.values().length - 1]);
+                }
+                break;
+            case 'Tab':
+                this.close();
+                break;
             case 'Escape':
                 if (this.open()) {
                     event.preventDefault();
@@ -7294,16 +7411,61 @@ class StrctCombobox {
         }
     }
     move(delta) {
-        const len = this.filtered().length;
-        if (!len)
+        const opts = this.flat();
+        const n = this.navCount();
+        if (!n)
             return;
-        this.activeIndex.set((this.activeIndex() + delta + len) % len);
+        let i = this.activeIndex();
+        let guard = n;
+        do {
+            i = (i + delta + n) % n;
+            // The custom row (index ≥ opts.length) is always enabled.
+        } while (i < opts.length && opts[i].disabled && --guard > 0);
+        this.activeIndex.set(i);
+        this.scrollActiveIntoView();
+    }
+    firstEnabled(from) {
+        const opts = this.flat();
+        for (let i = from; i < opts.length; i++)
+            if (!opts[i].disabled)
+                return i;
+        return this.customRow() ? opts.length : 0;
+    }
+    lastEnabled() {
+        const opts = this.flat();
+        if (this.customRow())
+            return opts.length; // custom row is always last & enabled
+        for (let i = opts.length - 1; i >= 0; i--)
+            if (!opts[i].disabled)
+                return i;
+        return 0;
+    }
+    scrollActiveIntoView() {
+        setTimeout(() => {
+            document
+                .getElementById(`${this.listId}-${this.activeIndex()}`)
+                ?.scrollIntoView({ block: 'nearest' });
+        });
     }
     select(opt, event) {
         event.preventDefault(); // keep focus, avoid blur reordering
+        if (opt.disabled)
+            return;
         this.commit(opt);
     }
     commit(opt) {
+        if (this.multiple()) {
+            const next = this.values().includes(opt.value)
+                ? this.values().filter((v) => v !== opt.value)
+                : [...this.values(), opt.value];
+            this.values.set(next);
+            this.query.set('');
+            this.dirty.set(false);
+            this.activeIndex.set(this.options().indexOf(opt));
+            this.onChange([...next]);
+            this.onTouched();
+            return; // the list stays open while picking
+        }
         this.value.set(opt.value);
         this.query.set(opt.label);
         this.dirty.set(false);
@@ -7311,6 +7473,57 @@ class StrctCombobox {
         this.onChange(opt.value);
         this.onTouched();
     }
+    /**
+     * Commit the typed text itself as a free-form value (allowCustomValue).
+     * Multiple mode appends it and keeps picking; single mode takes it and
+     * closes.
+     */
+    commitCustom(event) {
+        event?.preventDefault();
+        const q = this.customRow();
+        if (!q)
+            return;
+        if (this.multiple()) {
+            const next = [...this.values(), q];
+            this.values.set(next);
+            this.query.set('');
+            this.dirty.set(false);
+            this.onChange([...next]);
+            this.onTouched();
+            return; // the list stays open while picking
+        }
+        this.value.set(q);
+        this.query.set(q);
+        this.dirty.set(false);
+        this.open.set(false);
+        this.onChange(q);
+        this.onTouched();
+    }
+    removeValue(v, event) {
+        event?.stopPropagation();
+        const next = this.values().filter((x) => x !== v);
+        this.values.set(next);
+        this.onChange([...next]);
+        this.onTouched();
+        // A clicked chip × vanishes with its chip — keep focus in the control.
+        if (event)
+            this.focusInput();
+    }
+    clear(event) {
+        event.stopPropagation();
+        if (this.multiple()) {
+            this.values.set([]);
+            this.onChange([]);
+        }
+        else {
+            this.value.set(null);
+            this.onChange(null);
+        }
+        this.query.set('');
+        this.dirty.set(false);
+        this.onTouched();
+        this.focusInput();
+    }
     onDocClick(event) {
         if (this.open() && !this.host.nativeElement.contains(event.target)) {
             this.close();
@@ -7321,15 +7534,27 @@ class StrctCombobox {
         this.dirty.set(false);
         this.syncQueryToValue();
     }
-    indexOfValue() {
-        const idx = this.filtered().findIndex((o) => o.value === this.value());
-        return idx < 0 ? 0 : idx;
+    /** Highlight starts on the selected option — or the first enabled one. */
+    initialIndex() {
+        const opts = this.flat();
+        const sel = opts.findIndex((o) => this.isSelected(o.value) && !o.disabled);
+        return sel < 0 ? this.firstEnabled(0) : sel;
     }
     syncQueryToValue() {
-        const match = this.options().find((o) => o.value === this.value());
-        this.query.set(match?.label ?? '');
+        if (this.multiple()) {
+            this.query.set('');
+            return;
+        }
+        const v = this.value();
+        const match = this.options().find((o) => o.value === v);
+        // A custom value matches no option — echo the raw text instead of blanking.
+        this.query.set(match?.label ?? (v == null ? '' : String(v)));
     }
     writeValue(value) {
+        if (this.multiple()) {
+            this.values.set(Array.isArray(value) ? value : []);
+            return;
+        }
         this.value.set(value);
         this.syncQueryToValue();
     }
@@ -7343,128 +7568,282 @@ class StrctCombobox {
         this.isDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCombobox, isStandalone: true, selector: "strct-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)" }, classAttribute: "strct-cbx" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctCombobox, isStandalone: true, selector: "strct-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, customText: { classPropertyName: "customText", publicName: "customText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)" }, classAttribute: "strct-cbx" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctCombobox), multi: true },
-        ], ngImport: i0, template: `
-    <div #field class="strct-cbx__field">
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #field
+      class="strct-cbx__field"
+      [class.strct-control]="multiple()"
+      [class.strct-cbx__field--multi]="multiple()"
+      (click)="focusInput()"
+    >
+      @if (multiple()) {
+        @for (v of values(); track $index) {
+          <span class="strct-cbx__chip">
+            @if (optionOf(v)?.icon; as chipIcon) {
+              <strct-icon class="strct-cbx__chip-icon" [name]="chipIcon" [size]="11" />
+            }
+            {{ labelOf(v) }}
+            <button
+              type="button"
+              class="strct-cbx__chip-x"
+              [attr.aria-label]="removeLabel() + ' ' + labelOf(v)"
+              [disabled]="isDisabled()"
+              (click)="removeValue(v, $event)"
+            >
+              <strct-icon strictName="close" [size]="10" [strokeWidth]="1.8" />
+            </button>
+          </span>
+        }
+      }
       <input
         #input
         type="text"
-        class="strct-control strct-cbx__input"
+        class="strct-cbx__input"
+        [class.strct-control]="!multiple()"
+        [class.strct-cbx__input--bare]="multiple()"
         role="combobox"
         autocomplete="off"
         [attr.aria-expanded]="open()"
         [attr.aria-controls]="listId"
-        [attr.aria-activedescendant]="
-          open() && filtered().length ? listId + '-' + activeIndex() : null
-        "
-        [placeholder]="placeholder()"
+        [attr.aria-activedescendant]="open() && navCount() ? listId + '-' + activeIndex() : null"
+        [placeholder]="multiple() && values().length ? '' : placeholder()"
         [value]="query()"
         [disabled]="isDisabled()"
         (focus)="openList()"
+        (click)="openList()"
         (input)="onType($event)"
         (keydown)="onKeydown($event)"
         (blur)="onTouched()"
       />
-      <strct-icon class="strct-cbx__caret" name="chevronDown" [size]="14" />
+      @if (clearable() && hasSelection() && !isDisabled()) {
+        <button
+          type="button"
+          class="strct-cbx__clear"
+          [attr.aria-label]="clearLabel()"
+          (click)="clear($event)"
+        >
+          <strct-icon strictName="close" [size]="12" [strokeWidth]="1.6" />
+        </button>
+      }
+      <strct-icon class="strct-cbx__caret" strictName="chevronDown" [size]="14" />
     </div>
     @if (open()) {
       <div
         class="strct-cbx__menu"
         role="listbox"
         [id]="listId"
+        [attr.aria-multiselectable]="multiple() || null"
         [strctOverlay]="field"
         strctOverlayPlacement="bottom-start"
         [strctOverlayMatchWidth]="true"
+        (mousedown)="$event.preventDefault()"
       >
         @if (loading()) {
           <div class="strct-cbx__skeleton">
             <div class="strct-cbx__skeleton-block"></div>
           </div>
         } @else {
-          @for (opt of filtered(); track opt.value; let i = $index) {
+          @for (row of rows(); track row.key) {
+            @if (row.header !== undefined) {
+              <div class="strct-cbx__group" role="presentation">{{ row.header }}</div>
+            } @else {
+              <div
+                class="strct-cbx__opt"
+                [id]="listId + '-' + row.index"
+                [class.strct-cbx__opt--selected]="isSelected(row.opt!.value)"
+                [class.strct-cbx__opt--highlight]="row.index === activeIndex()"
+                role="option"
+                [attr.aria-selected]="isSelected(row.opt!.value)"
+                [attr.aria-disabled]="row.opt!.disabled || null"
+                (mousedown)="select(row.opt!, $event)"
+                (mousemove)="!row.opt!.disabled && activeIndex.set(row.index!)"
+              >
+                <span class="strct-cbx__check" aria-hidden="true">
+                  @if (isSelected(row.opt!.value)) {
+                    <strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
+                  }
+                </span>
+                @if (row.opt!.icon) {
+                  <strct-icon class="strct-cbx__opt-icon" [name]="row.opt!.icon" [size]="14" />
+                }
+                @let seg = segments(row.opt!.label);
+                <span class="strct-cbx__opt-text">
+                  <span class="strct-cbx__label"
+                    >{{ seg.pre }}<span class="strct-cbx__match">{{ seg.match }}</span
+                    >{{ seg.post }}</span
+                  >
+                  @if (row.opt!.description) {
+                    <span class="strct-cbx__opt-desc">{{ row.opt!.description }}</span>
+                  }
+                </span>
+              </div>
+            }
+          } @empty {
+            @if (!customRow()) {
+              <div class="strct-cbx__empty">{{ emptyText() }}</div>
+            }
+          }
+          @if (customRow(); as customQuery) {
             <div
-              class="strct-cbx__opt"
-              [id]="listId + '-' + i"
-              [class.strct-cbx__opt--active]="opt.value === value()"
-              [class.strct-cbx__opt--highlight]="i === activeIndex()"
+              class="strct-cbx__opt strct-cbx__opt--custom"
+              [id]="listId + '-' + flat().length"
+              [class.strct-cbx__opt--highlight]="activeIndex() === flat().length"
               role="option"
-              [attr.aria-selected]="opt.value === value()"
-              (mousedown)="select(opt, $event)"
-              (mousemove)="activeIndex.set(i)"
+              aria-selected="false"
+              (mousedown)="commitCustom($event)"
+              (mousemove)="activeIndex.set(flat().length)"
             >
-              {{ opt.label }}
+              <span class="strct-cbx__check" aria-hidden="true"></span>
+              <strct-icon class="strct-cbx__opt-icon" strictName="plus" [size]="13" />
+              <span class="strct-cbx__label">{{ customText() }} "{{ customQuery }}"</span>
             </div>
-          } @empty {
-            <div class="strct-cbx__empty">No matches</div>
           }
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-inline-end:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-cbx__skeleton{padding:9px 10px}.strct-cbx__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-inline-end:30px}.strct-cbx__field--multi{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding-block:4px;cursor:text}.strct-cbx__field--multi:focus-within{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-cbx__input--bare{flex:1;min-width:60px;padding:2px 0;font:inherit;font-size:13px;color:var(--t1);background:none;border:none;outline:none}.strct-cbx__chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 4px 2px 8px;font-size:12px;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2);border-radius:var(--radius-sm)}.strct-cbx__chip-x{display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:3px;cursor:pointer}.strct-cbx__chip-x:hover{color:var(--t1);background:var(--bg-4)}.strct-cbx__clear{position:absolute;right:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:3px;cursor:pointer}.strct-cbx__clear:hover{color:var(--t1)}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:240px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__group{padding:7px 10px 3px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--t3)}.strct-cbx__opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--selected{font-weight:600;background:var(--acc-s)}.strct-cbx__opt--selected.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__opt[aria-disabled=true]{color:var(--t4);cursor:default}.strct-cbx__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-cbx__opt-icon{display:inline-flex;flex:none;color:var(--t3)}.strct-cbx__opt--selected .strct-cbx__opt-icon{color:var(--t1)}.strct-cbx__opt-text{display:flex;flex-direction:column;min-width:0}.strct-cbx__opt-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:400;color:var(--t3)}.strct-cbx__opt--custom{border-top:1px solid var(--b2);border-radius:0 0 5px 5px;color:var(--t2)}.strct-cbx__chip-icon{display:inline-flex;color:var(--t3)}.strct-cbx__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cbx__match{font-weight:700;color:var(--acc)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-cbx__skeleton{padding:9px 10px}.strct-cbx__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctCombobox, decorators: [{
             type: Component,
             args: [{ selector: 'strct-combobox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctOverlay], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctCombobox), multi: true },
                     ], template: `
-    <div #field class="strct-cbx__field">
+    <div
+      #field
+      class="strct-cbx__field"
+      [class.strct-control]="multiple()"
+      [class.strct-cbx__field--multi]="multiple()"
+      (click)="focusInput()"
+    >
+      @if (multiple()) {
+        @for (v of values(); track $index) {
+          <span class="strct-cbx__chip">
+            @if (optionOf(v)?.icon; as chipIcon) {
+              <strct-icon class="strct-cbx__chip-icon" [name]="chipIcon" [size]="11" />
+            }
+            {{ labelOf(v) }}
+            <button
+              type="button"
+              class="strct-cbx__chip-x"
+              [attr.aria-label]="removeLabel() + ' ' + labelOf(v)"
+              [disabled]="isDisabled()"
+              (click)="removeValue(v, $event)"
+            >
+              <strct-icon strictName="close" [size]="10" [strokeWidth]="1.8" />
+            </button>
+          </span>
+        }
+      }
       <input
         #input
         type="text"
-        class="strct-control strct-cbx__input"
+        class="strct-cbx__input"
+        [class.strct-control]="!multiple()"
+        [class.strct-cbx__input--bare]="multiple()"
         role="combobox"
         autocomplete="off"
         [attr.aria-expanded]="open()"
         [attr.aria-controls]="listId"
-        [attr.aria-activedescendant]="
-          open() && filtered().length ? listId + '-' + activeIndex() : null
-        "
-        [placeholder]="placeholder()"
+        [attr.aria-activedescendant]="open() && navCount() ? listId + '-' + activeIndex() : null"
+        [placeholder]="multiple() && values().length ? '' : placeholder()"
         [value]="query()"
         [disabled]="isDisabled()"
         (focus)="openList()"
+        (click)="openList()"
         (input)="onType($event)"
         (keydown)="onKeydown($event)"
         (blur)="onTouched()"
       />
-      <strct-icon class="strct-cbx__caret" name="chevronDown" [size]="14" />
+      @if (clearable() && hasSelection() && !isDisabled()) {
+        <button
+          type="button"
+          class="strct-cbx__clear"
+          [attr.aria-label]="clearLabel()"
+          (click)="clear($event)"
+        >
+          <strct-icon strictName="close" [size]="12" [strokeWidth]="1.6" />
+        </button>
+      }
+      <strct-icon class="strct-cbx__caret" strictName="chevronDown" [size]="14" />
     </div>
     @if (open()) {
       <div
         class="strct-cbx__menu"
         role="listbox"
         [id]="listId"
+        [attr.aria-multiselectable]="multiple() || null"
         [strctOverlay]="field"
         strctOverlayPlacement="bottom-start"
         [strctOverlayMatchWidth]="true"
+        (mousedown)="$event.preventDefault()"
       >
         @if (loading()) {
           <div class="strct-cbx__skeleton">
             <div class="strct-cbx__skeleton-block"></div>
           </div>
         } @else {
-          @for (opt of filtered(); track opt.value; let i = $index) {
+          @for (row of rows(); track row.key) {
+            @if (row.header !== undefined) {
+              <div class="strct-cbx__group" role="presentation">{{ row.header }}</div>
+            } @else {
+              <div
+                class="strct-cbx__opt"
+                [id]="listId + '-' + row.index"
+                [class.strct-cbx__opt--selected]="isSelected(row.opt!.value)"
+                [class.strct-cbx__opt--highlight]="row.index === activeIndex()"
+                role="option"
+                [attr.aria-selected]="isSelected(row.opt!.value)"
+                [attr.aria-disabled]="row.opt!.disabled || null"
+                (mousedown)="select(row.opt!, $event)"
+                (mousemove)="!row.opt!.disabled && activeIndex.set(row.index!)"
+              >
+                <span class="strct-cbx__check" aria-hidden="true">
+                  @if (isSelected(row.opt!.value)) {
+                    <strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
+                  }
+                </span>
+                @if (row.opt!.icon) {
+                  <strct-icon class="strct-cbx__opt-icon" [name]="row.opt!.icon" [size]="14" />
+                }
+                @let seg = segments(row.opt!.label);
+                <span class="strct-cbx__opt-text">
+                  <span class="strct-cbx__label"
+                    >{{ seg.pre }}<span class="strct-cbx__match">{{ seg.match }}</span
+                    >{{ seg.post }}</span
+                  >
+                  @if (row.opt!.description) {
+                    <span class="strct-cbx__opt-desc">{{ row.opt!.description }}</span>
+                  }
+                </span>
+              </div>
+            }
+          } @empty {
+            @if (!customRow()) {
+              <div class="strct-cbx__empty">{{ emptyText() }}</div>
+            }
+          }
+          @if (customRow(); as customQuery) {
             <div
-              class="strct-cbx__opt"
-              [id]="listId + '-' + i"
-              [class.strct-cbx__opt--active]="opt.value === value()"
-              [class.strct-cbx__opt--highlight]="i === activeIndex()"
+              class="strct-cbx__opt strct-cbx__opt--custom"
+              [id]="listId + '-' + flat().length"
+              [class.strct-cbx__opt--highlight]="activeIndex() === flat().length"
               role="option"
-              [attr.aria-selected]="opt.value === value()"
-              (mousedown)="select(opt, $event)"
-              (mousemove)="activeIndex.set(i)"
+              aria-selected="false"
+              (mousedown)="commitCustom($event)"
+              (mousemove)="activeIndex.set(flat().length)"
             >
-              {{ opt.label }}
+              <span class="strct-cbx__check" aria-hidden="true"></span>
+              <strct-icon class="strct-cbx__opt-icon" strictName="plus" [size]="13" />
+              <span class="strct-cbx__label">{{ customText() }} "{{ customQuery }}"</span>
             </div>
-          } @empty {
-            <div class="strct-cbx__empty">No matches</div>
           }
         }
       </div>
     }
-  `, host: { class: 'strct-cbx' }, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-inline-end:30px}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:220px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__opt{padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--active{color:var(--acc)}.strct-cbx__opt--active.strct-cbx__opt--highlight{background:var(--acc-m)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-cbx__skeleton{padding:9px 10px}.strct-cbx__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onDocClick: [{
+  `, host: { class: 'strct-cbx' }, styles: [".strct-cbx{position:relative;display:block;width:100%}.strct-cbx__field{position:relative}.strct-cbx__input{padding-inline-end:30px}.strct-cbx__field--multi{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding-block:4px;cursor:text}.strct-cbx__field--multi:focus-within{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-cbx__input--bare{flex:1;min-width:60px;padding:2px 0;font:inherit;font-size:13px;color:var(--t1);background:none;border:none;outline:none}.strct-cbx__chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 4px 2px 8px;font-size:12px;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2);border-radius:var(--radius-sm)}.strct-cbx__chip-x{display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:3px;cursor:pointer}.strct-cbx__chip-x:hover{color:var(--t1);background:var(--bg-4)}.strct-cbx__clear{position:absolute;right:26px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:2px;color:var(--t3);background:none;border:none;border-radius:3px;cursor:pointer}.strct-cbx__clear:hover{color:var(--t1)}.strct-cbx__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}.strct-cbx__menu{z-index:200;max-height:240px;overflow-y:auto;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh)}.strct-cbx__group{padding:7px 10px 3px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--t3)}.strct-cbx__opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-cbx__opt--highlight{background:var(--bg-3)}.strct-cbx__opt--selected{font-weight:600;background:var(--acc-s)}.strct-cbx__opt--selected.strct-cbx__opt--highlight{background:var(--acc-m)}.strct-cbx__opt[aria-disabled=true]{color:var(--t4);cursor:default}.strct-cbx__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-cbx__opt-icon{display:inline-flex;flex:none;color:var(--t3)}.strct-cbx__opt--selected .strct-cbx__opt-icon{color:var(--t1)}.strct-cbx__opt-text{display:flex;flex-direction:column;min-width:0}.strct-cbx__opt-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:400;color:var(--t3)}.strct-cbx__opt--custom{border-top:1px solid var(--b2);border-radius:0 0 5px 5px;color:var(--t2)}.strct-cbx__chip-icon{display:inline-flex;color:var(--t3)}.strct-cbx__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cbx__match{font-weight:700;color:var(--acc)}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-cbx__skeleton{padding:9px 10px}.strct-cbx__skeleton-block{height:12px;background:var(--bg-3);border-radius:var(--radius-sm);animation:strct-skeleton-pulse 1.4s ease infinite}.strct-cbx__empty{padding:9px 10px;font-size:13px;color:var(--t3)}\n"] }]
+        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], customText: [{ type: i0.Input, args: [{ isSignal: true, alias: "customText", required: false }] }], onDocClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });