@erplora/outfitkit 0.1.1

package/dist/ok-qty-stepper.js

@@ -0,0 +1,212 @@
+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 = {
+  decrement: "Decrease",
+  increment: "Increase"
+};
+class OkQtyStepper extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.min = 0;
+    this.step = 1;
+    this.disabled = false;
+    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));
+      --field-bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.18));
+      --border-radius: var(--ok-radius, 8px);
+      --field-width: var(--ok-qty-field-width, 3.2rem);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Inline: ocupa solo lo necesario, alineado con texto circundante. */
+      display: inline-flex;
+      vertical-align: middle;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .wrap {
+      display: inline-flex;
+      align-items: stretch;
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      overflow: hidden;
+      background: var(--field-bg);
+    }
+
+    /* Botones -/+ : ion-button compactos y sin margen, encajados en la caja. */
+    ion-button {
+      --padding-start: 0;
+      --padding-end: 0;
+      --border-radius: 0;
+      --box-shadow: none;
+      margin: 0;
+      height: auto;
+      min-width: 2.1rem;
+    }
+    ion-button ion-icon {
+      font-size: 1.1rem;
+    }
+
+    /* Campo central editable: numérico, centrado, sin spinners nativos. */
+    .field {
+      width: var(--field-width);
+      min-width: 0;
+      text-align: center;
+      border: 0;
+      border-left: 1px solid var(--border-color);
+      border-right: 1px solid var(--border-color);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: 0.95rem;
+      padding: 0.25rem 0.2rem;
+      -moz-appearance: textfield;
+      appearance: textfield;
+    }
+    .field::-webkit-outer-spin-button,
+    .field::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    .field:focus {
+      outline: none;
+    }
+    .field:disabled {
+      background: transparent;
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Recorta `n` al rango [min, max] respetando los límites definidos.
+  clamp(n) {
+    let v = n;
+    if (typeof this.min === "number" && v < this.min) v = this.min;
+    if (typeof this.max === "number" && v > this.max) v = this.max;
+    return v;
+  }
+  // Aplica un nuevo valor (con clamp) y emite `ok-change` si cambió.
+  commit(next) {
+    const clamped = this.clamp(next);
+    if (clamped === this.value) {
+      this.requestUpdate();
+      return;
+    }
+    this.value = clamped;
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { value: clamped },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  decrement() {
+    if (this.disabled) return;
+    this.commit(this.value - this.step);
+  }
+  increment() {
+    if (this.disabled) return;
+    this.commit(this.value + this.step);
+  }
+  // Valida la edición manual: parsea, ignora no-números y hace clamp.
+  onInput(e) {
+    const raw = e.target.value;
+    const parsed = Number(raw);
+    if (raw === "" || Number.isNaN(parsed)) return;
+    this.commit(parsed);
+  }
+  // Al salir del campo, normaliza el texto al valor válido actual.
+  onBlur(e) {
+    const input = e.target;
+    const parsed = Number(input.value);
+    if (input.value === "" || Number.isNaN(parsed)) {
+      input.value = String(this.value);
+    } else {
+      this.commit(parsed);
+      input.value = String(this.value);
+    }
+  }
+  render() {
+    const atMin = typeof this.min === "number" && this.value <= this.min;
+    const atMax = typeof this.max === "number" && this.value >= this.max;
+    return html`<div class="wrap">
+      <ion-button
+        fill="clear"
+        size="small"
+        aria-label=${this.t.decrement}
+        ?disabled=${this.disabled || atMin}
+        @click=${() => this.decrement()}
+      >
+        <ion-icon slot="icon-only" name="remove"></ion-icon>
+      </ion-button>
+      <input
+        class="field"
+        type="number"
+        inputmode="numeric"
+        .value=${String(this.value)}
+        min=${this.min}
+        max=${this.max ?? ""}
+        step=${this.step}
+        ?disabled=${this.disabled}
+        @input=${(e) => this.onInput(e)}
+        @change=${(e) => this.onBlur(e)}
+        @blur=${(e) => this.onBlur(e)}
+      />
+      <ion-button
+        fill="clear"
+        size="small"
+        aria-label=${this.t.increment}
+        ?disabled=${this.disabled || atMax}
+        @click=${() => this.increment()}
+      >
+        <ion-icon slot="icon-only" name="add"></ion-icon>
+      </ion-button>
+    </div>`;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], OkQtyStepper.prototype, "value");
+__decorateClass([
+  property({ type: Number })
+], OkQtyStepper.prototype, "min");
+__decorateClass([
+  property({ type: Number })
+], OkQtyStepper.prototype, "max");
+__decorateClass([
+  property({ type: Number })
+], OkQtyStepper.prototype, "step");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkQtyStepper.prototype, "disabled");
+__decorateClass([
+  property({ attribute: false })
+], OkQtyStepper.prototype, "labels");
+define("ok-qty-stepper", OkQtyStepper);
+export {
+  OkQtyStepper
+};

