@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-confirm.js

@@ -0,0 +1,151 @@
+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, state } from "lit/decorators.js";
+import { deepActiveElement } from "./overlay.js";
+import "./tt-modal.js";
+import "./tt-button.js";
+/**
+ * Confirmation dialog with a promise-based API. Mount one near the app
+ * root, then anywhere else:
+ *
+ *   if (await confirm({ heading: "Delete request?", danger: true })) {
+ *     ...
+ *   }
+ *
+ * The promise is the point. The alternative is a dialog component plus
+ * open state plus two event handlers plus a variable remembering what you
+ * were about to do, spread across every caller. Here the decision reads
+ * as one line, in the order it happens.
+ */
+let TTConfirm = class TTConfirm extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+          Where focus was when the question was asked.
+      
+          tt-modal returns focus itself, but only when its `open` goes false.
+          Settling here REMOVES the modal from the page instead, so that code
+          never runs and focus fell to <body>: after "Delete?" a keyboard user
+          was sent back to the top of the document. This component removes the
+          dialog, so this component owns putting focus back.
+        */
+        this.returnFocus = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        registry.add(this);
+    }
+    disconnectedCallback() {
+        registry.delete(this);
+        // Never leave a caller awaiting forever if the dialog is torn down.
+        this.pending?.resolve(false);
+        this.pending = undefined;
+        super.disconnectedCallback();
+    }
+    ask(options) {
+        // A second request while one is open resolves the first as cancelled,
+        // rather than silently dropping its promise.
+        this.pending?.resolve(false);
+        // Kept from the FIRST ask if one is already open: the dialog itself is
+        // not where focus should return to.
+        if (!this.pending) {
+            this.returnFocus = deepActiveElement();
+        }
+        return new Promise((resolve) => {
+            this.pending = {
+                heading: options.heading,
+                message: options.message ?? "",
+                confirmLabel: options.confirmLabel ?? "Confirm",
+                cancelLabel: options.cancelLabel ?? "Cancel",
+                danger: options.danger ?? false,
+                resolve,
+            };
+        });
+    }
+    settle(confirmed) {
+        this.pending?.resolve(confirmed);
+        this.pending = undefined;
+        const target = this.returnFocus;
+        this.returnFocus = null;
+        // After the render that removes the dialog, or the focus call lands
+        // on an element that is still behind an open modal.
+        this.updateComplete.then(() => target?.focus?.());
+    }
+    static { this.styles = 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: contents;
+    }
+
+    p {
+      margin: 0;
+    }
+  `; }
+    render() {
+        const pending = this.pending;
+        if (!pending)
+            return html ``;
+        return html `
+      <!-- tt-modal already handles Escape, backdrop click and focus
+           restore, so cancelling is covered by all three routes. -->
+      <tt-modal
+        open
+        size="small"
+        heading=${pending.heading}
+        @tt-close=${() => this.settle(false)}
+      >
+        ${pending.message ? html `<p>${pending.message}</p>` : ""}
+
+        <!-- autofocus: tt-modal focuses it on open, so Enter cancels. -->
+        <tt-button
+          slot="footer"
+          variant="secondary"
+          autofocus
+          @tt-button-click=${() => this.settle(false)}
+        >
+          ${pending.cancelLabel}
+        </tt-button>
+
+        <tt-button
+          slot="footer"
+          variant=${pending.danger ? "danger" : "primary"}
+          @tt-button-click=${() => this.settle(true)}
+        >
+          ${pending.confirmLabel}
+        </tt-button>
+      </tt-modal>
+    `;
+    }
+};
+__decorate([
+    state()
+], TTConfirm.prototype, "pending", void 0);
+TTConfirm = __decorate([
+    customElement("tt-confirm")
+], TTConfirm);
+export { TTConfirm };
+const registry = new Set();
+/**
+ * Ask for confirmation from anywhere. Requires a <tt-confirm> mounted in
+ * the page. Resolves false if none is mounted, so a missing dialog can
+ * never silently confirm a destructive action.
+ */
+export function confirm(options) {
+    const target = registry.values().next().value;
+    if (!target) {
+        console.warn("confirm() called but no <tt-confirm> is mounted.");
+        return Promise.resolve(false);
+    }
+    return target.ask(options);
+}
+//# sourceMappingURL=tt-confirm.js.map

package/dist/tt-confirm.js.map

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

package/dist/tt-contact-list.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+export interface Contact {
+    name: string;
+    role: string;
+    email: string;
+    phone?: string;
+}
+export declare class TTContactList extends LitElement {
+    contacts: Contact[];
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-contact-list": TTContactList;
+    }
+}
+//# sourceMappingURL=tt-contact-list.d.ts.map

package/dist/tt-contact-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-contact-list.d.ts","sourceRoot":"","sources":["../src/tt-contact-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBACa,aAAc,SAAQ,UAAU;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAM;IAEpD,MAAM,CAAC,MAAM,0BA4DX;IAEF,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/tt-contact-list.js

@@ -0,0 +1,101 @@
+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 } from "lit/decorators.js";
+let TTContactList = class TTContactList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.contacts = [];
+    }
+    static { this.styles = 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: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-4);
+
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .name {
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-semibold);
+      color: var(--tt-foreground);
+    }
+
+    .role {
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+    }
+
+    /* Styled here because these links render in this shadow root. */
+    a {
+      margin-top: 2px;
+
+      /* Emails and numbers are long with no natural break points. */
+      overflow-wrap: anywhere;
+
+      font-size: var(--tt-text-sm);
+      color: inherit;
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    a:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm);
+    }
+  `; }
+    render() {
+        return html `
+      <ul part="list">
+        ${this.contacts.map((contact) => html `
+            <li part="contact">
+              <span class="name">${contact.name}</span>
+              <span class="role">${contact.role}</span>
+
+              <a href="mailto:${contact.email}">${contact.email}</a>
+
+              ${contact.phone
+            ? html `<a href="tel:${contact.phone}">${contact.phone}</a>`
+            : ""}
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTContactList.prototype, "contacts", void 0);
+TTContactList = __decorate([
+    customElement("tt-contact-list")
+], TTContactList);
+export { TTContactList };
+//# sourceMappingURL=tt-contact-list.js.map

