@unabridged/midwest 0.17.0 → 0.18.0

package/dist/javascript/midwest.js

@@ -549,13 +549,16 @@ class Banner extends Controller {
 }
 
 class Input extends Controller {
-  static targets = ["input", "counter"];
+  static targets = ["input", "counter", "capsLockWarning"];
   updateClearButton = null;
   updateCounter = null;
+  updateCapsLock = null;
+  hideCapsLock = null;
   connect() {
     this.applyColor();
     this.applySearchClear();
     this.applyCounter();
+    this.applyPassword();
   }
   disconnect() {
     if (this.updateClearButton) {
@@ -566,6 +569,38 @@ class Input extends Controller {
       this.inputTarget.removeEventListener("input", this.updateCounter);
       this.updateCounter = null;
     }
+    if (this.updateCapsLock) {
+      this.inputTarget.removeEventListener("keydown", this.updateCapsLock);
+      this.inputTarget.removeEventListener("keyup", this.updateCapsLock);
+      this.inputTarget.removeEventListener("mousedown", this.updateCapsLock);
+      this.updateCapsLock = null;
+    }
+    if (this.hideCapsLock) {
+      this.inputTarget.removeEventListener("blur", this.hideCapsLock);
+      this.hideCapsLock = null;
+    }
+  }
+  increment() {
+    const input = this.inputTarget;
+    const step = parseFloat(input.step) || 1;
+    const max = input.max !== "" ? parseFloat(input.max) : Infinity;
+    const newValue = (parseFloat(input.value) || 0) + step;
+    if (newValue <= max) {
+      input.value = String(newValue);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+  decrement() {
+    const input = this.inputTarget;
+    const step = parseFloat(input.step) || 1;
+    const min = input.min !== "" ? parseFloat(input.min) : -Infinity;
+    const newValue = (parseFloat(input.value) || 0) - step;
+    if (newValue >= min) {
+      input.value = String(newValue);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
   }
   applyColor() {
     if (this.inputTarget.type !== "color") {
@@ -584,6 +619,20 @@ class Input extends Controller {
     };
     this.inputTarget.addEventListener("input", this.updateCounter);
   }
+  applyPassword() {
+    if (!this.hasCapsLockWarningTarget)
+      return;
+    this.updateCapsLock = (e) => {
+      this.capsLockWarningTarget.hidden = !e.getModifierState("CapsLock");
+    };
+    this.hideCapsLock = () => {
+      this.capsLockWarningTarget.hidden = true;
+    };
+    this.inputTarget.addEventListener("keydown", this.updateCapsLock);
+    this.inputTarget.addEventListener("keyup", this.updateCapsLock);
+    this.inputTarget.addEventListener("mousedown", this.updateCapsLock);
+    this.inputTarget.addEventListener("blur", this.hideCapsLock);
+  }
   applySearchClear() {
     if (this.inputTarget.type !== "search")
       return;
@@ -3492,11 +3541,13 @@ class FormLiveSummary extends Controller {
     this.form?.addEventListener("input", this.render);
     this.form?.addEventListener("change", this.render);
     this.form?.addEventListener("midwest-autocomplete:change", this.render);
+    this.form?.addEventListener("midwest-color-picker:update", this.render);
   }
   disconnect() {
     this.form?.removeEventListener("input", this.render);
     this.form?.removeEventListener("change", this.render);
     this.form?.removeEventListener("midwest-autocomplete:change", this.render);
+    this.form?.removeEventListener("midwest-color-picker:update", this.render);
   }
   get form() {
     return this.element.closest("form");
@@ -3514,15 +3565,18 @@ class FormLiveSummary extends Controller {
     }
     const dl = document.createElement("dl");
     dl.className = "midwest-form-live-summary-list";
-    fields.forEach(({ label, value }) => {
+    fields.forEach(({ label, value, swatchColor }) => {
       const dt = Object.assign(document.createElement("dt"), {
         className: "midwest-form-live-summary-term",
         textContent: label
       });
-      const dd = Object.assign(document.createElement("dd"), {
-        className: "midwest-form-live-summary-definition",
-        textContent: value || "\u2014"
-      });
+      const dd = document.createElement("dd");
+      dd.className = "midwest-form-live-summary-definition";
+      if (swatchColor !== void 0) {
+        dd.append(this.buildSwatch(swatchColor), value || "\u2014");
+      } else {
+        dd.textContent = value || "\u2014";
+      }
       dl.append(dt, dd);
     });
     this.listTarget.replaceChildren(dl);
@@ -3579,6 +3633,18 @@ class FormLiveSummary extends Controller {
         value: element.value
       });
     });
+    form.querySelectorAll('[data-midwest-color-picker-target="input"]').forEach((input) => {
+      if (this.element.contains(input))
+        return;
+      if (!input.name)
+        return;
+      const picker = input.closest(".midwest-color-picker");
+      const labelEl = picker?.querySelector(".midwest-form-group__top label") ?? this.form?.querySelector(`label[for="${CSS.escape(input.id)}"]`);
+      const label = labelEl?.textContent?.trim() || this.prettifyName(input.name.replace(/\[.*\]$/, ""));
+      const value = input.value;
+      const display = value.startsWith("#") ? value : value ? value.charAt(0).toUpperCase() + value.slice(1) : "\u2014";
+      fields.push({ label, value: display, swatchColor: value || void 0 });
+    });
     form.querySelectorAll(".midwest-autocomplete").forEach((ac) => {
       if (this.element.contains(ac))
         return;
@@ -3591,6 +3657,22 @@ class FormLiveSummary extends Controller {
     });
     return fields;
   }
+  // Builds a small inline colour swatch to display alongside a colour value.
+  // Hex values are applied as an inline background-color; named theme colours
+  // use a scoped theme-{color} class so the CSS variable cascade does the work.
+  // An empty/transparent value renders a diagonal-stripe placeholder.
+  buildSwatch(color) {
+    const swatch = document.createElement("span");
+    swatch.className = "midwest-form-live-summary-swatch";
+    if (color.startsWith("#")) {
+      swatch.style.backgroundColor = color;
+    } else if (color && color !== "transparent") {
+      swatch.classList.add(`theme-${color}`, "bg-theme-6");
+    } else {
+      swatch.classList.add("is-transparent");
+    }
+    return swatch;
+  }
   // Finds the label associated with a specific element via `for` attribute,
   // wrapping label, or falls back to a prettified version of the element name.
   labelFor(el) {
@@ -3656,16 +3738,37 @@ class CountdownTimer extends Controller {
     seconds: { type: Number, default: 5 }
   };
   timer = null;
+  remaining = 0;
+  startTime = 0;
   connect() {
-    this.timer = setTimeout(() => {
-      this.dispatch("complete", { bubbles: true });
-    }, this.secondsValue * 1e3);
+    this.remaining = this.secondsValue * 1e3;
+    this.resume();
   }
   disconnect() {
-    if (this.timer !== null) {
-      clearTimeout(this.timer);
+    this.pause();
+  }
+  pause() {
+    if (this.timer === null)
+      return;
+    clearTimeout(this.timer);
+    this.timer = null;
+    this.remaining = Math.max(0, this.remaining - (Date.now() - this.startTime));
+    this.setPlayState("paused");
+  }
+  resume() {
+    if (this.timer !== null)
+      return;
+    this.startTime = Date.now();
+    this.timer = setTimeout(() => {
       this.timer = null;
-    }
+      this.dispatch("complete", { bubbles: true });
+    }, this.remaining);
+    this.setPlayState("running");
+  }
+  setPlayState(state) {
+    const progress = this.element.querySelector(".midwest-countdown-timer__progress");
+    if (progress)
+      progress.style.animationPlayState = state;
   }
 }
 
@@ -3858,19 +3961,30 @@ class Rating extends Controller {
 }
 
 class Autocomplete extends Controller {
-  static targets = ["input", "dropdown", "list", "tokens", "multipleTokenTemplate", "singleTokenTemplate", "status", "turboList", "loader"];
+  static targets = [
+    "input",
+    "dropdown",
+    "list",
+    "tokens",
+    "multipleTokenTemplate",
+    "singleTokenTemplate",
+    "status",
+    "turboList",
+    "loader",
+    "freeFormHintList",
+    "freeFormHintValue"
+  ];
   static values = {
     options: { type: Array, default: [] },
     url: { type: String, default: "" },
     multiple: { type: Boolean, default: true },
-    turboFrameUrl: { type: String, default: "" }
+    turboFrameUrl: { type: String, default: "" },
+    freeForm: { type: Boolean, default: false }
   };
   highlightedIndex = -1;
   fetchAbort = null;
   searchTimer;
   // ── Named handlers ─────────────────────────────────────────────────────────
-  // Arrow-function class properties preserve `this` and produce a stable
-  // reference so addEventListener/removeEventListener pairs always match.
   onFrameLoad = () => {
     this.syncSelectedState();
     this.loading = false;
@@ -3905,9 +4019,6 @@ class Autocomplete extends Controller {
     clearTimeout(this.searchTimer);
     this.element.removeEventListener("focusout", this.onFocusOut);
   }
-  // Target callbacks — Stimulus calls these automatically when targets connect
-  // or disconnect, including after the initial connect(). This replaces manual
-  // hasTurboListTarget guards and addEventListener calls inside connect().
   dropdownTargetConnected(el) {
     el.addEventListener("toggle", this.onToggle);
   }
@@ -3932,13 +4043,27 @@ class Autocomplete extends Controller {
     this.open();
   }
   open() {
+    if (!this.hasDropdownTarget)
+      return;
     if (this.dropdownTarget.matches(":popover-open"))
       return;
+    const query = this.inputTarget.value.trim();
+    if (this.freeFormValue && !this.hasListTarget && !this.hasTurboListTarget) {
+      if (query) {
+        this.updateFreeFormHint(query);
+        this.showDropdown();
+      }
+      return;
+    }
     clearTimeout(this.searchTimer);
-    this.resolve(this.inputTarget.value.trim());
+    this.resolve(query);
   }
   search() {
     const query = this.inputTarget.value.trim();
+    if (this.freeFormValue)
+      this.updateFreeFormHint(query);
+    if (!this.hasListTarget && !this.hasTurboListTarget)
+      return;
     if (!this.hasTurboListTarget && !this.urlValue) {
       this.renderOptions(this.filteredOptions(query));
       return;
@@ -3953,6 +4078,8 @@ class Autocomplete extends Controller {
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
+        if (!this.hasDropdownTarget)
+          break;
         if (!this.dropdownTarget.matches(":popover-open"))
           this.open();
         const items = this.visibleOptions();
@@ -3962,7 +4089,7 @@ class Autocomplete extends Controller {
       }
       case "ArrowUp": {
         event.preventDefault();
-        if (!this.dropdownTarget.matches(":popover-open"))
+        if (!this.hasDropdownTarget || !this.dropdownTarget.matches(":popover-open"))
           break;
         const items = this.visibleOptions();
         this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
@@ -3971,11 +4098,22 @@ class Autocomplete extends Controller {
       }
       case "Enter": {
         event.preventDefault();
-        if (!this.dropdownTarget.matches(":popover-open"))
-          break;
-        const items = this.visibleOptions();
-        if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
-          this.pickItem(items[this.highlightedIndex]);
+        if (this.hasDropdownTarget && this.dropdownTarget.matches(":popover-open") && (this.hasListTarget || this.hasTurboListTarget)) {
+          const items = this.visibleOptions();
+          if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
+            this.pickItem(items[this.highlightedIndex]);
+            break;
+          }
+        }
+        if (this.freeFormValue) {
+          this.commitFreeFormTag();
+        }
+        break;
+      }
+      case ",": {
+        if (this.freeFormValue && this.inputTarget.value.trim()) {
+          event.preventDefault();
+          this.commitFreeFormTag();
         }
         break;
       }
@@ -3992,6 +4130,22 @@ class Autocomplete extends Controller {
         break;
     }
   }
+  // Splits pasted text on commas and newlines into individual tags (free-form mode only).
+  pasteTag(event) {
+    if (!this.freeFormValue)
+      return;
+    const text = event.clipboardData?.getData("text") ?? "";
+    const tags = text.split(/[\n,]+/).map((t) => t.trim()).filter(Boolean);
+    if (tags.length === 0)
+      return;
+    event.preventDefault();
+    tags.forEach((tag) => this.addFreeFormTag(tag));
+  }
+  // Mousedown on the "Hit Enter to add 'X'" hint row.
+  addFreeFormTagFromHint(event) {
+    event.preventDefault();
+    this.commitFreeFormTag();
+  }
   removeToken(event) {
     event.stopPropagation();
     const btn = event.currentTarget;
@@ -3999,9 +4153,6 @@ class Autocomplete extends Controller {
     if (value)
       this.deselect(value);
   }
-  // Public action used by turbo-frame option items via data-action.
-  // Each server-rendered <li> should have:
-  //   data-action="mousedown->midwest-autocomplete#selectOption"
   selectOption(event) {
     event.preventDefault();
     this.pickItem(event.currentTarget);
@@ -4013,7 +4164,6 @@ class Autocomplete extends Controller {
   isSelected(value) {
     return !!this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
   }
-  // Routes to the correct data source. Shared by open() and the debounced search path.
   resolve(query) {
     if (this.hasTurboListTarget) {
       this.navigateFrame(query);
@@ -4042,9 +4192,6 @@ class Autocomplete extends Controller {
     this.turboListTarget.setAttribute("src", url.toString());
     this.showDropdown();
   }
-  // After a turbo frame loads, mark already-selected items and update the live region.
-  // The empty state element is always present in the frame and CSS shows/hides it
-  // based on whether any non-selected options exist.
   syncSelectedState() {
     const options = this.turboListTarget.querySelectorAll(".midwest-autocomplete-option");
     options.forEach((option) => {
@@ -4080,6 +4227,7 @@ class Autocomplete extends Controller {
   select(option) {
     this.appendToken(option);
     this.hideDropdown();
+    this.hideFreeFormHint();
     this.inputTarget.value = "";
     this.inputTarget.focus();
     this.announce(`${option.label} selected`);
@@ -4151,11 +4299,19 @@ class Autocomplete extends Controller {
       this.renderEmpty("No more options");
       return;
     }
+    this.hideFreeFormHint();
     this.loading = false;
     this.announce(`${availableCount} option${availableCount === 1 ? "" : "s"} available`);
     this.showDropdown();
   }
   renderEmpty(message = "No results") {
+    if (this.freeFormValue && this.inputTarget.value.trim()) {
+      if (this.hasListTarget)
+        this.listTarget.replaceChildren();
+      this.loading = false;
+      this.updateFreeFormHint(this.inputTarget.value.trim());
+      return;
+    }
     const li = document.createElement("li");
     li.className = "midwest-autocomplete-empty";
     li.setAttribute("aria-hidden", "true");
@@ -4165,15 +4321,39 @@ class Autocomplete extends Controller {
     this.announce(message);
     this.showDropdown();
   }
+  // Shows or hides the "Hit Enter to add 'X'" hint based on the current query.
+  updateFreeFormHint(query) {
+    if (!this.hasFreeFormHintListTarget)
+      return;
+    if (query && !this.isSelected(query)) {
+      if (this.hasFreeFormHintValueTarget) {
+        this.freeFormHintValueTarget.textContent = `"${query}"`;
+      }
+      this.freeFormHintListTarget.hidden = false;
+      this.showDropdown();
+    } else {
+      this.hideFreeFormHint();
+      if (!this.hasListTarget && !this.hasTurboListTarget)
+        this.hideDropdown();
+    }
+  }
+  hideFreeFormHint() {
+    if (this.hasFreeFormHintListTarget)
+      this.freeFormHintListTarget.hidden = true;
+  }
   set loading(on) {
     if (this.hasLoaderTarget)
       this.loaderTarget.hidden = !on;
   }
   showDropdown() {
+    if (!this.hasDropdownTarget)
+      return;
     if (!this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.showPopover();
   }
   hideDropdown() {
+    if (!this.hasDropdownTarget)
+      return;
     if (this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.hidePopover();
   }
@@ -4197,6 +4377,17 @@ class Autocomplete extends Controller {
     const support = item.querySelector(".midwest-autocomplete-option-support")?.textContent?.trim();
     this.select({ value, label, support });
   }
+  commitFreeFormTag() {
+    const value = this.inputTarget.value.trim();
+    this.addFreeFormTag(value);
+  }
+  addFreeFormTag(value) {
+    if (!value)
+      return;
+    if (this.isSelected(value))
+      return;
+    this.select({ value, label: value });
+  }
   announce(message) {
     if (this.hasStatusTarget)
       this.statusTarget.textContent = message;
@@ -4733,6 +4924,187 @@ class Image extends Controller {
   }
 }
 
+class ColorPicker extends Controller {
+  static targets = ["input", "swatch", "customSwatch", "colorInput"];
+  onCustomColorChange = null;
+  get scaleTarget() {
+    return this.element.dataset.scaleTarget ?? "theme";
+  }
+  connect() {
+    if (this.hasColorInputTarget) {
+      this.onCustomColorChange = (e) => this.handleCustomColor(e);
+      this.colorInputTarget.addEventListener("input", this.onCustomColorChange);
+    }
+    if (this.hasInputTarget && this.inputTarget.value.startsWith("#")) {
+      this.restoreCustom(this.inputTarget.value);
+    }
+  }
+  disconnect() {
+    if (this.hasColorInputTarget && this.onCustomColorChange) {
+      this.colorInputTarget.removeEventListener("input", this.onCustomColorChange);
+      this.onCustomColorChange = null;
+    }
+  }
+  select(e) {
+    const button = e.currentTarget;
+    const color = button.dataset.color ?? "";
+    this.applySelection(color);
+    this.dispatch("update", { detail: { color, scaleTarget: this.scaleTarget } });
+  }
+  openCustom(e) {
+    e.preventDefault();
+    this.colorInputTarget.click();
+  }
+  handleCustomColor(e) {
+    const hex = e.target.value;
+    if (this.hasCustomSwatchTarget) {
+      this.customSwatchTarget.dataset.color = hex;
+      this.customSwatchTarget.style.background = hex;
+    }
+    const scale = this.generateScale(hex);
+    this.applyScale(scale);
+    this.applySelection(hex);
+    this.dispatch("update", { detail: { color: hex, scale, scaleTarget: this.scaleTarget } });
+  }
+  restoreCustom(hex) {
+    if (this.hasColorInputTarget) {
+      this.colorInputTarget.value = hex;
+    }
+    if (this.hasCustomSwatchTarget) {
+      this.customSwatchTarget.style.background = hex;
+    }
+    const scale = this.generateScale(hex);
+    this.applyScale(scale);
+  }
+  applySelection(color) {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = color;
+    }
+    this.swatchTargets.forEach((swatch) => {
+      const isSelected = swatch.dataset.color === color;
+      swatch.classList.toggle("is-selected", isSelected);
+      swatch.setAttribute("aria-pressed", String(isSelected));
+    });
+  }
+  // Generates 13 RGB channel strings (space-separated, matching --{color}-{n}-channels format)
+  // from a hex color by fixing the hue/saturation and distributing lightness across the scale.
+  generateScale(hex) {
+    const [h, s] = this.hexToHsl(hex);
+    const lightnessSteps = [97, 90, 82, 74, 65, 56, 48, 40, 33, 26, 18, 10, 3];
+    return Object.fromEntries(
+      lightnessSteps.map((l, i) => {
+        const [r, g, b] = this.hslToRgb(h, s, l);
+        return [String(i), `${r} ${g} ${b}`];
+      })
+    );
+  }
+  applyScale(scale) {
+    const el = this.element;
+    Object.entries(scale).forEach(([step, channels]) => {
+      el.style.setProperty(`--${this.scaleTarget}-${step}-channels`, channels);
+    });
+  }
+  hexToHsl(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min)
+      return [0, 0, l * 100];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    const h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) / 6 : max === g ? ((b - r) / d + 2) / 6 : ((r - g) / d + 4) / 6;
+    return [h * 360, s * 100, l * 100];
+  }
+  hslToRgb(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    if (s === 0) {
+      const v = Math.round(l * 255);
+      return [v, v, v];
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    return [
+      Math.round(this.hue2rgb(p, q, h + 1 / 3) * 255),
+      Math.round(this.hue2rgb(p, q, h) * 255),
+      Math.round(this.hue2rgb(p, q, h - 1 / 3) * 255)
+    ];
+  }
+  hue2rgb(p, q, t) {
+    if (t < 0)
+      t += 1;
+    if (t > 1)
+      t -= 1;
+    if (t < 1 / 6)
+      return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+      return q;
+    if (t < 2 / 3)
+      return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+}
+
+class Notification extends Controller {
+  container = null;
+  observer = null;
+  connect() {
+    this.container = this.element.closest("[popover]");
+    this.container?.showPopover?.();
+    requestAnimationFrame(() => {
+      this.element.classList.add("visible");
+    });
+    const frame = this.element.parentElement;
+    if (frame) {
+      this.observer = new MutationObserver(() => this.syncCountdown());
+      this.observer.observe(frame, { childList: true });
+      setTimeout(() => this.syncCountdown());
+    }
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = null;
+    if (this.container) {
+      const frame = this.container.querySelector("turbo-frame");
+      if (frame?.children.length === 0 && this.container.matches(":popover-open")) {
+        this.container.hidePopover?.();
+      }
+      this.container = null;
+    }
+  }
+  close() {
+    if (!this.element.classList.contains("animated")) {
+      this.element.remove();
+      return;
+    }
+    this.element.classList.add("closing");
+    setTimeout(() => {
+      this.element.remove();
+    }, 350);
+  }
+  syncCountdown() {
+    const timerEl = this.element.querySelector('[data-controller~="midwest-countdown-timer"]');
+    if (!timerEl)
+      return;
+    const timer = this.application.getControllerForElementAndIdentifier(
+      timerEl,
+      "midwest-countdown-timer"
+    );
+    if (!timer)
+      return;
+    const isTop = this.element === this.element.parentElement?.firstElementChild;
+    if (isTop) {
+      timer.resume();
+    } else {
+      timer.pause();
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -4755,6 +5127,8 @@ function registerMidwestControllers(application) {
   application.register("midwest-rating", Rating);
   application.register("midwest-autocomplete", Autocomplete);
   application.register("midwest-image", Image);
+  application.register("midwest-color-picker", ColorPicker);
+  application.register("midwest-notification", Notification);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };