@unabridged/midwest 0.17.0 → 0.18.0

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

@@ -23,6 +23,8 @@ import Range from '../../../components/midwest/form/range_component/range_compon
 import Rating from '../../../components/midwest/rating_component/rating_component_controller.js';
 import Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller.js';
 import Image from '../../../components/midwest/image_component/image_component_controller.js';
+import ColorPicker from '../../../components/midwest/form/color_picker_component/color_picker_component_controller.js';
+import Notification from '../../../components/midwest/notification_component/notification_component_controller.js';
 
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
@@ -46,6 +48,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 { 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 Input from '../../../components/midwest/form/input_component/input_component_controller'\nimport File from '../../../components/midwest/form/file_component/file_component_controller'\nimport Dropdown from '../../../components/midwest/dropdown_component/dropdown_component_controller'\nimport Prose from '../../../components/midwest/prose_component/prose_component_controller'\nimport Dialog from '../../../components/midwest/dialog_component/dialog_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'\nimport Form from '../../../components/midwest/form/form_controller'\nimport CountdownTimer from '../../../components/midwest/countdown_timer_component/countdown_timer_component_controller'\nimport Badge from '../../../components/midwest/badge_component/badge_component_controller'\nimport Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'\nimport AvatarGroup from '../../../components/midwest/avatar_group_component/avatar_group_component_controller'\nimport Chart from '../../../components/midwest/chart_component/chart_component_controller'\nimport Range from '../../../components/midwest/form/range_component/range_component_controller'\nimport Rating from '../../../components/midwest/rating_component/rating_component_controller'\nimport Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller'\nimport Image from '../../../components/midwest/image_component/image_component_controller'\n/* IMPORTS */\n\nexport { Card, Banner, CountdownTimer, Chart }\n\nexport function registerMidwestControllers (application: any) {\n  application.register('midwest-card', Card)\n  application.register('midwest-banner', Banner)\n  application.register('midwest-countdown-timer', CountdownTimer)\n  application.register('midwest-input', Input)\n  application.register('midwest-file', File)\n  application.register('midwest-dropdown', Dropdown)\n  application.register('midwest-prose', Prose)\n  application.register('midwest-dialog', Dialog)\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  application.register('midwest-form', Form)\n  application.register('midwest-badge', Badge)\n  application.register('midwest-confirmation', Confirmation)\n  application.register('midwest-avatar-group', AvatarGroup)\n  application.register('midwest-chart', Chart)\n  application.register('midwest-range', Range)\n  application.register('midwest-rating', Rating)\n  application.register('midwest-autocomplete', Autocomplete)\n  application.register('midwest-image', Image)\n  /* EXPORTS */\n}\n"],"names":["Confirmation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,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,2BAA2B,cAAc,CAAA,CAAA;AAC9D,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,oBAAoB,QAAQ,CAAA,CAAA;AACjD,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,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;AACjE,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwBA,sBAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,WAAW,CAAA,CAAA;AACxD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,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,wBAAwB,YAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAE7C;;;;"}
+{"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 Input from '../../../components/midwest/form/input_component/input_component_controller'\nimport File from '../../../components/midwest/form/file_component/file_component_controller'\nimport Dropdown from '../../../components/midwest/dropdown_component/dropdown_component_controller'\nimport Prose from '../../../components/midwest/prose_component/prose_component_controller'\nimport Dialog from '../../../components/midwest/dialog_component/dialog_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'\nimport Form from '../../../components/midwest/form/form_controller'\nimport CountdownTimer from '../../../components/midwest/countdown_timer_component/countdown_timer_component_controller'\nimport Badge from '../../../components/midwest/badge_component/badge_component_controller'\nimport Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'\nimport AvatarGroup from '../../../components/midwest/avatar_group_component/avatar_group_component_controller'\nimport Chart from '../../../components/midwest/chart_component/chart_component_controller'\nimport Range from '../../../components/midwest/form/range_component/range_component_controller'\nimport Rating from '../../../components/midwest/rating_component/rating_component_controller'\nimport Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller'\nimport Image from '../../../components/midwest/image_component/image_component_controller'\nimport ColorPicker from '../../../components/midwest/form/color_picker_component/color_picker_component_controller'\nimport Notification from '../../../components/midwest/notification_component/notification_component_controller'\n/* IMPORTS */\n\nexport { Card, Banner, CountdownTimer, Chart }\n\nexport function registerMidwestControllers (application: any) {\n  application.register('midwest-card', Card)\n  application.register('midwest-banner', Banner)\n  application.register('midwest-countdown-timer', CountdownTimer)\n  application.register('midwest-input', Input)\n  application.register('midwest-file', File)\n  application.register('midwest-dropdown', Dropdown)\n  application.register('midwest-prose', Prose)\n  application.register('midwest-dialog', Dialog)\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  application.register('midwest-form', Form)\n  application.register('midwest-badge', Badge)\n  application.register('midwest-confirmation', Confirmation)\n  application.register('midwest-avatar-group', AvatarGroup)\n  application.register('midwest-chart', Chart)\n  application.register('midwest-range', Range)\n  application.register('midwest-rating', Rating)\n  application.register('midwest-autocomplete', Autocomplete)\n  application.register('midwest-image', Image)\n  application.register('midwest-color-picker', ColorPicker)\n  application.register('midwest-notification', Notification)\n  /* EXPORTS */\n}\n"],"names":["Confirmation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,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,2BAA2B,cAAc,CAAA,CAAA;AAC9D,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,oBAAoB,QAAQ,CAAA,CAAA;AACjD,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,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;AACjE,EAAY,WAAA,CAAA,QAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AACzC,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwBA,sBAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,WAAW,CAAA,CAAA;AACxD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,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,wBAAwB,YAAY,CAAA,CAAA;AACzD,EAAY,WAAA,CAAA,QAAA,CAAS,iBAAiB,KAAK,CAAA,CAAA;AAC3C,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,WAAW,CAAA,CAAA;AACxD,EAAY,WAAA,CAAA,QAAA,CAAS,wBAAwB,YAAY,CAAA,CAAA;AAE3D;;;;"}

package/dist/javascript/collection/app/components/midwest/color_picker_component/color_picker_component_controller.js

@@ -0,0 +1,135 @@
+import { Controller } from '@hotwired/stimulus';
+
+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);
+    let h = 0;
+    if (max === r)
+      h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g)
+      h = ((b - r) / d + 2) / 6;
+    else
+      h = ((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;
+  }
+}
+
+export { ColorPicker as default };
+//# sourceMappingURL=color_picker_component_controller.js.map

