@erplora/outfitkit 0.1.1

package/dist/ok-invoice.js

@@ -0,0 +1,229 @@
+import { LitElement, css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+import "./ok-qr.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  empty: "No invoice data.",
+  invoice: "Invoice",
+  number: "No.",
+  date: "Date",
+  dueDate: "Due date",
+  billTo: "Bill to",
+  description: "Description",
+  qty: "Qty",
+  price: "Price",
+  discount: "Disc.",
+  tax: "Tax",
+  amount: "Amount",
+  noLines: "— No lines —",
+  taxBase: "Tax base",
+  discountTotal: "Discount",
+  total: "TOTAL",
+  paymentMethod: "Payment method"
+};
+class OkInvoice extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.qrSize = 96;
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    :host {
+      --ink: var(--ok-text, var(--ion-text-color, #1c1b18));
+      --muted: #6b6b6b;
+      --rule: #d9d6cf;
+      --accent: var(--ok-color-primary, var(--ion-color-primary, #0091ce));
+      --soft: color-mix(in srgb, var(--accent) 8%, #fff);
+      display: block;
+      width: 100%;
+    }
+    .sheet {
+      box-sizing: border-box;
+      /* A4: ancho de papel. Overridable vía --invoice-width. */
+      width: var(--invoice-width, 210mm);
+      max-width: 100%;
+      margin: 0 auto;
+      padding: 16mm 14mm;
+      background: #fff;
+      color: var(--ink);
+      font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      font-size: 12px;
+      line-height: 1.5;
+    }
+    /* Cabecera: emisor a la izquierda, bloque "FACTURA" a la derecha. */
+    .top { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
+    .issuer-logo { max-height: 18mm; max-width: 55mm; margin-bottom: .5rem; display: block; }
+    .issuer-name { font-size: 15px; font-weight: 700; }
+    .issuer-meta, .party-meta { color: var(--muted); font-size: 11px; white-space: pre-line; }
+    .doc { text-align: right; min-width: 48mm; }
+    .doc-title { font-size: 24px; font-weight: 800; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
+    .doc-type { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
+    .doc-grid { margin-top: .6rem; display: grid; grid-template-columns: auto auto; gap: .1rem .8rem; justify-content: end; font-size: 11px; }
+    .doc-grid .k { color: var(--muted); text-align: right; }
+    .doc-grid .v { font-weight: 600; text-align: right; }
+    /* Bloque receptor. */
+    .bill-to { margin: 9mm 0 6mm; padding: 3mm 4mm; background: var(--soft); border-radius: 8px; }
+    .bill-to .label { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
+    .bill-to .name { font-weight: 700; font-size: 13px; }
+    /* Tabla de líneas. */
+    table.lines { width: 100%; border-collapse: collapse; margin-top: 2mm; }
+    table.lines thead th {
+      font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
+      text-align: left; padding: 2mm 2mm; border-bottom: 1.5px solid var(--ink);
+    }
+    table.lines tbody td { padding: 2mm 2mm; border-bottom: 1px solid var(--rule); vertical-align: top; }
+    .num { text-align: right; white-space: nowrap; }
+    .desc { width: 42%; }
+    /* Resumen de totales (derecha). */
+    .summary { display: flex; justify-content: flex-end; margin-top: 4mm; }
+    .summary table { border-collapse: collapse; min-width: 70mm; }
+    .summary td { padding: 1mm 2mm; }
+    .summary td.num { text-align: right; white-space: nowrap; }
+    .summary .grand td { font-size: 15px; font-weight: 800; border-top: 1.5px solid var(--ink); padding-top: 2mm; }
+    .summary .grand td.num { color: var(--accent); }
+    .muted { color: var(--muted); }
+    /* Pie: pago, notas, QR. */
+    .foot { margin-top: 8mm; display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
+    .pay-box { font-size: 11px; }
+    .pay-box .h { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
+    .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 1mm; }
+    .qr-note { font-size: 8px; max-width: 36mm; text-align: center; color: var(--muted); word-break: break-word; }
+    .legal { margin-top: 8mm; padding-top: 3mm; border-top: 1px solid var(--rule); font-size: 9px; color: var(--muted); white-space: pre-line; text-align: center; }
+    .empty { padding: 12mm; text-align: center; color: #999; font-style: italic; }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  cur() {
+    return this.invoice?.currency ?? "€";
+  }
+  money(n) {
+    return `${Number(n ?? 0).toFixed(2)} ${this.cur()}`;
+  }
+  render() {
+    const inv = this.invoice;
+    if (!inv) return html`<div class="sheet empty">${this.t.empty}</div>`;
+    return html`<div class="sheet" part="sheet">
+      ${this.renderTop(inv)}
+      ${this.renderBillTo(inv)}
+      ${this.renderLines(inv)}
+      ${this.renderSummary(inv)}
+      ${this.renderFoot(inv)}
+      ${inv.footer ? html`<div class="legal">${inv.footer}</div>` : nothing}
+    </div>`;
+  }
+  party(p) {
+    const loc = [p.postal_code, p.city].filter(Boolean).join(" ");
+    const lines = [p.address, loc, p.country, p.tax_id, p.email, p.phone].filter(Boolean);
+    return html`${lines.map((l) => html`<div>${l}</div>`)}`;
+  }
+  renderTop(inv) {
+    const iss = inv.issuer ?? { name: "" };
+    return html`<div class="top">
+      <div>
+        ${iss.logo_url ? html`<img class="issuer-logo" src=${iss.logo_url} alt=${iss.name || "logo"} />` : nothing}
+        <div class="issuer-name">${iss.name}</div>
+        <div class="issuer-meta">${this.party(iss)}</div>
+      </div>
+      <div class="doc">
+        <div class="doc-title">${this.t.invoice}</div>
+        ${inv.type ? html`<div class="doc-type">${inv.type}</div>` : nothing}
+        <div class="doc-grid">
+          <span class="k">${this.t.number}</span><span class="v">${inv.number}</span>
+          <span class="k">${this.t.date}</span><span class="v">${inv.issue_date}</span>
+          ${inv.due_date ? html`<span class="k">${this.t.dueDate}</span><span class="v">${inv.due_date}</span>` : nothing}
+        </div>
+      </div>
+    </div>`;
+  }
+  renderBillTo(inv) {
+    const c = inv.customer;
+    if (!c) return nothing;
+    return html`<div class="bill-to">
+      <div class="label">${this.t.billTo}</div>
+      <div class="name">${c.name}</div>
+      <div class="party-meta">${this.party(c)}</div>
+    </div>`;
+  }
+  renderLines(inv) {
+    const lines = inv.lines ?? [];
+    const hasDisc = lines.some((l) => l.discount_percent);
+    const hasTax = lines.some((l) => l.tax_rate != null);
+    return html`<table class="lines">
+      <thead>
+        <tr>
+          <th class="desc">${this.t.description}</th>
+          <th class="num">${this.t.qty}</th>
+          <th class="num">${this.t.price}</th>
+          ${hasDisc ? html`<th class="num">${this.t.discount}</th>` : nothing}
+          ${hasTax ? html`<th class="num">${this.t.tax}</th>` : nothing}
+          <th class="num">${this.t.amount}</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${lines.length ? lines.map(
+      (l) => html`<tr>
+                <td class="desc">${l.description}</td>
+                <td class="num">${l.qty}</td>
+                <td class="num">${this.money(l.unit_price)}</td>
+                ${hasDisc ? html`<td class="num">${l.discount_percent ? `${l.discount_percent}%` : "—"}</td>` : nothing}
+                ${hasTax ? html`<td class="num">${l.tax_rate != null ? `${l.tax_rate}%` : "—"}</td>` : nothing}
+                <td class="num">${this.money(l.total)}</td>
+              </tr>`
+    ) : html`<tr><td colspan="6" class="muted" style="text-align:center;padding:6mm">${this.t.noLines}</td></tr>`}
+      </tbody>
+    </table>`;
+  }
+  renderSummary(inv) {
+    const taxes = inv.taxes ?? [];
+    return html`<div class="summary">
+      <table>
+        <tr><td class="muted">${this.t.taxBase}</td><td class="num">${this.money(inv.subtotal)}</td></tr>
+        ${inv.discount_total ? html`<tr><td class="muted">${this.t.discountTotal}</td><td class="num">−${this.money(inv.discount_total)}</td></tr>` : nothing}
+        ${taxes.map(
+      (t) => html`<tr><td class="muted">${t.label}${t.base != null ? html` <span class="muted">(${this.money(t.base)})</span>` : nothing}</td><td class="num">${this.money(t.amount)}</td></tr>`
+    )}
+        <tr class="grand"><td>${this.t.total}</td><td class="num">${this.money(inv.total)}</td></tr>
+      </table>
+    </div>`;
+  }
+  renderFoot(inv) {
+    const hasPay = inv.payment_method || inv.payment_terms || inv.notes;
+    if (!hasPay && !inv.qr) return nothing;
+    return html`<div class="foot">
+      <div class="pay-box">
+        ${inv.payment_method ? html`<div class="h">${this.t.paymentMethod}</div><div>${inv.payment_method}</div>` : nothing}
+        ${inv.payment_terms ? html`<div style="margin-top:2mm" class="muted">${inv.payment_terms}</div>` : nothing}
+        ${inv.notes ? html`<div style="margin-top:3mm">${inv.notes}</div>` : nothing}
+      </div>
+      ${inv.qr ? html`<div class="qr-wrap">
+            <ok-qr .value=${inv.qr} .size=${this.qrSize} ec="M"></ok-qr>
+            ${inv.qr_note ? html`<div class="qr-note">${inv.qr_note}</div>` : nothing}
+          </div>` : nothing}
+    </div>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkInvoice.prototype, "invoice");
+__decorateClass([
+  property({ type: Number, attribute: "qr-size" })
+], OkInvoice.prototype, "qrSize");
+__decorateClass([
+  property({ attribute: false })
+], OkInvoice.prototype, "labels");
+define("ok-invoice", OkInvoice);
+export {
+  OkInvoice
+};

package/dist/ok-json-viewer.js

@@ -0,0 +1,330 @@
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _OkJsonViewer = class _OkJsonViewer2 extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.size = "default";
+    this.expandedDepth = 1;
+    this.collapsed = /* @__PURE__ */ new Set();
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --border: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.12));
+      --guide: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.1));
+      --ink: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --ink-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.55));
+      --ink-faint: var(--ok-text-faint, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.4));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+      --radius: var(--ok-radius, 8px);
+      /* Colores por tipo (cada uno con su cadena de fallback). */
+      --key-color: var(--ok-json-key, var(--ion-color-primary, #3880ff));
+      --string-color: var(--ok-json-string, var(--ion-color-success, #2dd36f));
+      --number-color: var(--ok-json-number, var(--ion-color-warning, #ffc409));
+      --bool-color: var(--ok-json-bool, var(--ion-color-secondary, #6030ff));
+      --null-color: var(--ok-json-null, var(--ink-faint));
+      --font-mono: var(--ok-font-mono, ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);
+
+      display: block;
+      width: 100%;
+    }
+
+    .json {
+      box-sizing: border-box;
+      width: 100%;
+      font-family: var(--font-mono);
+      font-size: 0.8125rem;
+      font-variant-numeric: tabular-nums;
+      line-height: 1.55;
+      color: var(--ink);
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 0.625rem 0.875rem;
+      overflow: auto;
+    }
+    /* Tamaños: ajustan fuente, padding e indentación. */
+    .json.compact {
+      font-size: 0.75rem;
+      padding: 0.5rem 0.625rem;
+      --indent: 14px;
+    }
+    .json.default {
+      --indent: 18px;
+    }
+    .json.lg {
+      font-size: 0.9375rem;
+      padding: 0.875rem 1.125rem;
+      --indent: 22px;
+    }
+
+    .group {
+      margin: 0;
+      padding: 0 0 0 var(--indent);
+      list-style: none;
+      /* Guía de indentación a la izquierda. */
+      border-left: 1px solid var(--guide);
+      margin-left: 6px;
+    }
+
+    .row {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      white-space: pre;
+      border-radius: 4px;
+    }
+    .row.has-children {
+      cursor: pointer;
+    }
+    @media (hover: hover) {
+      .row.has-children:hover {
+        background: var(--hover-bg);
+      }
+    }
+
+    /* Chevron: botón que rota 90deg al expandir. Reserva hueco en las hojas. */
+    .caret {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 1.55em;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: var(--ink-muted);
+      cursor: pointer;
+      border-radius: 3px;
+      transition: transform 0.18s ease, color 0.15s ease;
+    }
+    .caret.open {
+      transform: rotate(90deg);
+    }
+    .caret.leaf {
+      visibility: hidden;
+      cursor: default;
+    }
+    .caret svg {
+      width: 9px;
+      height: 9px;
+      display: block;
+    }
+
+    /* Colores por tipo. */
+    .key {
+      color: var(--key-color);
+      font-weight: 500;
+    }
+    .key::after {
+      content: ': ';
+      color: var(--ink-faint);
+    }
+    .idx {
+      color: var(--ink-faint);
+    }
+    .idx::after {
+      content: ': ';
+    }
+    .string {
+      color: var(--string-color);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .string::before,
+    .string::after {
+      content: '"';
+      opacity: 0.7;
+    }
+    .number {
+      color: var(--number-color);
+    }
+    .bool {
+      color: var(--bool-color);
+      font-weight: 500;
+    }
+    .null {
+      color: var(--null-color);
+      font-style: italic;
+    }
+    .bracket,
+    .comma {
+      color: var(--ink-faint);
+    }
+
+    /* Badge de recuento al colapsar ("3 keys" / "5 items"). */
+    .count {
+      color: var(--ink-faint);
+      font-style: italic;
+      font-size: 0.875em;
+      margin-left: 6px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .caret {
+        transition: none;
+      }
+    }
+  `;
+  }
+  // Parsea `data` si viene como string JSON; si falla, devuelve el string crudo.
+  get value() {
+    const d = this.data;
+    if (typeof d === "string") {
+      try {
+        return JSON.parse(d);
+      } catch {
+        return d;
+      }
+    }
+    return d;
+  }
+  // ¿Es un contenedor (objeto/array no vacío) que se puede colapsar?
+  static hasChildren(v) {
+    if (Array.isArray(v)) return v.length > 0;
+    return v !== null && typeof v === "object" && Object.keys(v).length > 0;
+  }
+  // Decide si un path está expandido: el override del usuario manda; si no, la profundidad inicial.
+  isExpanded(path, depth) {
+    if (this.collapsed.has(path)) return false;
+    if (this.expandedDepth < 0) return true;
+    return depth < this.expandedDepth;
+  }
+  // Alterna expansión de un contenedor y emite `ok-toggle`.
+  toggle(path, depth) {
+    const next = new Set(this.collapsed);
+    const wasExpanded = this.isExpanded(path, depth);
+    if (wasExpanded) next.add(path);
+    else next.delete(path);
+    this.collapsed = next;
+    this.dispatchEvent(
+      new CustomEvent("ok-toggle", {
+        detail: { path, expanded: !wasExpanded },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Chevron SVG inline (sin dependencias).
+  static caretSvg() {
+    return html`<svg viewBox="0 0 10 10" aria-hidden="true">
+      <path d="M3 1.5 L7 5 L3 8.5" fill="none" stroke="currentColor" stroke-width="1.6"
+        stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>`;
+  }
+  // Render del valor "hoja" (string/number/bool/null) con su clase de color.
+  static renderLeaf(v) {
+    if (v === null) return html`<span class="null">null</span>`;
+    switch (typeof v) {
+      case "string":
+        return html`<span class="string">${v}</span>`;
+      case "number":
+        return html`<span class="number">${String(v)}</span>`;
+      case "boolean":
+        return html`<span class="bool">${v ? "true" : "false"}</span>`;
+      default:
+        return html`<span class="string">${String(v)}</span>`;
+    }
+  }
+  // Texto del badge de recuento de un contenedor colapsado.
+  static countLabel(v) {
+    if (Array.isArray(v)) {
+      return `${v.length} ${v.length === 1 ? "item" : "items"}`;
+    }
+    const n = Object.keys(v).length;
+    return `${n} ${n === 1 ? "key" : "keys"}`;
+  }
+  // Render recursivo de una fila. `keyLabel` es la clave de objeto o el índice de array (o null
+  // para la raíz); `path` identifica la fila; `depth` controla la expansión inicial.
+  renderRow(keyLabel, v, path, depth, trailingComma) {
+    const children = _OkJsonViewer2.hasChildren(v);
+    const isArr = Array.isArray(v);
+    const open = children && this.isExpanded(path, depth);
+    const label = keyLabel ? keyLabel.kind === "key" ? html`<span class="key">${keyLabel.text}</span>` : html`<span class="idx">${keyLabel.text}</span>` : null;
+    const comma = trailingComma ? html`<span class="comma">,</span>` : null;
+    if (!children) {
+      if (v !== null && typeof v === "object") {
+        return html`<div class="row">
+          <span class="caret leaf">${_OkJsonViewer2.caretSvg()}</span>
+          ${label}<span class="bracket">${isArr ? "[]" : "{}"}</span>${comma}
+        </div>`;
+      }
+      return html`<div class="row">
+        <span class="caret leaf">${_OkJsonViewer2.caretSvg()}</span>
+        ${label}${_OkJsonViewer2.renderLeaf(v)}${comma}
+      </div>`;
+    }
+    const entries = isArr ? v.map((item, i) => [{ kind: "idx", text: String(i) }, item]) : Object.entries(v).map(([k, item]) => [
+      { kind: "key", text: k },
+      item
+    ]);
+    const openB = isArr ? "[" : "{";
+    const closeB = isArr ? "]" : "}";
+    return html`<div>
+      <div
+        class="row has-children"
+        role="button"
+        tabindex="0"
+        aria-expanded=${String(open)}
+        @click=${() => this.toggle(path, depth)}
+        @keydown=${(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.toggle(path, depth);
+      }
+    }}
+      >
+        <span class=${`caret ${open ? "open" : ""}`}>${_OkJsonViewer2.caretSvg()}</span>
+        ${label}<span class="bracket">${openB}</span>
+        ${open ? null : html`<span class="count">${_OkJsonViewer2.countLabel(v)}</span>`}
+        ${open ? null : html`<span class="bracket">${closeB}</span>`}${open ? null : comma}
+      </div>
+      ${open ? html`<div class="group" role="group">
+              ${entries.map(
+      ([kl, item], i) => this.renderRow(kl, item, `${path}/${kl.text}`, depth + 1, i < entries.length - 1)
+    )}
+            </div>
+            <div class="row">
+              <span class="caret leaf">${_OkJsonViewer2.caretSvg()}</span>
+              <span class="bracket">${closeB}</span>${comma}
+            </div>` : null}
+    </div>`;
+  }
+  render() {
+    const size = ["compact", "default", "lg"].includes(this.size) ? this.size : "default";
+    return html`<div class=${`json ${size}`} role="tree">
+      ${this.renderRow(null, this.value, "$", 0, false)}
+    </div>`;
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], _OkJsonViewer.prototype, "data");
+__decorateClass([
+  property()
+], _OkJsonViewer.prototype, "size");
+__decorateClass([
+  property({ type: Number, attribute: "expanded-depth" })
+], _OkJsonViewer.prototype, "expandedDepth");
+__decorateClass([
+  state()
+], _OkJsonViewer.prototype, "collapsed");
+let OkJsonViewer = _OkJsonViewer;
+define("ok-json-viewer", OkJsonViewer);
+export {
+  OkJsonViewer
+};