@transcodes/ui-components 0.3.5 → 0.3.6

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
-};

package/dist/widgets/tc-installation-banner.d.ts

@@ -1,42 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * A banner prompting users to install the PWA.
- * Remembers dismissal state via localStorage.
- *
- * @fires tc-install - Fired when the install button is clicked
- * @fires tc-dismiss - Fired when the banner is dismissed
- * @csspart banner - The banner container
- * @csspart content - The content area
- * @csspart icon - The app icon
- * @csspart text - The text container
- * @csspart title - The banner title
- * @csspart description - The banner description
- * @csspart actions - The actions container
- * @csspart install - The install button
- * @csspart close - The close button
- */
-export declare class TcInstallationBanner extends LitElement {
-    title: string;
-    description: string;
-    installLabel: string;
-    storageKey: string;
-    dismissDays: number;
-    private isDismissed;
-    private animation;
-    private storage;
-    static styles: import('lit').CSSResult[];
-    connectedCallback(): void;
-    private checkDismissState;
-    private updateDataState;
-    show(): Promise<void>;
-    dismiss(): Promise<void>;
-    private handleInstall;
-    private handleClose;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-installation-banner': TcInstallationBanner;
-    }
-}
-//# sourceMappingURL=tc-installation-banner.d.ts.map

package/dist/widgets/tc-installation-banner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-installation-banner.d.ts","sourceRoot":"","sources":["../../src/widgets/tc-installation-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;;;;GAeG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACtB,KAAK,SAAiB;IACtB,WAAW,SACM;IACW,YAAY,SACxD;IAC0C,UAAU,SAChC;IACuB,WAAW,SAAK;IAE9D,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,OAAO,CAGb;IAEF,OAAgB,MAAM,4BAoHpB;IAEO,iBAAiB;IAM1B,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAIjB,IAAI;IAMJ,OAAO;IAab,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,WAAW;IAIV,MAAM;CAwChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

package/dist/widgets/tc-installation-banner.js

