@erplora/outfitkit 0.1.1

package/dist/ok-contact-form.js

@@ -0,0 +1,288 @@
+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 DEFAULT_LABELS = {
+  nameLabel: "Name",
+  emailLabel: "Email",
+  subjectLabel: "Subject (optional)",
+  messageLabel: "Message",
+  sending: "Sending…",
+  errorNameRequired: "Name is required.",
+  errorEmailRequired: "Email is required.",
+  errorEmailInvalid: "Enter a valid email.",
+  errorMessageRequired: "Message is required.",
+  errorSendFailed: "Could not send. Please try again.",
+  errorNetwork: "Could not send. Check your connection."
+};
+const _OkContactForm = class _OkContactForm2 extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.submitLabel = "Send";
+    this.successMessage = "Thanks! We’ll get back to you soon.";
+    this.labels = {};
+    this.values = { name: "", email: "", subject: "", message: "" };
+    this.errors = {};
+    this.sent = false;
+    this.sending = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --background: var(--ok-surface, var(--ion-card-background, #ffffff));
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.55));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.12));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --danger-color: var(--ok-danger, var(--ion-color-danger, #c5000f));
+      --success-color: var(--ok-success, var(--ion-color-success, #2dd55b));
+      --border-radius: var(--ok-radius, var(--ion-border-radius, 8px));
+      --max-width: var(--ok-container-max, 640px);
+      --padding: var(--ok-spacing, var(--ion-padding, 16px));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* El host ocupa el ancho del contenedor; el formulario se centra con un max-width interno. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    .wrap {
+      box-sizing: border-box;
+      max-width: var(--max-width);
+      margin-inline: auto;
+      background: var(--background);
+      padding: var(--padding);
+    }
+    .heading {
+      margin: 0 0 1rem;
+      font-size: 1.4rem;
+      font-weight: 700;
+    }
+    /* Grid responsive: 2 columnas en desktop (nombre/email), apilado en móvil. */
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+    }
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+    /* Mensaje y asunto a ancho completo (ocupan toda la fila del grid). */
+    .field.full {
+      grid-column: 1 / -1;
+    }
+    .control {
+      --border-color: var(--border-color);
+      --border-radius: var(--border-radius);
+    }
+    .control[data-invalid] {
+      --border-color: var(--danger-color);
+      --highlight-color-invalid: var(--danger-color);
+    }
+    .error {
+      color: var(--danger-color);
+      font-size: 0.8rem;
+      min-height: 1em;
+    }
+    .actions {
+      grid-column: 1 / -1;
+      display: flex;
+      justify-content: flex-end;
+    }
+    .success {
+      color: var(--success-color);
+      font-weight: 600;
+      padding: 0.5rem 0;
+    }
+    @media (max-width: 640px) {
+      /* Móvil: todo apilado y botón a ancho completo. */
+      .grid { grid-template-columns: 1fr; }
+      .actions { justify-content: stretch; }
+      .actions ion-button { flex: 1; }
+    }
+  `;
+  }
+  // Textos efectivos: defaults inglés sobreescritos por los pasados desde fuera.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  static {
+    this.EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  }
+  // Lee el valor del ion-input/ion-textarea y lo guarda en el campo correspondiente.
+  onInput(field) {
+    return (e) => {
+      const value = e.detail?.value ?? "";
+      this.values = { ...this.values, [field]: value };
+      if (this.errors[field]) {
+        const { [field]: _omit, ...rest } = this.errors;
+        this.errors = rest;
+      }
+    };
+  }
+  // Valida requeridos + patrón email. Devuelve true si todo es válido.
+  validate() {
+    const errors = {};
+    const { name, email, message } = this.values;
+    if (!name.trim()) errors.name = this.t.errorNameRequired;
+    if (!email.trim()) errors.email = this.t.errorEmailRequired;
+    else if (!_OkContactForm2.EMAIL_RE.test(email.trim())) errors.email = this.t.errorEmailInvalid;
+    if (!message.trim()) errors.message = this.t.errorMessageRequired;
+    this.errors = errors;
+    return Object.keys(errors).length === 0;
+  }
+  async onSubmit(e) {
+    e.preventDefault();
+    if (this.sending) return;
+    if (!this.validate()) return;
+    const detail = {
+      name: this.values.name.trim(),
+      email: this.values.email.trim(),
+      subject: this.values.subject.trim(),
+      message: this.values.message.trim()
+    };
+    this.dispatchEvent(
+      new CustomEvent("ok-submit", { detail, bubbles: true, composed: true })
+    );
+    if (!this.action) {
+      this.markSent();
+      return;
+    }
+    this.sending = true;
+    try {
+      const body = new URLSearchParams(detail);
+      const res = await fetch(this.action, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body
+      });
+      if (res.ok) this.markSent();
+      else this.errors = { ...this.errors, message: this.t.errorSendFailed };
+    } catch {
+      this.errors = { ...this.errors, message: this.t.errorNetwork };
+    } finally {
+      this.sending = false;
+    }
+  }
+  // Marca el formulario como enviado y limpia los campos.
+  markSent() {
+    this.sent = true;
+    this.values = { name: "", email: "", subject: "", message: "" };
+    this.errors = {};
+  }
+  render() {
+    if (this.sent) {
+      return html`<div class="wrap"><div class="success" role="status">${this.successMessage}</div></div>`;
+    }
+    return html`
+      <div class="wrap">
+        ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : null}
+        <form class="grid" novalidate @submit=${this.onSubmit}>
+          <div class="field">
+            <ion-input
+              class="control"
+              name="name"
+              label=${this.t.nameLabel}
+              label-placement="stacked"
+              fill="outline"
+              .value=${this.values.name}
+              ?data-invalid=${!!this.errors.name}
+              @ionInput=${this.onInput("name")}
+            ></ion-input>
+            <span class="error">${this.errors.name ?? ""}</span>
+          </div>
+          <div class="field">
+            <ion-input
+              class="control"
+              name="email"
+              type="email"
+              inputmode="email"
+              label=${this.t.emailLabel}
+              label-placement="stacked"
+              fill="outline"
+              .value=${this.values.email}
+              ?data-invalid=${!!this.errors.email}
+              @ionInput=${this.onInput("email")}
+            ></ion-input>
+            <span class="error">${this.errors.email ?? ""}</span>
+          </div>
+          <div class="field full">
+            <ion-input
+              class="control"
+              name="subject"
+              label=${this.t.subjectLabel}
+              label-placement="stacked"
+              fill="outline"
+              .value=${this.values.subject}
+              @ionInput=${this.onInput("subject")}
+            ></ion-input>
+          </div>
+          <div class="field full">
+            <ion-textarea
+              class="control"
+              name="message"
+              label=${this.t.messageLabel}
+              label-placement="stacked"
+              fill="outline"
+              auto-grow
+              rows="5"
+              .value=${this.values.message}
+              ?data-invalid=${!!this.errors.message}
+              @ionInput=${this.onInput("message")}
+            ></ion-textarea>
+            <span class="error">${this.errors.message ?? ""}</span>
+          </div>
+          <div class="actions">
+            <ion-button type="submit" ?disabled=${this.sending}>
+              ${this.sending ? this.t.sending : this.submitLabel}
+            </ion-button>
+          </div>
+        </form>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property()
+], _OkContactForm.prototype, "heading");
+__decorateClass([
+  property({ attribute: "submit-label" })
+], _OkContactForm.prototype, "submitLabel");
+__decorateClass([
+  property()
+], _OkContactForm.prototype, "action");
+__decorateClass([
+  property({ attribute: "success-message" })
+], _OkContactForm.prototype, "successMessage");
+__decorateClass([
+  property({ attribute: false })
+], _OkContactForm.prototype, "labels");
+__decorateClass([
+  state()
+], _OkContactForm.prototype, "values");
+__decorateClass([
+  state()
+], _OkContactForm.prototype, "errors");
+__decorateClass([
+  state()
+], _OkContactForm.prototype, "sent");
+__decorateClass([
+  state()
+], _OkContactForm.prototype, "sending");
+let OkContactForm = _OkContactForm;
+define("ok-contact-form", OkContactForm);
+export {
+  OkContactForm
+};

