@erplora/outfitkit 0.1.1

package/dist/ok-time-picker.js

@@ -0,0 +1,472 @@
+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
+};