@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-profile-card.js

@@ -0,0 +1,199 @@
+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";
+import "./tt-card.js";
+import "./tt-image.js";
+import "./tt-button.js";
+let TTProfileCard = class TTProfileCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        /*
+          The line under the name: a job title, a team. Was `role`, which every
+          element already has: it is the ARIA role, so <tt-profile-card
+          description="Engineer"> gave the host an invalid one. `description` is the
+          library's word for a secondary line.
+        */
+        this.description = "";
+        // Identifies the card in tt-profile-action, like value on tt-product
+        // and tt-company-card. A name is not an identity: two people share one.
+        this.value = "";
+        this.image = "";
+        this.imageAlt = "";
+        this.buttonLabel = "View Profile";
+        this.orientation = "vertical";
+    }
+    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;
+      width: 100%;
+    }
+
+    .profile {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-5);
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /*
+      The card decides how big its own avatar is, because the card is what
+      knows it sits next to a name and a role. tt-image only decides that
+      the crop is square and the corner is round.
+    */
+    .avatar {
+      flex-shrink: 0;
+      width: 48px;
+    }
+
+    /* Vertical */
+
+    .vertical {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    /* Horizontal */
+
+    .horizontal {
+      flex-direction: row;
+      text-align: left;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-1);
+      min-width: 0;
+    }
+
+    .name {
+      margin: 0;
+
+      color: var(--tt-foreground);
+      font-size: var(--tt-text-lg);
+      font-weight: var(--tt-weight-semibold);
+      line-height: var(--tt-leading-tight);
+    }
+
+    .role {
+      margin: 0;
+
+      color: var(--tt-muted-foreground);
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-snug);
+    }
+
+    .actions {
+      margin-top: var(--tt-space-4);
+    }
+
+    .horizontal .actions {
+      margin-top: 0;
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+
+    @media (max-width: 480px) {
+      .horizontal {
+        align-items: flex-start;
+      }
+
+      .horizontal tt-image {
+        flex-shrink: 0;
+      }
+
+      .horizontal .actions {
+        margin-left: 0;
+      }
+    }
+  `; }
+    handleAction() {
+        this.dispatchEvent(new CustomEvent("tt-profile-action", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value,
+                name: this.name,
+            },
+        }));
+    }
+    render() {
+        const layoutClass = this.orientation === "horizontal" ? "horizontal" : "vertical";
+        return html `
+      <tt-card variant="elevated" part="card">
+        <div class="profile ${layoutClass}">
+
+          <!-- ratio="1" keeps the crop square whatever the source is, and
+               the size comes from the CSS below, not from the image. -->
+          <tt-image
+            class="avatar"
+            src=${this.image}
+            alt=${this.imageAlt || this.name}
+            radius="full"
+            ratio="1"
+          ></tt-image>
+
+          <div class="info">
+            <h2 class="name" part="name">${this.name}</h2>
+
+            ${this.description
+            ? html `<p class="role" part="description">${this.description}</p>`
+            : ""}
+          </div>
+
+          <div class="actions">
+            <!-- The name rides along in the accessible name: a page of
+                 twelve cards is otherwise twelve identical buttons. The
+                 visible text comes first (label in name). -->
+            <tt-button
+              label=${this.name ? `${this.buttonLabel}, ${this.name}` : this.buttonLabel}
+              @tt-button-click=${this.handleAction}
+            >
+              ${this.buttonLabel}
+            </tt-button>
+          </div>
+
+        </div>
+      </tt-card>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTProfileCard.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TTProfileCard.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], TTProfileCard.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TTProfileCard.prototype, "image", void 0);
+__decorate([
+    property({ type: String, attribute: "image-alt" })
+], TTProfileCard.prototype, "imageAlt", void 0);
+__decorate([
+    property({ type: String, attribute: "button-label" })
+], TTProfileCard.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ type: String })
+], TTProfileCard.prototype, "orientation", void 0);
+TTProfileCard = __decorate([
+    customElement("tt-profile-card")
+], TTProfileCard);
+export { TTProfileCard };
+//# sourceMappingURL=tt-profile-card.js.map

