@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-filter.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-checkbox-group.js";
+import type { CheckboxGroupOption } from "./tt-checkbox-group.js";
+import "./tt-icon.js";
+/**
+ * One facet of a filter set: a pill that says what it filters, how many
+ * are picked, and opens a list of checkboxes.
+ *
+ * WHY THIS IS NOT A VARIANT OF SOMETHING ELSE. The library already has
+ * two things that open a list, and this is neither of them:
+ *
+ *   tt-dropdown-menu  performs an action and REMEMBERS NOTHING. It closes
+ *                     on choose because the choice is the whole event.
+ *   tt-select         edits ONE value and displays the chosen one.
+ *   tt-filter         holds a SET, stays open while you build it, and
+ *                     reports the whole set.
+ *
+ * Bending either of the first two into this would have cost them the
+ * property that makes them easy to reason about.
+ *
+ * It composes tt-checkbox-group rather than reimplementing checkboxes, and
+ * keeps that component's contract: values come in, tt-change goes out
+ * carrying the COMPLETE new array, and this component owns nothing.
+ *
+ * Laid out as a pill with a count because a filter has to be readable when
+ * it is closed. A row of loose checkboxes says what the options are; a
+ * pill says what is actually filtering, which is the thing you need to
+ * know when you are looking at a result set and wondering why.
+ */
+export declare class TTFilter extends LitElement {
+    label: string;
+    options: CheckboxGroupOption[];
+    values: string[];
+    disabled: boolean;
+    align: "start" | "end";
+    private open;
+    private pill;
+    private panel;
+    private panelId;
+    private untrack?;
+    private get count();
+    disconnectedCallback(): void;
+    private openPanel;
+    private close;
+    private handleDocumentClick;
+    private reposition;
+    private position;
+    updated(changed: PropertyValues): void;
+    private emit;
+    private handleGroupChange;
+    private clear;
+    private handleKeydown;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-filter": TTFilter;
+    }
+}
+//# sourceMappingURL=tt-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-filter.d.ts","sourceRoot":"","sources":["../src/tt-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,cAAc,CAAC;AAKtB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,KAAK,SAAM;IAIZ,OAAO,EAAE,mBAAmB,EAAE,CAAM;IAEpC,MAAM,EAAE,MAAM,EAAE,CAAM;IAEL,QAAQ,UAAS;IAGjC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAW;IAEpD,OAAO,CAAC,IAAI,CAAS;IAEd,OAAO,CAAC,IAAI,CAAqB;IAChC,OAAO,CAAC,KAAK,CAAe;IAE7C,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B,OAAO,KAAK,KAAK,GAEhB;IAED,oBAAoB;IAKpB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,OAAO,EAAE,cAAc;IAgB/B,OAAO,CAAC,IAAI;IAUZ,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,aAAa;IAYrB,MAAM,CAAC,MAAM,4BA6JX;IAEF,MAAM;CA4DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-filter.js

