@erplora/outfitkit 0.1.1

package/dist/ok-combo.js

@@ -0,0 +1,294 @@
+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 = {
+  placeholder: "Search…",
+  empty: "No results"
+};
+class OkCombo extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.value = "";
+    this.placeholder = "";
+    this.labels = {};
+    this.query = "";
+    this.open = false;
+    this.activeIndex = -1;
+    this.onDocClick = (e) => {
+      if (!this.open) return;
+      if (!e.composedPath().includes(this)) this.close();
+    };
+  }
+  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));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --background: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.18));
+      --border-radius: var(--ok-radius, 8px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      --shadow: var(--ok-shadow, 0 6px 24px rgba(0, 0, 0, 0.14));
+
+      /* Por defecto ocupa el ancho del contenedor y es responsive. */
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      position: relative;
+      color: var(--color);
+      font-family: var(--font);
+      font-size: 0.95rem;
+    }
+    .field {
+      position: relative;
+      width: 100%;
+    }
+    /* El ion-input se estiliza vía sus propias vars (estilo Ionic). */
+    ion-input {
+      --background: var(--background);
+      --color: var(--color);
+      --placeholder-color: var(--color-muted);
+      --border-radius: var(--border-radius);
+      width: 100%;
+    }
+    /* Chevron decorativo a la derecha del campo. */
+    .chevron {
+      position: absolute;
+      right: 0.6rem;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-flex;
+      align-items: center;
+      color: var(--color-muted);
+      pointer-events: none;
+      transition: transform 0.18s ease;
+    }
+    :host([data-open]) .chevron {
+      transform: translateY(-50%) rotate(180deg);
+    }
+    /* Dropdown de resultados: posicionado bajo el campo, ancho del contenedor. */
+    .dropdown {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(100% + 4px);
+      z-index: 50;
+      max-height: 16rem;
+      overflow-y: auto;
+      margin: 0;
+      padding: 0.25rem;
+      list-style: none;
+      background: var(--background);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+      box-sizing: border-box;
+    }
+    .option {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0.5rem 0.6rem;
+      border-radius: calc(var(--border-radius) - 2px);
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      transition: background-color var(--ok-transition, 150ms ease),
+        color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease),
+        box-shadow var(--ok-transition, 150ms ease), transform 120ms ease;
+    }
+    @media (hover: hover) {
+      .option:hover {
+        background: var(--hover-bg);
+      }
+    }
+    .option:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    .option.active {
+      background: var(--primary-color);
+      color: var(--primary-contrast);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .option:hover,
+      .option:active {
+        transform: none;
+      }
+    }
+    .empty {
+      padding: 0.6rem;
+      color: var(--color-muted);
+      text-align: center;
+    }
+  `;
+  }
+  // Textos efectivos: defaults inglés sobreescritos por los pasados desde fuera.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Placeholder efectivo: prop explícita si se pasó, si no el de los labels.
+  get effectivePlaceholder() {
+    return this.placeholder || this.t.placeholder;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.onDocClick, true);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.onDocClick, true);
+    super.disconnectedCallback();
+  }
+  // Texto a mostrar en el input: si está escribiendo usa la query, si no, el label del value.
+  get displayText() {
+    if (this.open) return this.query;
+    const current = this.options.find((o) => o.value === this.value);
+    return current ? current.label : this.query;
+  }
+  // Opciones que casan con la query (case-insensitive, substring).
+  get filtered() {
+    const q = this.query.trim().toLowerCase();
+    if (!q) return this.options;
+    return this.options.filter((o) => o.label.toLowerCase().includes(q));
+  }
+  close() {
+    this.open = false;
+    this.activeIndex = -1;
+  }
+  // Maneja la escritura en el ion-input: actualiza query, abre dropdown y emite `ok-input`.
+  handleInput(e) {
+    const detail = e.detail;
+    const value = detail?.value ?? "";
+    this.query = value;
+    this.open = true;
+    this.activeIndex = -1;
+    this.dispatchEvent(
+      new CustomEvent("ok-input", {
+        detail: { query: value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Elige una opción: fija value, rellena input, cierra y emite `ok-change`.
+  choose(option) {
+    this.value = option.value;
+    this.query = option.label;
+    this.close();
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { value: option.value, label: option.label },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Navegación por teclado sobre la lista filtrada.
+  handleKeydown(e) {
+    const items = this.filtered;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!this.open) this.open = true;
+        if (items.length) this.activeIndex = (this.activeIndex + 1) % items.length;
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!this.open) this.open = true;
+        if (items.length)
+          this.activeIndex = (this.activeIndex - 1 + items.length) % items.length;
+        break;
+      case "Enter":
+        if (this.open && this.activeIndex >= 0 && items[this.activeIndex]) {
+          e.preventDefault();
+          this.choose(items[this.activeIndex]);
+        }
+        break;
+      case "Escape":
+        if (this.open) {
+          e.preventDefault();
+          this.close();
+        }
+        break;
+    }
+  }
+  render() {
+    const items = this.filtered;
+    this.toggleAttribute("data-open", this.open);
+    return html`<div class="field">
+      <ion-input
+        .label=${this.label ?? ""}
+        label-placement=${this.label ? "stacked" : "start"}
+        fill="outline"
+        .value=${this.displayText}
+        placeholder=${this.effectivePlaceholder}
+        @ionInput=${(e) => this.handleInput(e)}
+        @ionFocus=${() => {
+      this.open = true;
+    }}
+        @keydown=${(e) => this.handleKeydown(e)}
+      ></ion-input>
+      <span class="chevron">
+        <ion-icon name="chevron-down-outline"></ion-icon>
+      </span>
+      ${this.open ? html`<ul class="dropdown" role="listbox">
+            ${items.length ? items.map(
+      (option, i) => html`<li
+                    role="option"
+                    class=${`option ${i === this.activeIndex ? "active" : ""}`.trim()}
+                    aria-selected=${option.value === this.value ? "true" : "false"}
+                    @mouseenter=${() => {
+        this.activeIndex = i;
+      }}
+                    @click=${() => this.choose(option)}
+                  >
+                    ${option.label}
+                  </li>`
+    ) : html`<li class="empty">${this.t.empty}</li>`}
+          </ul>` : ""}
+    </div>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkCombo.prototype, "options");
+__decorateClass([
+  property()
+], OkCombo.prototype, "value");
+__decorateClass([
+  property()
+], OkCombo.prototype, "placeholder");
+__decorateClass([
+  property()
+], OkCombo.prototype, "label");
+__decorateClass([
+  property({ attribute: false })
+], OkCombo.prototype, "labels");
+__decorateClass([
+  state()
+], OkCombo.prototype, "query");
+__decorateClass([
+  state()
+], OkCombo.prototype, "open");
+__decorateClass([
+  state()
+], OkCombo.prototype, "activeIndex");
+define("ok-combo", OkCombo);
+export {
+  OkCombo
+};