package/dist/tt-profile-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-profile-card.js","sourceRoot":"","sources":["../src/tt-profile-card.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;AAE5D,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AAKjB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAEL,SAAI,GAAG,EAAE,CAAC;QAEV;;;;;UAKE;QAEF,gBAAW,GAAG,EAAE,CAAC;QAEjB,qEAAqE;QACrE,wEAAwE;QAExE,UAAK,GAAG,EAAE,CAAC;QAGX,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,cAAc,CAAC;QAG7B,gBAAW,GAA2B,UAAU,CAAC;IAsJnD,CAAC;aApJQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FlB,AA3FY,CA2FX;IAEM,YAAY;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GACf,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QAEhE,OAAO,IAAI,CAAA;;8BAEe,WAAW;;;;;;kBAMvB,IAAI,CAAC,KAAK;kBACV,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI;;;;;;2CAMD,IAAI,CAAC,IAAI;;cAEtC,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,WAAW,MAAM;YAClE,CAAC,CAAC,EAAE;;;;;;;;sBAQI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW;iCACvD,IAAI,CAAC,YAAY;;gBAElC,IAAI,CAAC,WAAW;;;;;;KAM3B,CAAC;IACJ,CAAC;;AA/KD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AASV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACV;AAKjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+CACrC;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kDACzB;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACsB;AA5BtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAkLzB"}

package/dist/tt-progress.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+/**
+ * A labelled progress bar for a known quantity.
+ *
+ * Its highest-value use in a directory or SaaS product is a profile
+ * completeness meter. Listing quality is the product, and a visible
+ * "your profile is 60% complete" is the most effective nudge there is
+ * to improve it.
+ */
+export declare class TTProgress extends LitElement {
+    value: number;
+    max: number;
+    label: string;
+    showValue: boolean;
+    grade: boolean;
+    private get percent();
+    private get tone();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-progress": TTProgress;
+    }
+}
+//# sourceMappingURL=tt-progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-progress.d.ts","sourceRoot":"","sources":["../src/tt-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAK;IAEV,GAAG,SAAO;IAEV,KAAK,SAAM;IAGe,SAAS,UAAS;IAG3C,KAAK,UAAS;IAE3C,OAAO,KAAK,OAAO,GAIlB;IAED,OAAO,KAAK,IAAI,GAMf;IAED,MAAM,CAAC,MAAM,0BAuDX;IAEF,MAAM;CAqCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/tt-progress.js

@@ -0,0 +1,156 @@
+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";
+/**
+ * A labelled progress bar for a known quantity.
+ *
+ * Its highest-value use in a directory or SaaS product is a profile
+ * completeness meter. Listing quality is the product, and a visible
+ * "your profile is 60% complete" is the most effective nudge there is
+ * to improve it.
+ */
+let TTProgress = class TTProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.max = 100;
+        this.label = "";
+        // Show the percentage next to the label.
+        this.showValue = false;
+        // Colour by how far along it is: low is a problem, high is done.
+        this.grade = false;
+    }
+    get percent() {
+        if (this.max <= 0)
+            return 0;
+        // Clamped, so bad data cannot draw a bar past its track.
+        return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    }
+    get tone() {
+        if (!this.grade)
+            return "";
+        const p = this.percent;
+        if (p < 34)
+            return "low";
+        if (p < 67)
+            return "mid";
+        return "high";
+    }
+    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);
+
+      --_color: var(--tt-primary);
+    }
+
+    .row {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: var(--tt-space-3);
+
+      margin-bottom: var(--tt-space-2);
+
+      font-size: var(--tt-text-sm);
+    }
+
+    .label {
+      color: var(--tt-foreground);
+    }
+
+    .value {
+      color: var(--tt-muted-foreground);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .track {
+      height: 8px;
+      overflow: hidden;
+
+      background: var(--tt-muted);
+      border-radius: var(--tt-radius-full);
+    }
+
+    .fill {
+      height: 100%;
+
+      background: var(--_color);
+      border-radius: var(--tt-radius-full);
+
+      transition: width var(--tt-duration-slow) var(--tt-ease-out);
+    }
+
+    .fill.low  { --_color: var(--tt-destructive); }
+    .fill.mid  { --_color: var(--tt-warning); }
+    .fill.high { --_color: var(--tt-success); }
+
+  `; }
+    render() {
+        const percent = this.percent;
+        return html `
+      ${this.label || this.showValue
+            ? html `
+            <div class="row">
+              <span class="label" part="label">${this.label}</span>
+
+              ${this.showValue
+                ? html `<span class="value">${Math.round(percent)}%</span>`
+                : ""}
+            </div>
+          `
+            : ""}
+
+      <!--
+        role=progressbar with the aria-value attributes is what makes this
+        readable to a screen reader. A styled div alone announces nothing.
+      -->
+      <div
+        class="track"
+        part="track"
+        role="progressbar"
+        aria-valuenow=${Math.round(percent)}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label=${this.label || "Progress"}
+      >
+        <div
+          class="fill ${this.tone}"
+          part="fill"
+          style=${`width:${percent}%`}
+        ></div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], TTProgress.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], TTProgress.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], TTProgress.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-value" })
+], TTProgress.prototype, "showValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTProgress.prototype, "grade", void 0);
+TTProgress = __decorate([
+    customElement("tt-progress")
+], TTProgress);
+export { TTProgress };
+//# sourceMappingURL=tt-progress.js.map

