stimeo-ui 0.16.0 → 0.17.0

package/dist/controllers/currency_input_controller.js

@@ -1,8 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/currency_input_controller.ts
-
-// src/utils/composition_tracker.ts
 var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
   "insertCompositionText",
   "insertFromComposition",
@@ -14,13 +11,11 @@ var CompositionTracker = class {
   #activeTargets = /* @__PURE__ */ new Set();
   #onStart;
   #onEnd;
-  /** The field whose confirming `input` is still owed, while the window is open. */
   #confirmedTarget = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
   }
-  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
   observe(target) {
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
@@ -28,7 +23,6 @@ var CompositionTracker = class {
     target.addEventListener("keydown", this.#handleKeydown);
     this.#observedTargets.add(target);
   }
-  /** Stops tracking one target and clears any active composition it owned. */
   unobserve(target) {
     if (!this.#observedTargets.delete(target)) return;
     target.removeEventListener("compositionstart", this.#handleStart);
@@ -37,7 +31,6 @@ var CompositionTracker = class {
     this.#activeTargets.delete(target);
     if (this.#confirmedTarget === target) this.#confirmedTarget = null;
   }
-  /** Releases every listener and clears state so reconnect starts cleanly. */
   disconnect() {
     for (const target of this.#observedTargets) {
       target.removeEventListener("compositionstart", this.#handleStart);
@@ -48,16 +41,9 @@ var CompositionTracker = class {
     this.#activeTargets.clear();
     this.#confirmedTarget = null;
   }
-  /** True when lifecycle tracking or the current event reports composition. */
   isComposing(event) {
     return this.#activeTargets.size > 0 || event?.isComposing === true;
   }
-  /**
-   * Whether `event` is the `input` echoing the composition just confirmed.
-   *
-   * Asking closes the window either way, so one confirmation is folded at most
-   * once and a consumer asks once per `input`.
-   */
   consumesConfirmedInput(event) {
     const confirmed = this.#confirmedTarget;
     this.#confirmedTarget = null;
@@ -75,13 +61,11 @@ var CompositionTracker = class {
     this.#confirmedTarget = event.target;
     this.#onEnd?.(event);
   };
-  /** A key on an observed field opens an edit of its own, so no echo is owed. */
   #handleKeydown = () => {
     this.#confirmedTarget = null;
   };
 };
 
-// src/utils/half_width.ts
 var FULL_WIDTH_SHIFT = 65248;
 function halfWidthChar(char) {
   if (char >= "\uFF01" && char <= "\uFF5E") {
@@ -90,7 +74,6 @@ function halfWidthChar(char) {
   return char === "\u3000" ? " " : char;
 }
 
-// src/utils/intl_format.ts
 var formatters = /* @__PURE__ */ new WeakMap();
 function intlFormatter(factory, locale, options, fallbackLocale) {
   const cache = cacheFor(factory);
@@ -120,51 +103,144 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
-// src/utils/locale.ts
 function resolveLocale(element, declared = "") {
   return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
 }
 
-// src/controllers/currency_input_controller.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
 var FALLBACK_LOCALE = "en-US";
-var CurrencyInputController = class extends Controller {
+var CurrencyInputController = class _CurrencyInputController extends Controller {
+  #numbers = new NumberValueReader();
   static targets = ["display", "field", "srValue"];
   static values = {
     locale: { type: String, default: "" },
     currency: { type: String, default: "" },
     precision: { type: Number, default: 2 }
   };
+  static valueConstraints = {
+    precision: { finite: true, integer: true, min: 0, max: 100 }
+  };
   static actions = ["format", "onInput"];
   static events = ["change", "reconcile"];
-  /** The numeric value last committed; both events report only a move away from it. */
   #lastValue = null;
   #started = false;
-  /** A declaration change that arrived mid-composition, applied once nothing composes. */
   #changeHeld = false;
-  /** The display a composition is running on, until that composition ends. */
   #composing = null;
-  /**
-   * The display text this controller last rendered. It tells this controller's own
-   * text, written with the separators in force, from text the page wrote.
-   */
   #rendered = null;
-  /** Validated mirrors of the Values; the hot path never reads a raw Value. */
   #locale;
   #currency = "";
   #precision = 2;
-  /** Formatters rebuilt when the declarations are taken in, never per keystroke. */
   #grouping;
   #fixed;
   #accessible;
   #group = ",";
   #decimal = ".";
-  /** The locale's non-Latin digits mapped back to ASCII (empty for Latin locales). */
   #digits = /* @__PURE__ */ new Map();
-  /**
-   * Holds mid-composition input so the IME's uncommitted text is never rewritten.
-   * The confirmed text is formatted once, and a declaration change the composition
-   * held back is applied after it.
-   */
   #composition = new CompositionTracker({
     onStart: (event) => {
       this.#composing = event.currentTarget;
@@ -175,10 +251,6 @@ var CurrencyInputController = class extends Controller {
       this.#applyHeldChange();
     }
   });
-  /**
-   * Re-validates on declaration changes and re-renders the committed display,
-   * reporting a value the re-render moved as `reconcile`.
-   */
   localeValueChanged() {
     this.#applyValueChange();
   }
@@ -188,18 +260,6 @@ var CurrencyInputController = class extends Controller {
   precisionValueChanged() {
     this.#applyValueChange();
   }
-  /**
-   * Reads the display with the declarations its text was written for, then
-   * re-renders it under the new ones — so a locale switch re-interprets the
-   * value, never the old text with new separators, and text the page wrote for
-   * the declarations it changes is never read with the old ones.
-   *
-   * While the display is composing, its text is the IME's: the change is held,
-   * configuration and all, until the composition ends, so the confirmed text is
-   * read with the separators it was typed against before the change applies.
-   *
-   * @stimeoRenderRoot
-   */
   #applyValueChange() {
     if (this.#composition.isComposing()) {
       this.#changeHeld = true;
@@ -215,42 +275,24 @@ var CurrencyInputController = class extends Controller {
       this.#renderFixed(scan.value, "reconcile");
     }
   }
-  /** Applies a declaration change a composition held back. */
   #applyHeldChange() {
     if (!this.#changeHeld) return;
     this.#changeHeld = false;
     this.#applyValueChange();
   }
-  /**
-   * Reads the display and takes in the declarations the page carries now. This
-   * controller's own rendering was written with the separators in force, so it
-   * is read before they change; any other text is the page's, written for the
-   * declarations it carries, so it is read after.
-   */
   #readDisplay() {
     const text = this.displayTarget.value;
     const own = text === this.#rendered ? this.#scan(text) : null;
     this.#takeInDeclarations();
     return own ?? this.#scan(text);
   }
-  /** Takes in the declarations the page carries now, a change a composition held among them. */
   #takeInDeclarations() {
     this.#changeHeld = false;
     this.#revalidate();
   }
-  /**
-   * Takes in the declarations the page carries now and normalizes the display
-   * to its fixed-precision form.
-   *
-   * A display still showing this controller's own last rendering is not read
-   * back: its separators may belong to declarations that changed while the
-   * controller was away, and the committed value is known anyway. That value is
-   * re-rendered at the current fixed precision, which rounds it whether
-   * `precision` changed meanwhile or the entry was left unrounded mid-typing, and
-   * a move the rounding causes is reported as `reconcile`. Any other text is the
-   * page's, written for the declarations it carries, so it is read with them.
-   */
+  #morph = new MorphRenderWatcher(() => this.#applyValueChange());
   connect() {
+    this.#morph.observe(this.element);
     this.#started = true;
     this.#takeInDeclarations();
     if (!this.hasDisplayTarget) return;
@@ -262,44 +304,22 @@ var CurrencyInputController = class extends Controller {
     this.#lastValue = value === null ? null : round(value, this.#precision);
     this.#renderFixed(value, "reconcile");
   }
-  /**
-   * Releases the composition listeners. A composition still running hears no
-   * `compositionend` once they are gone, so it ends here; a change it held is
-   * taken in on the next `connect()`.
-   */
   disconnect() {
+    this.#morph.disconnect();
     this.#endUntrackedComposition();
     this.#composition.disconnect();
     this.#started = false;
   }
-  /**
-   * Tracks composition on an arriving (or swapped-in) display and normalizes it
-   * under the declarations the page carries now, reading this controller's own
-   * rendering with the separators it was written under; an amount that differs
-   * from the committed one is the page's, so it is reported as `reconcile`.
-   */
   displayTargetConnected(target) {
     this.#composition.observe(target);
-    if (!this.#started) return;
+    if (!this.#started || !this.hasDisplayTarget || this.displayTarget !== target) return;
     this.#renderFixed(this.#readDisplay().value, "reconcile");
   }
-  /**
-   * Stops tracking a display that leaves. A composition running on it hears no
-   * `compositionend` any more, so it ends here; a change it held waits for the
-   * next display to be read.
-   */
   displayTargetDisconnected(target) {
     this.#composition.unobserve(target);
-    this.#endUntrackedComposition();
+    if (target === this.#composing) this.#endUntrackedComposition();
+    this.#applyValueChange();
   }
-  /**
-   * Ends a composition no `compositionend` will reach. A display still in place —
-   * one a move re-inserted, or the display of a controller that moves — holds the
-   * text the composition left, typed against the declarations in force, so it is
-   * read as `compositionend` would read it and becomes this controller's own
-   * rendering. The page's move ended the composition, so a value it moves is
-   * reported as `reconcile`. A display that left takes its composition along.
-   */
   #endUntrackedComposition() {
     const display = this.#composing;
     this.#composing = null;
@@ -307,28 +327,25 @@ var CurrencyInputController = class extends Controller {
       this.#reformat(false, "reconcile");
     }
   }
-  /** Syncs a late-arriving hidden field without touching the display or events. */
   fieldTargetConnected() {
     if (this.#started) this.#resync();
   }
-  /** Syncs a late-arriving screen-reader span the same way. */
+  fieldTargetDisconnected() {
+    if (this.#started) this.#resync();
+  }
   srValueTargetConnected() {
     if (this.#started) this.#resync();
   }
-  /** Re-groups digits as the user types, preserving the caret position. */
+  srValueTargetDisconnected() {
+    if (this.#started) this.#resync();
+  }
   onInput(event) {
     if (this.#composition.isComposing(event)) return;
     this.#reformat(false, "edit");
   }
-  /** Applies the fixed-precision rounding on blur. */
   format() {
     this.#reformat(true, "edit");
   }
-  /**
-   * Parses the display value, rewrites it grouped (optionally at fixed
-   * precision), keeps the caret stable by significant characters, and syncs the
-   * field, the screen-reader span, and the event `cause` selects.
-   */
   #reformat(fixedPrecision, cause) {
     if (!this.hasDisplayTarget) return;
     const raw = this.displayTarget.value;
@@ -347,10 +364,6 @@ var CurrencyInputController = class extends Controller {
     this.#rendered = formatted;
     this.#reflect(value, formatted, cause);
   }
-  /**
-   * Shows `value` at the fixed precision — an empty display for no value — and
-   * reports a move under the event `cause` selects.
-   */
   #renderFixed(value, cause) {
     if (value === null) {
       this.#show("");
@@ -362,20 +375,15 @@ var CurrencyInputController = class extends Controller {
     this.#show(formatted);
     this.#reflect(rounded, formatted, cause);
   }
-  /** Writes `text` to the display as this controller's own rendering. */
   #show(text) {
-    this.displayTarget.value = text;
+    if (this.displayTarget.value !== text) this.displayTarget.value = text;
     this.#rendered = text;
   }
-  /**
-   * The in-progress rendering: grouped integer, sign and fraction as typed.
-   */
   #render(parts) {
     const int = parts.int === "" ? "" : this.#grouping.format(BigInt(parts.int));
     const frac = parts.hasDot ? this.#decimal + parts.frac : "";
     return parts.sign + int + frac;
   }
-  /** Restores the caret to sit just after the n-th significant character. */
   #restoreCaret(formatted, significantBefore) {
     let seen = 0;
     let position = formatted.length;
@@ -391,11 +399,6 @@ var CurrencyInputController = class extends Controller {
     } catch {
     }
   }
-  /**
-   * Counts the characters before `caret` that survive into the rendering,
-   * applying the same acceptance rules as {@link #scan} — a rejected keystroke
-   * (a mid-string sign, a second decimal mark) must not shift the anchor.
-   */
   #significantBefore(text, caret) {
     let count = 0;
     let sawSign = false;
@@ -415,13 +418,11 @@ var CurrencyInputController = class extends Controller {
     }
     return count;
   }
-  /** Digits, signs, and the decimal mark anchor the caret; grouping does not. */
   #isSignificant(ch) {
     if (ch >= "0" && ch <= "9") return true;
     if (ch === "-" || ch === "+") return true;
     return ch === this.#decimal || ch === "." && this.#group !== ".";
   }
-  /** Writes the normalized value to the field, the SR span, and the empty hook. */
   #write(value) {
     const isEmpty = value === null;
     if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? "" : String(value);
@@ -430,13 +431,6 @@ var CurrencyInputController = class extends Controller {
     }
     this.element.toggleAttribute(`data-${this.identifier}-empty`, isEmpty);
   }
-  /**
-   * {@link #write}, then reports a moved value under the event `cause` selects:
-   * `change` for the user's edit, `reconcile` for a move the page caused. The
-   * display may hold an in-progress `-`, but a `null` value always rides with an
-   * empty `formatted`, whichever event reports it, so consumers can treat the
-   * pair as cleared.
-   */
   #reflect(value, formatted, cause) {
     this.#write(value);
     if (value === this.#lastValue) return;
@@ -445,13 +439,6 @@ var CurrencyInputController = class extends Controller {
     if (cause === "edit") this.dispatch("change", { detail });
     else this.dispatch("reconcile", { detail });
   }
-  /**
-   * Scans arbitrary input text into its number-shaped parts and value. Keeps
-   * digits, one leading sign, one decimal mark, and the fraction verbatim;
-   * everything else (grouping, symbols, words) is dropped. An ASCII "." is only
-   * a decimal mark where it is not the locale's grouping separator. Precision
-   * plays no part here — rounding belongs to the blur-time format.
-   */
   #scan(text) {
     let sign = "";
     let int = "";
@@ -471,32 +458,19 @@ var CurrencyInputController = class extends Controller {
     const value = Number(`${sign}${int}.${frac}`);
     return { parts, value: Number.isFinite(value) ? value : null };
   }
-  /** Whether `ch` reads as this locale's decimal mark. */
   #isDecimalMark(ch) {
     return ch === this.#decimal || ch === "." && this.#group !== ".";
   }
-  /**
-   * Re-syncs field / srValue / hook without dispatching: from the display, or —
-   * while it is composing, when its text is not committed yet — from the value
-   * last committed.
-   */
   #resync() {
     if (!this.hasDisplayTarget) return;
     const value = this.#composition.isComposing() ? this.#lastValue : this.#scan(this.displayTarget.value).value;
     this.#write(value);
   }
-  /**
-   * Validates the declared Values, falling back to each Value's default when a
-   * declaration cannot be interpreted (a malformed locale or currency tag, a
-   * precision outside `Intl`'s 0–100 integer range), and rebuilds the cached
-   * formatters from the validated set.
-   */
   #revalidate() {
     const resolved = resolveLocale(this.element, this.localeValue);
     const usable = intlFormatter(Intl.NumberFormat, resolved, {});
     this.#locale = usable === null ? FALLBACK_LOCALE : resolved;
-    const precision = this.precisionValue;
-    this.#precision = Number.isInteger(precision) && precision >= 0 && precision <= 100 ? precision : 2;
+    this.#precision = this.#safePrecision;
     this.#currency = "";
     if (this.currencyValue !== "") {
       const declaredCurrency = intlFormatter(Intl.NumberFormat, this.#locale, {
@@ -544,12 +518,6 @@ var CurrencyInputController = class extends Controller {
       if (digit !== String(i)) this.#digits.set(digit, String(i));
     }
   }
-  /**
-   * Maps the locale's own digits to ASCII, folds full-width forms (the digits,
-   * signs, and marks an IME confirms as ０-９＋－．，) through the shared
-   * half-width mapping, and reads U+2212 MINUS SIGN as "-", which some locales'
-   * formatted output uses for negatives.
-   */
   #normalize(text) {
     let out = "";
     for (const ch of text) {
@@ -564,6 +532,15 @@ var CurrencyInputController = class extends Controller {
     }
     return out;
   }
+  get #safePrecision() {
+    return this.#numbers.read(
+      this,
+      "precision",
+      this.precisionValue,
+      _CurrencyInputController.values.precision.default,
+      _CurrencyInputController.valueConstraints.precision
+    );
+  }
 };
 function round(value, precision) {
   const factor = 10 ** Math.max(0, precision);
@@ -573,5 +550,4 @@ function round(value, precision) {
 }
 
 export { CurrencyInputController };
-//# sourceMappingURL=currency_input_controller.js.map
 //# sourceMappingURL=currency_input_controller.js.map