@unabridged/midwest 0.6.2 → 0.7.0

package/dist/javascript/collection/app/assets/javascript/midwest/index.js

@@ -14,6 +14,8 @@ import Video from '../../../components/midwest/video_component/video_component_c
 import DropdownItem from '../../../components/midwest/dropdown_item_component/dropdown_item_component_controller.js';
 import Tabs from '../../../components/midwest/tabs_component/tabs_component_controller.js';
 import Tooltip from '../../../components/midwest/tooltip_component/tooltip_component_controller.js';
+import Carousel from '../../../components/midwest/carousel_component/carousel_component_controller.js';
+import FormLiveSummary from '../../../components/midwest/form/live_summary_component/live_summary_component_controller.js';
 
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
@@ -30,6 +32,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 { registerMidwestControllers };

package/dist/javascript/collection/app/assets/javascript/midwest/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../app/assets/javascript/midwest/index.ts"],"sourcesContent":["import Card from '../../../components/midwest/card_component/card_component_controller'\nimport Banner from '../../../components/midwest/banner_component/banner_component_controller'\nimport Callout from '../../../components/midwest/callout_component/callout_component_controller'\nimport Input from '../../../components/midwest/form/input_component/input_component_controller'\nimport File from '../../../components/midwest/form/file_component/file_component_controller'\nimport Switch from '../../../components/midwest/form/switch_component/switch_component_controller'\nimport Dropdown from '../../../components/midwest/dropdown_component/dropdown_component_controller'\nimport Avatar from '../../../components/midwest/avatar_component/avatar_component_controller'\nimport Prose from '../../../components/midwest/prose_component/prose_component_controller'\nimport Dialog from '../../../components/midwest/dialog_component/dialog_component_controller'\nimport Video from '../../../components/midwest/video_component/video_component_controller'\nimport DropdownItem from '../../../components/midwest/dropdown_item_component/dropdown_item_component_controller'\nimport Tabs from '../../../components/midwest/tabs_component/tabs_component_controller'\nimport Tooltip from '../../../components/midwest/tooltip_component/tooltip_component_controller'\n/* IMPORTS */\n\nexport { Card, Banner }\n\nexport function registerMidwestControllers (application: any) {\n  application.register('midwest-card', Card)\n  application.register('midwest-banner', Banner)\n  application.register('midwest-callout', Callout)\n  application.register('midwest-input', Input)\n  application.register('midwest-file', File)\n  application.register('midwest-switch', Switch)\n  application.register('midwest-dropdown', Dropdown)\n  application.register('midwest-avatar', Avatar)\n  application.register('midwest-prose', Prose)\n  application.register('midwest-dialog', Dialog)\n  application.register('midwest-video', Video)\n  application.register('midwest-dropdown-item', DropdownItem)\n  application.register('midwest-tabs', Tabs)\n  application.register('midwest-tooltip', Tooltip)\n  /* EXPORTS */\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkBO,SAAS,2BAA4B,WAAkB,EAAA;AAC5D,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,OAAO,CAAA,CAAA;AAC/C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,oBAAoB,QAAQ,CAAA,CAAA;AACjD,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,yBAAyB,YAAY,CAAA,CAAA;AAC1D,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,OAAO,CAAA,CAAA;AAEjD;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../app/assets/javascript/midwest/index.ts"],"sourcesContent":["import Card from '../../../components/midwest/card_component/card_component_controller'\nimport Banner from '../../../components/midwest/banner_component/banner_component_controller'\nimport Callout from '../../../components/midwest/callout_component/callout_component_controller'\nimport Input from '../../../components/midwest/form/input_component/input_component_controller'\nimport File from '../../../components/midwest/form/file_component/file_component_controller'\nimport Switch from '../../../components/midwest/form/switch_component/switch_component_controller'\nimport Dropdown from '../../../components/midwest/dropdown_component/dropdown_component_controller'\nimport Avatar from '../../../components/midwest/avatar_component/avatar_component_controller'\nimport Prose from '../../../components/midwest/prose_component/prose_component_controller'\nimport Dialog from '../../../components/midwest/dialog_component/dialog_component_controller'\nimport Video from '../../../components/midwest/video_component/video_component_controller'\nimport DropdownItem from '../../../components/midwest/dropdown_item_component/dropdown_item_component_controller'\nimport Tabs from '../../../components/midwest/tabs_component/tabs_component_controller'\nimport Tooltip from '../../../components/midwest/tooltip_component/tooltip_component_controller'\nimport Carousel from '../../../components/midwest/carousel_component/carousel_component_controller'\nimport FormLiveSummary from '../../../components/midwest/form/live_summary_component/live_summary_component_controller'\n/* IMPORTS */\n\nexport { Card, Banner }\n\nexport function registerMidwestControllers (application: any) {\n  application.register('midwest-card', Card)\n  application.register('midwest-banner', Banner)\n  application.register('midwest-callout', Callout)\n  application.register('midwest-input', Input)\n  application.register('midwest-file', File)\n  application.register('midwest-switch', Switch)\n  application.register('midwest-dropdown', Dropdown)\n  application.register('midwest-avatar', Avatar)\n  application.register('midwest-prose', Prose)\n  application.register('midwest-dialog', Dialog)\n  application.register('midwest-video', Video)\n  application.register('midwest-dropdown-item', DropdownItem)\n  application.register('midwest-tabs', Tabs)\n  application.register('midwest-tooltip', Tooltip)\n  application.register('midwest-carousel', Carousel)\n  application.register('midwest-form-live-summary', FormLiveSummary)\n  /* EXPORTS */\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,SAAS,2BAA4B,WAAkB,EAAA;AAC5D,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,OAAO,CAAA,CAAA;AAC/C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,oBAAoB,QAAQ,CAAA,CAAA;AACjD,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,kBAAkB,MAAM,CAAA,CAAA;AAC7C,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,yBAAyB,YAAY,CAAA,CAAA;AAC1D,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,mBAAmB,OAAO,CAAA,CAAA;AAC/C,EAAY,WAAA,CAAA,QAAA,CAAS,oBAAoB,QAAQ,CAAA,CAAA;AACjD,EAAY,WAAA,CAAA,QAAA,CAAS,6BAA6B,eAAe,CAAA,CAAA;AAEnE;;;;"}

package/dist/javascript/collection/app/components/midwest/carousel_component/carousel_component_controller.js

@@ -0,0 +1,126 @@
+import { Controller } from '@hotwired/stimulus';
+
+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);
+      });
+    }
+  }
+}
+
+export { Carousel as default };
+//# sourceMappingURL=carousel_component_controller.js.map