package/dist/tt-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-progress.js","sourceRoot":"","sources":["../src/tt-progress.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;AAE5D;;;;;;;GAOG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACuB,UAAK,GAAG,CAAC,CAAC;QAEV,QAAG,GAAG,GAAG,CAAC;QAEV,UAAK,GAAG,EAAE,CAAC;QAEvC,yCAAyC;QACa,cAAS,GAAG,KAAK,CAAC;QAExE,iEAAiE;QACpC,UAAK,GAAG,KAAK,CAAC;IA8G7C,CAAC;IA5GC,IAAY,OAAO;QACjB,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC;QAC5B,yDAAyD;QACzD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,IAAY,IAAI;QACd,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,GAAG,EAAE;YAAE,OAAO,KAAK,CAAC;QACzB,IAAI,CAAC,GAAG,EAAE;YAAE,OAAO,KAAK,CAAC;QACzB,OAAO,MAAM,CAAC;IAChB,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDlB,AAvDY,CAuDX;IAEF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS;YAC5B,CAAC,CAAC,IAAI,CAAA;;iDAEmC,IAAI,CAAC,KAAK;;gBAE3C,IAAI,CAAC,SAAS;gBACd,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;gBAC1D,CAAC,CAAC,EAAE;;WAET;YACH,CAAC,CAAC,EAAE;;;;;;;;;;wBAUY,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;;;qBAGtB,IAAI,CAAC,KAAK,IAAI,UAAU;;;wBAGrB,IAAI,CAAC,IAAI;;kBAEf,SAAS,OAAO,GAAG;;;KAGhC,CAAC;IACJ,CAAC;;AAvH2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAY;AAGe;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CAAmB;AAG3C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAe;AAXhC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyHtB"}

package/dist/tt-quantity.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-icon.js";
+export declare class TTQuantity extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    name: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    label: string;
+    labelHidden: boolean;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    private inputId;
+    get form(): HTMLFormElement | null;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    updated(changed: PropertyValues): void;
+    private commit;
+    private nudge;
+    private handleInput;
+    private handleBlur;
+    private handleKeydown;
+    focus(options?: FocusOptions): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-quantity": TTQuantity;
+    }
+}
+//# sourceMappingURL=tt-quantity.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-quantity.d.ts","sourceRoot":"","sources":["../src/tt-quantity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,cAAc,CAAC;AAItB,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IAG3C,IAAI,SAAM;IAGV,KAAK,SAAK;IAGV,GAAG,SAAK;IAGR,GAAG,SAAY;IAGf,IAAI,SAAK;IAGT,KAAK,SAAM;IAIX,WAAW,UAAS;IAGpB,QAAQ,UAAS;IAKjB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,OAAO,CAAC,OAAO,CAA0B;IAEzC,IAAI,IAAI,2BAEP;IAED,iBAAiB;IAMjB,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAQtC,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,OAAO,CAAC,MAAM;IAqBd,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAYrB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,MAAM,CAAC,MAAM,4BA8LV;IAEH,MAAM;CA4EP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}