@tickean/checkout-elements 0.2.0

package/dist/index.js

@@ -0,0 +1,770 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TickeanBuyerVerification: () => TickeanBuyerVerification,
+  TickeanCheckout: () => TickeanCheckout,
+  TickeanDiscount: () => TickeanDiscount,
+  TickeanOrderSummary: () => TickeanOrderSummary,
+  TickeanPayment: () => TickeanPayment,
+  TickeanTicketSelector: () => TickeanTicketSelector,
+  applyAppearance: () => applyAppearance,
+  attachController: () => attachController,
+  defineTickeanElements: () => defineTickeanElements,
+  detachController: () => detachController,
+  getController: () => getController,
+  registerController: () => registerController,
+  unregisterController: () => unregisterController
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.ts
+var CONTROLLER_ATTR = "controller-id";
+var registry = /* @__PURE__ */ new Map();
+var autoId = 0;
+function registerController(controller, id) {
+  const key = id || `tickean_${++autoId}`;
+  registry.set(key, controller);
+  return key;
+}
+function unregisterController(id) {
+  registry.delete(id);
+}
+function getController(id) {
+  if (!id) return null;
+  return registry.get(id) || null;
+}
+function controllerAttr() {
+  return CONTROLLER_ATTR;
+}
+function emitTickeanEvent(el, name, detail) {
+  el.dispatchEvent(
+    new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true
+    })
+  );
+}
+function formatMoney(amount, currency = "ARS", locale = "es-AR") {
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency,
+      maximumFractionDigits: 0
+    }).format(amount);
+  } catch {
+    return `$${amount}`;
+  }
+}
+
+// src/appearance.ts
+var themeVars = {
+  default: {
+    "--tickean-font-family": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+    "--tickean-bg": "#ffffff",
+    "--tickean-fg": "#111827",
+    "--tickean-muted": "#6b7280",
+    "--tickean-border": "#e5e7eb",
+    "--tickean-primary": "#111827",
+    "--tickean-primary-fg": "#ffffff",
+    "--tickean-danger": "#b91c1c",
+    "--tickean-radius": "10px",
+    "--tickean-space": "12px",
+    "--tickean-input-bg": "#ffffff"
+  },
+  flat: {
+    "--tickean-font-family": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+    "--tickean-bg": "#f8fafc",
+    "--tickean-fg": "#0f172a",
+    "--tickean-muted": "#64748b",
+    "--tickean-border": "#cbd5e1",
+    "--tickean-primary": "#0f172a",
+    "--tickean-primary-fg": "#ffffff",
+    "--tickean-danger": "#dc2626",
+    "--tickean-radius": "0px",
+    "--tickean-space": "12px",
+    "--tickean-input-bg": "#ffffff"
+  },
+  night: {
+    "--tickean-font-family": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+    "--tickean-bg": "#0b1220",
+    "--tickean-fg": "#e5e7eb",
+    "--tickean-muted": "#9ca3af",
+    "--tickean-border": "#1f2937",
+    "--tickean-primary": "#e5e7eb",
+    "--tickean-primary-fg": "#0b1220",
+    "--tickean-danger": "#f87171",
+    "--tickean-radius": "10px",
+    "--tickean-space": "12px",
+    "--tickean-input-bg": "#111827"
+  }
+};
+var baseStyles = `
+:host {
+  display: block;
+  color: var(--tickean-fg, #111827);
+  font-family: var(--tickean-font-family, ui-sans-serif, system-ui, sans-serif);
+  box-sizing: border-box;
+}
+*, *::before, *::after { box-sizing: border-box; }
+.wrap {
+  background: var(--tickean-bg, #fff);
+  border: 1px solid var(--tickean-border, #e5e7eb);
+  border-radius: var(--tickean-radius, 10px);
+  padding: calc(var(--tickean-space, 12px) * 1.25);
+}
+.muted { color: var(--tickean-muted, #6b7280); font-size: 0.9rem; }
+.danger { color: var(--tickean-danger, #b91c1c); }
+.row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
+.stack { display: grid; gap: var(--tickean-space, 12px); }
+.ticket {
+  border: 1px solid var(--tickean-border, #e5e7eb);
+  border-radius: var(--tickean-radius, 10px);
+  padding: var(--tickean-space, 12px);
+}
+button, input {
+  font: inherit;
+}
+button {
+  border: 1px solid var(--tickean-border, #e5e7eb);
+  background: var(--tickean-primary, #111827);
+  color: var(--tickean-primary-fg, #fff);
+  border-radius: calc(var(--tickean-radius, 10px) * 0.7);
+  padding: 8px 12px;
+  cursor: pointer;
+}
+button.secondary {
+  background: transparent;
+  color: var(--tickean-fg, #111827);
+}
+button:disabled { opacity: 0.55; cursor: not-allowed; }
+input {
+  width: 100%;
+  border: 1px solid var(--tickean-border, #e5e7eb);
+  background: var(--tickean-input-bg, #fff);
+  color: var(--tickean-fg, #111827);
+  border-radius: calc(var(--tickean-radius, 10px) * 0.7);
+  padding: 8px 10px;
+}
+label { display: grid; gap: 4px; font-size: 0.85rem; }
+.qty button { min-width: 36px; }
+.total[aria-live] { font-weight: 700; font-size: 1.1rem; }
+.provider-slot {
+  min-height: 48px;
+  border: 1px dashed var(--tickean-border, #e5e7eb);
+  border-radius: var(--tickean-radius, 10px);
+  padding: var(--tickean-space, 12px);
+  color: var(--tickean-muted, #6b7280);
+}
+`;
+function applyAppearance(host, appearance) {
+  let parsed = {};
+  if (typeof appearance === "string") {
+    try {
+      parsed = JSON.parse(appearance);
+    } catch {
+      parsed = { theme: appearance };
+    }
+  } else if (appearance) {
+    parsed = appearance;
+  }
+  const theme = parsed.theme || "default";
+  if (theme !== "none") {
+    const vars = themeVars[theme] || themeVars.default;
+    for (const [key, value] of Object.entries(vars)) {
+      host.style.setProperty(key, value);
+    }
+  }
+  if (parsed.variables) {
+    for (const [key, value] of Object.entries(parsed.variables)) {
+      const prop = key.startsWith("--") ? key : `--tickean-${key}`;
+      host.style.setProperty(prop, value);
+    }
+  }
+}
+
+// src/i18n.ts
+var catalogs = {
+  "es-AR": {
+    loading: "Cargando checkout\u2026",
+    tickets: "Entradas",
+    discount: "C\xF3digo de descuento",
+    apply: "Aplicar",
+    phone: "Tel\xE9fono",
+    name: "Nombre",
+    email: "Email",
+    otpCode: "C\xF3digo OTP",
+    sendOtp: "Enviar OTP",
+    verifyOtp: "Verificar",
+    total: "Total",
+    pay: "Confirmar compra",
+    transferInstructions: "Datos para transferir",
+    alias: "Alias",
+    cvu: "CVU",
+    amount: "Monto",
+    redirectPay: "Continuar al pago",
+    providerPlaceholder: "Complet\xE1 el pago con tu proveedor",
+    completed: "\xA1Compra completada!",
+    error: "Ocurri\xF3 un error",
+    emptyCart: "Eleg\xED al menos una entrada",
+    quantity: "Cantidad"
+  },
+  "es-CL": {
+    loading: "Cargando checkout\u2026",
+    tickets: "Entradas",
+    discount: "C\xF3digo de descuento",
+    apply: "Aplicar",
+    phone: "Tel\xE9fono",
+    name: "Nombre",
+    email: "Email",
+    otpCode: "C\xF3digo OTP",
+    sendOtp: "Enviar OTP",
+    verifyOtp: "Verificar",
+    total: "Total",
+    pay: "Confirmar compra",
+    transferInstructions: "Datos para transferir",
+    alias: "Alias",
+    cvu: "CVU",
+    amount: "Monto",
+    redirectPay: "Continuar al pago",
+    providerPlaceholder: "Completa el pago con tu proveedor",
+    completed: "\xA1Compra completada!",
+    error: "Ocurri\xF3 un error",
+    emptyCart: "Elige al menos una entrada",
+    quantity: "Cantidad"
+  },
+  en: {
+    loading: "Loading checkout\u2026",
+    tickets: "Tickets",
+    discount: "Discount code",
+    apply: "Apply",
+    phone: "Phone",
+    name: "Name",
+    email: "Email",
+    otpCode: "OTP code",
+    sendOtp: "Send OTP",
+    verifyOtp: "Verify",
+    total: "Total",
+    pay: "Confirm purchase",
+    transferInstructions: "Transfer details",
+    alias: "Alias",
+    cvu: "CVU",
+    amount: "Amount",
+    redirectPay: "Continue to payment",
+    providerPlaceholder: "Complete payment with your provider",
+    completed: "Purchase completed!",
+    error: "Something went wrong",
+    emptyCart: "Select at least one ticket",
+    quantity: "Quantity"
+  }
+};
+function t(locale, key) {
+  const resolved = locale && catalogs[locale] ? locale : "es-AR";
+  return catalogs[resolved][key];
+}
+function resolveLocale(locale) {
+  if (locale && catalogs[locale]) return locale;
+  return "es-AR";
+}
+
+// src/base.ts
+var NativeHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+  attachShadow() {
+    return { innerHTML: "" };
+  }
+};
+var TickeanElementBase = class extends NativeHTMLElement {
+  constructor() {
+    super();
+    this.unsubscribe = null;
+    this.state = null;
+    this.lastPhase = null;
+    this.lastErrorCode = null;
+    this.root = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["appearance", "locale", controllerAttr()];
+  }
+  connectedCallback() {
+    this.applyTheme();
+    this.bindController();
+    this.render();
+  }
+  disconnectedCallback() {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+  }
+  attributeChangedCallback(_name, _oldValue, _newValue) {
+    this.applyTheme();
+    this.bindController();
+    this.render();
+  }
+  get elementLocale() {
+    return resolveLocale(this.getAttribute("locale"));
+  }
+  get controller() {
+    return getController(this.getAttribute(controllerAttr()));
+  }
+  applyTheme() {
+    applyAppearance(this, this.getAttribute("appearance") || void 0);
+  }
+  bindController() {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    const controller = this.controller;
+    if (!controller) return;
+    const onChange = (snapshot) => {
+      this.state = snapshot;
+      this.render();
+      emitTickeanEvent(this, "change", { state: snapshot });
+      if (snapshot.error && snapshot.error.code !== this.lastErrorCode) {
+        this.lastErrorCode = snapshot.error.code;
+        emitTickeanEvent(this, "error", { error: snapshot.error });
+      }
+      if (snapshot.phase === "completed" && this.lastPhase !== "completed") {
+        emitTickeanEvent(this, "complete", { state: snapshot });
+      }
+      if (this.lastPhase === "initializing" && snapshot.phase !== "initializing" && !snapshot.loading) {
+        emitTickeanEvent(this, "ready", { state: snapshot });
+      }
+      this.lastPhase = snapshot.phase;
+    };
+    this.state = controller.getSnapshot();
+    this.unsubscribe = controller.subscribe(onChange);
+    void controller.ready.then(() => {
+      const snap = controller.getSnapshot();
+      onChange(snap);
+    });
+  }
+  styles() {
+    return baseStyles;
+  }
+  render() {
+    this.root.innerHTML = `<style>${this.styles()}</style>${this.renderBody()}`;
+    this.afterRender();
+  }
+  afterRender() {
+  }
+  money(amount) {
+    const currency = this.state?.event?.shows?.[0]?.showOptions?.[0]?.currency || "ARS";
+    return formatMoney(amount, currency, this.elementLocale);
+  }
+};
+
+// src/elements/ticket-selector.ts
+var TickeanTicketSelector = class extends TickeanElementBase {
+  renderBody() {
+    const state = this.state;
+    if (!state || state.loading) {
+      return `<div class="wrap muted">${t(this.elementLocale, "loading")}</div>`;
+    }
+    const options = (state.event?.shows || []).flatMap(
+      (show) => (show.showOptions || []).map((opt) => ({ ...opt, showTitle: show.title }))
+    );
+    return `
+      <div class="wrap stack" part="ticket-selector">
+        <strong>${t(this.elementLocale, "tickets")}</strong>
+        ${options.map((opt) => {
+      const qty = state.cart.find((c) => c.showOptionId === opt.id)?.amount || 0;
+      return `
+              <div class="ticket" data-option-id="${opt.id}">
+                <div class="row">
+                  <div>
+                    <div><strong>${escapeHtml(opt.name || opt.id)}</strong></div>
+                    <div class="muted">${escapeHtml(opt.showTitle || "")}</div>
+                  </div>
+                  <div>${this.money(Number(opt.price || 0))}</div>
+                </div>
+                <div class="row qty" style="margin-top:10px" role="group" aria-label="${t(this.elementLocale, "quantity")} ${escapeHtml(opt.name || "")}">
+                  <button type="button" class="secondary" data-action="dec" aria-label="-">\u2212</button>
+                  <span aria-live="polite">${qty}</span>
+                  <button type="button" class="secondary" data-action="inc" aria-label="+">+</button>
+                </div>
+              </div>
+            `;
+    }).join("")}
+      </div>
+    `;
+  }
+  afterRender() {
+    this.root.querySelectorAll("[data-option-id]").forEach((el) => {
+      const optionId = el.getAttribute("data-option-id");
+      const qty = this.state?.cart.find((c) => c.showOptionId === optionId)?.amount || 0;
+      el.querySelector('[data-action="dec"]')?.addEventListener("click", () => {
+        this.controller?.setCartItem(optionId, Math.max(0, qty - 1));
+      });
+      el.querySelector('[data-action="inc"]')?.addEventListener("click", () => {
+        this.controller?.setCartItem(optionId, qty + 1);
+      });
+    });
+  }
+};
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+if (typeof customElements !== "undefined" && !customElements.get("tickean-ticket-selector")) {
+  customElements.define("tickean-ticket-selector", TickeanTicketSelector);
+}
+
+// src/elements/discount.ts
+var TickeanDiscount = class extends TickeanElementBase {
+  renderBody() {
+    const code = this.state?.discountCode || "";
+    return `
+      <div class="wrap stack" part="discount">
+        <label>
+          ${t(this.elementLocale, "discount")}
+          <input id="code" value="${escapeAttr(code)}" autocomplete="off" />
+        </label>
+        <button type="button" id="apply">${t(this.elementLocale, "apply")}</button>
+        ${this.state?.error ? `<div class="danger" role="alert">${escapeHtml2(this.state.error.message)}</div>` : ""}
+      </div>
+    `;
+  }
+  afterRender() {
+    const input = this.root.querySelector("#code");
+    this.root.querySelector("#apply")?.addEventListener("click", async () => {
+      const value = input?.value?.trim() || "";
+      try {
+        await this.controller?.applyDiscountCode(value);
+      } catch {
+      }
+    });
+  }
+};
+function escapeAttr(value) {
+  return value.replace(/"/g, "&quot;");
+}
+function escapeHtml2(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+if (typeof customElements !== "undefined" && !customElements.get("tickean-discount")) {
+  customElements.define("tickean-discount", TickeanDiscount);
+}
+
+// src/elements/buyer-verification.ts
+var TickeanBuyerVerification = class extends TickeanElementBase {
+  constructor() {
+    super(...arguments);
+    this.phone = "+5491112345678";
+    this.name = "";
+    this.email = "";
+    this.code = "";
+  }
+  renderBody() {
+    const verified = this.state?.buyerVerified;
+    return `
+      <div class="wrap stack" part="buyer-verification">
+        <label>
+          ${t(this.elementLocale, "phone")}
+          <input id="phone" type="tel" value="${escapeAttr2(this.phone)}" autocomplete="tel" />
+        </label>
+        <label>
+          ${t(this.elementLocale, "name")}
+          <input id="name" value="${escapeAttr2(this.name)}" autocomplete="name" />
+        </label>
+        <label>
+          ${t(this.elementLocale, "email")}
+          <input id="email" type="email" value="${escapeAttr2(this.email)}" autocomplete="email" />
+        </label>
+        <button type="button" class="secondary" id="send">${t(this.elementLocale, "sendOtp")}</button>
+        <label>
+          ${t(this.elementLocale, "otpCode")}
+          <input id="otp" inputmode="numeric" value="${escapeAttr2(this.code)}" autocomplete="one-time-code" />
+        </label>
+        <button type="button" id="verify">${t(this.elementLocale, "verifyOtp")}</button>
+        ${verified ? `<div class="muted" role="status">${escapeHtml3(this.state?.buyer?.name || this.state?.buyer?.phone || "OK")}</div>` : ""}
+      </div>
+    `;
+  }
+  afterRender() {
+    const phone = this.root.querySelector("#phone");
+    const name = this.root.querySelector("#name");
+    const email = this.root.querySelector("#email");
+    const otp = this.root.querySelector("#otp");
+    const sync = () => {
+      this.phone = phone?.value || "";
+      this.name = name?.value || "";
+      this.email = email?.value || "";
+      this.code = otp?.value || "";
+    };
+    this.root.querySelector("#send")?.addEventListener("click", async () => {
+      sync();
+      await this.controller?.sendOtp(this.phone);
+    });
+    this.root.querySelector("#verify")?.addEventListener("click", async () => {
+      sync();
+      await this.controller?.verifyOtp({
+        phone: this.phone,
+        code: this.code,
+        name: this.name || void 0,
+        email: this.email || void 0
+      });
+    });
+  }
+};
+function escapeAttr2(value) {
+  return value.replace(/"/g, "&quot;");
+}
+function escapeHtml3(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+if (typeof customElements !== "undefined" && !customElements.get("tickean-buyer-verification")) {
+  if (typeof customElements !== "undefined") customElements.define("tickean-buyer-verification", TickeanBuyerVerification);
+}
+
+// src/elements/payment.ts
+var TickeanPayment = class extends TickeanElementBase {
+  static get observedAttributes() {
+    return [...TickeanElementBase.observedAttributes, "payment-method", "currency"];
+  }
+  renderBody() {
+    const state = this.state;
+    const nextAction = state?.nextAction || { type: "none" };
+    const paymentMethod = this.getAttribute("payment-method") || state?.event?.availablePaymentMethods?.[0] || "TRANSFER";
+    const currency = this.getAttribute("currency") || "ARS";
+    if (state?.phase === "completed") {
+      return `<div class="wrap" part="payment"><div role="status">${t(this.elementLocale, "completed")}</div></div>`;
+    }
+    return `
+      <div class="wrap stack" part="payment">
+        ${renderNextAction(nextAction, this.elementLocale, (n) => this.money(n))}
+        ${!state?.purchase ? `<button type="button" id="pay" ${!state?.cart.length || !state?.buyerVerified ? "disabled" : ""}>${t(this.elementLocale, "pay")}</button>` : ""}
+        <div data-payment-method="${escapeAttr3(paymentMethod)}" data-currency="${escapeAttr3(currency)}" hidden></div>
+      </div>
+    `;
+  }
+  afterRender() {
+    const paymentMethod = this.getAttribute("payment-method") || this.state?.event?.availablePaymentMethods?.[0] || "TRANSFER";
+    const currency = this.getAttribute("currency") || "ARS";
+    this.root.querySelector("#pay")?.addEventListener("click", async () => {
+      await this.controller?.purchaseAndPay({
+        paymentMethod,
+        currency
+      });
+    });
+    this.root.querySelector("#redirect")?.addEventListener("click", () => {
+      const url = this.state?.nextAction?.url;
+      if (url) window.location.assign(url);
+    });
+  }
+};
+function renderNextAction(nextAction, locale, money) {
+  switch (nextAction.type) {
+    case "display_instructions": {
+      const instructions = nextAction.paymentInstructions || {};
+      return `
+        <div>
+          <strong>${t(locale, "transferInstructions")}</strong>
+          <div class="stack" style="margin-top:8px">
+            ${instructions.alias ? `<div><span class="muted">${t(locale, "alias")}</span>: <code>${escapeHtml4(String(instructions.alias))}</code></div>` : ""}
+            ${instructions.cvu ? `<div><span class="muted">${t(locale, "cvu")}</span>: <code>${escapeHtml4(String(instructions.cvu))}</code></div>` : ""}
+            ${instructions.amount != null ? `<div><span class="muted">${t(locale, "amount")}</span>: ${money(Number(instructions.amount))}</div>` : ""}
+          </div>
+        </div>
+      `;
+    }
+    case "redirect":
+      return `<button type="button" id="redirect">${t(locale, "redirectPay")}</button>`;
+    case "stripe_elements":
+      return `<div class="provider-slot" data-provider="stripe" part="stripe-mount">${t(locale, "providerPlaceholder")} (Stripe)</div>`;
+    case "airwallex_dropin":
+      return `<div class="provider-slot" data-provider="airwallex" part="airwallex-mount">${t(locale, "providerPlaceholder")} (Airwallex)</div>`;
+    case "dlocal_fields":
+      return `<div class="provider-slot" data-provider="dlocal" part="dlocal-mount">${t(locale, "providerPlaceholder")} (dLocal)</div>`;
+    case "fintoc_widget":
+      return `<div class="provider-slot" data-provider="fintoc" part="fintoc-mount">${t(locale, "providerPlaceholder")} (Fintoc)</div>`;
+    default:
+      return "";
+  }
+}
+function escapeAttr3(value) {
+  return value.replace(/"/g, "&quot;");
+}
+function escapeHtml4(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+if (typeof customElements !== "undefined" && !customElements.get("tickean-payment")) {
+  customElements.define("tickean-payment", TickeanPayment);
+}
+
+// src/elements/order-summary.ts
+var TickeanOrderSummary = class extends TickeanElementBase {
+  renderBody() {
+    const total = this.state?.quote?.totalPrice || 0;
+    const items = this.state?.cart || [];
+    return `
+      <div class="wrap stack" part="order-summary">
+        <div class="row">
+          <span>${t(this.elementLocale, "total")}</span>
+          <span class="total" aria-live="polite">${this.money(total)}</span>
+        </div>
+        ${items.length === 0 ? `<div class="muted">${t(this.elementLocale, "emptyCart")}</div>` : `<div class="muted">${items.length} item(s)</div>`}
+        ${this.state?.isQuoting ? `<div class="muted">${t(this.elementLocale, "loading")}</div>` : ""}
+      </div>
+    `;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("tickean-order-summary")) {
+  if (typeof customElements !== "undefined") customElements.define("tickean-order-summary", TickeanOrderSummary);
+}
+
+// src/elements/checkout.ts
+var import_checkout_js = require("@tickean/checkout-js");
+var TickeanCheckout = class extends TickeanElementBase {
+  constructor() {
+    super(...arguments);
+    this.ownedControllerId = null;
+    this.ownedController = null;
+  }
+  static get observedAttributes() {
+    return [
+      ...TickeanElementBase.observedAttributes,
+      "publishable-key",
+      "event-slug",
+      "api-base-url",
+      "return-url",
+      "demo",
+      "payment-method",
+      "currency"
+    ];
+  }
+  connectedCallback() {
+    this.ensureController();
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.ownedControllerId) {
+      this.ownedController?.dispose();
+      unregisterController(this.ownedControllerId);
+      this.ownedControllerId = null;
+      this.ownedController = null;
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (["publishable-key", "event-slug", "api-base-url", "return-url", "demo"].includes(
+      name
+    ) && oldValue !== newValue) {
+      if (this.ownedControllerId) {
+        this.ownedController?.dispose();
+        unregisterController(this.ownedControllerId);
+        this.ownedControllerId = null;
+        this.ownedController = null;
+      }
+      this.ensureController();
+    }
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+  ensureController() {
+    if (this.getAttribute(controllerAttr())) return;
+    const eventSlug = this.getAttribute("event-slug");
+    const publishableKey = this.getAttribute("publishable-key") || "";
+    if (!eventSlug) return;
+    const options = {
+      publishableKey,
+      eventSlug,
+      apiBaseUrl: this.getAttribute("api-base-url") || void 0,
+      returnUrl: this.getAttribute("return-url") || void 0,
+      demo: this.hasAttribute("demo"),
+      persistence: false
+    };
+    this.ownedController = (0, import_checkout_js.createCheckoutController)(options);
+    this.ownedControllerId = registerController(this.ownedController);
+    this.setAttribute(controllerAttr(), this.ownedControllerId);
+  }
+  renderBody() {
+    const id = this.getAttribute(controllerAttr()) || "";
+    const locale = this.getAttribute("locale") || "es-AR";
+    const appearance = this.getAttribute("appearance") || "default";
+    const paymentMethod = this.getAttribute("payment-method") || "TRANSFER";
+    const currency = this.getAttribute("currency") || "ARS";
+    const state = this.state;
+    if (!state || state.loading) {
+      return `<div class="wrap muted">${t(this.elementLocale, "loading")}</div>`;
+    }
+    return `
+      <div class="stack" part="checkout">
+        <h2 style="margin:0">${escapeHtml5(state.event?.title || "")}</h2>
+        <p class="muted" style="margin:0">${escapeHtml5(state.event?.description || "")}</p>
+        <tickean-ticket-selector controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-ticket-selector>
+        <tickean-discount controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-discount>
+        <tickean-buyer-verification controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-buyer-verification>
+        <tickean-order-summary controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-order-summary>
+        <tickean-payment controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}" payment-method="${escapeAttr4(paymentMethod)}" currency="${escapeAttr4(currency)}"></tickean-payment>
+        ${state.error ? `<div class="danger" role="alert">${escapeHtml5(state.error.message)}</div>` : ""}
+      </div>
+    `;
+  }
+};
+function escapeAttr4(value) {
+  return value.replace(/"/g, "&quot;");
+}
+function escapeHtml5(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+if (typeof customElements !== "undefined" && !customElements.get("tickean-checkout")) {
+  customElements.define("tickean-checkout", TickeanCheckout);
+}
+
+// src/index.ts
+var ELEMENT_TAGS = [
+  "tickean-checkout",
+  "tickean-ticket-selector",
+  "tickean-discount",
+  "tickean-buyer-verification",
+  "tickean-payment",
+  "tickean-order-summary"
+];
+function defineTickeanElements() {
+  if (typeof customElements === "undefined") return;
+  for (const tag of ELEMENT_TAGS) {
+    if (!customElements.get(tag)) {
+      void tag;
+    }
+  }
+}
+function attachController(el, controller, id) {
+  const controllerId = registerController(controller, id);
+  el.setAttribute("controller-id", controllerId);
+  return controllerId;
+}
+function detachController(id) {
+  unregisterController(id);
+}
+defineTickeanElements();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TickeanBuyerVerification,
+  TickeanCheckout,
+  TickeanDiscount,
+  TickeanOrderSummary,
+  TickeanPayment,
+  TickeanTicketSelector,
+  applyAppearance,
+  attachController,
+  defineTickeanElements,
+  detachController,
+  getController,
+  registerController,
+  unregisterController
+});