@transcodes/ui-components 0.3.0 → 0.3.1

package/dist/widgets/tc-authenticator-card.js

@@ -0,0 +1,213 @@
+import { LitElement as p, html as l, css as h } from "lit";
+import { property as s, customElement as m } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (r, i, c, n) => {
+  for (var t = n > 1 ? void 0 : n ? v(i, c) : i, o = r.length - 1, d; o >= 0; o--)
+    (d = r[o]) && (t = (n ? d(i, c, t) : d(t)) || t);
+  return n && t && b(i, c, t), t;
+};
+let e = class extends p {
+  constructor() {
+    super(...arguments), this.name = "", this.type = "passkey", this.lastUsed = "", this.enabled = !0, this.deletable = !0, this.clickable = !1;
+  }
+  getIconName() {
+    switch (this.type) {
+      case "passkey":
+        return "key";
+      case "totp":
+        return "totp";
+      case "usb":
+        return "device";
+      case "phone":
+        return "phone";
+      case "email":
+        return "email";
+      default:
+        return "key";
+    }
+  }
+  handleCardClick() {
+    this.clickable && this.enabled && this.dispatchEvent(
+      new CustomEvent("tc-click", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleDelete(r) {
+    r.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("tc-delete", {
+        bubbles: !0,
+        composed: !0,
+        detail: { name: this.name, type: this.type }
+      })
+    );
+  }
+  render() {
+    const r = {
+      card: !0,
+      clickable: this.clickable && this.enabled,
+      disabled: !this.enabled
+    };
+    return l`
+      <div
+        part="card"
+        class=${u(r)}
+        @click=${this.handleCardClick}
+        role=${this.clickable ? "button" : "article"}
+        tabindex=${this.clickable && this.enabled ? "0" : "-1"}
+      >
+        <div part="icon" class="icon-container">
+          <tc-icon name=${this.getIconName()} size="1.25rem" color="var(--ink-dark)"></tc-icon>
+        </div>
+        <div part="content" class="content">
+          <div part="name" class="name">${this.name}</div>
+          ${this.lastUsed ? l`
+                <div part="meta" class="meta">
+                  <span class="last-used">${this.lastUsed}</span>
+                </div>
+              ` : ""}
+        </div>
+        <div part="actions" class="actions">
+          ${this.enabled ? "" : l`
+                <tc-chip class="status-chip" variant="default" size="sm">Disabled</tc-chip>
+              `}
+          ${this.deletable ? l`
+                <button
+                  part="delete"
+                  class="delete-btn"
+                  @click=${this.handleDelete}
+                  aria-label="Delete ${this.name}"
+                >
+                  <tc-icon name="x" size="1rem"></tc-icon>
+                </button>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = h`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .card {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      padding: var(--space-md);
+      background: var(--paper-cream);
+      border-radius: var(--radius-md);
+      transition: var(--transition-fast);
+    }
+
+    .card.clickable {
+      cursor: pointer;
+    }
+
+    .card.clickable:hover {
+      background: var(--paper-warm);
+    }
+
+    .card.disabled {
+      opacity: var(--opacity-disabled);
+    }
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      background: var(--paper-white);
+      border-radius: var(--radius-md);
+      flex-shrink: 0;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .name {
+      font-weight: 500;
+      color: var(--ink-black);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .meta {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      margin-top: var(--space-xs);
+    }
+
+    .last-used {
+      font-size: var(--font-size-sm);
+      color: var(--ink-light);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      flex-shrink: 0;
+    }
+
+    .delete-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: var(--radius-sm);
+      color: var(--ink-light);
+      cursor: pointer;
+      transition: var(--transition-fast);
+    }
+
+    .delete-btn:hover {
+      background: var(--alpha-ink04);
+      color: var(--error-base);
+    }
+
+    .delete-btn:focus-visible {
+      outline: 2px solid var(--accent-primary);
+      outline-offset: 2px;
+    }
+
+    .status-chip {
+      flex-shrink: 0;
+    }
+  `;
+a([
+  s({ type: String })
+], e.prototype, "name", 2);
+a([
+  s({ type: String })
+], e.prototype, "type", 2);
+a([
+  s({ type: String, attribute: "last-used" })
+], e.prototype, "lastUsed", 2);
+a([
+  s({ type: Boolean })
+], e.prototype, "enabled", 2);
+a([
+  s({ type: Boolean })
+], e.prototype, "deletable", 2);
+a([
+  s({ type: Boolean })
+], e.prototype, "clickable", 2);
+e = a([
+  m("tc-authenticator-card")
+], e);
+export {
+  e as TcAuthenticatorCard
+};

package/dist/widgets/tc-floating-button.js

@@ -0,0 +1,132 @@
+import { LitElement as c, html as b, css as d } from "lit";
+import { property as a, customElement as h } from "lit/decorators.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { sharedStyles as m } from "../styles/shared.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (e, i, n, r) => {
+  for (var t = r > 1 ? void 0 : r ? f(i, n) : i, p = e.length - 1, l; p >= 0; p--)
+    (l = e[p]) && (t = (r ? l(i, n, t) : l(t)) || t);
+  return r && t && v(i, n, t), t;
+};
+let o = class extends c {
+  constructor() {
+    super(...arguments), this.position = "bottom-right", this.size = "3.5rem", this.disabled = !1, this.sx = {};
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("position", this.position);
+  }
+  updated(e) {
+    e.has("position") && this.setAttribute("position", this.position);
+  }
+  handleClick() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("tc-click", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const e = {
+      "--fab-size": this.size,
+      ...this.sx
+    };
+    return b`
+      <button
+        part="button"
+        class="button"
+        ?disabled=${this.disabled}
+        style=${u(e)}
+        @click=${this.handleClick}
+        aria-label="Floating action"
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+o.styles = [
+  m,
+  d`
+    :host {
+      display: block;
+      position: fixed;
+      z-index: 100;
+    }
+
+    :host([position='bottom-right']) {
+      bottom: var(--space-lg);
+      right: var(--space-lg);
+    }
+
+    :host([position='bottom-left']) {
+      bottom: var(--space-lg);
+      left: var(--space-lg);
+    }
+
+    :host([position='top-right']) {
+      top: var(--space-lg);
+      right: var(--space-lg);
+    }
+
+    :host([position='top-left']) {
+      top: var(--space-lg);
+      left: var(--space-lg);
+    }
+
+    .button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--fab-size);
+      height: var(--fab-size);
+      padding: 0;
+      border: none;
+      border-radius: var(--radius-full);
+      background: var(--accent-primary);
+      color: white;
+      cursor: pointer;
+      box-shadow: 0 4px 12px var(--alpha-primary40);
+      transition: var(--transition-smooth);
+    }
+
+    .button:hover:not(:disabled) {
+      background: var(--accent-primary-hover);
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px var(--alpha-primary50);
+    }
+
+    .button:active:not(:disabled) {
+      background: var(--accent-primary-pressed);
+      transform: scale(0.98);
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--accent-primary);
+      outline-offset: 3px;
+    }
+
+    .button:disabled {
+      opacity: var(--opacity-disabled);
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+  `
+];
+s([
+  a({ type: String })
+], o.prototype, "position", 2);
+s([
+  a({ type: String })
+], o.prototype, "size", 2);
+s([
+  a({ type: Boolean })
+], o.prototype, "disabled", 2);
+s([
+  a({ type: Object })
+], o.prototype, "sx", 2);
+o = s([
+  h("tc-floating-button")
+], o);
+export {
+  o as TcFloatingButton
+};

package/dist/widgets/tc-iframe-modal.js

@@ -0,0 +1,263 @@
+import { LitElement as c, html as h, css as p } from "lit";
+import { property as r, state as m, customElement as v } from "lit/decorators.js";
+import { AnimationController as y } from "../controllers/animation.controller.js";
+import { HistoryController as u } from "../controllers/history.controller.js";
+import { MessageBusController as f } from "../controllers/message-bus.controller.js";
+import { sharedStyles as g } from "../styles/shared.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, i, o, n) => {
+  for (var a = n > 1 ? void 0 : n ? w(i, o) : i, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (a = (n ? d(i, o, a) : d(a)) || a);
+  return n && a && b(i, o, a), a;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.src = "", this.title = "", this.closeOnEscape = !0, this.closeOnOverlay = !0, this.useHistory = !0, this.isLoading = !0, this.animation = new y(this, {
+      showDuration: 300,
+      hideDuration: 200
+    }), this.history = new u(this), this.messageBus = new f(this), this.handleKeyDown = (t) => {
+      t.key === "Escape" && this.animation.state === "visible" && this.close();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateDataState(), this.closeOnEscape && document.addEventListener("keydown", this.handleKeyDown), this.messageBus.onMessage("*", (t, i) => {
+      this.dispatchEvent(
+        new CustomEvent("tc-message", {
+          bubbles: !0,
+          composed: !0,
+          detail: { type: t, payload: i }
+        })
+      );
+    }), this.useHistory && this.history.onPopState(() => {
+      this.animation.state === "visible" && this.close();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updateDataState() {
+    this.dataset.state = this.animation.state;
+  }
+  async open() {
+    this.useHistory && this.history.push({ modal: "iframe" }), this.isLoading = !0, await this.animation.show(), this.updateDataState();
+  }
+  async close() {
+    this.useHistory && this.history.pop(), await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
+      new CustomEvent("tc-close", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleOverlayClick(t) {
+    this.closeOnOverlay && t.target === t.currentTarget && this.close();
+  }
+  handleIframeLoad() {
+    this.isLoading = !1, this.dispatchEvent(
+      new CustomEvent("tc-load", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  sendMessage(t, i) {
+    const o = this.shadowRoot?.querySelector("iframe");
+    o?.contentWindow && this.messageBus.send(t, i, o.contentWindow);
+  }
+  render() {
+    return h`
+      <div part="overlay" class="overlay" @click=${this.handleOverlayClick}>
+        <div part="modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+          ${this.title ? h`
+                <div part="header" class="header">
+                  <h2 id="modal-title" class="title">${this.title}</h2>
+                  <button
+                    part="close"
+                    class="close"
+                    @click=${this.close}
+                    aria-label="Close modal"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                  </button>
+                </div>
+              ` : ""}
+          <div part="content" class="content">
+            <iframe
+              part="iframe"
+              class="iframe"
+              src=${this.src}
+              @load=${this.handleIframeLoad}
+              title=${this.title || "Modal content"}
+            ></iframe>
+            <div part="loader" class="loader ${this.isLoading ? "" : "hidden"}">
+              <tc-spinner size="2rem"></tc-spinner>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [
+  g,
+  p`
+    :host {
+      display: contents;
+    }
+
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--space-lg);
+      background: var(--overlay-dim);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
+    }
+
+    :host([data-state='showing']) .overlay,
+    :host([data-state='visible']) .overlay {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    :host([data-state='hiding']) .overlay {
+      opacity: 0;
+    }
+
+    :host([data-state='hidden']) .overlay {
+      visibility: hidden;
+    }
+
+    .modal {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 600px;
+      max-height: 90vh;
+      max-height: 90dvh;
+      background: var(--paper-white);
+      border-radius: var(--radius-lg);
+      box-shadow: 0 20px 60px var(--overlay-shadow-strong);
+      overflow: hidden;
+      transform: scale(0.95) translateY(20px);
+      transition: transform var(--transition-smooth);
+    }
+
+    :host([data-state='showing']) .modal,
+    :host([data-state='visible']) .modal {
+      transform: scale(1) translateY(0);
+    }
+
+    :host([data-state='hiding']) .modal {
+      transform: scale(0.95) translateY(20px);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--space-md) var(--space-lg);
+      border-bottom: 1px solid var(--paper-warm);
+    }
+
+    .title {
+      font-family: var(--font-body);
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      color: var(--ink-dark);
+      margin: 0;
+    }
+
+    .close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--size-close-button);
+      height: var(--size-close-button);
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: var(--ink-medium);
+      cursor: pointer;
+      border-radius: var(--radius-sm);
+      transition: var(--transition-fast);
+    }
+
+    .close:hover {
+      background: var(--paper-warm);
+      color: var(--ink-dark);
+    }
+
+    .close svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    .content {
+      position: relative;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .iframe {
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+      border: none;
+    }
+
+    .loader {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--paper-white);
+      opacity: 1;
+      transition: opacity var(--transition-smooth);
+    }
+
+    .loader.hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  `
+];
+s([
+  r({ type: String })
+], e.prototype, "src", 2);
+s([
+  r({ type: String })
+], e.prototype, "title", 2);
+s([
+  r({ type: Boolean, attribute: "close-on-escape" })
+], e.prototype, "closeOnEscape", 2);
+s([
+  r({ type: Boolean, attribute: "close-on-overlay" })
+], e.prototype, "closeOnOverlay", 2);
+s([
+  r({ type: Boolean, attribute: "use-history" })
+], e.prototype, "useHistory", 2);
+s([
+  m()
+], e.prototype, "isLoading", 2);
+e = s([
+  v("tc-iframe-modal")
+], e);
+export {
+  e as TcIframeModal
+};