@erplora/outfitkit 0.1.1

package/dist/ok-otp.js

@@ -0,0 +1,199 @@
+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 = {
+  digitLabel: (index, length) => `Digit ${index} of ${length}`
+};
+class OkOtp extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.length = 6;
+    this.value = "";
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --background: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.25));
+      --border-color-focus: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --border-radius: var(--ok-radius, 8px);
+      --gap: var(--ok-otp-gap, 0.5rem);
+      --size: var(--ok-otp-size, 3rem);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: var(--gap);
+    }
+    input {
+      width: var(--size);
+      height: var(--size);
+      box-sizing: border-box;
+      text-align: center;
+      font-family: var(--font);
+      font-size: calc(var(--size) * 0.45);
+      font-weight: 600;
+      color: var(--color);
+      background: var(--background);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      outline: none;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+      -moz-appearance: textfield;
+    }
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    input:focus {
+      border-color: var(--border-color-focus);
+      box-shadow: 0 0 0 2px rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.2);
+    }
+    input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Devuelve los inputs del shadow en orden.
+  get inputs() {
+    return Array.from(this.renderRoot.querySelectorAll("input"));
+  }
+  // Pone el foco en una casilla por índice (si existe) y selecciona su contenido.
+  focusAt(index) {
+    const el = this.inputs[index];
+    if (el) {
+      el.focus();
+      el.select();
+    }
+  }
+  // Reconstruye `value` desde el contenido de las casillas y emite eventos.
+  syncFromInputs() {
+    const digits = this.inputs.map((el) => el.value).join("");
+    this.value = digits;
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { value: digits },
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (digits.length === this.length && /^\d+$/.test(digits)) {
+      this.dispatchEvent(
+        new CustomEvent("ok-complete", {
+          detail: { value: digits },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  // Teclear en una casilla: solo dígitos, fuerza un único carácter y auto-avanza.
+  onInput(e, index) {
+    const el = e.target;
+    const cleaned = el.value.replace(/\D/g, "");
+    if (cleaned.length > 1) {
+      this.distribute(cleaned, index);
+      return;
+    }
+    el.value = cleaned;
+    if (cleaned) this.focusAt(index + 1);
+    this.syncFromInputs();
+  }
+  // Backspace en casilla vacía → retrocede y borra la anterior.
+  onKeydown(e, index) {
+    const el = e.target;
+    if (e.key === "Backspace" && !el.value && index > 0) {
+      e.preventDefault();
+      const prev = this.inputs[index - 1];
+      if (prev) {
+        prev.value = "";
+        this.focusAt(index - 1);
+        this.syncFromInputs();
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      this.focusAt(index - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      this.focusAt(index + 1);
+    }
+  }
+  // Pegar: reparte los dígitos del portapapeles desde la casilla `start`.
+  onPaste(e, start) {
+    e.preventDefault();
+    const text = (e.clipboardData?.getData("text") ?? "").replace(/\D/g, "");
+    if (text) this.distribute(text, start);
+  }
+  // Reparte una cadena de dígitos por las casillas a partir de `start`.
+  distribute(digits, start) {
+    const inputs = this.inputs;
+    let i = start;
+    for (const ch of digits) {
+      if (i >= inputs.length) break;
+      inputs[i].value = ch;
+      i++;
+    }
+    this.focusAt(Math.min(i, inputs.length - 1));
+    this.syncFromInputs();
+  }
+  // Sincroniza las casillas con `value` cuando cambia desde fuera.
+  digitAt(index) {
+    return this.value[index] ?? "";
+  }
+  // Tras renderizar, asegura que el foco inicial sea cómodo si está vacío (no fuerza foco).
+  firstUpdated() {
+    void this.firstInput;
+  }
+  render() {
+    const slots = Array.from({ length: Math.max(0, this.length) }, (_, i) => i);
+    return html`${slots.map(
+      (i) => html`<input
+        type="text"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        maxlength="1"
+        aria-label=${this.t.digitLabel(i + 1, this.length)}
+        .value=${this.digitAt(i)}
+        @input=${(e) => this.onInput(e, i)}
+        @keydown=${(e) => this.onKeydown(e, i)}
+        @paste=${(e) => this.onPaste(e, i)}
+        @focus=${(e) => e.target.select()}
+      />`
+    )}`;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], OkOtp.prototype, "length");
+__decorateClass([
+  property({ type: String })
+], OkOtp.prototype, "value");
+__decorateClass([
+  property({ attribute: false })
+], OkOtp.prototype, "labels");
+__decorateClass([
+  query("input")
+], OkOtp.prototype, "firstInput");
+define("ok-otp", OkOtp);
+export {
+  OkOtp
+};

package/dist/ok-page-header.js

@@ -0,0 +1,202 @@
+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;
+};
+class OkPageHeader extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.heading = "";
+    this.level = 1;
+    this.compact = false;
+    this.hasBreadcrumbs = false;
+    this.hasMeta = false;
+    this.hasActions = false;
+    this.hasExtra = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.6));
+      --spacing: var(--ok-spacing, 1rem);
+
+      /* Bloque a ancho completo del contenedor, sin fondo propio. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      padding-block: var(--spacing);
+      box-sizing: border-box;
+    }
+    :host([compact]) {
+      padding-block: calc(var(--spacing) * 0.5);
+    }
+
+    /* Breadcrumbs encima del título (hueco para ion-breadcrumbs). */
+    .crumbs {
+      margin-bottom: calc(var(--spacing) * 0.5);
+    }
+    .crumbs.empty {
+      display: none;
+    }
+
+    /* Fila principal: texto a la izquierda, acciones a la derecha. */
+    .row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--spacing);
+      flex-wrap: wrap;
+    }
+    .text {
+      flex: 1 1 24rem;
+      min-width: 0;
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 1.65rem;
+      font-weight: 700;
+      line-height: 1.2;
+      letter-spacing: -0.015em;
+      overflow-wrap: break-word;
+    }
+    /* Sub-página (level=2) y variante compacta: título algo menor. */
+    .heading.h2,
+    :host([compact]) .heading {
+      font-size: 1.3rem;
+    }
+
+    .description {
+      margin: 0.35rem 0 0;
+      font-size: 0.95rem;
+      color: var(--color-muted);
+      max-width: 70ch;
+    }
+
+    /* Línea de metadatos (fechas, ids…) bajo el título/descipción. */
+    .meta {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.35rem 1rem;
+      margin-top: 0.45rem;
+      font-size: 0.85rem;
+      color: var(--color-muted);
+    }
+    .meta.empty {
+      display: none;
+    }
+
+    /* Acciones a la derecha (ion-button); en móvil bajan debajo del título. */
+    .actions {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+    .actions.empty {
+      display: none;
+    }
+
+    /* Contenido extra bajo la descripción (chips de filtros, pills…). */
+    .extra {
+      margin-top: calc(var(--spacing) * 0.75);
+    }
+    .extra.empty {
+      display: none;
+    }
+
+    /* < 640px: stack vertical (acciones bajo el título, ancho completo). */
+    @media (max-width: 640px) {
+      .row {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .actions {
+        justify-content: flex-start;
+      }
+    }
+  `;
+  }
+  // slotchange genérico → actualiza el flag del slot correspondiente.
+  onSlotChange(e) {
+    const slot = e.target;
+    const has = slot.assignedNodes({ flatten: true }).some(
+      (n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? "").trim().length > 0
+    );
+    switch (slot.name) {
+      case "breadcrumbs":
+        this.hasBreadcrumbs = has;
+        break;
+      case "meta":
+        this.hasMeta = has;
+        break;
+      case "actions":
+        this.hasActions = has;
+        break;
+      default:
+        this.hasExtra = has;
+    }
+  }
+  render() {
+    const onSlot = (e) => this.onSlotChange(e);
+    return html`
+      <div class=${this.hasBreadcrumbs ? "crumbs" : "crumbs empty"}>
+        <slot name="breadcrumbs" @slotchange=${onSlot}></slot>
+      </div>
+      <div class="row">
+        <div class="text">
+          ${this.level === 2 ? html`<h2 class="heading h2">${this.heading}</h2>` : html`<h1 class="heading">${this.heading}</h1>`}
+          ${this.description ? html`<p class="description">${this.description}</p>` : ""}
+          <div class=${this.hasMeta ? "meta" : "meta empty"}>
+            <slot name="meta" @slotchange=${onSlot}></slot>
+          </div>
+        </div>
+        <div class=${this.hasActions ? "actions" : "actions empty"}>
+          <slot name="actions" @slotchange=${onSlot}></slot>
+        </div>
+      </div>
+      <div class=${this.hasExtra ? "extra" : "extra empty"}>
+        <slot @slotchange=${onSlot}></slot>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkPageHeader.prototype, "heading");
+__decorateClass([
+  property({ type: Number })
+], OkPageHeader.prototype, "level");
+__decorateClass([
+  property()
+], OkPageHeader.prototype, "description");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkPageHeader.prototype, "compact");
+__decorateClass([
+  state()
+], OkPageHeader.prototype, "hasBreadcrumbs");
+__decorateClass([
+  state()
+], OkPageHeader.prototype, "hasMeta");
+__decorateClass([
+  state()
+], OkPageHeader.prototype, "hasActions");
+__decorateClass([
+  state()
+], OkPageHeader.prototype, "hasExtra");
+define("ok-page-header", OkPageHeader);
+export {
+  OkPageHeader
+};