@erplora/outfitkit 0.1.1

package/dist/ok-select-card.js

@@ -0,0 +1,231 @@
+import { LitElement, css, html } from "lit";
+import { property } 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;
+};
+class OkSelectCard extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "checkbox";
+    this.value = "";
+    this.checked = false;
+    this.disabled = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --bg-hover: var(--ok-surface-hover, var(--ion-color-step-50, #f2f3f5));
+      --border-color: var(--ok-border-color, var(--ion-border-color, #d7d8da));
+      --radius: var(--ok-radius-md, 12px);
+      --text-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --muted-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --brand: var(--ok-color-primary, var(--ion-color-primary, #3880ff));
+      /* Fondo suave de marca: si no hay token, se deriva del brand con transparencia. */
+      --brand-soft: var(--ok-color-primary-soft, var(--ion-color-primary-tint, rgba(56, 128, 255, 0.1)));
+      --gap: 0.75rem;
+      --pad: 0.875rem;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .card {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--gap);
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--pad);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius);
+      background: var(--bg);
+      cursor: pointer;
+      transition:
+        background 0.16s ease,
+        border-color 0.16s ease,
+        box-shadow 0.16s ease;
+      /* Sin selección de texto accidental al clicar la fila. */
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .card:hover {
+      background: var(--bg-hover);
+    }
+
+    /* Estado marcado: borde + fondo de marca. */
+    .card[data-checked] {
+      background: var(--brand-soft);
+      border-color: var(--brand);
+    }
+
+    /* Foco accesible visible sobre toda la fila. */
+    .card:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
+    }
+
+    .control {
+      flex-shrink: 0;
+      /* Alinear el control con la primera línea del label. */
+      margin-top: 0.0625rem;
+      pointer-events: none; /* el click lo gobierna la fila */
+    }
+
+    .icon {
+      flex-shrink: 0;
+      display: inline-grid;
+      place-items: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      color: var(--muted-color);
+    }
+
+    .card[data-checked] .icon {
+      color: var(--brand);
+    }
+
+    ion-icon {
+      font-size: 1.375rem;
+    }
+
+    .body {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+
+    .label {
+      margin: 0;
+      font-size: 0.9375rem;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--text-color);
+    }
+
+    .description {
+      margin: 0;
+      font-size: 0.8125rem;
+      line-height: 1.4;
+      color: var(--muted-color);
+    }
+  `;
+  }
+  onToggle() {
+    if (this.disabled) return;
+    if (this.mode === "radio") {
+      if (this.checked) return;
+      this.checked = true;
+      this.uncheckSiblings();
+    } else {
+      this.checked = !this.checked;
+    }
+    this.emitChange();
+  }
+  /** Desmarca el resto de ok-select-card del mismo name (grupo radio). */
+  uncheckSiblings() {
+    if (!this.name) return;
+    const root = this.getRootNode() ?? document;
+    const group = root.querySelectorAll("ok-select-card");
+    group.forEach((card) => {
+      if (card !== this && card.mode === "radio" && card.name === this.name && card.checked) {
+        card.checked = false;
+      }
+    });
+  }
+  emitChange() {
+    const detail = { checked: this.checked, value: this.value };
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onKeydown(e) {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      this.onToggle();
+    }
+  }
+  render() {
+    const isRadio = this.mode === "radio";
+    const role = isRadio ? "radio" : "checkbox";
+    const control = isRadio ? html`<ion-radio
+          class="control"
+          aria-hidden="true"
+          ?disabled=${this.disabled}
+          .value=${this.value}
+        ></ion-radio>` : html`<ion-checkbox
+          class="control"
+          aria-hidden="true"
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+        ></ion-checkbox>`;
+    return html`
+      <div
+        class="card"
+        role=${role}
+        tabindex=${this.disabled ? -1 : 0}
+        aria-checked=${this.checked ? "true" : "false"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label=${this.label ?? this.value}
+        ?data-checked=${this.checked}
+        @click=${this.onToggle}
+        @keydown=${this.onKeydown}
+      >
+        ${control}
+        ${this.icon ? html`<span class="icon"><ion-icon name=${this.icon}></ion-icon></span>` : null}
+        <div class="body">
+          ${this.label ? html`<p class="label">${this.label}</p>` : null}
+          ${this.description ? html`<p class="description">${this.description}</p>` : null}
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkSelectCard.prototype, "mode");
+__decorateClass([
+  property()
+], OkSelectCard.prototype, "name");
+__decorateClass([
+  property()
+], OkSelectCard.prototype, "value");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkSelectCard.prototype, "checked");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkSelectCard.prototype, "disabled");
+__decorateClass([
+  property()
+], OkSelectCard.prototype, "label");
+__decorateClass([
+  property()
+], OkSelectCard.prototype, "description");
+__decorateClass([
+  property()
+], OkSelectCard.prototype, "icon");
+define("ok-select-card", OkSelectCard);
+export {
+  OkSelectCard
+};

package/dist/ok-signature.js

@@ -0,0 +1,267 @@
+import { LitElement, css, html } from "lit";
+import { property, query } 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 DEFAULT_LABELS = {
+  clear: "Clear",
+  export: "Export",
+  exportFilename: "signature.png"
+};
+class OkSignature extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.penColor = "";
+    this.lineWidth = 2.5;
+    this.background = "";
+    this.height = 200;
+    this.showExport = false;
+    this.labels = {};
+    this.ctx = null;
+    this.drawing = false;
+    this.lastX = 0;
+    this.lastY = 0;
+    this.hasInk = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.18));
+      --bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --border-radius: var(--ok-radius, 10px);
+      --height: 200px;
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Ocupa el ancho del contenedor y es responsive. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    /* Marco del lienzo. */
+    .pad {
+      position: relative;
+      width: 100%;
+      height: var(--height);
+      box-sizing: border-box;
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      background: var(--bg);
+      overflow: hidden;
+    }
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+      /* Evita que el navegador interprete el gesto como scroll/zoom mientras se firma. */
+      touch-action: none;
+      cursor: crosshair;
+    }
+    /* Barra de acciones bajo el lienzo. */
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+      justify-content: flex-end;
+      margin-top: 0.5rem;
+    }
+    ion-button {
+      margin: 0;
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  firstUpdated() {
+    this.ctx = this.canvas.getContext("2d");
+    this.setupCanvas();
+    this.ro = new ResizeObserver(() => this.setupCanvas(true));
+    this.ro.observe(this.canvas);
+  }
+  updated(changed) {
+    if (changed.has("height")) {
+      this.style.setProperty("--height", `${this.height}px`);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.ro?.disconnect();
+  }
+  // Ajusta la resolución interna del canvas a devicePixelRatio (nitidez) y reaplica el fondo
+  // y los estilos de trazo. Si `preserve`, conserva la firma actual reescalándola.
+  setupCanvas(preserve = false) {
+    if (!this.canvas || !this.ctx) return;
+    const rect = this.canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    const dpr = window.devicePixelRatio || 1;
+    let snapshot = null;
+    if (preserve && this.canvas.width > 0 && this.canvas.height > 0) {
+      try {
+        snapshot = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+      } catch {
+        snapshot = null;
+      }
+    }
+    this.canvas.width = Math.round(rect.width * dpr);
+    this.canvas.height = Math.round(rect.height * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.paintBackground();
+    if (snapshot) {
+      this.ctx.save();
+      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+      this.ctx.putImageData(snapshot, 0, 0);
+      this.ctx.restore();
+    }
+    this.applyStroke();
+  }
+  // Pinta el fondo (si se definió un color); si no, queda transparente.
+  paintBackground() {
+    if (!this.ctx || !this.canvas) return;
+    const rect = this.canvas.getBoundingClientRect();
+    this.ctx.clearRect(0, 0, rect.width, rect.height);
+    if (this.background) {
+      this.ctx.fillStyle = this.background;
+      this.ctx.fillRect(0, 0, rect.width, rect.height);
+    }
+  }
+  // Configura el estilo del trazo (color, grosor, uniones redondeadas para suavizar).
+  applyStroke() {
+    if (!this.ctx) return;
+    this.ctx.lineWidth = this.lineWidth;
+    this.ctx.lineCap = "round";
+    this.ctx.lineJoin = "round";
+    this.ctx.strokeStyle = this.penColor || getComputedStyle(this).getPropertyValue("--color").trim() || "#1c1b17";
+  }
+  // Convierte el evento de puntero a coordenadas CSS relativas al canvas.
+  pos(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+  onPointerDown(e) {
+    if (!this.ctx) return;
+    e.preventDefault();
+    this.drawing = true;
+    this.applyStroke();
+    const { x, y } = this.pos(e);
+    this.lastX = x;
+    this.lastY = y;
+    this.ctx.beginPath();
+    this.ctx.moveTo(x, y);
+    this.ctx.lineTo(x + 0.01, y + 0.01);
+    this.ctx.stroke();
+    this.canvas.setPointerCapture?.(e.pointerId);
+  }
+  onPointerMove(e) {
+    if (!this.drawing || !this.ctx) return;
+    e.preventDefault();
+    const { x, y } = this.pos(e);
+    const midX = (this.lastX + x) / 2;
+    const midY = (this.lastY + y) / 2;
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.lastX, this.lastY);
+    this.ctx.quadraticCurveTo(this.lastX, this.lastY, midX, midY);
+    this.ctx.stroke();
+    this.lastX = x;
+    this.lastY = y;
+    this.hasInk = true;
+  }
+  onPointerUp(e) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    this.canvas.releasePointerCapture?.(e.pointerId);
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { empty: !this.hasInk },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ---- API pública --------------------------------------------------------
+  /** Limpia el lienzo y emite `ok-clear`. */
+  clear() {
+    this.hasInk = false;
+    this.paintBackground();
+    this.applyStroke();
+    this.dispatchEvent(new CustomEvent("ok-clear", { bubbles: true, composed: true }));
+  }
+  /** Devuelve la firma como data URL (def 'image/png'). */
+  toDataURL(type = "image/png") {
+    return this.canvas ? this.canvas.toDataURL(type) : "";
+  }
+  /** True si no se ha dibujado nada todavía. */
+  isEmpty() {
+    return !this.hasInk;
+  }
+  render() {
+    return html`
+      <div class="pad">
+        <canvas
+          @pointerdown=${this.onPointerDown}
+          @pointermove=${this.onPointerMove}
+          @pointerup=${this.onPointerUp}
+          @pointercancel=${this.onPointerUp}
+          @pointerleave=${this.onPointerUp}
+        ></canvas>
+      </div>
+      <div class="actions">
+        <ion-button fill="clear" size="small" @click=${() => this.clear()}>
+          <ion-icon slot="start" name="trash-outline"></ion-icon>
+          ${this.t.clear}
+        </ion-button>
+        ${this.showExport ? html`<ion-button
+              fill="solid"
+              size="small"
+              @click=${() => this.onExport()}
+            >
+              <ion-icon slot="start" name="download-outline"></ion-icon>
+              ${this.t.export}
+            </ion-button>` : ""}
+      </div>
+    `;
+  }
+  // Dispara la descarga de la firma como PNG (solo si hay tinta).
+  onExport() {
+    if (this.isEmpty()) return;
+    const url = this.toDataURL();
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = this.t.exportFilename;
+    a.click();
+  }
+}
+__decorateClass([
+  property({ attribute: "pen-color" })
+], OkSignature.prototype, "penColor");
+__decorateClass([
+  property({ type: Number, attribute: "line-width" })
+], OkSignature.prototype, "lineWidth");
+__decorateClass([
+  property()
+], OkSignature.prototype, "background");
+__decorateClass([
+  property({ type: Number })
+], OkSignature.prototype, "height");
+__decorateClass([
+  property({ type: Boolean, attribute: "show-export" })
+], OkSignature.prototype, "showExport");
+__decorateClass([
+  property({ attribute: false })
+], OkSignature.prototype, "labels");
+__decorateClass([
+  query("canvas")
+], OkSignature.prototype, "canvas");
+define("ok-signature", OkSignature);
+export {
+  OkSignature
+};