@unabridged/midwest 0.6.2 → 0.7.0

package/app/assets/javascript/midwest/index.ts

@@ -12,6 +12,8 @@ import Video from '../../../components/midwest/video_component/video_component_c
 import DropdownItem from '../../../components/midwest/dropdown_item_component/dropdown_item_component_controller'
 import Tabs from '../../../components/midwest/tabs_component/tabs_component_controller'
 import Tooltip from '../../../components/midwest/tooltip_component/tooltip_component_controller'
+import Carousel from '../../../components/midwest/carousel_component/carousel_component_controller'
+import FormLiveSummary from '../../../components/midwest/form/live_summary_component/live_summary_component_controller'
 /* IMPORTS */
 
 export { Card, Banner }
@@ -31,5 +33,7 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-dropdown-item', DropdownItem)
   application.register('midwest-tabs', Tabs)
   application.register('midwest-tooltip', Tooltip)
+  application.register('midwest-carousel', Carousel)
+  application.register('midwest-form-live-summary', FormLiveSummary)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -2973,6 +2973,257 @@ class Tooltip extends Controller {
   }
 }
 
+const NON_SUBMITTING_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "color",
+  "file",
+  "hidden",
+  "image",
+  "radio",
+  "range",
+  "reset",
+  "submit"
+]);
+class Carousel extends Controller {
+  static targets = ["track", "prev", "next", "dot"];
+  static values = {
+    wizard: { type: Boolean, default: false }
+  };
+  observer = null;
+  _currentIndex = 0;
+  _maxUnlocked = 0;
+  connect() {
+    this.setupObserver();
+    this.updateNavigation();
+    if (this.wizardValue) {
+      this.element.addEventListener("keydown", this.handleKeydown);
+    }
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.element.removeEventListener("keydown", this.handleKeydown);
+  }
+  next() {
+    this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
+  }
+  previous() {
+    this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: "smooth" });
+  }
+  goto(event) {
+    const button = event.currentTarget;
+    const index = parseInt(button.dataset.index ?? "0", 10);
+    const slide = this.slides[index];
+    slide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+  }
+  // Unlocks the next slide and advances to it. Intended for wizard mode: wire
+  // a "Continue" button inside a slide to this action so users progress
+  // linearly through steps before the carousel nav becomes available.
+  //
+  //   <button type="button" data-action="click->midwest-carousel#unlockNext">
+  //     Continue
+  //   </button>
+  unlockNext() {
+    const nextIndex = this._currentIndex + 1;
+    if (nextIndex > this._maxUnlocked) {
+      this._maxUnlocked = nextIndex;
+    }
+    this.next();
+  }
+  scrolled() {
+    this.updateCurrentIndex();
+    this.updateNavigation();
+  }
+  // Arrow function so `this` is stable for add/removeEventListener pairing.
+  handleKeydown = (event) => {
+    if (event.key !== "Enter")
+      return;
+    const target = event.target;
+    if (target.tagName === "TEXTAREA" || target.tagName !== "INPUT")
+      return;
+    if (NON_SUBMITTING_INPUT_TYPES.has(target.type))
+      return;
+    if (this._currentIndex >= this.slides.length - 1)
+      return;
+    event.preventDefault();
+    this.unlockNext();
+  };
+  get slides() {
+    return Array.from(this.trackTarget.children);
+  }
+  updateCurrentIndex() {
+    const track = this.trackTarget;
+    if (track.clientWidth > 0) {
+      this._currentIndex = Math.round(track.scrollLeft / track.clientWidth);
+    }
+  }
+  setupObserver() {
+    if (!this.hasDotTarget)
+      return;
+    if (!("IntersectionObserver" in window))
+      return;
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const index = this.slides.indexOf(entry.target);
+          if (index >= 0) {
+            this.dotTargets[index]?.classList.toggle("active", entry.isIntersecting);
+          }
+        });
+      },
+      { root: this.trackTarget, threshold: 0.5 }
+    );
+    this.slides.forEach((slide) => this.observer?.observe(slide));
+  }
+  updateNavigation() {
+    const track = this.trackTarget;
+    const atStart = track.scrollLeft <= 0;
+    const atEnd = track.scrollLeft >= track.scrollWidth - track.clientWidth - 1;
+    if (this.hasPrevTarget)
+      this.prevTarget.classList.toggle("hide", atStart);
+    if (this.hasNextTarget) {
+      const frontierReached = this.wizardValue && this._currentIndex >= this._maxUnlocked;
+      this.nextTarget.classList.toggle("hide", atEnd || frontierReached);
+    }
+    if (this.wizardValue && this.hasDotTarget) {
+      this.dotTargets.forEach((dot, i) => {
+        const locked = i > this._maxUnlocked;
+        dot.disabled = locked;
+        dot.classList.toggle("locked", locked);
+      });
+    }
+  }
+}
+
+const SKIPPED_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "hidden",
+  "submit",
+  "reset",
+  "button",
+  "image"
+]);
+class FormLiveSummary extends Controller {
+  static targets = ["list"];
+  connect() {
+    this.render();
+    this.form?.addEventListener("input", this.render);
+    this.form?.addEventListener("change", this.render);
+  }
+  disconnect() {
+    this.form?.removeEventListener("input", this.render);
+    this.form?.removeEventListener("change", this.render);
+  }
+  get form() {
+    return this.element.closest("form");
+  }
+  render = () => {
+    const fields = this.collectFields();
+    if (fields.length === 0) {
+      this.listTarget.replaceChildren(
+        Object.assign(document.createElement("p"), {
+          className: "midwest-form-live-summary-empty",
+          textContent: "No values to display."
+        })
+      );
+      return;
+    }
+    const dl = document.createElement("dl");
+    dl.className = "midwest-form-live-summary-list";
+    fields.forEach(({ label, value }) => {
+      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"
+      });
+      dl.append(dt, dd);
+    });
+    this.listTarget.replaceChildren(dl);
+  };
+  collectFields() {
+    const form = this.form;
+    if (!form)
+      return [];
+    const fields = [];
+    const seenRadioNames = /* @__PURE__ */ new Set();
+    Array.from(form.elements).forEach((el) => {
+      const element = el;
+      if (!element.name)
+        return;
+      if (this.element.contains(element))
+        return;
+      if (element instanceof HTMLButtonElement)
+        return;
+      if (element instanceof HTMLInputElement) {
+        if (SKIPPED_INPUT_TYPES.has(element.type))
+          return;
+        if (element.type === "radio") {
+          if (seenRadioNames.has(element.name))
+            return;
+          seenRadioNames.add(element.name);
+          const checked = form.querySelector(
+            `input[type="radio"][name="${CSS.escape(element.name)}"]:checked`
+          );
+          if (!checked)
+            return;
+          fields.push({
+            label: this.groupLabelFor(element),
+            value: this.labelFor(checked) || checked.value
+          });
+          return;
+        }
+        if (element.type === "checkbox") {
+          fields.push({
+            label: this.labelFor(element),
+            value: element.checked ? "Yes" : "No"
+          });
+          return;
+        }
+      }
+      if (element instanceof HTMLSelectElement) {
+        fields.push({
+          label: this.labelFor(element),
+          value: Array.from(element.selectedOptions).map((o) => o.text).join(", ") || "\u2014"
+        });
+        return;
+      }
+      fields.push({
+        label: this.labelFor(element),
+        value: element.value
+      });
+    });
+    return fields;
+  }
+  // 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) {
+    const id = el.id;
+    if (id) {
+      const label = this.form?.querySelector(`label[for="${CSS.escape(id)}"]`);
+      if (label)
+        return label.textContent?.trim() ?? "";
+    }
+    const wrapper = el.closest("label");
+    if (wrapper)
+      return wrapper.textContent?.trim() ?? "";
+    return this.prettifyName(el.name ?? "");
+  }
+  // For radio groups, prefer the containing fieldset legend over the
+  // individual radio's label, then fall back to prettifying the name.
+  groupLabelFor(el) {
+    const legend = el.closest("fieldset")?.querySelector("legend");
+    if (legend)
+      return legend.textContent?.trim() ?? "";
+    return this.prettifyName(el.name ?? "");
+  }
+  // Converts "user[first_name]" or "first_name" into "First name".
+  prettifyName(name) {
+    return name.replace(/\[.*?\]/g, "").replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase()).trim();
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -2988,6 +3239,8 @@ function registerMidwestControllers(application) {
   application.register("midwest-dropdown-item", DropdownItem);
   application.register("midwest-tabs", Tabs);
   application.register("midwest-tooltip", Tooltip);
+  application.register("midwest-carousel", Carousel);
+  application.register("midwest-form-live-summary", FormLiveSummary);
 }
 
 export { Banner, Card, registerMidwestControllers };