@@ -1,234 +0,0 @@
-import { LitElement as d, html as p, css as m } from "lit";
-import { property as r, state as h, customElement as u } from "lit/decorators.js";
-import { AnimationController as v } from "../controllers/animation.controller.js";
-import { StorageController as b } from "../controllers/storage.controller.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (i, a, o, n) => {
-  for (var e = n > 1 ? void 0 : n ? f(a, o) : a, l = i.length - 1, c; l >= 0; l--)
-    (c = i[l]) && (e = (n ? c(a, o, e) : c(e)) || e);
-  return n && e && g(a, o, e), e;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.title = "Install App", this.description = "Add to your home screen for quick access", this.installLabel = "Install", this.storageKey = "tc-install-banner-dismissed", this.dismissDays = 7, this.isDismissed = !1, this.animation = new v(this, {
-      showDuration: 400,
-      hideDuration: 300
-    }), this.storage = new b(
-      this,
-      this.storageKey
-    );
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState(), this.checkDismissState();
-  }
-  checkDismissState() {
-    const i = this.storage.value;
-    i?.dismissedAt && ((Date.now() - i.dismissedAt) / 864e5 < this.dismissDays ? this.isDismissed = !0 : this.storage.remove());
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async show() {
-    this.isDismissed || (await this.animation.show(), this.updateDataState());
-  }
-  async dismiss() {
-    this.storage.set({ dismissedAt: Date.now() }), await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-dismiss", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleInstall() {
-    this.dispatchEvent(
-      new CustomEvent("tc-install", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClose() {
-    this.dismiss();
-  }
-  render() {
-    return p`
-      <div part="banner" class="banner" role="banner">
-        <div part="icon" class="icon">
-          <tc-icon name="download" size="1.5rem"></tc-icon>
-        </div>
-        <div part="content" class="content">
-          <tc-text part="title" class="title" size="base" weight="600">
-            ${this.title}
-          </tc-text>
-          <tc-text part="description" class="description" size="sm" color="tertiary">
-            ${this.description}
-          </tc-text>
-        </div>
-        <div part="actions" class="actions">
-          <tc-button
-            part="install"
-            variant="primary"
-            size="small"
-            @tc-click=${this.handleInstall}
-          >
-            ${this.installLabel}
-          </tc-button>
-          <button part="close" class="close" @click=${this.handleClose} aria-label="Dismiss">
-            <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>
-    `;
-  }
-};
-t.styles = [
-  y,
-  m`
-    :host {
-      display: block;
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 100;
-      padding: var(--space-md);
-      pointer-events: none;
-    }
-
-    .banner {
-      display: flex;
-      align-items: center;
-      gap: var(--space-md);
-      padding: var(--space-md) var(--space-lg);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 -4px 20px var(--overlay-shadow-light);
-      pointer-events: auto;
-      opacity: 0;
-      transform: translateY(100%);
-      transition: opacity var(--transition-smooth), transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .banner,
-    :host([data-state='visible']) .banner {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    :host([data-state='hiding']) .banner {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-
-    :host([data-state='hidden']) {
-      display: none;
-    }
-
-    .icon {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 3rem;
-      height: 3rem;
-      background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
-      border-radius: var(--radius-md);
-      color: white;
-    }
-
-    .content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .title {
-      font-weight: 600;
-      color: var(--ink-dark);
-    }
-
-    .description {
-      color: var(--ink-medium);
-      margin-top: 2px;
-    }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-    }
-
-    .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-light);
-      cursor: pointer;
-      border-radius: var(--radius-sm);
-      transition: var(--transition-fast);
-    }
-
-    .close:hover {
-      background: var(--paper-warm);
-      color: var(--ink-medium);
-    }
-
-    .close svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    @media (max-width: 480px) {
-      .banner {
-        flex-wrap: wrap;
-      }
-
-      .content {
-        flex-basis: calc(100% - 4rem);
-      }
-
-      .actions {
-        flex-basis: 100%;
-        justify-content: flex-end;
-      }
-    }
-  `
-];
-s([
-  r({ type: String })
-], t.prototype, "title", 2);
-s([
-  r({ type: String })
-], t.prototype, "description", 2);
-s([
-  r({ type: String, attribute: "install-label" })
-], t.prototype, "installLabel", 2);
-s([
-  r({ type: String, attribute: "storage-key" })
-], t.prototype, "storageKey", 2);
-s([
-  r({ type: Number, attribute: "dismiss-days" })
-], t.prototype, "dismissDays", 2);
-s([
-  h()
-], t.prototype, "isDismissed", 2);
-t = s([
-  u("tc-installation-banner")
-], t);
-export {
-  t as TcInstallationBanner
-};

package/dist/widgets/tc-ios-installation-guide.d.ts

@@ -1,34 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * A guide modal for iOS PWA installation steps.
- *
- * @fires tc-close - Fired when the guide is closed
- * @csspart overlay - The backdrop overlay
- * @csspart modal - The modal container
- * @csspart header - The modal header
- * @csspart close - The close button
- * @csspart content - The content area
- * @csspart steps - The steps container
- * @csspart step - Individual step
- * @csspart step-number - Step number indicator
- * @csspart step-text - Step text
- */
-export declare class TcIosInstallationGuide extends LitElement {
-    title: string;
-    steps: string[];
-    private animation;
-    static styles: import('lit').CSSResult[];
-    connectedCallback(): void;
-    private updateDataState;
-    show(): Promise<void>;
-    close(): Promise<void>;
-    private handleOverlayClick;
-    private renderStep;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-ios-installation-guide': TcIosInstallationGuide;
-    }
-}
-//# sourceMappingURL=tc-ios-installation-guide.d.ts.map

package/dist/widgets/tc-ios-installation-guide.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-ios-installation-guide.d.ts","sourceRoot":"","sources":["../../src/widgets/tc-ios-installation-guide.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACxB,KAAK,SAAoB;IAC1B,KAAK,WAI9B;IAEF,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,4BA6IpB;IAEO,iBAAiB;IAK1B,OAAO,CAAC,eAAe;IAIjB,IAAI;IAKJ,KAAK;IAYX,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,UAAU;IAoBT,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}