package/dist/javascript/collection/app/components/midwest/color_picker_component/color_picker_component_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_component_controller.js","sources":["../../../../../../../app/components/midwest/color_picker_component/color_picker_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class ColorPicker extends Controller {\n  static targets = ['input', 'swatch', 'customSwatch', 'colorInput']\n\n  declare readonly hasInputTarget: boolean\n  declare readonly inputTarget: HTMLInputElement\n  declare readonly swatchTargets: HTMLElement[]\n  declare readonly hasCustomSwatchTarget: boolean\n  declare readonly customSwatchTarget: HTMLButtonElement\n  declare readonly hasColorInputTarget: boolean\n  declare readonly colorInputTarget: HTMLInputElement\n\n  private onCustomColorChange: ((e: Event) => void) | null = null\n\n  get scaleTarget (): string {\n    return (this.element as HTMLElement).dataset.scaleTarget ?? 'theme'\n  }\n\n  connect () {\n    if (this.hasColorInputTarget) {\n      this.onCustomColorChange = (e: Event) => this.handleCustomColor(e)\n      this.colorInputTarget.addEventListener('input', this.onCustomColorChange)\n    }\n\n    // Restore state when initial value is a custom hex color\n    if (this.hasInputTarget && this.inputTarget.value.startsWith('#')) {\n      this.restoreCustom(this.inputTarget.value)\n    }\n  }\n\n  disconnect () {\n    if (this.hasColorInputTarget && this.onCustomColorChange) {\n      this.colorInputTarget.removeEventListener('input', this.onCustomColorChange)\n      this.onCustomColorChange = null\n    }\n  }\n\n  select (e: Event) {\n    const button = e.currentTarget as HTMLElement\n    const color = button.dataset.color ?? ''\n    this.applySelection(color)\n    this.dispatch('update', { detail: { color, scaleTarget: this.scaleTarget } })\n  }\n\n  openCustom (e: Event) {\n    e.preventDefault()\n    this.colorInputTarget.click()\n  }\n\n  private handleCustomColor (e: Event) {\n    const hex = (e.target as HTMLInputElement).value\n\n    if (this.hasCustomSwatchTarget) {\n      this.customSwatchTarget.dataset.color = hex\n      this.customSwatchTarget.style.background = hex\n    }\n\n    const scale = this.generateScale(hex)\n    this.applyScale(scale)\n    this.applySelection(hex)\n    this.dispatch('update', { detail: { color: hex, scale, scaleTarget: this.scaleTarget } })\n  }\n\n  private restoreCustom (hex: string) {\n    if (this.hasColorInputTarget) {\n      this.colorInputTarget.value = hex\n    }\n    if (this.hasCustomSwatchTarget) {\n      this.customSwatchTarget.style.background = hex\n    }\n    const scale = this.generateScale(hex)\n    this.applyScale(scale)\n  }\n\n  private applySelection (color: string) {\n    if (this.hasInputTarget) {\n      this.inputTarget.value = color\n    }\n\n    this.swatchTargets.forEach(swatch => {\n      const isSelected = swatch.dataset.color === color\n      swatch.classList.toggle('is-selected', isSelected)\n      swatch.setAttribute('aria-pressed', String(isSelected))\n    })\n  }\n\n  // Generates 13 RGB channel strings (space-separated, matching --{color}-{n}-channels format)\n  // from a hex color by fixing the hue/saturation and distributing lightness across the scale.\n  private generateScale (hex: string): Record<string, string> {\n    const [h, s] = this.hexToHsl(hex)\n\n    // Lightness curve derived from the built-in named color scales (0 = lightest, 12 = darkest)\n    const lightnessSteps = [97, 90, 82, 74, 65, 56, 48, 40, 33, 26, 18, 10, 3]\n\n    return Object.fromEntries(\n      lightnessSteps.map((l, i) => {\n        const [r, g, b] = this.hslToRgb(h, s, l)\n        return [String(i), `${r} ${g} ${b}`]\n      })\n    )\n  }\n\n  private applyScale (scale: Record<string, string>) {\n    const el = this.element as HTMLElement\n    Object.entries(scale).forEach(([step, channels]) => {\n      el.style.setProperty(`--${this.scaleTarget}-${step}-channels`, channels)\n    })\n  }\n\n  private hexToHsl (hex: string): [number, number, number] {\n    const r = parseInt(hex.slice(1, 3), 16) / 255\n    const g = parseInt(hex.slice(3, 5), 16) / 255\n    const b = parseInt(hex.slice(5, 7), 16) / 255\n\n    const max = Math.max(r, g, b)\n    const min = Math.min(r, g, b)\n    const l = (max + min) / 2\n\n    if (max === min) return [0, 0, l * 100]\n\n    const d = max - min\n    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)\n\n    let h = 0\n    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n    else if (max === g) h = ((b - r) / d + 2) / 6\n    else h = ((r - g) / d + 4) / 6\n\n    return [h * 360, s * 100, l * 100]\n  }\n\n  private hslToRgb (h: number, s: number, l: number): [number, number, number] {\n    h /= 360\n    s /= 100\n    l /= 100\n\n    if (s === 0) {\n      const v = Math.round(l * 255)\n      return [v, v, v]\n    }\n\n    const q = l < 0.5 ? l * (1 + s) : l + s - l * s\n    const p = 2 * l - q\n\n    return [\n      Math.round(this.hue2rgb(p, q, h + 1 / 3) * 255),\n      Math.round(this.hue2rgb(p, q, h) * 255),\n      Math.round(this.hue2rgb(p, q, h - 1 / 3) * 255)\n    ]\n  }\n\n  private hue2rgb (p: number, q: number, t: number): number {\n    if (t < 0) t += 1\n    if (t > 1) t -= 1\n    if (t < 1 / 6) return p + (q - p) * 6 * t\n    if (t < 1 / 2) return q\n    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6\n    return p\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/javascript/collection/app/components/midwest/countdown_timer_component/countdown_timer_component_controller.js

@@ -5,16 +5,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;
   }
 }
 