package/dist/tt-contact-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-contact-list.js","sourceRoot":"","sources":["../src/tt-contact-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAcrD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACsB,aAAQ,GAAc,EAAE,CAAC;IAoFtD,CAAC;aAlFQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DlB,AA5DY,CA4DX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAA;;mCAEQ,OAAO,CAAC,IAAI;mCACZ,OAAO,CAAC,IAAI;;gCAEf,OAAO,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK;;gBAE/C,OAAO,CAAC,KAAK;YACb,CAAC,CAAC,IAAI,CAAA,gBAAgB,OAAO,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,MAAM;YAC3D,CAAC,CAAC,EAAE;;WAET,CACF;;KAEJ,CAAC;IACJ,CAAC;;AAnF0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAA0B;AADzC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqFzB"}

package/dist/tt-copy-button.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+/**
+ * Copies a string to the clipboard and confirms it in place.
+ *
+ * The confirmation matters more than the copying: without it nobody knows
+ * whether the click worked, and they click again.
+ */
+export declare class TTCopyButton extends LitElement {
+    value: string;
+    label: string;
+    copiedLabel: string;
+    iconOnly: boolean;
+    private copied;
+    private timer?;
+    disconnectedCallback(): void;
+    private copy;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-copy-button": TTCopyButton;
+    }
+}
+//# sourceMappingURL=tt-copy-button.d.ts.map

package/dist/tt-copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-copy-button.d.ts","sourceRoot":"","sources":["../src/tt-copy-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,KAAK,SAAM;IAEX,KAAK,SAAU;IAEY,WAAW,SAAY;IAGV,QAAQ,UAAS;IAE5E,OAAO,CAAC,MAAM,CAAS;IAEhC,OAAO,CAAC,KAAK,CAAC,CAAgC;IAE9C,oBAAoB;YAKN,IAAI;IAsBlB,MAAM,CAAC,MAAM,4BAyFV;IAEH,MAAM;CAqCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/tt-copy-button.js

