@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-textarea.js

@@ -0,0 +1,356 @@
+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 { property, customElement, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { srOnly } from "./sr-only.js";
+let uid = 0;
+let TTTextarea = class TTTextarea extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        this.label = "";
+        this.placeholder = "";
+        this.value = "";
+        /*
+          Reflected, and it has to be.
+      
+          A form-associated custom element is submitted under its name CONTENT
+          ATTRIBUTE, not its JS property. Without reflect, setting .name = "x"
+          from script leaves the attribute absent and the field vanishes from
+          FormData with no error anywhere. It only appeared to work because
+          every call site so far wrote name="x" in markup, which sets the
+          attribute directly.
+        */
+        this.name = "";
+        this.error = "";
+        // Same contract as tt-input and tt-checkbox: named for a screen reader,
+        // invisible on screen. For a composer whose purpose is obvious.
+        this.labelHidden = false;
+        this.rows = 4;
+        // Character limit, shown as a counter when set.
+        this.maxlength = 0;
+        // Reflected, as on tt-input and every other control.
+        this.disabled = false;
+        this.required = false;
+        this.fullWidth = false;
+        // Grows with its content instead of scrolling. Useful for a
+        // description field where the whole text should stay visible.
+        this.autoGrow = false;
+        this.fieldId = `tt-textarea-${++uid}`;
+    }
+    static { this.formAssociated = true; }
+    get form() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFormState();
+    }
+    formResetCallback() {
+        this.value = "";
+    }
+    formStateRestoreCallback(state) {
+        this.value = state ?? "";
+    }
+    updated(changed) {
+        if (changed.has("value") || changed.has("required")) {
+            this.syncFormState();
+        }
+        if (changed.has("value") || changed.has("autoGrow")) {
+            this.resize();
+        }
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value);
+        const missing = this.required && this.value.trim() === "";
+        if (missing) {
+            this.internals.setValidity({ valueMissing: true }, "Please fill in this field.", this.field ?? undefined);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    // Reset the height first, or it can only ever grow: scrollHeight of an
+    // already-tall box includes the height we set last time.
+    resize() {
+        if (!this.autoGrow || !this.field)
+            return;
+        this.field.style.height = "auto";
+        this.field.style.height = `${this.field.scrollHeight}px`;
+    }
+    handleInput(event) {
+        const field = event.target;
+        this.value = field.value;
+        this.dispatchEvent(new CustomEvent("tt-input", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleChange() {
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    focus(options) {
+        this.field?.focus(options);
+    }
+    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 {
+      /* A grid or flex item defaults to min-width: auto, which floors it at
+         its MIN-CONTENT width. See tt-input for what that broke. */
+      min-width: 0;
+
+      display: inline-block;
+      width: auto;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+    }
+
+    label {
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      color: var(--tt-foreground);
+    }
+
+    .req {
+      margin-left: 2px;
+      color: var(--tt-destructive);
+    }
+
+    textarea {
+      width: 100%;
+      box-sizing: border-box;
+
+      padding: 10px 13px;
+
+      border: 1px solid var(--tt-input);
+      border-radius: var(--tt-radius);
+
+      background: var(--tt-field);
+      color: var(--tt-foreground);
+
+      font-family: inherit;
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-normal);
+
+      /* Vertical only: horizontal resizing breaks surrounding layouts. */
+      resize: vertical;
+
+      transition:
+        border-color var(--tt-duration-normal) var(--tt-ease),
+        box-shadow var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    textarea:hover:not(:disabled):not(.error) {
+      border-color: var(--tt-border-strong);
+    }
+
+    textarea::placeholder {
+      color: var(--tt-muted-foreground);
+    }
+
+    textarea:focus {
+      border-color: var(--tt-ring);
+
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    textarea:disabled {
+      background: var(--tt-muted);
+      color: var(--tt-muted-foreground);
+      cursor: not-allowed;
+    }
+
+    textarea.error {
+      border-color: var(--tt-destructive);
+    }
+
+    textarea.error:focus {
+      outline-color: var(--tt-destructive);
+    }
+
+    .foot {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--tt-space-2);
+    }
+
+    .error-text {
+      color: var(--tt-destructive);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+    }
+
+    .counter {
+      margin-left: auto;
+      color: var(--tt-muted-foreground);
+      font-size: var(--tt-text-xs);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .counter.over {
+      color: var(--tt-destructive);
+    }
+
+    @media (max-width: 480px) {
+      textarea {
+        font-size: 16px;
+      }
+    }
+
+  `]; }
+    render() {
+        const errorId = this.error ? `${this.fieldId}-error` : undefined;
+        const counterId = `${this.fieldId}-counter`;
+        const over = this.maxlength > 0 && this.value.length > this.maxlength;
+        const describedBy = [errorId, this.maxlength > 0 ? counterId : undefined]
+            .filter(Boolean)
+            .join(" ");
+        /*
+          The <label> holds the label text only. It used to wrap the field,
+          the error and the counter, so the textarea's NAME came out as
+          "Bio 12/200 Too long". The error and the counter are descriptions,
+          read after the name, and aria-describedby says exactly that.
+        */
+        return html `
+      <div class="field">
+        ${this.label
+            ? html `
+              <label
+                for=${this.fieldId}
+                part="label"
+                class=${this.labelHidden ? "sr-only" : ""}
+              >
+                ${this.label}
+                ${this.required
+                ? html `<span class="req" aria-hidden="true">*</span>`
+                : ""}
+              </label>
+            `
+            : ""}
+
+        <textarea
+          part="textarea"
+          id=${this.fieldId}
+          class=${this.error ? "error" : ""}
+          .value=${this.value}
+          name=${this.name}
+          rows=${this.rows}
+          placeholder=${this.placeholder}
+          autocomplete=${ifDefined(this.autocomplete)}
+          maxlength=${ifDefined(this.maxlength > 0 ? this.maxlength : undefined)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${ifDefined(describedBy || undefined)}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        ></textarea>
+
+        ${this.error || this.maxlength > 0
+            ? html `
+              <div class="foot">
+                ${this.error
+                ? html `
+                      <span id=${ifDefined(errorId)} class="error-text" role="alert">
+                        ${this.error}
+                      </span>
+                    `
+                : ""}
+                ${this.maxlength > 0
+                ? html `
+                      <span id=${counterId} class="counter ${over ? "over" : ""}">
+                        ${this.value.length}/${this.maxlength}
+                      </span>
+                    `
+                : ""}
+              </div>
+            `
+            : ""}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], TTTextarea.prototype, "label", void 0);
+__decorate([
+    property()
+], TTTextarea.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], TTTextarea.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTTextarea.prototype, "name", void 0);
+__decorate([
+    property()
+], TTTextarea.prototype, "autocomplete", void 0);
+__decorate([
+    property()
+], TTTextarea.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTTextarea.prototype, "labelHidden", void 0);
+__decorate([
+    property({ type: Number })
+], TTTextarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number })
+], TTTextarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTTextarea.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTTextarea.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "full-width", reflect: true })
+], TTTextarea.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "auto-grow" })
+], TTTextarea.prototype, "autoGrow", void 0);
+__decorate([
+    query("textarea")
+], TTTextarea.prototype, "field", void 0);
+TTTextarea = __decorate([
+    customElement("tt-textarea")
+], TTTextarea);
+export { TTTextarea };
+//# sourceMappingURL=tt-textarea.js.map

