@erplora/outfitkit 0.1.1

package/dist/ok-pagination.js

@@ -0,0 +1,366 @@
+import { LitElement, css, html, nothing } 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 OkPagination extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.total = 0;
+    this.page = 1;
+    this.pageSize = 20;
+    this.siblingCount = 1;
+    this.boundaryCount = 1;
+    this.variant = "default";
+    this.info = false;
+    this.label = "Paginación";
+  }
+  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-soft: var(--ok-surface-soft, var(--ion-color-light, #f4f5f8));
+      --line: var(--ok-border-color, var(--ion-border-color, #e0e2e7));
+      --line-strong: var(--ok-border-color-strong, var(--ion-color-step-200, #cdd0d6));
+      --ink: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --ink-2: var(--ok-text-color-soft, var(--ion-color-step-650, #545b66));
+      --ink-3: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --brand: var(--ok-color-primary, var(--ion-color-primary, #3880ff));
+      --brand-fg: var(--ok-color-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --radius: var(--ok-radius, var(--ion-border-radius, 8px));
+      --radius-sm: calc(var(--radius) - 2px);
+    }
+
+    .wrap {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 14px;
+      width: 100%;
+      box-sizing: border-box;
+      font-size: 0.875rem;
+      color: var(--ink-3);
+    }
+
+    /* La info y el page-size quedan a los extremos; el paginador empuja al centro/derecha. */
+    .info {
+      font-variant-numeric: tabular-nums;
+    }
+    .info b {
+      color: var(--ink-2);
+      font-weight: 500;
+    }
+
+    .spacer {
+      flex: 1 1 auto;
+    }
+
+    .nav {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .nav.compact {
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      padding: 1px;
+      background: var(--bg-soft);
+      gap: 0;
+    }
+
+    /* Botón de página: ion-button fill=clear restyleado a la estética del paginador. */
+    ion-button.page {
+      --padding-start: 8px;
+      --padding-end: 8px;
+      --border-radius: var(--radius-sm);
+      --background-hover: var(--bg-soft);
+      --color: var(--ink-2);
+      --color-hover: var(--ink);
+      min-width: 32px;
+      height: 32px;
+      margin: 0;
+      font-size: 0.875rem;
+      font-variant-numeric: tabular-nums;
+      --border-width: 1px;
+      --border-style: solid;
+      --border-color: var(--line);
+      --background: var(--bg);
+    }
+
+    /* Chevrons prev/next: sin borde de caja, look ligero. */
+    ion-button.chev {
+      --border-width: 0;
+      --background: transparent;
+    }
+
+    /* Página activa: relleno de marca. */
+    ion-button.page.active {
+      --background: var(--brand);
+      --background-hover: var(--brand);
+      --border-color: var(--brand);
+      --color: var(--brand-fg);
+      --color-hover: var(--brand-fg);
+      font-weight: 600;
+    }
+
+    .nav.compact ion-button.page {
+      --border-width: 0;
+      --background: transparent;
+    }
+    .nav.compact .value {
+      min-width: 56px;
+      height: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-variant-numeric: tabular-nums;
+      color: var(--ink);
+      font-weight: 500;
+      user-select: none;
+      padding: 0 8px;
+    }
+
+    .gap {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 28px;
+      height: 32px;
+      color: var(--ink-3);
+      user-select: none;
+    }
+
+    .pgsize {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.8125rem;
+    }
+    ion-select.pgsize-select {
+      --padding-start: 8px;
+      --padding-end: 4px;
+      min-height: 30px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-sm);
+      background: var(--bg-soft);
+      color: var(--ink);
+      font-size: 0.8125rem;
+    }
+
+    @media (max-width: 480px) {
+      .info {
+        order: 3;
+        width: 100%;
+        text-align: center;
+      }
+    }
+  `;
+  }
+  /** Nº total de páginas (mínimo 1). */
+  get pageCount() {
+    const size = Math.max(1, this.pageSize);
+    return Math.max(1, Math.ceil(Math.max(0, this.total) / size));
+  }
+  /** Página actual saneada al rango [1, pageCount]. */
+  get current() {
+    return Math.min(Math.max(1, this.page), this.pageCount);
+  }
+  /** Construye la lista de tokens (números + elipsis) según sibling/boundary counts. */
+  get range() {
+    const count = this.pageCount;
+    const current = this.current;
+    const siblings = Math.max(0, this.siblingCount);
+    const boundaries = Math.max(1, this.boundaryCount);
+    const totalSlots = boundaries * 2 + siblings * 2 + 3;
+    if (count <= totalSlots) {
+      return this.seq(1, count);
+    }
+    const leftSibling = Math.max(current - siblings, boundaries + 2);
+    const rightSibling = Math.min(current + siblings, count - boundaries - 1);
+    const showLeftGap = leftSibling > boundaries + 2;
+    const showRightGap = rightSibling < count - boundaries - 1;
+    const tokens = [];
+    tokens.push(...this.seq(1, boundaries));
+    if (showLeftGap) {
+      tokens.push("ellipsis-start");
+    } else {
+      tokens.push(...this.seq(boundaries + 1, leftSibling - 1));
+    }
+    tokens.push(...this.seq(leftSibling, rightSibling));
+    if (showRightGap) {
+      tokens.push("ellipsis-end");
+    } else {
+      tokens.push(...this.seq(rightSibling + 1, count - boundaries));
+    }
+    tokens.push(...this.seq(count - boundaries + 1, count));
+    return tokens;
+  }
+  /** Rango entero [from, to] como array (vacío si from > to). */
+  seq(from, to) {
+    const out = [];
+    for (let i = from; i <= to; i++) out.push(i);
+    return out;
+  }
+  goTo(target) {
+    const next = Math.min(Math.max(1, target), this.pageCount);
+    if (next === this.current) return;
+    this.dispatchEvent(
+      new CustomEvent("ok-page-change", {
+        detail: { page: next },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onSizeChange(value) {
+    if (!Number.isFinite(value) || value === this.pageSize) return;
+    this.dispatchEvent(
+      new CustomEvent("ok-page-size-change", {
+        detail: { size: value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /** Chevron SVG (izq/der) dibujado a mano. */
+  chevron(dir) {
+    const d = dir === "prev" ? "M15 18l-6-6 6-6" : "M9 6l6 6-6 6";
+    return html`<svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="${d}"></path>
+    </svg>`;
+  }
+  renderInfo() {
+    if (!this.info) return nothing;
+    if (this.total <= 0) {
+      return html`<span class="info"><b>0</b> elementos</span>`;
+    }
+    const size = Math.max(1, this.pageSize);
+    const from = (this.current - 1) * size + 1;
+    const to = Math.min(this.current * size, this.total);
+    return html`<span class="info"><b>${from}–${to}</b> de <b>${this.total}</b></span>`;
+  }
+  renderPageSize() {
+    const opts = this.pageSizeOptions;
+    if (!opts || opts.length === 0) return nothing;
+    return html`<span class="pgsize">
+      <span>Filas</span>
+      <ion-select
+        class="pgsize-select"
+        interface="popover"
+        aria-label="Filas por página"
+        .value=${this.pageSize}
+        @ionChange=${(e) => this.onSizeChange(Number(e.target.value))}
+      >
+        ${opts.map((n) => html`<ion-select-option .value=${n}>${n}</ion-select-option>`)}
+      </ion-select>
+    </span>`;
+  }
+  renderNav() {
+    const current = this.current;
+    const count = this.pageCount;
+    const atStart = current <= 1;
+    const atEnd = current >= count;
+    const prev = html`<ion-button
+      class="page chev"
+      fill="clear"
+      aria-label="Página anterior"
+      ?disabled=${atStart}
+      @click=${() => this.goTo(current - 1)}
+      >${this.chevron("prev")}</ion-button
+    >`;
+    const next = html`<ion-button
+      class="page chev"
+      fill="clear"
+      aria-label="Página siguiente"
+      ?disabled=${atEnd}
+      @click=${() => this.goTo(current + 1)}
+      >${this.chevron("next")}</ion-button
+    >`;
+    if (this.variant === "compact") {
+      return html`<nav class="nav compact" role="navigation" aria-label=${this.label}>
+        ${prev}
+        <span class="value" aria-current="page" aria-live="polite">${current} / ${count}</span>
+        ${next}
+      </nav>`;
+    }
+    return html`<nav class="nav" role="navigation" aria-label=${this.label}>
+      ${prev}
+      ${this.range.map((tok) => {
+      if (tok === "ellipsis-start" || tok === "ellipsis-end") {
+        return html`<span class="gap" aria-hidden="true">…</span>`;
+      }
+      const active = tok === current;
+      return html`<ion-button
+          class="page ${active ? "active" : ""}"
+          fill="clear"
+          aria-label="Página ${tok}"
+          aria-current=${active ? "page" : nothing}
+          @click=${() => this.goTo(tok)}
+          >${tok}</ion-button
+        >`;
+    })}
+      ${next}
+    </nav>`;
+  }
+  render() {
+    return html`
+      <div class="wrap">
+        ${this.renderInfo()}
+        <span class="spacer"></span>
+        ${this.renderNav()}
+        ${this.renderPageSize()}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], OkPagination.prototype, "total");
+__decorateClass([
+  property({ type: Number })
+], OkPagination.prototype, "page");
+__decorateClass([
+  property({ type: Number, attribute: "page-size" })
+], OkPagination.prototype, "pageSize");
+__decorateClass([
+  property({ type: Number, attribute: "sibling-count" })
+], OkPagination.prototype, "siblingCount");
+__decorateClass([
+  property({ type: Number, attribute: "boundary-count" })
+], OkPagination.prototype, "boundaryCount");
+__decorateClass([
+  property()
+], OkPagination.prototype, "variant");
+__decorateClass([
+  property({ type: Boolean })
+], OkPagination.prototype, "info");
+__decorateClass([
+  property({ type: Array, attribute: "page-size-options" })
+], OkPagination.prototype, "pageSizeOptions");
+__decorateClass([
+  property()
+], OkPagination.prototype, "label");
+define("ok-pagination", OkPagination);
+export {
+  OkPagination
+};

package/dist/ok-pdf.js

@@ -0,0 +1,160 @@
+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;
+};
+const DEFAULT_LABELS = {
+  documentTitle: "PDF document",
+  open: "Open",
+  openAria: "Open or download PDF",
+  cannotDisplay: "This PDF cannot be displayed here.",
+  download: "Download"
+};
+class OkPdf extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.title = "";
+    this.height = "480px";
+    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));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.55));
+      --surface-bg: var(--ok-surface, var(--ion-card-background, #ffffff));
+      --viewer-bg: var(--ok-pdf-bg, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.04));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.1));
+      --border-radius: var(--ok-radius, 10px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Responsive: bloque al ancho del contenedor. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    .frame {
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      background: var(--surface-bg);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      overflow: hidden;
+    }
+    /* Barra superior mínima: título a la izquierda, acción a la derecha. */
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.4rem 0.4rem 0.4rem 0.75rem;
+      border-bottom: 1px solid var(--border-color);
+    }
+    .toolbar .title {
+      flex: 1 1 auto;
+      min-width: 0;
+      font-size: 0.88rem;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    ion-button {
+      margin: 0;
+      flex: 0 0 auto;
+    }
+    /* Zona del visor: el <object> ocupa todo el alto indicado. */
+    .viewer {
+      position: relative;
+      width: 100%;
+      background: var(--viewer-bg);
+    }
+    object {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+    /* Fallback visible si el navegador no incrusta el PDF. */
+    .fallback {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.6rem;
+      height: 100%;
+      padding: 1.5rem;
+      text-align: center;
+      color: var(--color-muted);
+    }
+    .fallback ion-icon {
+      font-size: 2.2rem;
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Abre el PDF en una pestaña nueva (descarga / vista a pantalla completa del navegador).
+  open() {
+    if (this.src) window.open(this.src, "_blank", "noopener");
+  }
+  render() {
+    return html`
+      <div class="frame">
+        <div class="toolbar">
+          <span class="title">${this.title || this.t.documentTitle}</span>
+          <ion-button
+            fill="clear"
+            size="small"
+            aria-label=${this.t.openAria}
+            @click=${this.open}
+          >
+            <ion-icon slot="start" name="open-outline"></ion-icon>
+            ${this.t.open}
+          </ion-button>
+        </div>
+        <div class="viewer" style=${`height:${this.height}`}>
+          <object data=${this.src} type="application/pdf">
+            <!-- Fallback: el navegador no pudo incrustar el PDF → enlace de descarga. -->
+            <div class="fallback">
+              <ion-icon name="document-text-outline"></ion-icon>
+              <span>${this.t.cannotDisplay}</span>
+              <ion-button fill="solid" size="small" @click=${this.open}>
+                <ion-icon slot="start" name="download-outline"></ion-icon>
+                ${this.t.download}
+              </ion-button>
+            </div>
+          </object>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkPdf.prototype, "src");
+__decorateClass([
+  property()
+], OkPdf.prototype, "title");
+__decorateClass([
+  property()
+], OkPdf.prototype, "height");
+__decorateClass([
+  property({ attribute: false })
+], OkPdf.prototype, "labels");
+define("ok-pdf", OkPdf);
+export {
+  OkPdf
+};