@@ -0,0 +1,194 @@
+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 } from "lit/decorators.js";
+import { srOnly } from "./sr-only.js";
+/**
+ * Copies a string to the clipboard and confirms it in place.
+ *
+ * The confirmation matters more than the copying: without it nobody knows
+ * whether the click worked, and they click again.
+ */
+let TTCopyButton = class TTCopyButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.label = "Copy";
+        this.copiedLabel = "Copied";
+        // Show only the icon, for tight spots like a table cell.
+        this.iconOnly = false;
+        this.copied = false;
+    }
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+        super.disconnectedCallback();
+    }
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.value);
+            this.copied = true;
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => (this.copied = false), 2000);
+            this.dispatchEvent(new CustomEvent("tt-copy", {
+                detail: { value: this.value },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch {
+            // Clipboard access needs a secure context and can be refused.
+            // Failing silently beats throwing out of a click handler.
+        }
+    }
+    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-flex;
+      font-family: var(--tt-font-sans);
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      padding: 4px var(--tt-space-2);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius);
+
+      background: transparent;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+
+      cursor: pointer;
+
+      transition:
+        color var(--tt-duration-normal) var(--tt-ease),
+        border-color var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    button:hover {
+      color: var(--tt-foreground);
+      border-color: var(--tt-border-strong);
+    }
+
+    button:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    button.copied {
+      color: var(--tt-success);
+      border-color: var(--tt-success);
+    }
+
+    :host([icon-only]) button {
+      padding: 4px;
+    }
+
+    :host([icon-only]) .text {
+      /* Present for screen readers, invisible on screen: the icon alone
+         announces nothing. */
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+      flex: 0 0 auto;
+    }
+
+    /*
+      A full touch target on a touchscreen, and the compact look with a
+      mouse. Its height comes from padding, and the touch block in
+      tokens.css only raises the --tt-control-* tokens, so it stayed 25px
+      tall on a phone. medium, not small: medium is the step that reaches
+      44px under touch.
+    */
+    @media (pointer: coarse) {
+      button {
+        min-height: var(--tt-control-md);
+      }
+
+      :host([icon-only]) button {
+        justify-content: center;
+        min-width: var(--tt-control-md);
+      }
+    }
+  `]; }
+    render() {
+        return html `
+      <button
+        part="button"
+        class=${this.copied ? "copied" : ""}
+        type="button"
+        @click=${this.copy}
+      >
+        ${this.copied
+            ? html `
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="2.5" stroke-linecap="round"
+                stroke-linejoin="round" aria-hidden="true">
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            `
+            : html `
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" aria-hidden="true">
+                <rect x="9" y="9" width="12" height="12" rx="2" />
+                <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+              </svg>
+            `}
+
+        <span class="text">
+          ${this.copied ? this.copiedLabel : this.label}
+        </span>
+      </button>
+
+      <!-- The button's own text changes, and a changing NAME is not
+           announced. A status region is. -->
+      <span class="sr-only" role="status">
+        ${this.copied ? this.copiedLabel : ""}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTCopyButton.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TTCopyButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: "copied-label" })
+], TTCopyButton.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "icon-only", reflect: true })
+], TTCopyButton.prototype, "iconOnly", void 0);
+__decorate([
+    state()
+], TTCopyButton.prototype, "copied", void 0);
+TTCopyButton = __decorate([
+    customElement("tt-copy-button")
+], TTCopyButton);
+export { TTCopyButton };
+//# sourceMappingURL=tt-copy-button.js.map

package/dist/tt-copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-copy-button.js","sourceRoot":"","sources":["../src/tt-copy-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACuB,UAAK,GAAG,EAAE,CAAC;QAEX,UAAK,GAAG,MAAM,CAAC;QAEY,gBAAW,GAAG,QAAQ,CAAC;QAE9E,yDAAyD;QACW,aAAQ,GAAG,KAAK,CAAC;QAEpE,WAAM,GAAG,KAAK,CAAC;IA+JlC,CAAC;IA3JC,oBAAoB;QAClB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAEO,KAAK,CAAC,IAAI;QAChB,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YAEnB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;YAE3D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;gBACzB,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;QAAC,MAAM,CAAC;YACP,8DAA8D;YAC9D,0DAA0D;QAC5D,CAAC;IACH,CAAC;aAEM,WAAM,GAAG,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyF3B,CAAC,AAzFW,CAyFV;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;iBAE1B,IAAI,CAAC,IAAI;;UAEhB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;;;;;;aAMH;YACH,CAAC,CAAC,IAAI,CAAA;;;;;;;aAOH;;;YAGD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;;;;;UAO7C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;KAExC,CAAC;IACJ,CAAC;;AAvK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAgB;AAEY;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;iDAAwB;AAGV;IAAnE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAEpE;IAAhB,KAAK,EAAE;4CAAwB;AAVrB,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAyKxB"}

package/dist/tt-data-table.d.ts