package/dist/javascript/collection/app/components/midwest/carousel_component/carousel_component_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel_component_controller.js","sources":["../../../../../../../app/components/midwest/carousel_component/carousel_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\n// Input types where pressing Enter in a form does NOT normally submit it.\n// For all other input types, Enter submits — so wizard mode intercepts it.\nconst NON_SUBMITTING_INPUT_TYPES = new Set([\n  'button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'\n])\n\nexport default class Carousel extends Controller<HTMLElement> {\n  static targets = ['track', 'prev', 'next', 'dot']\n  static values = {\n    wizard: { type: Boolean, default: false }\n  }\n\n  declare readonly trackTarget: HTMLElement\n  declare readonly prevTarget: HTMLButtonElement\n  declare readonly nextTarget: HTMLButtonElement\n  declare readonly dotTargets: HTMLButtonElement[]\n  declare readonly hasPrevTarget: boolean\n  declare readonly hasNextTarget: boolean\n  declare readonly hasDotTarget: boolean\n  declare wizardValue: boolean\n\n  private observer: IntersectionObserver | null = null\n  private _currentIndex = 0\n  private _maxUnlocked = 0\n\n  connect () {\n    this.setupObserver()\n    this.updateNavigation()\n    if (this.wizardValue) {\n      this.element.addEventListener('keydown', this.handleKeydown)\n    }\n  }\n\n  disconnect () {\n    this.observer?.disconnect()\n    this.element.removeEventListener('keydown', this.handleKeydown)\n  }\n\n  next () {\n    this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: 'smooth' })\n  }\n\n  previous () {\n    this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: 'smooth' })\n  }\n\n  goto (event: Event) {\n    const button = event.currentTarget as HTMLButtonElement\n    const index = parseInt(button.dataset.index ?? '0', 10)\n    const slide = this.slides[index]\n    slide?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })\n  }\n\n  // Unlocks the next slide and advances to it. Intended for wizard mode: wire\n  // a \"Continue\" button inside a slide to this action so users progress\n  // linearly through steps before the carousel nav becomes available.\n  //\n  //   <button type=\"button\" data-action=\"click->midwest-carousel#unlockNext\">\n  //     Continue\n  //   </button>\n  unlockNext () {\n    const nextIndex = this._currentIndex + 1\n    if (nextIndex > this._maxUnlocked) {\n      this._maxUnlocked = nextIndex\n    }\n    this.next()\n  }\n\n  scrolled () {\n    this.updateCurrentIndex()\n    this.updateNavigation()\n  }\n\n  // Arrow function so `this` is stable for add/removeEventListener pairing.\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter') return\n\n    const target = event.target as HTMLElement\n    // Only intercept Enter on text-like inputs; textarea newlines and button\n    // activations should pass through untouched.\n    if (target.tagName === 'TEXTAREA' || target.tagName !== 'INPUT') return\n    if (NON_SUBMITTING_INPUT_TYPES.has((target as HTMLInputElement).type)) return\n\n    // On the final step let Enter submit the form normally.\n    if (this._currentIndex >= this.slides.length - 1) return\n\n    event.preventDefault()\n    this.unlockNext()\n  }\n\n  private get slides (): HTMLElement[] {\n    return Array.from(this.trackTarget.children) as HTMLElement[]\n  }\n\n  private updateCurrentIndex () {\n    const track = this.trackTarget\n    if (track.clientWidth > 0) {\n      this._currentIndex = Math.round(track.scrollLeft / track.clientWidth)\n    }\n  }\n\n  private setupObserver () {\n    if (!this.hasDotTarget) return\n    if (!('IntersectionObserver' in window)) return\n\n    this.observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          const index = this.slides.indexOf(entry.target as HTMLElement)\n          if (index >= 0) {\n            this.dotTargets[index]?.classList.toggle('active', entry.isIntersecting)\n          }\n        })\n      },\n      { root: this.trackTarget, threshold: 0.5 }\n    )\n\n    this.slides.forEach(slide => this.observer?.observe(slide))\n  }\n\n  private updateNavigation () {\n    const track = this.trackTarget\n    const atStart = track.scrollLeft <= 0\n    const atEnd = track.scrollLeft >= track.scrollWidth - track.clientWidth - 1\n\n    if (this.hasPrevTarget) this.prevTarget.classList.toggle('hide', atStart)\n\n    if (this.hasNextTarget) {\n      const frontierReached = this.wizardValue && this._currentIndex >= this._maxUnlocked\n      this.nextTarget.classList.toggle('hide', atEnd || frontierReached)\n    }\n\n    if (this.wizardValue && this.hasDotTarget) {\n      this.dotTargets.forEach((dot, i) => {\n        const locked = i > this._maxUnlocked\n        dot.disabled = locked\n        dot.classList.toggle('locked', locked)\n      })\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/javascript/collection/app/components/midwest/form/live_summary_component/live_summary_component_controller.js

