@erplora/outfitkit 0.1.20 → 0.1.22

package/dist/ok-time-picker.js

@@ -1,472 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { define } from "./define.js";
-import { c as computeAnchor } from "./shared/anchor.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;
-};
-function parseHHMM(v) {
-  if (!v) return null;
-  const m = /^(\d{1,2}):(\d{1,2})$/.exec(v.trim());
-  if (!m) return null;
-  const h = Number(m[1]);
-  const mm = Number(m[2]);
-  if (h < 0 || h > 23 || mm < 0 || mm > 59) return null;
-  return h * 60 + mm;
-}
-function toHHMM(total) {
-  const t = (total % 1440 + 1440) % 1440;
-  const h = Math.floor(t / 60);
-  const mm = t % 60;
-  return `${String(h).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
-}
-const pad2 = (n) => String(n).padStart(2, "0");
-class OkTimePicker extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.value = "";
-    this.step = 5;
-    this.useAmpm = false;
-    this.min = "";
-    this.max = "";
-    this.disabled = false;
-    this.open = false;
-    this.end = false;
-    this.above = false;
-    this.onDocPointer = (e) => {
-      if (!this.open) return;
-      if (e.composedPath().includes(this)) return;
-      this.close();
-    };
-    this.onKeydown = (e) => {
-      if (e.key === "Escape" && this.open) {
-        e.stopPropagation();
-        this.close();
-      }
-    };
-  }
-  static {
-    this.styles = css`
-    :host {
-      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
-      --color: var(--ok-text-color, var(--ion-text-color, #1f2933));
-      --color-muted: var(--ok-color-medium, var(--ion-color-medium, #92949c));
-      --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #ffffff)));
-      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 31, 41, 51), 0.14));
-      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 31, 41, 51), 0.06));
-      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
-      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
-      --primary-soft: var(--ok-primary-soft, rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.14));
-      --radius: var(--ok-radius, 10px);
-      --shadow: var(--ok-shadow, 0 8px 28px rgba(0, 0, 0, 0.18));
-      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
-
-      /* Inline: ocupa solo lo que mide la pastilla. */
-      display: inline-block;
-      position: relative;
-      color: var(--color);
-      font-family: var(--font);
-    }
-
-    /* Pastilla disparadora: HH : MM (+ AM/PM) en mono tabular. */
-    .pill {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.1rem;
-      padding: 0.3rem 0.6rem;
-      border: 1px solid var(--border-color);
-      border-radius: var(--radius);
-      background: var(--surface);
-      color: inherit;
-      font-family: inherit;
-      cursor: pointer;
-      transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
-    }
-    @media (hover: hover) {
-      .pill:hover:not([disabled]) {
-        background: var(--hover-bg);
-      }
-    }
-    .pill:focus-visible {
-      outline: none;
-      border-color: var(--primary-color);
-      box-shadow: 0 0 0 3px var(--primary-soft);
-    }
-    .pill[disabled] {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .pill.open {
-      border-color: var(--primary-color);
-    }
-
-    /* Campos numéricos: mono + tabular-nums para que HH/MM no "bailen". */
-    .field {
-      font-size: 1.05rem;
-      font-weight: 600;
-      line-height: 1;
-      font-variant-numeric: tabular-nums;
-      font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
-      min-width: 1.7ch;
-      text-align: center;
-    }
-    .colon {
-      font-size: 1.05rem;
-      font-weight: 600;
-      line-height: 1;
-      opacity: 0.7;
-      padding: 0 0.05rem;
-    }
-    .meridiem {
-      margin-left: 0.3rem;
-      font-size: 0.7rem;
-      font-weight: 700;
-      letter-spacing: 0.04em;
-      color: var(--color-muted);
-    }
-    .caret {
-      margin-left: 0.35rem;
-      font-size: 0.95rem;
-      color: var(--color-muted);
-      transition: transform 180ms ease;
-    }
-    .pill.open .caret {
-      transform: rotate(180deg);
-    }
-
-    /* Popover propio: absolute (NO fixed) para no romperse bajo ancestros transformados. */
-    .panel {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      margin-top: 6px;
-      z-index: 50;
-      display: flex;
-      background: var(--surface);
-      border: 1px solid var(--border-color);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      overflow: hidden;
-    }
-    .panel.end {
-      left: auto;
-      right: 0;
-    }
-    .panel.above {
-      top: auto;
-      bottom: 100%;
-      margin-top: 0;
-      margin-bottom: 6px;
-    }
-
-    /* Columna desplazable de opciones (horas / minutos / meridiano). */
-    .col {
-      display: flex;
-      flex-direction: column;
-      max-height: 220px;
-      overflow-y: auto;
-      scrollbar-width: thin;
-      border-right: 1px solid var(--border-color);
-      padding: 0.25rem 0;
-    }
-    .col:last-child {
-      border-right: 0;
-    }
-    .opt {
-      padding: 0.35rem 1rem;
-      font-size: 0.85rem;
-      font-variant-numeric: tabular-nums;
-      font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
-      background: transparent;
-      border: 0;
-      color: var(--color-muted);
-      cursor: pointer;
-      text-align: center;
-      min-width: 56px;
-      transition: background-color 120ms ease, color 120ms ease;
-    }
-    @media (hover: hover) {
-      .opt:hover:not([disabled]) {
-        background: var(--hover-bg);
-        color: var(--color);
-      }
-    }
-    .opt[aria-selected='true'] {
-      background: var(--primary-soft);
-      color: var(--primary-color);
-      font-weight: 700;
-    }
-    .opt[disabled] {
-      opacity: 0.35;
-      cursor: not-allowed;
-    }
-    .opt:focus-visible {
-      outline: none;
-      background: var(--primary-soft);
-      color: var(--primary-color);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .pill,
-      .caret,
-      .opt {
-        transition: none;
-      }
-    }
-  `;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unbind();
-  }
-  bind() {
-    document.addEventListener("pointerdown", this.onDocPointer, true);
-    document.addEventListener("keydown", this.onKeydown);
-  }
-  unbind() {
-    document.removeEventListener("pointerdown", this.onDocPointer, true);
-    document.removeEventListener("keydown", this.onKeydown);
-  }
-  // Minutos canónicos del valor actual (null si vacío/ inválido).
-  get current() {
-    return parseHHMM(this.value);
-  }
-  get minMin() {
-    return parseHHMM(this.min);
-  }
-  get maxMin() {
-    return parseHHMM(this.max);
-  }
-  // ¿Un total de minutos cae dentro de [min, max]?
-  inRange(total) {
-    const lo = this.minMin;
-    const hi = this.maxMin;
-    if (lo !== null && total < lo) return false;
-    if (hi !== null && total > hi) return false;
-    return true;
-  }
-  toggle() {
-    if (this.disabled) return;
-    this.open ? this.close() : this.openPanel();
-  }
-  openPanel() {
-    if (this.open) return;
-    this.open = true;
-    this.bind();
-    this.updateComplete.then(() => {
-      this.reanchor();
-      this.scrollToSelected();
-    });
-  }
-  close() {
-    if (!this.open) return;
-    this.open = false;
-    this.unbind();
-  }
-  // Recalcula alineación del popover según el espacio en viewport.
-  reanchor() {
-    const trigger = this.renderRoot.querySelector(".pill");
-    const panel = this.renderRoot.querySelector(".panel");
-    if (!trigger || !panel) return;
-    const side = computeAnchor(trigger, panel);
-    this.end = side.end;
-    this.above = side.above;
-  }
-  // Centra (sin animación brusca) la opción seleccionada en cada columna al abrir.
-  scrollToSelected() {
-    const sel = this.renderRoot.querySelectorAll('.opt[aria-selected="true"]');
-    sel.forEach((el) => {
-      const col = el.parentElement;
-      if (col) col.scrollTop = el.offsetTop - col.clientHeight / 2 + el.clientHeight / 2;
-    });
-  }
-  // Emite el nuevo valor canónico y lo refleja en la prop.
-  commit(total) {
-    const next = toHHMM(total);
-    if (next === this.value) return;
-    this.value = next;
-    this.dispatchEvent(
-      new CustomEvent("ok-change", {
-        detail: { value: next },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  // Selecciona la hora (manteniendo los minutos actuales o 0).
-  pickHour(h) {
-    const cur = this.current;
-    const mm = cur !== null ? cur % 60 : 0;
-    this.commit(h * 60 + mm);
-  }
-  // Selecciona el minuto (manteniendo la hora actual o 0).
-  pickMinute(mm) {
-    const cur = this.current;
-    const h = cur !== null ? Math.floor(cur / 60) : 0;
-    this.commit(h * 60 + mm);
-  }
-  // Cambia el meridiano (AM/PM) desplazando la hora ±12 si hace falta.
-  pickMeridiem(pm) {
-    const cur = this.current ?? 0;
-    let h = Math.floor(cur / 60);
-    const mm = cur % 60;
-    const isPm = h >= 12;
-    if (pm && !isPm) h += 12;
-    else if (!pm && isPm) h -= 12;
-    this.commit(h * 60 + mm);
-  }
-  // Lista de horas válidas (0..23). El filtrado de rango se aplica por opción.
-  hourOptions() {
-    return Array.from({ length: 24 }, (_, i) => i);
-  }
-  // Lista de minutos según `step` (siempre ≥1, ≤30 por seguridad).
-  minuteOptions() {
-    const step = Math.min(Math.max(Math.floor(this.step) || 5, 1), 30);
-    const out = [];
-    for (let m = 0; m < 60; m += step) out.push(m);
-    return out;
-  }
-  // Texto del campo HH para la pastilla (12h si use-ampm, con la hora canónica si existe).
-  displayHour() {
-    const cur = this.current;
-    if (cur === null) return "--";
-    const h24 = Math.floor(cur / 60);
-    if (this.useAmpm) {
-      const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
-      return pad2(h12);
-    }
-    return pad2(h24);
-  }
-  displayMinute() {
-    const cur = this.current;
-    if (cur === null) return "--";
-    return pad2(cur % 60);
-  }
-  // Etiqueta de hora dentro de la columna (respeta 12h/24h).
-  hourLabel(h24) {
-    if (this.useAmpm) {
-      const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
-      return pad2(h12);
-    }
-    return pad2(h24);
-  }
-  get isPm() {
-    const cur = this.current;
-    return cur !== null && Math.floor(cur / 60) >= 12;
-  }
-  render() {
-    const cur = this.current;
-    const selHour = cur !== null ? Math.floor(cur / 60) : -1;
-    const selMinute = cur !== null ? cur % 60 : -1;
-    return html`
-      <button
-        type="button"
-        class="pill ${this.open ? "open" : ""}"
-        ?disabled=${this.disabled}
-        aria-haspopup="listbox"
-        aria-expanded=${this.open ? "true" : "false"}
-        aria-label="Time picker"
-        @click=${() => this.toggle()}
-      >
-        <span class="field" aria-hidden="true">${this.displayHour()}</span>
-        <span class="colon" aria-hidden="true">:</span>
-        <span class="field" aria-hidden="true">${this.displayMinute()}</span>
-        ${this.useAmpm ? html`<span class="meridiem">${this.isPm ? "PM" : "AM"}</span>` : null}
-        <span class="caret" aria-hidden="true">▾</span>
-      </button>
-      ${this.open ? this.panelTemplate(selHour, selMinute) : null}
-    `;
-  }
-  panelTemplate(selHour, selMinute) {
-    const cls = `panel ${this.end ? "end" : ""} ${this.above ? "above" : ""}`;
-    return html`
-      <div class=${cls} role="dialog" aria-label="Choose time">
-        <div class="col" role="listbox" aria-label="Hours">
-          ${this.hourOptions().map((h) => {
-      const enabled = this.minuteOptions().some((mm) => this.inRange(h * 60 + mm));
-      const selected = h === selHour;
-      return html`<button
-              type="button"
-              class="opt"
-              role="option"
-              aria-selected=${selected ? "true" : "false"}
-              ?disabled=${!enabled}
-              @click=${() => this.pickHour(h)}
-            >
-              ${this.hourLabel(h)}
-            </button>`;
-    })}
-        </div>
-        <div class="col" role="listbox" aria-label="Minutes">
-          ${this.minuteOptions().map((mm) => {
-      const baseHour = selHour >= 0 ? selHour : 0;
-      const enabled = this.inRange(baseHour * 60 + mm);
-      const selected = mm === selMinute;
-      return html`<button
-              type="button"
-              class="opt"
-              role="option"
-              aria-selected=${selected ? "true" : "false"}
-              ?disabled=${!enabled}
-              @click=${() => this.pickMinute(mm)}
-            >
-              ${pad2(mm)}
-            </button>`;
-    })}
-        </div>
-        ${this.useAmpm ? html`<div class="col" role="listbox" aria-label="AM/PM">
-              ${["AM", "PM"].map((m, i) => {
-      const pm = i === 1;
-      const selected = this.current !== null && pm === this.isPm;
-      return html`<button
-                  type="button"
-                  class="opt"
-                  role="option"
-                  aria-selected=${selected ? "true" : "false"}
-                  @click=${() => this.pickMeridiem(pm)}
-                >
-                  ${m}
-                </button>`;
-    })}
-            </div>` : null}
-      </div>
-    `;
-  }
-}
-__decorateClass([
-  property()
-], OkTimePicker.prototype, "value");
-__decorateClass([
-  property({ type: Number })
-], OkTimePicker.prototype, "step");
-__decorateClass([
-  property({ type: Boolean, attribute: "use-ampm" })
-], OkTimePicker.prototype, "useAmpm");
-__decorateClass([
-  property()
-], OkTimePicker.prototype, "min");
-__decorateClass([
-  property()
-], OkTimePicker.prototype, "max");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OkTimePicker.prototype, "disabled");
-__decorateClass([
-  state()
-], OkTimePicker.prototype, "open");
-__decorateClass([
-  state()
-], OkTimePicker.prototype, "end");
-__decorateClass([
-  state()
-], OkTimePicker.prototype, "above");
-define("ok-time-picker", OkTimePicker);
-export {
-  OkTimePicker
-};