stimeo-ui 0.17.0 → 0.18.0

package/dist/controllers/time_picker_controller.js

@@ -13,6 +13,107 @@ function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  beforeWrite?.();
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var AuthoredMutationWatcher = class {
+  #onAuthored;
+  #claims = null;
+  #observer = null;
+  constructor(onAuthored) {
+    this.#onAuthored = onAuthored;
+  }
+  observe(root, options) {
+    this.disconnect();
+    const observer = new MutationObserver((records) => {
+      if (this.#observer !== observer) return;
+      const authored = this.#filter(records);
+      if (authored.length > 0) this.#onAuthored(authored);
+    });
+    this.#observer = observer;
+    this.#claims = { attributes: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [...options.attributes],
+      subtree: options.subtree ?? false,
+      childList: options.childList ?? false
+    });
+    if (options.ancestorAttributes) {
+      let ancestor = root.parentElement;
+      while (ancestor) {
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: [...options.ancestorAttributes]
+        });
+        ancestor = ancestor.parentElement;
+      }
+    }
+  }
+  claim(target, name, value) {
+    const claims = this.#claims?.attributes;
+    let attributes = claims?.get(target);
+    if (!attributes) {
+      attributes = /* @__PURE__ */ new Map();
+      claims?.set(target, attributes);
+    }
+    const pending = attributes.get(name);
+    attributes.set(name, { value, count: (pending?.count ?? 0) + 1 });
+  }
+  claimCurrent(target, name) {
+    this.claim(target, name, target.getAttribute(name));
+  }
+  claimChildList(target, added, removed) {
+    const claims = this.#claims?.children;
+    const pending = claims?.get(target) ?? { added: /* @__PURE__ */ new Map(), removed: /* @__PURE__ */ new Map() };
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) + 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) + 1);
+    claims?.set(target, pending);
+  }
+  take() {
+    return this.#filter(this.#observer?.takeRecords() ?? []);
+  }
+  disconnect() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#claims = null;
+  }
+  #filter(records) {
+    const authored = records.filter((record) => !this.#consume(record));
+    this.#claims?.attributes.clear();
+    this.#claims?.children.clear();
+    return authored;
+  }
+  #consume(record) {
+    if (record.type === "attributes") {
+      const target = record.target;
+      const pending2 = this.#claims?.attributes.get(target)?.get(record.attributeName);
+      if (!pending2 || pending2.count === 0 || target.getAttribute(record.attributeName) !== pending2.value) {
+        return false;
+      }
+      pending2.count -= 1;
+      return true;
+    }
+    const pending = this.#claims?.children.get(record.target);
+    if (!pending) return false;
+    const added = [...record.addedNodes];
+    const removed = [...record.removedNodes];
+    if (added.some((node) => !pending.added.get(node)) || removed.some((node) => !pending.removed.get(node))) {
+      return false;
+    }
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) - 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) - 1);
+    return true;
+  }
+};
 
 function writeField(field, value) {
   if (field.value === value) return false;
@@ -50,6 +151,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -80,6 +184,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -151,17 +258,20 @@ var PM = 1;
 var SECONDS_PER_MINUTE = 60;
 var SECONDS_PER_HOUR = 60 * SECONDS_PER_MINUTE;
 var SECONDS_PER_DAY = 24 * SECONDS_PER_HOUR;
-var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var TimePickerController = class _TimePickerController extends Controller {
   #numbers = new NumberValueReader();
   #moves = new MoveCounter();
+  #connectionGeneration = 0;
   #move = 0;
   static targets = ["segment", "field"];
   static values = {
     hourCycle: { type: Number, default: 24 },
+    hour12ZeroBased: { type: Boolean, default: false },
     step: { type: Number, default: 1 },
     seconds: { type: Boolean, default: false },
-    wrap: { type: Boolean, default: true }
+    wrap: { type: Boolean, default: true },
+    amLabel: { type: String, default: "AM" },
+    pmLabel: { type: String, default: "PM" }
   };
   static valueConstraints = {
     hourCycle: { finite: true, allowedValues: [12, 24] },
@@ -174,39 +284,56 @@ var TimePickerController = class _TimePickerController extends Controller {
   #typeBuffer = "";
   #typeSegment = null;
   #lastValue = "";
-  #observer = null;
-  #connected = false;
+  #renderedHourMode = null;
+  #renderedSegments = /* @__PURE__ */ new WeakSet();
+  #authoredSegments = /* @__PURE__ */ new Set();
+  #observer = new AuthoredMutationWatcher((records) => {
+    if (!this.#recordAuthoredSegments(records)) return;
+    this.#reconcile.schedule();
+  });
   #domDirty = false;
+  #listeners = new ListenerSet();
   connect() {
-    this.#connected = true;
     this.#reconcile.observe(this.element);
-    this.element.addEventListener("focusout", this.#onFocusOut);
+    this.#listeners.add(this.element, "focusout", this.#onFocusOut);
     this.#domDirty = false;
     this.#adoptDomState();
     this.#render();
     this.#observeMutations();
   }
   disconnect() {
-    this.#connected = false;
+    this.#connectionGeneration += 1;
     this.#reconcile.disconnect();
-    this.element.removeEventListener("focusout", this.#onFocusOut);
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#listeners.dispose();
+    this.#observer.disconnect();
     this.#domDirty = false;
+    this.#renderedHourMode = null;
+    this.#renderedSegments = /* @__PURE__ */ new WeakSet();
+    this.#authoredSegments.clear();
     this.#clearTypeBuffer();
     this.#lastValue = "";
   }
   hourCycleValueChanged() {
     this.#reconcile.schedule();
   }
+  hour12ZeroBasedValueChanged() {
+    this.#reconcile.schedule();
+  }
   secondsValueChanged() {
     this.#reconcile.schedule();
   }
+  amLabelValueChanged() {
+    this.#reconcile.schedule();
+  }
+  pmLabelValueChanged() {
+    this.#reconcile.schedule();
+  }
   segmentTargetConnected() {
     this.#domDirty = true;
     this.#reconcile.schedule();
   }
-  segmentTargetDisconnected() {
+  segmentTargetDisconnected(segment) {
+    if (segment && !this.segmentTargets.includes(segment)) this.#renderedSegments.delete(segment);
     this.#domDirty = true;
     this.#reconcile.schedule();
   }
@@ -225,8 +352,9 @@ var TimePickerController = class _TimePickerController extends Controller {
     const kind = this.#kindOf(segment);
     if (!kind) return;
     const key = logicalArrowKey(event.key, this.element);
-    if ((key === "Home" || key === "End") && hasModifier(event)) return;
+    if ((key === "Home" || key === "End") && hasModifierChord(event)) return;
     if (this.#adoptPendingDom()) this.#reconcile.schedule();
+    if (this.#renderedHourMode !== this.#hourMode) this.#clearTypeBuffer();
     switch (key) {
       case "ArrowUp":
         event.preventDefault();
@@ -255,7 +383,7 @@ var TimePickerController = class _TimePickerController extends Controller {
         this.#commitRender();
         break;
       default:
-        if (kind !== "meridiem" && /^[0-9]$/.test(event.key) && !hasModifier(event)) {
+        if (kind !== "meridiem" && /^[0-9]$/.test(event.key) && !event.ctrlKey && !event.altKey && !event.metaKey) {
           event.preventDefault();
           this.#typeDigit(segment, kind, event.key);
           return;
@@ -298,7 +426,7 @@ var TimePickerController = class _TimePickerController extends Controller {
     const candidate = Number(`${this.#typeBuffer}${digit}`);
     this.#typeBuffer = candidate <= max ? `${this.#typeBuffer}${digit}` : digit;
     this.#setDisplayed(kind, Number(this.#typeBuffer));
-    this.#commitRender();
+    this.#commitRender(true);
     if (this.#typeBuffer.length >= 2 || Number(this.#typeBuffer) * 10 > max) {
       this.#clearTypeBuffer();
       this.#focusSibling(segment, 1);
@@ -314,21 +442,30 @@ var TimePickerController = class _TimePickerController extends Controller {
     this.#typeSegment = null;
   }
   #adoptPendingDom() {
-    const pending = this.#observer?.takeRecords() ?? [];
-    if (pending.some(({ target }) => this.segmentTargets.includes(target))) {
-      this.#domDirty = true;
-    }
+    this.#recordAuthoredSegments(this.#observer.take());
     if (!this.#domDirty) return false;
     this.#domDirty = false;
     this.#clearTypeBuffer();
     this.#adoptDomState();
     return true;
   }
+  #recordAuthoredSegments(records) {
+    let changed = false;
+    for (const { target } of records) {
+      if (!(target instanceof HTMLElement) || !this.segmentTargets.includes(target)) continue;
+      this.#authoredSegments.add(target);
+      changed = true;
+    }
+    if (changed) this.#domDirty = true;
+    return changed;
+  }
   #reconcileDom() {
     this.#adoptPendingDom();
     this.#render();
   }
   #adoptDomState() {
+    const mode = this.#hourMode;
+    const presentationChanged = this.#renderedHourMode !== null && this.#renderedHourMode !== mode;
     let displayedHour = 0;
     let meridiem = AM;
     let minute = 0;
@@ -336,7 +473,15 @@ var TimePickerController = class _TimePickerController extends Controller {
     for (const segment of this.segmentTargets) {
       const kind = this.#kindOf(segment);
       if (!kind) continue;
-      const value = this.#authoredValue(segment, kind);
+      const retained = presentationChanged && this.#renderedSegments.has(segment) && !this.#authoredSegments.has(segment);
+      let value;
+      if (retained && kind === "hour") {
+        value = mode === "h23" ? this.#state.hour : this.#state.hour % 12;
+      } else if (retained && kind === "meridiem") {
+        value = this.#state.hour >= 12 ? PM : AM;
+      } else {
+        value = this.#authoredValue(segment, kind);
+      }
       if (kind === "hour") displayedHour = value;
       else if (kind === "minute") minute = value;
       else if (kind === "second") second = value;
@@ -347,6 +492,7 @@ var TimePickerController = class _TimePickerController extends Controller {
       minute,
       second
     };
+    this.#authoredSegments.clear();
   }
   #authoredValue(segment, kind) {
     const raw = Number(segment.getAttribute("aria-valuenow"));
@@ -371,10 +517,11 @@ var TimePickerController = class _TimePickerController extends Controller {
     this.#state.minute = Math.floor(seconds % SECONDS_PER_HOUR / SECONDS_PER_MINUTE);
     this.#state.second = seconds % SECONDS_PER_MINUTE;
   }
-  #renderSegments() {
-    this.#withoutObservation(() => {
-      for (const segment of this.segmentTargets) this.#renderSegment(segment);
-    });
+  #renderSegments(preserveTypeBuffer = false) {
+    const mode = this.#hourMode;
+    if (this.#renderedHourMode !== mode && !preserveTypeBuffer) this.#clearTypeBuffer();
+    this.#renderedHourMode = mode;
+    for (const segment of this.segmentTargets) this.#renderSegment(segment);
   }
   #render() {
     this.#renderSegments();
@@ -387,24 +534,29 @@ var TimePickerController = class _TimePickerController extends Controller {
       this.dispatch("reconcile", { detail: { value } });
     }
   }
-  #commitRender() {
-    this.#renderSegments();
+  #commitRender(preserveTypeBuffer = false) {
+    const generation = this.#connectionGeneration;
+    this.#renderSegments(preserveTypeBuffer);
     const value = this.#composedValue;
     const changed = value !== this.#lastValue;
     this.#lastValue = value;
     if (changed) this.#move = this.#moves.record();
     const move = this.#move;
     if (this.#writeField(value)) commitField(this.fieldTarget);
-    if (!this.#moves.isLatest(move)) return;
+    if (generation !== this.#connectionGeneration || !this.#moves.isLatest(move)) return;
     if (changed) this.dispatch("change", { detail: { value } });
   }
   #renderSegment(segment) {
     const kind = this.#kindOf(segment);
     if (!kind) return;
+    this.#renderedSegments.add(segment);
     const value = this.#displayValue(kind);
-    const text = kind === "meridiem" ? value === PM ? "PM" : "AM" : pad(value);
+    const text = kind === "meridiem" ? value === PM ? this.pmLabelValue : this.amLabelValue : pad(value);
     const { min, max } = this.#bounds(kind);
-    segment.setAttribute("aria-valuenow", String(value));
+    const serialized = String(value);
+    setAttributeIfChanged(segment, "aria-valuenow", serialized, () => {
+      this.#observer.claim(segment, "aria-valuenow", serialized);
+    });
     segment.setAttribute("aria-valuetext", text);
     segment.setAttribute("aria-valuemin", String(min));
     segment.setAttribute("aria-valuemax", String(max));
@@ -420,7 +572,10 @@ var TimePickerController = class _TimePickerController extends Controller {
   }
   #displayValue(kind) {
     if (kind === "hour") {
-      return this.#safeHourCycle === 12 ? this.#state.hour % 12 || 12 : this.#state.hour;
+      const mode = this.#hourMode;
+      if (mode === "h23") return this.#state.hour;
+      const hour = this.#state.hour % 12;
+      return mode === "h11" ? hour : hour || 12;
     }
     if (kind === "meridiem") return this.#state.hour >= 12 ? PM : AM;
     return this.#state[kind];
@@ -428,7 +583,8 @@ var TimePickerController = class _TimePickerController extends Controller {
   #bounds(kind) {
     switch (kind) {
       case "hour":
-        return this.#safeHourCycle === 12 ? { min: 1, max: 12 } : { min: 0, max: 23 };
+        if (this.#hourMode === "h23") return { min: 0, max: 23 };
+        return this.#hourMode === "h11" ? { min: 0, max: 11 } : { min: 1, max: 12 };
       case "minute":
       case "second":
         return { min: 0, max: 59 };
@@ -437,33 +593,11 @@ var TimePickerController = class _TimePickerController extends Controller {
     }
   }
   #observeMutations() {
-    const observer = new MutationObserver((records) => {
-      const changed = records.some(
-        ({ target }) => target instanceof HTMLElement && this.segmentTargets.includes(target)
-      );
-      if (!changed) return;
-      this.#domDirty = true;
-      this.#reconcile.schedule();
-    });
-    this.#observer = observer;
-    this.#observeWith(observer);
-  }
-  #observeWith(observer) {
-    observer.observe(this.element, {
+    this.#observer.observe(this.element, {
       subtree: true,
-      attributes: true,
-      attributeFilter: ["aria-valuenow", "data-segment"]
+      attributes: ["aria-valuenow", "data-segment"]
     });
   }
-  #withoutObservation(run) {
-    const observer = this.#observer;
-    observer?.disconnect();
-    try {
-      run();
-    } finally {
-      if (observer && this.#connected) this.#observeWith(observer);
-    }
-  }
   #kindOf(segment) {
     const kind = segment.getAttribute("data-segment");
     if (kind === "hour" || kind === "minute" || kind === "second" || kind === "meridiem") {
@@ -474,6 +608,10 @@ var TimePickerController = class _TimePickerController extends Controller {
   get #secondsOfDay() {
     return this.#state.hour * SECONDS_PER_HOUR + this.#state.minute * SECONDS_PER_MINUTE + this.#state.second;
   }
+  get #hourMode() {
+    if (this.#safeHourCycle !== 12) return "h23";
+    return this.hour12ZeroBasedValue ? "h11" : "h12";
+  }
   get #safeHourCycle() {
     return this.#numbers.read(
       this,