@@ -0,0 +1,133 @@
+import { Controller } from '@hotwired/stimulus';
+
+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();
+  }
+}
+
+export { FormLiveSummary as default };
+//# sourceMappingURL=live_summary_component_controller.js.map

package/dist/javascript/collection/app/components/midwest/form/live_summary_component/live_summary_component_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live_summary_component_controller.js","sources":["../../../../../../../../app/components/midwest/form/live_summary_component/live_summary_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\n// Input types that should never appear in a form live summary.\nconst SKIPPED_INPUT_TYPES = new Set([\n  'hidden', 'submit', 'reset', 'button', 'image'\n])\n\ninterface FieldSummary {\n  label: string\n  value: string\n}\n\nexport default class FormLiveSummary extends Controller<HTMLElement> {\n  static targets = ['list']\n\n  declare readonly listTarget: HTMLElement\n\n  connect () {\n    this.render()\n    this.form?.addEventListener('input', this.render)\n    this.form?.addEventListener('change', this.render)\n  }\n\n  disconnect () {\n    this.form?.removeEventListener('input', this.render)\n    this.form?.removeEventListener('change', this.render)\n  }\n\n  private get form (): HTMLFormElement | null {\n    return this.element.closest('form')\n  }\n\n  private render = () => {\n    const fields = this.collectFields()\n\n    if (fields.length === 0) {\n      this.listTarget.replaceChildren(\n        Object.assign(document.createElement('p'), {\n          className: 'midwest-form-live-summary-empty',\n          textContent: 'No values to display.'\n        })\n      )\n      return\n    }\n\n    const dl = document.createElement('dl')\n    dl.className = 'midwest-form-live-summary-list'\n\n    fields.forEach(({ label, value }) => {\n      const dt = Object.assign(document.createElement('dt'), {\n        className: 'midwest-form-live-summary-term',\n        textContent: label\n      })\n      const dd = Object.assign(document.createElement('dd'), {\n        className: 'midwest-form-live-summary-definition',\n        textContent: value || '—'\n      })\n      dl.append(dt, dd)\n    })\n\n    this.listTarget.replaceChildren(dl)\n  }\n\n  private collectFields (): FieldSummary[] {\n    const form = this.form\n    if (!form) return []\n\n    const fields: FieldSummary[] = []\n    const seenRadioNames = new Set<string>()\n\n    Array.from(form.elements).forEach(el => {\n      const element = el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement\n\n      if (!element.name) return\n\n      // Skip elements that live inside the summary itself.\n      if (this.element.contains(element)) return\n\n      // Skip all button elements regardless of how they are declared.\n      if (element instanceof HTMLButtonElement) return\n\n      if (element instanceof HTMLInputElement) {\n        if (SKIPPED_INPUT_TYPES.has(element.type)) return\n\n        if (element.type === 'radio') {\n          if (seenRadioNames.has(element.name)) return\n          seenRadioNames.add(element.name)\n\n          const checked = form.querySelector<HTMLInputElement>(\n            `input[type=\"radio\"][name=\"${CSS.escape(element.name)}\"]:checked`\n          )\n          if (!checked) return\n\n          fields.push({\n            label: this.groupLabelFor(element),\n            value: this.labelFor(checked) || checked.value\n          })\n          return\n        }\n\n        if (element.type === 'checkbox') {\n          fields.push({\n            label: this.labelFor(element),\n            value: element.checked ? 'Yes' : 'No'\n          })\n          return\n        }\n      }\n\n      if (element instanceof HTMLSelectElement) {\n        fields.push({\n          label: this.labelFor(element),\n          value: Array.from(element.selectedOptions).map(o => o.text).join(', ') || '—'\n        })\n        return\n      }\n\n      // Text-like inputs and textareas only reach this point.\n      fields.push({\n        label: this.labelFor(element),\n        value: element.value\n      })\n    })\n\n    return fields\n  }\n\n  // Finds the label associated with a specific element via `for` attribute,\n  // wrapping label, or falls back to a prettified version of the element name.\n  private labelFor (el: Element): string {\n    const id = (el as HTMLElement).id\n    if (id) {\n      const label = this.form?.querySelector(`label[for=\"${CSS.escape(id)}\"]`)\n      if (label) return label.textContent?.trim() ?? ''\n    }\n    const wrapper = el.closest('label')\n    if (wrapper) return wrapper.textContent?.trim() ?? ''\n    return this.prettifyName((el as HTMLInputElement).name ?? '')\n  }\n\n  // For radio groups, prefer the containing fieldset legend over the\n  // individual radio's label, then fall back to prettifying the name.\n  private groupLabelFor (el: Element): string {\n    const legend = el.closest('fieldset')?.querySelector('legend')\n    if (legend) return legend.textContent?.trim() ?? ''\n    return this.prettifyName((el as HTMLInputElement).name ?? '')\n  }\n\n  // Converts \"user[first_name]\" or \"first_name\" into \"First name\".\n  private prettifyName (name: string): string {\n    return name\n      .replace(/\\[.*?\\]/g, '')\n      .replace(/_/g, ' ')\n      .replace(/^\\w/, c => c.toUpperCase())\n      .trim()\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/javascript/collection/app/components/midwest/form/summary_component/summary_component_controller.js

