@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-collapsible.js","sourceRoot":"","sources":["../src/tt-collapsible.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACuC,SAAI,GAAG,KAAK,CAAC;QAEb,aAAQ,GAAG,KAAK,CAAC;IA4I/D,CAAC;IA1IC,+DAA+D;IAC/D,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE;YAClD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;QAEF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;;;;;;;MAmBE;IACM,WAAW,CAAC,KAAY;QAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE,CAAC;IAED;;;;;;MAME;IACM,WAAW,CAAC,EAAuB;QACzC,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;YAC9B,EAAyC,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACxE,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,OAAO;QACL;;;;UAIE;QACF,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACxC,sBAAsB,CACvB,CAAC;QACF,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,AAxCY,CAwCX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;mDACoC,IAAI,CAAC,MAAM;2CACnB,IAAI,CAAC,WAAW;;;;;;;;;;mDAUR,CAAC,IAAI,CAAC,IAAI;;;;;KAKxD,CAAC;IACJ,CAAC;;AA7I2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAc;AAEb;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAHlD,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA+IzB"}

package/dist/tt-combobox.d.ts

@@ -0,0 +1,107 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-icon.js";
+import type { SelectOption } from "./tt-select.js";
+/**
+ * A select you can type into.
+ *
+ * WHERE IT SITS. tt-select is right up to roughly twenty options: you open
+ * it, you look, you pick. Past that, looking stops working and you need to
+ * narrow the list by typing. That is the only difference in intent, but it
+ * changes the control's shape: the trigger becomes a text input rather
+ * than a button, which brings a filtering state, a no-results state, and
+ * the problem below. Keeping tt-select simple was worth a second component.
+ *
+ * THE AWKWARD BIT, which every combobox has to answer. One input has two
+ * jobs: it displays the current selection, and it holds what you are
+ * typing. Those conflict the moment you type, because the selection is
+ * still set but the text no longer shows it.
+ *
+ * This resolves it by treating the two as different modes rather than one
+ * value. Closed, the input shows the selected option's label. Open, it
+ * shows the query, which starts empty so the whole list is visible. Close
+ * without choosing and the query is discarded, so the field can never be
+ * left displaying text that is not the actual value. The selection only
+ * ever changes by choosing an option.
+ */
+export declare class TTCombobox extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    name: string;
+    value: string;
+    options: SelectOption[];
+    label: string;
+    placeholder: string;
+    emptyText: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+    size: "small" | "medium" | "large";
+    labelHidden: boolean;
+    clearable: boolean;
+    private open;
+    private query;
+    private activeIndex;
+    private input;
+    private field;
+    private list;
+    private instanceId;
+    private listId;
+    private untrack?;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private syncFormState;
+    private get selected();
+    private score;
+    private get filtered();
+    private openList;
+    private closeList;
+    private removeGlobalListeners;
+    private handleDocumentClick;
+    private reposition;
+    /**
+     * Clicking the field opens the list. FOCUS DOES NOT.
+     *
+     * This looks like a downgrade and is the opposite. Opening on focus
+     * creates a loop that is invisible until somebody uses a real mouse:
+     * choosing an option calls closeList, closeList returns focus to the
+     * input so a keyboard user does not lose their place, that focus fires
+     * the focus handler, and the list reopens the instant it closes. The
+     * chosen value is set correctly, so it looks purely like a broken menu.
+     *
+     * It survived a headless test because a synthetic .click() never moves
+     * focus off the input, so the focus() inside closeList is a no-op and
+     * dispatches nothing. Only a real pointer, which blurs the input on
+     * mousedown, makes it fire.
+     *
+     * Every way a person actually asks for the list is still covered: click
+     * the field here, type (handleInput opens), or press ArrowDown/ArrowUp.
+     * Only tabbing THROUGH the field no longer explodes a listbox open,
+     * which matches the ARIA combobox pattern anyway.
+     */
+    private handleFieldClick;
+    private choose;
+    private clear;
+    private handleInput;
+    private move;
+    private scrollActiveIntoView;
+    private handleKeydown;
+    updated(changed: PropertyValues): void;
+    private syncPopover;
+    private position;
+    focus(options?: FocusOptions): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-combobox": TTCombobox;
+    }
+}
+//# sourceMappingURL=tt-combobox.d.ts.map

package/dist/tt-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-combobox.d.ts","sourceRoot":"","sources":["../src/tt-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO1C,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IAIA,IAAI,SAAM;IAEzB,KAAK,SAAM;IAEZ,OAAO,EAAE,YAAY,EAAE,CAAM;IAE5B,KAAK,SAAM;IAEX,WAAW,SAAsB;IAER,SAAS,SAAgB;IAElD,KAAK,SAAM;IAEK,QAAQ,UAAS;IAEhC,QAAQ,UAAS;IAIH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAKzF,WAAW,UAAS;IAGS,SAAS,UAAS;IAEtC,OAAO,CAAC,IAAI,CAAS;IAGrB,OAAO,CAAC,KAAK,CAAM;IAInB,OAAO,CAAC,WAAW,CAAM;IAElB,OAAO,CAAC,KAAK,CAAoB;IAChC,OAAO,CAAC,KAAK,CAAe;IAChC,OAAO,CAAC,IAAI,CAAoB;IAE7C,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B,IAAI,IAAI,2BAEP;IAED,IAAI,QAAQ,kBAEX;IAED,aAAa;IAIb,cAAc;IAId,iBAAiB;IAKjB,oBAAoB;IAKpB,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,aAAa;IAgBrB,OAAO,KAAK,QAAQ,GAEnB;IA6BD,OAAO,CAAC,KAAK;IAYb,OAAO,KAAK,QAAQ,GASnB;IAID,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,aAAa;IA0DrB,OAAO,CAAC,OAAO,EAAE,cAAc;IAU/B,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,QAAQ;IAYhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,MAAM,CAAC,MAAM,4BAiRV;IAEH,MAAM;CA2HP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}