package/dist/tt-textarea.js.map

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

package/dist/tt-thread.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-avatar.js";
+import "./tt-button.js";
+import "./tt-textarea.js";
+import "./tt-empty-state.js";
+export interface Message {
+    id: string;
+    body: string;
+    author: string;
+    avatar?: string;
+    timestamp?: string;
+    own?: boolean;
+}
+/**
+ * The reading side of a messaging surface. Pairs with tt-inbox.
+ *
+ * Split from the list because the two sit in different places: side by
+ * side on a desktop, two separate routes on a phone. One component would
+ * have to make that layout decision for the app.
+ *
+ * THREE THINGS THAT ARE EASY TO GET WRONG AND ANNOYING TO LIVE WITH.
+ *
+ * It scrolls to the bottom on new messages, because a thread is read
+ * newest-last and opening one part-way up is disorienting. It only does
+ * so when the reader was ALREADY at the bottom, so it never yanks
+ * somebody out of older messages they were deliberately reading.
+ *
+ * Consecutive messages from the same author collapse: the avatar and name
+ * appear once and the following bubbles are bare. Repeating the name on
+ * every line of a burst is noise.
+ *
+ * The composer is Enter to send, Shift+Enter for a newline. That is what
+ * every messaging product does, and a thread that needs a mouse click to
+ * send feels broken regardless of how correct it is.
+ */
+export declare class TTThread extends LitElement {
+    messages: Message[];
+    heading: string;
+    placeholder: string;
+    sendLabel: string;
+    readonly: boolean;
+    sending: boolean;
+    emptyText: string;
+    private scroller;
+    private composer;
+    private wasAtBottom;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    private scrollToEnd;
+    private send;
+    private handleKeydown;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-thread": TTThread;
+    }
+}
+//# sourceMappingURL=tt-thread.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-thread.d.ts","sourceRoot":"","sources":["../src/tt-thread.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACX,QAAQ,EAAE,OAAO,EAAE,CAAM;IAExB,OAAO,SAAM;IAEb,WAAW,SAAqB;IAEP,SAAS,SAAU;IAG3C,QAAQ,UAAS;IAEjB,OAAO,UAAS;IAEQ,SAAS,SAAqB;IAE/D,OAAO,CAAC,QAAQ,CAAe;IAC7B,OAAO,CAAC,QAAQ,CAAmC;IAKzE,OAAO,CAAC,WAAW,CAAQ;IAE3B,UAAU,CAAC,OAAO,EAAE,cAAc;IAUlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,YAAY;IAIZ,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,IAAI;IAoBZ,OAAO,CAAC,aAAa;IAOrB,MAAM,CAAC,MAAM,4BA+IV;IAEH,MAAM;CAuGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}