@@ -0,0 +1,96 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+import "./tt-checkbox.js";
+import "./tt-skeleton.js";
+import "./tt-empty-state.js";
+import "./tt-dropdown-menu.js";
+import "./tt-icon.js";
+import type { MenuAction } from "./tt-dropdown-menu.js";
+export type DataCell = string | number | TemplateResult;
+export type DataRow = Record<string, DataCell> & {
+    id: string;
+};
+export interface DataColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: "start" | "end";
+    width?: string;
+}
+export interface SortState {
+    key: string;
+    direction: "asc" | "desc";
+}
+/**
+ * Working table: sorting, selection, row actions, sticky header, and
+ * loading and empty states. With visible-rows it is virtualized: a box
+ * that many rows tall, holding only the rows in view, so ten thousand
+ * rows scroll as smoothly as ten.
+ *
+ * It owns nothing. Sort state and selection come in as properties and
+ * changes go out as events, so the page stays the single source of truth
+ * and can put either in a URL. Sorting itself is the page's job too: it
+ * knows whether the data is an in-memory array or a server query.
+ */
+export declare class TTDataTable extends LitElement {
+    columns: DataColumn[];
+    rows: DataRow[];
+    label: string;
+    private rowLabel;
+    private rowName;
+    sort?: SortState;
+    selectable: boolean;
+    selected: string[];
+    rowActions: MenuAction[];
+    loading: boolean;
+    loadingRows: number;
+    emptyHeading: string;
+    emptyDescription: string;
+    clickableRows: boolean;
+    visibleRows: number;
+    private firstInView;
+    private rowHeight;
+    private headerHeight;
+    private columnWidths;
+    private widthUnit;
+    private wrap?;
+    private frame;
+    private resizeObserver?;
+    private wrapWidth;
+    private lastRange;
+    private get virtual();
+    /** The slice of rows in the page: the ones in view plus OVERSCAN each side. */
+    private get inPage();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(): void;
+    private observeWidth;
+    private measureSoon;
+    private measure;
+    private handleScroll;
+    private syncToScroll;
+    private announceRange;
+    private get hasActions();
+    private get columnCount();
+    private get allSelected();
+    private get someSelected();
+    private emitSelection;
+    private toggleAll;
+    private toggleRow;
+    private toggleSort;
+    private clickRow;
+    private chooseAction;
+    static styles: import("lit").CSSResult[];
+    private renderHeader;
+    private renderLoading;
+    private renderRow;
+    private renderRows;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-data-table": TTDataTable;
+    }
+}
+//# sourceMappingURL=tt-data-table.d.ts.map

package/dist/tt-data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-data-table.d.ts","sourceRoot":"","sources":["../src/tt-data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC;AAExD,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG;IAG/C,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAExB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAYD;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,UAAU;IACd,OAAO,EAAE,UAAU,EAAE,CAAM;IAE3B,IAAI,EAAE,OAAO,EAAE,CAAM;IAOpB,KAAK,SAAM;IAUvC,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,OAAO;IAMa,IAAI,CAAC,EAAE,SAAS,CAAC;IAEhB,UAAU,UAAS;IAErB,QAAQ,EAAE,MAAM,EAAE,CAAM;IAGE,UAAU,EAAE,UAAU,EAAE,CAAM;IAEtD,OAAO,UAAS;IAEU,WAAW,SAAK;IAEf,YAAY,SAAsB;IAE9B,gBAAgB,SAAM;IAGxB,aAAa,UAAS;IAWzB,WAAW,SAAK;IAG9D,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,YAAY,CAAK;IAWzB,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,SAAS,CAAmB;IAE7B,OAAO,CAAC,IAAI,CAAC,CAAc;IAE3C,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,SAAS,CAAM;IAEvB,OAAO,KAAK,OAAO,GAElB;IAED,+EAA+E;IAC/E,OAAO,KAAK,MAAM,GASjB;IAED,iBAAiB;IAMjB,oBAAoB;IAOpB,YAAY;IAIZ,OAAO;IAMP,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,OAAO;IA8Bf,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,aAAa;IAgBrB,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,WAAW,GAItB;IAUD,OAAO,KAAK,WAAW,GAKtB;IAED,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,YAAY;IAgBpB,MAAM,CAAC,MAAM,4BAmNX;IAEF,OAAO,CAAC,YAAY;IA2EpB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,SAAS;IAiEjB,OAAO,CAAC,UAAU;IAqBlB,MAAM;CAkDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}