package/dist/ok-range-dual.js

@@ -0,0 +1,280 @@
+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;
+};
+class OkRangeDual extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.low = 0;
+    this.high = 100;
+    this.prefix = "";
+    this.suffix = "";
+    this.disabled = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --track-color: var(--ok-range-track, var(--ion-color-step-150, #e0e2e6));
+      --fill-color: var(--ok-range-fill, var(--ion-color-primary, #3880ff));
+      --thumb-bg: var(--ok-range-thumb-bg, var(--ion-background-color, #ffffff));
+      --thumb-border: var(--ok-range-thumb-border, var(--ion-color-primary, #3880ff));
+      --label-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --value-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --value-bg: var(--ok-range-value-bg, var(--ion-color-step-100, #f1f2f4));
+      --focus-ring: var(--ok-range-focus, var(--ion-color-primary-tint, #4c8dff));
+    }
+
+    .block {
+      display: grid;
+      gap: 6px;
+      width: 100%;
+    }
+
+    .head {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      font-size: 0.8125rem;
+    }
+
+    .label {
+      color: var(--label-color);
+      font-weight: 500;
+    }
+
+    .readout {
+      color: var(--value-color);
+      font-variant-numeric: tabular-nums;
+      background: var(--value-bg);
+      padding: 1px 8px;
+      border-radius: 6px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    /* Pista + thumbs apilados */
+    .range {
+      position: relative;
+      height: 24px;
+    }
+
+    .track {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 4px;
+      transform: translateY(-50%);
+      background: var(--track-color);
+      border-radius: 999px;
+      pointer-events: none;
+    }
+
+    .fill {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 4px;
+      border-radius: 999px;
+      background: var(--fill-color);
+      pointer-events: none;
+    }
+
+    /* Ambos inputs ocupan toda la pista; solo el thumb captura el puntero */
+    input[type='range'] {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      appearance: none;
+      -webkit-appearance: none;
+      background: transparent;
+      pointer-events: none;
+      margin: 0;
+    }
+
+    input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--thumb-bg);
+      border: 2px solid var(--thumb-border);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+      pointer-events: auto;
+      cursor: grab;
+      transition: transform 0.12s ease;
+    }
+    input[type='range']::-webkit-slider-thumb:hover {
+      transform: scale(1.15);
+    }
+    input[type='range']:active::-webkit-slider-thumb {
+      cursor: grabbing;
+    }
+
+    input[type='range']::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--thumb-bg);
+      border: 2px solid var(--thumb-border);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+      pointer-events: auto;
+      cursor: grab;
+    }
+
+    input[type='range']::-webkit-slider-runnable-track {
+      background: transparent;
+      height: 100%;
+    }
+    input[type='range']::-moz-range-track {
+      background: transparent;
+      height: 100%;
+    }
+
+    input[type='range']:focus-visible::-webkit-slider-thumb {
+      outline: 2px solid var(--focus-ring);
+      outline-offset: 3px;
+    }
+    input[type='range']:focus-visible::-moz-range-thumb {
+      outline: 2px solid var(--focus-ring);
+      outline-offset: 3px;
+    }
+
+    :host([disabled]) {
+      opacity: 0.55;
+      pointer-events: none;
+    }
+  `;
+  }
+  // Clampa low<=high respetando min/max.
+  clamp() {
+    const lo = Math.min(Math.max(this.low, this.min), this.max);
+    const hi = Math.min(Math.max(this.high, this.min), this.max);
+    return { low: Math.min(lo, hi), high: Math.max(lo, hi) };
+  }
+  onLow(e) {
+    const v = Number(e.target.value);
+    this.low = Math.min(v, this.high);
+    this.high = Math.max(this.low, this.high);
+    this.emit();
+  }
+  onHigh(e) {
+    const v = Number(e.target.value);
+    this.high = Math.max(v, this.low);
+    this.low = Math.min(this.low, this.high);
+    this.emit();
+  }
+  emit() {
+    const { low, high } = this.clamp();
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { low, high },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Formatea un valor con prefijo/sufijo.
+  fmt(v) {
+    return `${this.prefix}${v}${this.suffix}`;
+  }
+  render() {
+    const { low, high } = this.clamp();
+    const span = this.max - this.min || 1;
+    const leftPct = (low - this.min) / span * 100;
+    const rightPct = (this.max - high) / span * 100;
+    return html`
+      <div class="block">
+        <div class="head">
+          ${this.label ? html`<span class="label">${this.label}</span>` : html`<span></span>`}
+          <span class="readout" aria-live="polite">${this.fmt(low)} – ${this.fmt(high)}</span>
+        </div>
+        <div class="range">
+          <div class="track"></div>
+          <div
+            class="fill"
+            style="left:${leftPct}%; right:${rightPct}%"
+          ></div>
+          <input
+            type="range"
+            .min=${String(this.min)}
+            .max=${String(this.max)}
+            .step=${String(this.step)}
+            .value=${String(low)}
+            ?disabled=${this.disabled}
+            role="slider"
+            aria-label=${(this.label ? this.label + " " : "") + "mínimo"}
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${low}
+            aria-valuetext=${this.fmt(low)}
+            @input=${this.onLow}
+          />
+          <input
+            type="range"
+            .min=${String(this.min)}
+            .max=${String(this.max)}
+            .step=${String(this.step)}
+            .value=${String(high)}
+            ?disabled=${this.disabled}
+            role="slider"
+            aria-label=${(this.label ? this.label + " " : "") + "máximo"}
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${high}
+            aria-valuetext=${this.fmt(high)}
+            @input=${this.onHigh}
+          />
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkRangeDual.prototype, "label");
+__decorateClass([
+  property({ type: Number })
+], OkRangeDual.prototype, "min");
+__decorateClass([
+  property({ type: Number })
+], OkRangeDual.prototype, "max");
+__decorateClass([
+  property({ type: Number })
+], OkRangeDual.prototype, "step");
+__decorateClass([
+  property({ type: Number })
+], OkRangeDual.prototype, "low");
+__decorateClass([
+  property({ type: Number })
+], OkRangeDual.prototype, "high");
+__decorateClass([
+  property()
+], OkRangeDual.prototype, "prefix");
+__decorateClass([
+  property()
+], OkRangeDual.prototype, "suffix");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkRangeDual.prototype, "disabled");
+define("ok-range-dual", OkRangeDual);
+export {
+  OkRangeDual
+};

package/dist/ok-rating.js

@@ -0,0 +1,199 @@
+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 = {
+  starLabel: (value, max) => `${value} of ${max}`
+};
+class OkRating extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.max = 5;
+    this.readonly = false;
+    this.allowHalf = false;
+    this.labels = {};
+    this.hoverValue = null;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-warning, var(--ion-color-warning, #ffc409));
+      --color-empty: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.25));
+      --size: var(--ok-rating-size, 1.5rem);
+      --gap: var(--ok-rating-gap, 0.15rem);
+
+      display: inline-flex;
+      align-items: center;
+      gap: var(--gap);
+      line-height: 1;
+    }
+    /* Cada estrella es un botón clicable (o estático en readonly). */
+    .star {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      border: 0;
+      background: none;
+      color: var(--color-empty);
+      cursor: pointer;
+      font-size: var(--size);
+      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;
+    }
+    .star.filled {
+      color: var(--color);
+    }
+    @media (hover: hover) {
+      .star:not(.readonly):hover {
+        transform: scale(1.12);
+      }
+    }
+    .star:not(.readonly):active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    :host([readonly]) .star,
+    .star.readonly {
+      cursor: default;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .star:not(.readonly):hover,
+      .star:not(.readonly):active {
+        transform: none;
+      }
+    }
+    ion-icon {
+      pointer-events: none;
+    }
+    /* Zonas izquierda/derecha para medias estrellas (allow-half). */
+    .star.half-mode {
+      position: relative;
+    }
+    .half-zone {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 50%;
+      cursor: pointer;
+    }
+    .half-zone.left {
+      left: 0;
+    }
+    .half-zone.right {
+      right: 0;
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Valor efectivo a pintar: el de hover si lo hay, si no el real.
+  get displayValue() {
+    return this.hoverValue ?? this.value;
+  }
+  // Fija el valor y emite `ok-change` (solo si cambia y no es readonly).
+  setValue(next) {
+    if (this.readonly) return;
+    if (next === this.value) return;
+    this.value = next;
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { value: next },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onEnter(v) {
+    if (this.readonly) return;
+    this.hoverValue = v;
+  }
+  onLeave() {
+    this.hoverValue = null;
+  }
+  // Devuelve el icono apropiado para la estrella `index` (1-based) según el valor mostrado.
+  iconFor(index) {
+    const v = this.displayValue;
+    if (v >= index) return "star";
+    if (this.allowHalf && v >= index - 0.5) return "star-half";
+    return "star-outline";
+  }
+  // Render de una estrella con medias (zonas izquierda = .5, derecha = entero).
+  renderHalfStar(index) {
+    const filled = this.displayValue >= index - 0.5;
+    return html`<span class=${`star half-mode ${filled ? "filled" : ""}`}>
+      <ion-icon .name=${this.iconFor(index)}></ion-icon>
+      ${this.readonly ? "" : html`<span
+              class="half-zone left"
+              @mouseenter=${() => this.onEnter(index - 0.5)}
+              @click=${() => this.setValue(index - 0.5)}
+            ></span>
+            <span
+              class="half-zone right"
+              @mouseenter=${() => this.onEnter(index)}
+              @click=${() => this.setValue(index)}
+            ></span>`}
+    </span>`;
+  }
+  // Render de una estrella entera (sin medias).
+  renderFullStar(index) {
+    const filled = this.displayValue >= index;
+    return html`<button
+      type="button"
+      class=${`star ${filled ? "filled" : ""} ${this.readonly ? "readonly" : ""}`}
+      aria-label=${this.t.starLabel(index, this.max)}
+      ?disabled=${this.readonly}
+      @mouseenter=${() => this.onEnter(index)}
+      @click=${() => this.setValue(index)}
+    >
+      <ion-icon .name=${this.iconFor(index)}></ion-icon>
+    </button>`;
+  }
+  render() {
+    const stars = Array.from({ length: Math.max(0, this.max) }, (_, i) => i + 1);
+    return html`<span
+      role="img"
+      aria-label=${this.t.starLabel(this.value, this.max)}
+      @mouseleave=${() => this.onLeave()}
+    >
+      ${stars.map((i) => this.allowHalf ? this.renderHalfStar(i) : this.renderFullStar(i))}
+    </span>`;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], OkRating.prototype, "value");
+__decorateClass([
+  property({ type: Number })
+], OkRating.prototype, "max");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkRating.prototype, "readonly");
+__decorateClass([
+  property({ type: Boolean, attribute: "allow-half" })
+], OkRating.prototype, "allowHalf");
+__decorateClass([
+  property({ attribute: false })
+], OkRating.prototype, "labels");
+__decorateClass([
+  state()
+], OkRating.prototype, "hoverValue");
+define("ok-rating", OkRating);
+export {
+  OkRating
+};