@erplora/outfitkit 0.1.1

package/dist/ok-drawer.js

@@ -0,0 +1,357 @@
+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 = {
+  close: "Close"
+};
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), ion-button:not([disabled]), ion-input, ion-searchbar, [tabindex]:not([tabindex="-1"])';
+class OkDrawer extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.side = "end";
+    this.width = "420px";
+    this.scrim = true;
+    this.dismissible = true;
+    this.labels = {};
+    this.previousFocus = null;
+    this.hasFooter = false;
+    this.onDocKeydown = (e) => {
+      if (!this.open) return;
+      if (e.key === "Escape") {
+        if (this.dismissible) {
+          e.preventDefault();
+          this.requestClose("esc");
+        }
+        return;
+      }
+      if (e.key === "Tab") this.trapFocus(e);
+    };
+  }
+  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));
+      --panel-bg: var(--ok-drawer-bg, var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #ffffff))));
+      --scrim-bg: var(--ok-scrim, rgba(0, 0, 0, 0.4));
+      --border-soft: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.08));
+      --shadow: var(--ok-shadow-md, 0 10px 40px rgba(0, 0, 0, 0.22));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* El host no ocupa caja: scrim y panel van a position:fixed sobre todo. */
+      display: contents;
+    }
+
+    /* Scrim a pantalla completa (cierra al click si dismissible). */
+    .scrim {
+      position: fixed;
+      inset: 0;
+      z-index: 2000;
+      background: var(--scrim-bg);
+      animation: fade-in 180ms ease;
+    }
+
+    /* Panel lateral fijo: columna header · body (scroll) · footer. */
+    .panel {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      z-index: 2001;
+      /* Cadena: token global → prop width (inyectada como var local) → 420px. */
+      width: var(--ok-drawer-width, var(--drawer-width, 420px));
+      max-width: 100vw;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      background: var(--panel-bg);
+      box-shadow: var(--shadow);
+      font-family: var(--font);
+      color: var(--color);
+      /* Lado por defecto: end (derecha en LTR). */
+      inset-inline-end: 0;
+      border-inline-start: 1px solid var(--border-soft);
+      animation: slide-in-end 200ms ease;
+    }
+    :host([side='start']) .panel {
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+      border-inline-start: 0;
+      border-inline-end: 1px solid var(--border-soft);
+      animation: slide-in-start 200ms ease;
+    }
+
+    @keyframes fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes slide-in-end {
+      from { transform: translateX(100%); }
+      to { transform: translateX(0); }
+    }
+    @keyframes slide-in-start {
+      from { transform: translateX(-100%); }
+      to { transform: translateX(0); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .scrim,
+      .panel {
+        animation: none;
+      }
+    }
+
+    /* Cabecera: icono + título + acciones extra + botón X. */
+    .header {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      padding: 0.85rem 1rem;
+      border-bottom: 1px solid var(--border-soft);
+    }
+    .header > ion-icon {
+      flex: 0 0 auto;
+      font-size: 1.25rem;
+      color: var(--color-muted);
+    }
+    .heading {
+      flex: 1 1 auto;
+      min-width: 0;
+      margin: 0;
+      font-size: 1.05rem;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    /* Acciones extra de cabecera (slot header-actions) + botón cerrar. */
+    .header-actions {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    .close {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      background: none;
+      color: var(--color-muted);
+      font-size: 1.25rem;
+      cursor: pointer;
+      transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .close:hover {
+        background: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+        color: var(--color);
+      }
+    }
+
+    /* Cuerpo: scroll interno. */
+    .body {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+
+    /* Pie fijo opcional (se oculta si el slot está vacío). */
+    .footer {
+      flex: 0 0 auto;
+      padding: 0.75rem 1rem;
+      border-top: 1px solid var(--border-soft);
+    }
+    .footer.empty {
+      display: none;
+    }
+
+    /* En móvil el panel ocupa todo el ancho. */
+    @media (max-width: 640px) {
+      .panel {
+        width: 100%;
+        border: 0;
+      }
+    }
+  `;
+  }
+  /** Textos efectivos (defaults inglés + overrides). */
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this.onDocKeydown);
+  }
+  // ── Apertura / cierre ──────────────────────────────────────────────────────
+  updated(changed) {
+    if (!changed.has("open")) return;
+    const was = changed.get("open");
+    if (this.open && !was) this.afterOpen();
+    else if (!this.open && was) this.afterClose();
+  }
+  // Al abrir: guarda el foco actual, enfoca el panel y arma el teclado global.
+  afterOpen() {
+    this.previousFocus = document.activeElement ?? null;
+    document.addEventListener("keydown", this.onDocKeydown);
+    this.updateComplete.then(() => {
+      const first = this.focusables()[0];
+      (first ?? this.panel)?.focus();
+    });
+    this.dispatchEvent(
+      new CustomEvent("ok-open", { detail: { open: true }, bubbles: true, composed: true })
+    );
+  }
+  // Al cerrar: desarma el teclado y restaura el foco previo.
+  afterClose() {
+    document.removeEventListener("keydown", this.onDocKeydown);
+    this.previousFocus?.focus?.();
+    this.previousFocus = null;
+  }
+  /**
+   * Gesto de cierre (scrim/esc/botón): emite `ok-close` CANCELABLE con la razón. Si nadie hace
+   * `preventDefault()` se auto-cierra (fallback no-controlado); un padre controlado puede vetar.
+   */
+  requestClose(reason) {
+    const ev = new CustomEvent("ok-close", {
+      detail: { reason },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    const proceed = this.dispatchEvent(ev);
+    if (proceed) this.open = false;
+  }
+  /** Abre el drawer (azúcar imperativo; equivale a `open = true`). */
+  show() {
+    this.open = true;
+  }
+  /** Cierra el drawer sin pasar por el gesto cancelable (azúcar imperativo). */
+  hide() {
+    this.open = false;
+  }
+  // ── Focus trap ─────────────────────────────────────────────────────────────
+  // Enfocables del panel (shadow) + del contenido slotted (light DOM del host).
+  focusables() {
+    const inShadow = this.panel ? Array.from(this.panel.querySelectorAll(FOCUSABLE)) : [];
+    const inLight = Array.from(this.querySelectorAll(FOCUSABLE));
+    return [...inShadow, ...inLight].filter((el) => el.offsetParent !== null || el === document.activeElement);
+  }
+  // Mantiene Tab/Shift+Tab ciclando dentro del drawer mientras está abierto.
+  trapFocus(e) {
+    const list = this.focusables();
+    if (!list.length) {
+      e.preventDefault();
+      this.panel?.focus();
+      return;
+    }
+    const active = this.shadowRoot?.activeElement ?? document.activeElement;
+    const idx = active ? list.indexOf(active) : -1;
+    if (e.shiftKey) {
+      if (idx <= 0) {
+        e.preventDefault();
+        list[list.length - 1].focus();
+      }
+    } else if (idx === -1 || idx === list.length - 1) {
+      e.preventDefault();
+      list[0].focus();
+    }
+  }
+  // ── Interacción ────────────────────────────────────────────────────────────
+  // Cierra al click en el scrim (solo si dismissible).
+  onScrimClick() {
+    if (this.dismissible) this.requestClose("scrim");
+  }
+  onFooterSlotChange(e) {
+    const slot = e.target;
+    const has = slot.assignedNodes({ flatten: true }).length > 0;
+    if (has !== this.hasFooter) {
+      this.hasFooter = has;
+      this.requestUpdate();
+    }
+  }
+  // ── Render ─────────────────────────────────────────────────────────────────
+  render() {
+    if (!this.open) return html``;
+    return html`
+      ${this.scrim ? html`<div class="scrim" @click=${() => this.onScrimClick()}></div>` : ""}
+      <aside
+        class="panel"
+        style="--drawer-width:${this.width}"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.heading ?? "drawer"}
+        tabindex="-1"
+      >
+        <header class="header">
+          ${this.icon ? html`<ion-icon .name=${this.icon} aria-hidden="true"></ion-icon>` : ""}
+          ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : html`<span class="heading"></span>`}
+          <div class="header-actions">
+            <slot name="header-actions"></slot>
+            ${this.dismissible ? html`<button
+                  class="close"
+                  type="button"
+                  aria-label=${this.t.close}
+                  title=${this.t.close}
+                  @click=${() => this.requestClose("button")}
+                >
+                  <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
+                </button>` : ""}
+          </div>
+        </header>
+        <div class="body"><slot></slot></div>
+        <footer class=${this.hasFooter ? "footer" : "footer empty"}>
+          <slot name="footer" @slotchange=${(e) => this.onFooterSlotChange(e)}></slot>
+        </footer>
+      </aside>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkDrawer.prototype, "open");
+__decorateClass([
+  property({ reflect: true })
+], OkDrawer.prototype, "side");
+__decorateClass([
+  property()
+], OkDrawer.prototype, "width");
+__decorateClass([
+  property()
+], OkDrawer.prototype, "heading");
+__decorateClass([
+  property()
+], OkDrawer.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean })
+], OkDrawer.prototype, "scrim");
+__decorateClass([
+  property({ type: Boolean })
+], OkDrawer.prototype, "dismissible");
+__decorateClass([
+  property({ attribute: false })
+], OkDrawer.prototype, "labels");
+__decorateClass([
+  query(".panel")
+], OkDrawer.prototype, "panel");
+define("ok-drawer", OkDrawer);
+export {
+  OkDrawer
+};