@transcodes/ui-components 0.3.4 → 0.3.6

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

@@ -1,213 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,263 +0,0 @@
-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
-};