@@ -0,0 +1,131 @@
+import { Controller } from '@hotwired/stimulus';
+
+const SKIPPED_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "hidden",
+  "submit",
+  "reset",
+  "button",
+  "image"
+]);
+class FormSummary 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-summary-empty",
+          textContent: "No values to display."
+        })
+      );
+      return;
+    }
+    const dl = document.createElement("dl");
+    dl.className = "midwest-form-summary-list";
+    fields.forEach(({ label, value }) => {
+      const dt = Object.assign(document.createElement("dt"), {
+        className: "midwest-form-summary-term",
+        textContent: label
+      });
+      const dd = Object.assign(document.createElement("dd"), {
+        className: "midwest-form-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 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();
+  }
+}
+
+export { FormSummary as default };
+//# sourceMappingURL=summary_component_controller.js.map

package/dist/javascript/collection/app/components/midwest/form/summary_component/summary_component_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary_component_controller.js","sources":["../../../../../../../../app/components/midwest/form/summary_component/summary_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\n// Input types that should never appear in a form summary.\nconst SKIPPED_INPUT_TYPES = new Set([\n  'hidden', 'submit', 'reset', 'button', 'image'\n])\n\ninterface FieldSummary {\n  label: string\n  value: string\n}\n\nexport default class FormSummary extends Controller<HTMLElement> {\n  static targets = ['list']\n\n  declare readonly listTarget: HTMLElement\n\n  connect () {\n    this.render()\n    this.form?.addEventListener('input', this.render)\n    this.form?.addEventListener('change', this.render)\n  }\n\n  disconnect () {\n    this.form?.removeEventListener('input', this.render)\n    this.form?.removeEventListener('change', this.render)\n  }\n\n  private get form (): HTMLFormElement | null {\n    return this.element.closest('form')\n  }\n\n  private render = () => {\n    const fields = this.collectFields()\n\n    if (fields.length === 0) {\n      this.listTarget.replaceChildren(\n        Object.assign(document.createElement('p'), {\n          className: 'midwest-form-summary-empty',\n          textContent: 'No values to display.'\n        })\n      )\n      return\n    }\n\n    const dl = document.createElement('dl')\n    dl.className = 'midwest-form-summary-list'\n\n    fields.forEach(({ label, value }) => {\n      const dt = Object.assign(document.createElement('dt'), {\n        className: 'midwest-form-summary-term',\n        textContent: label\n      })\n      const dd = Object.assign(document.createElement('dd'), {\n        className: 'midwest-form-summary-definition',\n        textContent: value || '—'\n      })\n      dl.append(dt, dd)\n    })\n\n    this.listTarget.replaceChildren(dl)\n  }\n\n  private collectFields (): FieldSummary[] {\n    const form = this.form\n    if (!form) return []\n\n    const fields: FieldSummary[] = []\n    const seenRadioNames = new Set<string>()\n\n    Array.from(form.elements).forEach(el => {\n      const element = el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n\n      if (!element.name) return\n\n      // Skip elements that live inside the summary itself (e.g. any future\n      // interactive controls added to the summary template).\n      if (this.element.contains(element)) return\n\n      if (element instanceof HTMLInputElement) {\n        if (SKIPPED_INPUT_TYPES.has(element.type)) return\n\n        if (element.type === 'radio') {\n          if (seenRadioNames.has(element.name)) return\n          seenRadioNames.add(element.name)\n\n          const checked = form.querySelector<HTMLInputElement>(\n            `input[type=\"radio\"][name=\"${CSS.escape(element.name)}\"]:checked`\n          )\n          if (!checked) return\n\n          fields.push({\n            label: this.groupLabelFor(element),\n            value: this.labelFor(checked) || checked.value\n          })\n          return\n        }\n\n        if (element.type === 'checkbox') {\n          fields.push({\n            label: this.labelFor(element),\n            value: element.checked ? 'Yes' : 'No'\n          })\n          return\n        }\n      }\n\n      if (element instanceof HTMLSelectElement) {\n        fields.push({\n          label: this.labelFor(element),\n          value: Array.from(element.selectedOptions).map(o => o.text).join(', ') || '—'\n        })\n        return\n      }\n\n      // Text-like inputs and textareas\n      fields.push({\n        label: this.labelFor(element),\n        value: element.value\n      })\n    })\n\n    return fields\n  }\n\n  // Finds the label associated with a specific element via `for` attribute,\n  // wrapping label, or falls back to a prettified version of the element name.\n  private labelFor (el: Element): string {\n    const id = (el as HTMLElement).id\n    if (id) {\n      const label = this.form?.querySelector(`label[for=\"${CSS.escape(id)}\"]`)\n      if (label) return label.textContent?.trim() ?? ''\n    }\n    const wrapper = el.closest('label')\n    if (wrapper) return wrapper.textContent?.trim() ?? ''\n    return this.prettifyName((el as HTMLInputElement).name ?? '')\n  }\n\n  // For radio groups, prefer the containing fieldset legend over the\n  // individual radio's label, then fall back to prettifying the name.\n  private groupLabelFor (el: Element): string {\n    const legend = el.closest('fieldset')?.querySelector('legend')\n    if (legend) return legend.textContent?.trim() ?? ''\n    return this.prettifyName((el as HTMLInputElement).name ?? '')\n  }\n\n  // Converts \"user[first_name]\" or \"first_name\" into \"First name\".\n  private prettifyName (name: string): string {\n    return name\n      .replace(/\\[.*?\\]/g, '')\n      .replace(/_/g, ' ')\n      .replace(/^\\w/, c => c.toUpperCase())\n      .trim()\n  }\n}\n"],"names":[],"mappings":"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"}