package/dist/javascript/collection/app/components/midwest/countdown_timer_component/countdown_timer_component_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown_timer_component_controller.js","sources":["../../../../../../../app/components/midwest/countdown_timer_component/countdown_timer_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class CountdownTimer extends Controller {\n  static values = {\n    seconds: { type: Number, default: 5 }\n  }\n\n  declare secondsValue: number\n\n  private timer: ReturnType<typeof setTimeout> | null = null\n\n  connect () {\n    this.timer = setTimeout(() => {\n      this.dispatch('complete', { bubbles: true })\n    }, this.secondsValue * 1000)\n  }\n\n  disconnect () {\n    if (this.timer !== null) {\n      clearTimeout(this.timer)\n      this.timer = null\n    }\n  }\n}\n"],"names":[],"mappings":";;AAEA,MAAqB,uBAAuB,UAAW,CAAA;AAAA,EACrD,OAAO,MAAS,GAAA;AAAA,IACd,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,CAAE,EAAA;AAAA,GACtC,CAAA;AAAA,EAIQ,KAA8C,GAAA,IAAA,CAAA;AAAA,EAEtD,OAAW,GAAA;AACT,IAAK,IAAA,CAAA,KAAA,GAAQ,WAAW,MAAM;AAC5B,MAAA,IAAA,CAAK,QAAS,CAAA,UAAA,EAAY,EAAE,OAAA,EAAS,MAAM,CAAA,CAAA;AAAA,KAC7C,EAAG,IAAK,CAAA,YAAA,GAAe,GAAI,CAAA,CAAA;AAAA,GAC7B;AAAA,EAEA,UAAc,GAAA;AACZ,IAAI,IAAA,IAAA,CAAK,UAAU,IAAM,EAAA;AACvB,MAAA,YAAA,CAAa,KAAK,KAAK,CAAA,CAAA;AACvB,MAAA,IAAA,CAAK,KAAQ,GAAA,IAAA,CAAA;AAAA,KACf;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"countdown_timer_component_controller.js","sources":["../../../../../../../app/components/midwest/countdown_timer_component/countdown_timer_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class CountdownTimer extends Controller {\n  static values = {\n    seconds: { type: Number, default: 5 }\n  }\n\n  declare secondsValue: number\n\n  private timer: ReturnType<typeof setTimeout> | null = null\n  private remaining = 0\n  private startTime = 0\n\n  connect () {\n    this.remaining = this.secondsValue * 1000\n    this.resume()\n  }\n\n  disconnect () {\n    this.pause()\n  }\n\n  pause () {\n    if (this.timer === null) return\n    clearTimeout(this.timer)\n    this.timer = null\n    this.remaining = Math.max(0, this.remaining - (Date.now() - this.startTime))\n    this.setPlayState('paused')\n  }\n\n  resume () {\n    if (this.timer !== null) return // already running\n    this.startTime = Date.now()\n    this.timer = setTimeout(() => {\n      this.timer = null\n      this.dispatch('complete', { bubbles: true })\n    }, this.remaining)\n    this.setPlayState('running')\n  }\n\n  private setPlayState (state: 'running' | 'paused') {\n    const progress = this.element.querySelector<SVGElement>('.midwest-countdown-timer__progress')\n    if (progress) progress.style.animationPlayState = state\n  }\n}\n"],"names":[],"mappings":";;AAEA,MAAqB,uBAAuB,UAAW,CAAA;AAAA,EACrD,OAAO,MAAS,GAAA;AAAA,IACd,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,CAAE,EAAA;AAAA,GACtC,CAAA;AAAA,EAIQ,KAA8C,GAAA,IAAA,CAAA;AAAA,EAC9C,SAAY,GAAA,CAAA,CAAA;AAAA,EACZ,SAAY,GAAA,CAAA,CAAA;AAAA,EAEpB,OAAW,GAAA;AACT,IAAK,IAAA,CAAA,SAAA,GAAY,KAAK,YAAe,GAAA,GAAA,CAAA;AACrC,IAAA,IAAA,CAAK,MAAO,EAAA,CAAA;AAAA,GACd;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AAAA,GACb;AAAA,EAEA,KAAS,GAAA;AACP,IAAA,IAAI,KAAK,KAAU,KAAA,IAAA;AAAM,MAAA,OAAA;AACzB,IAAA,YAAA,CAAa,KAAK,KAAK,CAAA,CAAA;AACvB,IAAA,IAAA,CAAK,KAAQ,GAAA,IAAA,CAAA;AACb,IAAK,IAAA,CAAA,SAAA,GAAY,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,CAAK,aAAa,IAAK,CAAA,GAAA,EAAQ,GAAA,IAAA,CAAK,SAAU,CAAA,CAAA,CAAA;AAC3E,IAAA,IAAA,CAAK,aAAa,QAAQ,CAAA,CAAA;AAAA,GAC5B;AAAA,EAEA,MAAU,GAAA;AACR,IAAA,IAAI,KAAK,KAAU,KAAA,IAAA;AAAM,MAAA,OAAA;AACzB,IAAK,IAAA,CAAA,SAAA,GAAY,KAAK,GAAI,EAAA,CAAA;AAC1B,IAAK,IAAA,CAAA,KAAA,GAAQ,WAAW,MAAM;AAC5B,MAAA,IAAA,CAAK,KAAQ,GAAA,IAAA,CAAA;AACb,MAAA,IAAA,CAAK,QAAS,CAAA,UAAA,EAAY,EAAE,OAAA,EAAS,MAAM,CAAA,CAAA;AAAA,KAC7C,EAAG,KAAK,SAAS,CAAA,CAAA;AACjB,IAAA,IAAA,CAAK,aAAa,SAAS,CAAA,CAAA;AAAA,GAC7B;AAAA,EAEQ,aAAc,KAA6B,EAAA;AACjD,IAAA,MAAM,QAAW,GAAA,IAAA,CAAK,OAAQ,CAAA,aAAA,CAA0B,oCAAoC,CAAA,CAAA;AAC5F,IAAI,IAAA,QAAA;AAAU,MAAA,QAAA,CAAS,MAAM,kBAAqB,GAAA,KAAA,CAAA;AAAA,GACpD;AACF;;;;"}

package/dist/javascript/collection/app/components/midwest/form/autocomplete_component/autocomplete_component_controller.js

@@ -1,19 +1,30 @@
 import { Controller } from '@hotwired/stimulus';
 
 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;
@@ -48,9 +59,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);
   }
@@ -75,13 +83,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;
@@ -96,6 +118,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();
@@ -105,7 +129,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);
@@ -114,11 +138,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;
       }
@@ -135,6 +170,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;
@@ -142,9 +193,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);
@@ -156,7 +204,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);
@@ -185,9 +232,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) => {
@@ -223,6 +267,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`);
@@ -294,11 +339,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");
@@ -308,15 +361,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();
   }
@@ -340,6 +417,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;