package/dist/ok-cropper.js

@@ -0,0 +1,404 @@
+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 ASPECTS = [
+  { key: "free", label: "Libre", ratio: null },
+  { key: "1:1", label: "1:1", ratio: 1 },
+  { key: "4:3", label: "4:3", ratio: 4 / 3 },
+  { key: "16:9", label: "16:9", ratio: 16 / 9 }
+];
+const MIN_PCT = 8;
+class OkCropper extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.aspect = "free";
+    this.cancelLabel = "Cancelar";
+    this.cropLabel = "Recortar";
+    this.rect = { x: 14, y: 18, width: 72, height: 64 };
+    this.dragMode = null;
+    this.startX = 0;
+    this.startY = 0;
+    this.startRect = { x: 0, y: 0, width: 0, height: 0 };
+    this.vpRect = null;
+    this.activePointer = null;
+    this.onPointerMove = (ev) => {
+      if (!this.dragMode || !this.vpRect) return;
+      if (this.activePointer != null && ev.pointerId !== this.activePointer) return;
+      const dxPct = (ev.clientX - this.startX) / this.vpRect.width * 100;
+      const dyPct = (ev.clientY - this.startY) / this.vpRect.height * 100;
+      const s = this.startRect;
+      if (this.dragMode === "move") {
+        this.rect = this.clampRect({ ...s, x: s.x + dxPct, y: s.y + dyPct });
+        return;
+      }
+      this.rect = this.resize(s, dxPct, dyPct, this.dragMode);
+    };
+    this.onPointerUp = (ev) => {
+      if (this.activePointer != null && ev.pointerId !== this.activePointer) return;
+      this.dragMode = null;
+      this.activePointer = null;
+      this.vpRect = null;
+      window.removeEventListener("pointermove", this.onPointerMove);
+      window.removeEventListener("pointerup", this.onPointerUp);
+      window.removeEventListener("pointercancel", this.onPointerUp);
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --bg: var(--ok-surface, var(--ion-background-color, #f7f7f9));
+      --border-color: var(--ok-border-color, var(--ion-border-color, #e0e0e6));
+      --radius: var(--ok-radius, 16px);
+      --radius-viewport: var(--ok-radius-md, 10px);
+      --check-a: var(--ok-checker-a, var(--ion-color-light, #ececed));
+      --check-b: var(--ok-checker-b, var(--ion-color-light-shade, #d7d8da));
+      --overlay: var(--ok-cropper-overlay, rgba(0, 0, 0, 0.55));
+      --crop-border: var(--ok-cropper-frame, #ffffff);
+      --guide: var(--ok-cropper-guide, rgba(255, 255, 255, 0.45));
+    }
+
+    .cropper {
+      background: var(--bg);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius);
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      box-sizing: border-box;
+    }
+
+    .viewport {
+      position: relative;
+      aspect-ratio: 4 / 3;
+      width: 100%;
+      /* Checkerboard de transparencia (conic) + overlay oscuro encima via ::before. */
+      background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 /
+        16px 16px;
+      border-radius: var(--radius-viewport);
+      overflow: hidden;
+      touch-action: none;
+      user-select: none;
+    }
+
+    .viewport__img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      display: block;
+      pointer-events: none;
+    }
+
+    /* Atenuado base del viewport (la zona fuera del crop se oscurece extra con el box-shadow). */
+    .viewport::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--overlay);
+      pointer-events: none;
+    }
+
+    .crop {
+      position: absolute;
+      border: 2px solid var(--crop-border);
+      background: transparent;
+      /* Atenua todo lo de FUERA del recorte con una sombra gigantesca. */
+      box-shadow: 0 0 0 9999px var(--overlay);
+      cursor: move;
+      box-sizing: border-box;
+    }
+
+    /* Guías rule-of-thirds (dashed): línea central horizontal y vertical. */
+    .crop::before,
+    .crop::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px dashed var(--guide);
+      pointer-events: none;
+    }
+    .crop::before {
+      border-left: none;
+      border-right: none;
+      top: 33.33%;
+      height: 33.34%;
+    }
+    .crop::after {
+      border-top: none;
+      border-bottom: none;
+      left: 33.33%;
+      width: 33.34%;
+    }
+
+    .handle {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: var(--crop-border);
+      border-radius: 1px;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    }
+    .handle.tl {
+      top: -5px;
+      left: -5px;
+      cursor: nwse-resize;
+    }
+    .handle.tr {
+      top: -5px;
+      right: -5px;
+      cursor: nesw-resize;
+    }
+    .handle.bl {
+      bottom: -5px;
+      left: -5px;
+      cursor: nesw-resize;
+    }
+    .handle.br {
+      bottom: -5px;
+      right: -5px;
+      cursor: nwse-resize;
+    }
+
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      align-items: center;
+      padding-top: 10px;
+      border-top: 1px solid var(--border-color);
+    }
+    .spacer {
+      flex: 1;
+    }
+
+    ion-button {
+      --padding-start: 12px;
+      --padding-end: 12px;
+    }
+  `;
+  }
+  willUpdate(changed) {
+    if (changed.has("value") && this.value) {
+      this.rect = this.clampRect(this.value);
+    }
+    if (changed.has("aspect") && !changed.has("value")) {
+      this.rect = this.applyAspect(this.rect);
+    }
+  }
+  // --- Geometría -----------------------------------------------------------
+  /** Limita un rect a los bordes [0..100] del viewport. */
+  clampRect(r) {
+    const width = Math.max(MIN_PCT, Math.min(100, r.width));
+    const height = Math.max(MIN_PCT, Math.min(100, r.height));
+    const x = Math.max(0, Math.min(100 - width, r.x));
+    const y = Math.max(0, Math.min(100 - height, r.y));
+    return { x, y, width, height };
+  }
+  /** Aspect ratio del viewport en px (para convertir proporciones de imagen ↔ % de viewport). */
+  vpAspect() {
+    const r = this.vpRect ?? this.renderRoot.querySelector(".viewport")?.getBoundingClientRect();
+    if (r && r.height > 0) return r.width / r.height;
+    return 4 / 3;
+  }
+  /** Re-encaja un rect para cumplir el aspect ratio activo (anclado en su esquina top-left). */
+  applyAspect(r) {
+    const def = ASPECTS.find((a) => a.key === this.aspect);
+    if (!def || def.ratio == null) return this.clampRect(r);
+    const va = this.vpAspect();
+    let width = r.width;
+    let height = width * va / def.ratio;
+    if (height > 100) {
+      height = 100;
+      width = height * def.ratio / va;
+    }
+    const x = Math.max(0, Math.min(100 - width, r.x));
+    const y = Math.max(0, Math.min(100 - height, r.y));
+    return { x, y, width, height };
+  }
+  // --- Pointer drag / resize ----------------------------------------------
+  onPointerDown(mode, ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const vp = this.renderRoot.querySelector(".viewport");
+    if (!vp) return;
+    this.vpRect = vp.getBoundingClientRect();
+    this.dragMode = mode;
+    this.startX = ev.clientX;
+    this.startY = ev.clientY;
+    this.startRect = { ...this.rect };
+    this.activePointer = ev.pointerId;
+    ev.currentTarget.setPointerCapture?.(ev.pointerId);
+    window.addEventListener("pointermove", this.onPointerMove);
+    window.addEventListener("pointerup", this.onPointerUp);
+    window.addEventListener("pointercancel", this.onPointerUp);
+  }
+  /** Redimensiona desde una esquina, respetando mínimo, bordes y aspect ratio. */
+  resize(s, dx, dy, mode) {
+    let { x, y, width, height } = s;
+    const right = s.x + s.width;
+    const bottom = s.y + s.height;
+    if (mode === "tl") {
+      x = Math.min(s.x + dx, right - MIN_PCT);
+      y = Math.min(s.y + dy, bottom - MIN_PCT);
+      x = Math.max(0, x);
+      y = Math.max(0, y);
+      width = right - x;
+      height = bottom - y;
+    } else if (mode === "tr") {
+      y = Math.min(s.y + dy, bottom - MIN_PCT);
+      y = Math.max(0, y);
+      width = Math.max(MIN_PCT, Math.min(100 - s.x, s.width + dx));
+      height = bottom - y;
+    } else if (mode === "bl") {
+      x = Math.min(s.x + dx, right - MIN_PCT);
+      x = Math.max(0, x);
+      width = right - x;
+      height = Math.max(MIN_PCT, Math.min(100 - s.y, s.height + dy));
+    } else {
+      width = Math.max(MIN_PCT, Math.min(100 - s.x, s.width + dx));
+      height = Math.max(MIN_PCT, Math.min(100 - s.y, s.height + dy));
+    }
+    let next = { x, y, width, height };
+    const def = ASPECTS.find((a) => a.key === this.aspect);
+    if (def && def.ratio != null) {
+      const va = this.vpAspect();
+      const newHeight = next.width * va / def.ratio;
+      const fixTop = mode === "tl" || mode === "tr";
+      const fixRight = mode === "tr" || mode === "br";
+      let nx = fixRight ? right - next.width : x;
+      let ny = fixTop ? bottom - newHeight : y;
+      let nh = newHeight;
+      let nw = next.width;
+      if (ny < 0 || ny + nh > 100) {
+        nh = Math.min(fixTop ? bottom : 100 - ny, 100);
+        nw = nh * def.ratio / va;
+        nx = fixRight ? right - nw : x;
+        ny = fixTop ? bottom - nh : y;
+      }
+      next = { x: nx, y: ny, width: nw, height: nh };
+    }
+    return this.clampRect(next);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("pointermove", this.onPointerMove);
+    window.removeEventListener("pointerup", this.onPointerUp);
+    window.removeEventListener("pointercancel", this.onPointerUp);
+  }
+  // --- Acciones ------------------------------------------------------------
+  setAspect(a) {
+    this.aspect = a;
+    this.rect = this.applyAspect(this.rect);
+  }
+  emitCrop() {
+    this.dispatchEvent(
+      new CustomEvent("ok-crop", {
+        detail: { rect: { ...this.rect } },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  emitCancel() {
+    this.dispatchEvent(new CustomEvent("ok-cancel", { bubbles: true, composed: true }));
+  }
+  render() {
+    const r = this.rect;
+    const cropStyle = `top:${r.y}%;left:${r.x}%;width:${r.width}%;height:${r.height}%`;
+    return html`
+      <div class="cropper" part="cropper">
+        <div class="viewport" part="viewport">
+          ${this.src ? html`<img class="viewport__img" src=${this.src} alt="" draggable="false" />` : null}
+          <div
+            class="crop"
+            part="crop"
+            style=${cropStyle}
+            role="group"
+            aria-label="Área de recorte"
+            @pointerdown=${(e) => this.onPointerDown("move", e)}
+          >
+            <span
+              class="handle tl"
+              part="handle"
+              @pointerdown=${(e) => this.onPointerDown("tl", e)}
+            ></span>
+            <span
+              class="handle tr"
+              part="handle"
+              @pointerdown=${(e) => this.onPointerDown("tr", e)}
+            ></span>
+            <span
+              class="handle bl"
+              part="handle"
+              @pointerdown=${(e) => this.onPointerDown("bl", e)}
+            ></span>
+            <span
+              class="handle br"
+              part="handle"
+              @pointerdown=${(e) => this.onPointerDown("br", e)}
+            ></span>
+          </div>
+        </div>
+
+        <div class="toolbar" part="toolbar" role="toolbar" aria-label="Opciones de recorte">
+          ${ASPECTS.map(
+      (a) => html`
+              <ion-button
+                size="small"
+                fill=${this.aspect === a.key ? "solid" : "clear"}
+                aria-pressed=${this.aspect === a.key ? "true" : "false"}
+                @click=${() => this.setAspect(a.key)}
+              >
+                ${a.label}
+              </ion-button>
+            `
+    )}
+          <span class="spacer"></span>
+          <ion-button size="small" fill="clear" color="medium" @click=${() => this.emitCancel()}>
+            ${this.cancelLabel}
+          </ion-button>
+          <ion-button size="small" fill="solid" @click=${() => this.emitCrop()}>
+            ${this.cropLabel}
+          </ion-button>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkCropper.prototype, "src");
+__decorateClass([
+  property()
+], OkCropper.prototype, "aspect");
+__decorateClass([
+  property({ attribute: false })
+], OkCropper.prototype, "value");
+__decorateClass([
+  property({ attribute: "cancel-label" })
+], OkCropper.prototype, "cancelLabel");
+__decorateClass([
+  property({ attribute: "crop-label" })
+], OkCropper.prototype, "cropLabel");
+__decorateClass([
+  state()
+], OkCropper.prototype, "rect");
+define("ok-cropper", OkCropper);
+export {
+  OkCropper
+};