@@ -0,0 +1,393 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { trackAnchor, placeBelow } from "./floating.js";
+import "./tt-checkbox-group.js";
+import "./tt-icon.js";
+import { srOnly } from "./sr-only.js";
+let uid = 0;
+/**
+ * One facet of a filter set: a pill that says what it filters, how many
+ * are picked, and opens a list of checkboxes.
+ *
+ * WHY THIS IS NOT A VARIANT OF SOMETHING ELSE. The library already has
+ * two things that open a list, and this is neither of them:
+ *
+ *   tt-dropdown-menu  performs an action and REMEMBERS NOTHING. It closes
+ *                     on choose because the choice is the whole event.
+ *   tt-select         edits ONE value and displays the chosen one.
+ *   tt-filter         holds a SET, stays open while you build it, and
+ *                     reports the whole set.
+ *
+ * Bending either of the first two into this would have cost them the
+ * property that makes them easy to reason about.
+ *
+ * It composes tt-checkbox-group rather than reimplementing checkboxes, and
+ * keeps that component's contract: values come in, tt-change goes out
+ * carrying the COMPLETE new array, and this component owns nothing.
+ *
+ * Laid out as a pill with a count because a filter has to be readable when
+ * it is closed. A row of loose checkboxes says what the options are; a
+ * pill says what is actually filtering, which is the thing you need to
+ * know when you are looking at a result set and wondering why.
+ */
+let TTFilter = class TTFilter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        // Passed straight to tt-checkbox-group, so the same two shapes work:
+        // strings, or { value, label, disabled }.
+        this.options = [];
+        this.values = [];
+        this.disabled = false;
+        // Which edge of the pill the panel lines up with.
+        this.align = "start";
+        this.open = false;
+        this.panelId = `tt-filter-${++uid}`;
+        // composedPath sees through shadow boundaries; event.target is
+        // retargeted to the host and would report our own clicks as outside.
+        this.handleDocumentClick = (event) => {
+            if (!event.composedPath().includes(this))
+                this.close(false);
+        };
+        this.reposition = () => {
+            if (this.open)
+                this.position();
+        };
+    }
+    get count() {
+        return this.values.length;
+    }
+    disconnectedCallback() {
+        this.close(false);
+        super.disconnectedCallback();
+    }
+    openPanel() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+        document.addEventListener("click", this.handleDocumentClick);
+        // See floating.ts: scroll events are not composed, so a window
+        // listener misses the container that actually scrolls.
+        this.untrack = trackAnchor(this, this.reposition);
+    }
+    close(refocus = true) {
+        if (!this.open)
+            return;
+        this.open = false;
+        document.removeEventListener("click", this.handleDocumentClick);
+        this.untrack?.();
+        this.untrack = undefined;
+        if (refocus)
+            this.pill?.focus();
+    }
+    position() {
+        if (!this.pill || !this.panel)
+            return;
+        placeBelow(this.pill, this.panel, { align: this.align });
+    }
+    updated(changed) {
+        if (!changed.has("open"))
+            return;
+        const panel = this.panel;
+        if (!panel)
+            return;
+        if (this.open) {
+            // Show first, then measure. A closed popover is display:none and
+            // measures 0x0, which makes the clamp meaningless.
+            if (!panel.matches(":popover-open"))
+                panel.showPopover();
+            this.position();
+        }
+        else if (panel.matches(":popover-open")) {
+            panel.hidePopover();
+        }
+    }
+    emit(values) {
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { values },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleGroupChange(event) {
+        /*
+          The inner group emits its own composed tt-change. Left alone it
+          would reach the page as a second, indistinguishable event from a
+          different target. Stop it and re-emit from here, so the page has one
+          event and one sender.
+        */
+        event.stopPropagation();
+        const { values } = event.detail;
+        this.emit(values);
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.emit([]);
+        // Clear only exists while something is selected, so the button that
+        // has focus is about to disappear, and focus would fall to <body>.
+        // Hand it to the pill: it names this filter and the panel stays open.
+        this.pill?.focus();
+    }
+    handleKeydown(event) {
+        if (event.key === "Escape" && this.open) {
+            event.preventDefault();
+            this.close();
+        }
+        if ((event.key === "ArrowDown" || event.key === "Enter") && !this.open) {
+            event.preventDefault();
+            this.openPanel();
+        }
+    }
+    static { this.styles = [
+        srOnly,
+        css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: inline-block;
+      font-family: var(--tt-font-sans);
+    }
+
+    :host([disabled]) {
+      opacity: var(--tt-opacity-disabled);
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      min-height: var(--tt-control-sm);
+      padding: 0 var(--tt-space-3);
+
+      border: 1px solid var(--tt-input);
+      border-radius: var(--tt-radius-full);
+
+      background: var(--tt-field);
+      color: var(--tt-foreground);
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      white-space: nowrap;
+
+      cursor: pointer;
+
+      -webkit-user-select: none;
+      user-select: none;
+
+      transition:
+        background var(--tt-duration-fast) var(--tt-ease),
+        border-color var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    .pill:hover:not(:disabled) {
+      border-color: var(--tt-border-strong);
+    }
+
+    .pill:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .pill:disabled {
+      cursor: not-allowed;
+    }
+
+    /* An active filter is the most important thing in the row: it is the
+       reason the results look the way they do. */
+    .pill.active {
+      border-color: var(--tt-primary);
+      background: color-mix(in srgb, var(--tt-primary) 8%, var(--tt-field));
+    }
+
+    .count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      min-width: 18px;
+      height: 18px;
+      padding: 0 5px;
+      box-sizing: border-box;
+
+      border-radius: var(--tt-radius-full);
+
+      background: var(--tt-primary);
+      color: var(--tt-primary-foreground);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+    }
+
+    .chevron {
+      color: var(--tt-muted-foreground);
+      transition: transform var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    .pill[aria-expanded="true"] .chevron {
+      transform: rotate(180deg);
+    }
+
+    /* Top layer, so a filter row inside a card with overflow cannot clip
+       the panel. Position comes from script. */
+    .panel {
+      position: fixed;
+      margin: 0;
+      padding: var(--tt-space-3);
+
+      min-width: 200px;
+      max-width: calc(100vw - 16px);
+      max-height: 60vh;
+      overflow-y: auto;
+      box-sizing: border-box;
+
+      background: var(--tt-popover);
+      color: var(--tt-popover-foreground);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius);
+      box-shadow: var(--tt-elevation-2);
+    }
+
+    .panel:not(:popover-open) {
+      display: none;
+    }
+
+    .foot {
+      display: flex;
+      justify-content: flex-end;
+
+      margin-top: var(--tt-space-3);
+      padding-top: var(--tt-space-2);
+      border-top: 1px solid var(--tt-border);
+    }
+
+    .clear {
+      padding: var(--tt-space-1) var(--tt-space-2);
+
+      border: none;
+      border-radius: var(--tt-radius-sm);
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+
+      cursor: pointer;
+    }
+
+    .clear:hover {
+      background: var(--tt-accent);
+      color: var(--tt-foreground);
+    }
+
+    .clear:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+  `,
+    ]; }
+    render() {
+        const active = this.count > 0;
+        return html `
+      <!--
+        A disclosure: aria-expanded plus aria-controls, nothing more. Not
+        aria-haspopup, which tells a screen reader a MENU is coming, and
+        this panel is a list of checkboxes.
+      -->
+      <button
+        class="pill ${active ? "active" : ""}"
+        part="pill"
+        type="button"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.panelId}
+        ?disabled=${this.disabled}
+        @click=${() => (this.open ? this.close() : this.openPanel())}
+        @keydown=${this.handleKeydown}
+      >
+        <span>${this.label}</span>
+
+        <!--
+          The badge is for the eye, the sentence for the ear. aria-label on
+          a plain <span> is ignored: it has no role, so it cannot carry a
+          name, and a screen reader read the bare number.
+        -->
+        ${active
+            ? html `<span class="count" aria-hidden="true">${this.count}</span
+              ><span class="sr-only">${this.count} selected</span>`
+            : ""}
+
+        <tt-icon class="chevron" name="chevron-down" size="14px"></tt-icon>
+      </button>
+
+      <div
+        class="panel"
+        part="panel"
+        id=${this.panelId}
+        popover="manual"
+        @keydown=${this.handleKeydown}
+      >
+        <tt-checkbox-group
+          orientation="vertical"
+          .options=${this.options}
+          .values=${this.values}
+          @tt-change=${this.handleGroupChange}
+        ></tt-checkbox-group>
+
+        ${active
+            ? html `
+              <div class="foot">
+                <button class="clear" type="button" @click=${this.clear}>
+                  Clear
+                </button>
+              </div>
+            `
+            : ""}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTFilter.prototype, "label", void 0);
+__decorate([
+    property({ type: Array })
+], TTFilter.prototype, "options", void 0);
+__decorate([
+    property({ type: Array })
+], TTFilter.prototype, "values", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTFilter.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], TTFilter.prototype, "align", void 0);
+__decorate([
+    state()
+], TTFilter.prototype, "open", void 0);
+__decorate([
+    query(".pill")
+], TTFilter.prototype, "pill", void 0);
+__decorate([
+    query(".panel")
+], TTFilter.prototype, "panel", void 0);
+TTFilter = __decorate([
+    customElement("tt-filter")
+], TTFilter);
+export { TTFilter };
+//# sourceMappingURL=tt-filter.js.map

