@f-ewald/components 1.1.1 → 1.2.1

package/dist/multi-select.d.ts

@@ -0,0 +1,142 @@
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+/**
+ * Presentation variant of {@link MultiSelect}.
+ *
+ * - `"dropdown"` (default): a compact trigger that opens a listbox popover.
+ * - `"list"`: a persistently visible, bordered list surface with no popover.
+ */
+export type MultiSelectVariant = "dropdown" | "list";
+/** A single selectable option. */
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    /** Optional pre-rendered icon template displayed before the label. */
+    icon?: TemplateResult;
+    /** Square icon size in pixels. Defaults to 16 when `icon` is set. */
+    iconSize?: number;
+    /** When true, the option can neither be selected nor removed via the UI. */
+    disabled?: boolean;
+}
+/**
+ * A form-associated multi-select: a trigger showing a compact summary of the
+ * current selection, opening a multi-selectable listbox popover, with an
+ * optional removable-chip list of the chosen values. A drop-in generic
+ * replacement for a native `<select multiple>` — set `name` on the element
+ * itself and each
+ * selected value is submitted as a repeated `name=value` entry, matching native
+ * multiple-select semantics; `new FormData(form).getAll(name)` and
+ * `form.reset()` work unchanged.
+ *
+ * The trigger visually follows `form-select`: a `2rem` field showing the
+ * `placeholder` when empty, the single selected label when one value is chosen,
+ * and `N selected` when several are. Set `show-chips` to additionally render
+ * the selected values as compact chips below the trigger, each with an
+ * accessible `32px` remove control; chips are off by default and the region
+ * reserves no space while nothing is selected. Like `form-select`, the host is
+ * `display: block` and fills its container by default; constrain the host
+ * (`multi-select { display: inline-block; }`) to shrink it to its content
+ * instead.
+ *
+ * Set `searchable` to replace the button trigger with an editable combobox that
+ * infix-filters the predefined options by case-insensitive label. Typed text is
+ * only a query: `values` changes exclusively when options are toggled, and an
+ * uncommitted query is discarded when the list closes.
+ *
+ * The `variant` chooses between two presentations, and `searchable` applies to
+ * both:
+ *
+ * - `"dropdown"` (default) is the popover form described above: a compact
+ *   trigger (button, or search combobox when `searchable`) that opens a
+ *   multi-selectable listbox on demand, closes on outside click / Escape, and
+ *   shows a chevron.
+ * - `"list"` renders the options as a persistently visible, bordered surface
+ *   with no popover, no chevron, and no `open` host state; it never registers
+ *   outside-click listeners. Its scroll viewport is sized to roughly
+ *   `visibleRows` `2rem` rows (see `visible-rows`). When not `searchable` the
+ *   `listbox` itself is focusable and drives Arrow/Home/End/Enter/Space keyboard
+ *   navigation via `aria-activedescendant`; when `searchable` a `2rem` search
+ *   field sits above the list and owns navigation, and Escape only clears the
+ *   query instead of hiding the list.
+ *
+ * @element multi-select
+ * @fires change - Fired with `{ values: string[] }` (a copied array) when a
+ *   value is added or removed through the UI. Programmatic `values` assignments
+ *   do not fire it.
+ */
+export declare class MultiSelect extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** The full list of selectable options. */
+    options: MultiSelectOption[];
+    /**
+     * The currently selected values. Programmatic assignments are deduplicated
+     * while preserving order and never fire `change`.
+     */
+    values: string[];
+    /** Form control name; each selected value submits under it. */
+    name: string;
+    /** Accessible label applied to the trigger. */
+    label: string;
+    /** Text shown on the trigger when nothing is selected. */
+    placeholder: string;
+    /** Disables the whole control, preventing the popover from opening. */
+    disabled: boolean;
+    /** Marks the control as required for native form validation. */
+    required: boolean;
+    /**
+     * Enables editable, case-insensitive infix filtering by option label.
+     * Typed text never becomes a selected value.
+     */
+    searchable: boolean;
+    /** Maximum number of selectable values; `0` (default) means unlimited. */
+    max: number;
+    /**
+     * Presentation variant. `"dropdown"` (default) opens a popover listbox;
+     * `"list"` renders a persistently visible, bordered list surface. Reflected
+     * so consumers can style by `[variant="list"]`.
+     */
+    variant: MultiSelectVariant;
+    /**
+     * Number of `2rem` rows the `list` variant's scroll viewport shows before it
+     * scrolls, mirroring a native `<select size>`. Normalized to an integer of at
+     * least `1` (default `5`); ignored by the `dropdown` variant.
+     */
+    visibleRows: number;
+    /**
+     * When true, the selected values are also rendered as removable chips below
+     * the trigger, each with an accessible `32px` remove control. Off by default:
+     * the trigger already summarizes the selection, and values can be toggled off
+     * in the listbox. Applies to both variants.
+     */
+    showChips: boolean;
+    private _open;
+    private _activeIndex;
+    private _query;
+    private _formDisabled;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Restores the selection captured at first render, per the form contract. */
+    formResetCallback(): void;
+    /** Mirrors an ancestor fieldset's disabled state and closes the popover. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Restores the selection from the saved form state on navigation/autofill. */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    /** The shared `<li role="option">` items for both variants' listboxes. */
+    private renderOptionItems;
+    private renderListbox;
+    private renderChips;
+    private renderSearchTrigger;
+    private renderButtonTrigger;
+    private renderListSearch;
+    private renderPersistentList;
+    private renderListVariant;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "multi-select": MultiSelect;
+    }
+}
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../src/multi-select.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,CAAC;AAErD,kCAAkC;AAClC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,WAAY,SAAQ,UAAU;;IACzC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA6YpB;IAEF,2CAA2C;IACX,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClE;;;OAGG;IAC6B,MAAM,EAAE,MAAM,EAAE,CAAM;IACtD,+DAA+D;IACnD,IAAI,SAAM;IACtB,+CAA+C;IACnC,KAAK,SAAM;IACvB,0DAA0D;IAC9C,WAAW,SAAoB;IAC3C,uEAAuE;IAC1C,QAAQ,UAAS;IAC9C,gEAAgE;IACnC,QAAQ,UAAS;IAC9C;;;OAGG;IACyC,UAAU,UAAS;IAC/D,0EAA0E;IAC9C,GAAG,SAAK;IACpC;;;;OAIG;IAC0B,OAAO,EAAE,kBAAkB,CAAc;IACtE;;;;OAIG;IACoD,WAAW,SAAK;IACvE;;;;;OAKG;IACmD,SAAS,UAAS;IAE/D,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,aAAa,CAAS;IA2B9B,oBAAoB,IAAI,IAAI,CAapC;IAED,UAAmB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAmB3D;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CA2BxD;IAED,8EAA8E;IAC9E,iBAAiB,IAAI,IAAI,CAGxB;IAED,4EAA4E;IAC5E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAG5C;IAED,+EAA+E;IAC/E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAUrE;IAsaD,0EAA0E;IAC1E,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,mBAAmB;IAsC3B,OAAO,CAAC,mBAAmB;IA0B3B,OAAO,CAAC,gBAAgB;IA4BxB,OAAO,CAAC,oBAAoB;IA2B5B,OAAO,CAAC,iBAAiB;IAWhB,MAAM,sBAUd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}