@akcelik/strct 1.20.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/types/akcelik-strct.d.ts

@@ -2312,49 +2312,134 @@ declare class StrctInputMask implements ControlValueAccessor {
 interface StrctOption {
     value: unknown;
     label: string;
-    /** Grayed out and skipped by keyboard navigation (select). */
+    /** Grayed out and skipped by keyboard navigation. */
     disabled?: boolean;
+    /** Options sharing a group label render under one header (combobox). */
+    group?: string;
+    /** Leading icon in the option row (and on the chip in multiple mode). */
+    icon?: StrctIconName;
+    /** Secondary line under the label in the option row (combobox). */
+    description?: string;
+}
+/** A render row of the option list: a group header or an option. */
+interface CbxRow {
+    key: string;
+    header?: string;
+    opt?: StrctOption;
+    /** Flat option index (headers carry none) — drives ids and highlight. */
+    index?: number;
 }
 /**
- * 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.
  */
 declare class StrctCombobox implements ControlValueAccessor {
     private readonly host;
+    private readonly inputEl;
     protected readonly listId: string;
-    /** Available options. */
+    /** Available options (`disabled` grays out; `group` renders headers). */
     readonly options: _angular_core.InputSignal<StrctOption[]>;
     /** Placeholder text when empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Show a skeleton placeholder while options are loading. */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show an × that resets the selection. */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Multi-select: the value becomes an array and the picks render as
+     * removable chips; the list stays open while picking.
+     */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Text shown when the filter matches nothing (localizable). */
+    readonly emptyText: _angular_core.InputSignal<string>;
+    /** Accessible label of the × clear button (localizable). */
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    /** Accessible label prefix of a chip's × button (localizable). */
+    readonly removeLabel: _angular_core.InputSignal<string>;
+    /**
+     * 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`.
+     */
+    readonly allowCustomValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Verb prefix of the free-form row (localizable) — renders `Use "query"`. */
+    readonly customText: _angular_core.InputSignal<string>;
     readonly query: _angular_core.WritableSignal<string>;
     readonly value: _angular_core.WritableSignal<unknown>;
+    /** Selection in `multiple` mode. */
+    readonly values: _angular_core.WritableSignal<unknown[]>;
     readonly open: _angular_core.WritableSignal<boolean>;
     readonly activeIndex: _angular_core.WritableSignal<number>;
     readonly isDisabled: _angular_core.WritableSignal<boolean>;
     /** True while the user is typing a filter that hasn't been committed yet. */
     private readonly dirty;
     protected readonly filtered: _angular_core.Signal<StrctOption[]>;
+    /** Flat option list (no headers) — keyboard navigation and ids live here. */
+    protected readonly flat: _angular_core.Signal<StrctOption[]>;
+    /**
+     * 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`.
+     */
+    protected readonly customRow: _angular_core.Signal<string | null>;
+    /** Navigable row count: options plus the custom row when shown. */
+    protected readonly navCount: _angular_core.Signal<number>;
+    /** Render rows: group headers interleaved with their options. */
+    protected readonly rows: _angular_core.Signal<CbxRow[]>;
+    protected readonly hasSelection: _angular_core.Signal<boolean>;
     private onChange;
     protected onTouched: () => void;
+    protected isSelected(v: unknown): boolean;
+    protected optionOf(v: unknown): StrctOption | undefined;
+    protected labelOf(v: unknown): string;
+    /** The typed match emphasised inside a label (first occurrence). */
+    protected segments(label: string): {
+        pre: string;
+        match: string;
+        post: string;
+    };
+    protected focusInput(): void;
     openList(): void;
     onType(event: Event): void;
     onKeydown(event: KeyboardEvent): void;
     private move;
+    private firstEnabled;
+    private lastEnabled;
+    private scrollActiveIntoView;
     select(opt: StrctOption, event: Event): void;
     private commit;
+    /**
+     * Commit the typed text itself as a free-form value (allowCustomValue).
+     * Multiple mode appends it and keeps picking; single mode takes it and
+     * closes.
+     */
+    protected commitCustom(event?: Event): void;
+    protected removeValue(v: unknown, event?: Event): void;
+    protected clear(event: Event): void;
     protected onDocClick(event: MouseEvent): void;
     private close;
-    private indexOfValue;
+    /** Highlight starts on the selected option — or the first enabled one. */
+    private initialIndex;
     private syncQueryToValue;
     writeValue(value: unknown): void;
     registerOnChange(fn: (value: unknown) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCombobox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCombobox, "strct-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCombobox, "strct-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "customText": { "alias": "customText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**