package/dist/tt-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-filter.js","sourceRoot":"","sources":["../src/tt-filter.ts"],"names":[],"mappings":"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"}

package/dist/tt-form.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+export type FormLayout = "vertical" | "horizontal";
+export declare class TTForm extends LitElement {
+    name: string;
+    layout: FormLayout;
+    disabled: boolean;
+    loading: boolean;
+    novalidate: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Every named control inside the form, in document order. */
+    private get controls();
+    private handleButtonClick;
+    private handleClick;
+    private handleKeydown;
+    /**
+     * Validates, then emits tt-form-submit with the collected values.
+     * Returns false if validation stopped it.
+     */
+    submit(): boolean;
+    /** Builds FormData from the named controls. */
+    collect(): FormData;
+    /** Clears every control by calling its form reset callback. */
+    reset(): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-form": TTForm;
+    }
+}
+//# sourceMappingURL=tt-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-form.d.ts","sourceRoot":"","sources":["../src/tt-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC;AA8CnD,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,SAAM;IAItC,MAAM,EAAE,UAAU,CAAc;IAEY,QAAQ,UAAS;IAEjB,OAAO,UAAS;IAG/B,UAAU,UAAS;IAEhD,iBAAiB;IAQjB,oBAAoB;IAQpB,8DAA8D;IAC9D,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,iBAAiB,CAGvB;IAGF,OAAO,CAAC,WAAW,CAMjB;IAcF,OAAO,CAAC,aAAa,CAMnB;IAEF;;;OAGG;IACH,MAAM,IAAI,OAAO;IAwBjB,+CAA+C;IAC/C,OAAO,IAAI,QAAQ;IAiBnB,+DAA+D;IAC/D,KAAK;IAUL,MAAM,CAAC,MAAM,0BAgCX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}