@unabridged/midwest 0.12.0 → 0.13.0

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

@@ -17,6 +17,8 @@ export { default as CountdownTimer } from '../../../components/midwest/countdown
 import Badge from '../../../components/midwest/badge_component/badge_component_controller.js';
 import ConfirmationController from '../../../components/midwest/confirmation_component/confirmation_component_controller.js';
 import AvatarGroup from '../../../components/midwest/avatar_group_component/avatar_group_component_controller.js';
+import Chart from '../../../components/midwest/chart_component/chart_component_controller.js';
+export { default as Chart } from '../../../components/midwest/chart_component/chart_component_controller.js';
 
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
@@ -35,6 +37,7 @@ function registerMidwestControllers(application) {
   application.register("midwest-badge", Badge);
   application.register("midwest-confirmation", ConfirmationController);
   application.register("midwest-avatar-group", AvatarGroup);
+  application.register("midwest-chart", Chart);
 }
 
 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'\n/* IMPORTS */\n\nexport { Card, Banner, CountdownTimer }\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  /* EXPORTS */\n}\n"],"names":["Confirmation"],"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,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;AAE1D;;;;"}
+{"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'\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  /* EXPORTS */\n}\n"],"names":["Confirmation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBO,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;AAE7C;;;;"}

package/dist/javascript/collection/app/components/midwest/chart_component/chart_component_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from '@hotwired/stimulus';
+
+class Chart extends Controller {
+  static targets = ["tooltip", "svg"];
+  static values = { tooltipEnabled: { type: Boolean, default: true } };
+  connect() {
+    if (this.tooltipEnabledValue && this.hasTooltipTarget) {
+      this.attachListeners();
+    }
+  }
+  disconnect() {
+    if (!this.hasSvgTarget)
+      return;
+    this.svgTarget.removeEventListener("pointerover", this.showTooltipOnPointer);
+    this.svgTarget.removeEventListener("pointermove", this.moveTooltip);
+    this.svgTarget.removeEventListener("pointerout", this.hideTooltip);
+    this.svgTarget.removeEventListener("focusin", this.showTooltipOnFocus);
+    this.svgTarget.removeEventListener("focusout", this.hideTooltip);
+  }
+  attachListeners() {
+    this.svgTarget.addEventListener("pointerover", this.showTooltipOnPointer);
+    this.svgTarget.addEventListener("pointermove", this.moveTooltip);
+    this.svgTarget.addEventListener("pointerout", this.hideTooltip);
+    this.svgTarget.addEventListener("focusin", this.showTooltipOnFocus);
+    this.svgTarget.addEventListener("focusout", this.hideTooltip);
+  }
+  // Arrow functions so `this` is stable for add/removeEventListener pairing.
+  showTooltipOnPointer = (event) => {
+    if (!this.hasTooltipTarget)
+      return;
+    const target = event.target.closest("[data-tooltip-content]");
+    if (!target)
+      return;
+    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? "";
+    this.tooltipTarget.classList.add("is-visible");
+    this.positionAtPointer(event);
+  };
+  // Reposition tooltip as the pointer moves within the SVG so it tracks the cursor.
+  moveTooltip = (event) => {
+    if (!this.tooltipTarget.classList.contains("is-visible"))
+      return;
+    this.positionAtPointer(event);
+  };
+  // Show and position the tooltip above the focused element for keyboard users.
+  showTooltipOnFocus = (event) => {
+    if (!this.hasTooltipTarget)
+      return;
+    const target = event.target.closest("[data-tooltip-content]");
+    if (!target)
+      return;
+    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? "";
+    this.tooltipTarget.classList.add("is-visible");
+    this.positionAtElement(target);
+  };
+  hideTooltip = () => {
+    if (!this.hasTooltipTarget)
+      return;
+    this.tooltipTarget.classList.remove("is-visible");
+  };
+  // Position the tooltip relative to the pointer cursor.
+  positionAtPointer(event) {
+    const rect = this.element.getBoundingClientRect();
+    const tipW = this.tooltipTarget.offsetWidth;
+    const tipH = this.tooltipTarget.offsetHeight;
+    const rawLeft = event.clientX - rect.left + 8;
+    const rawTop = event.clientY - rect.top - 28;
+    const left = Math.min(rawLeft, rect.width - tipW - 4);
+    const top = Math.max(rawTop, tipH + 4);
+    this.tooltipTarget.style.left = `${left}px`;
+    this.tooltipTarget.style.top = `${top}px`;
+  }
+  // Position the tooltip centred above a focused SVG element (keyboard navigation).
+  positionAtElement(el) {
+    const containerRect = this.element.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const tipW = this.tooltipTarget.offsetWidth;
+    const tipH = this.tooltipTarget.offsetHeight;
+    const rawLeft = elRect.left - containerRect.left + elRect.width / 2 - tipW / 2;
+    const rawTop = elRect.top - containerRect.top - tipH - 8;
+    const left = Math.max(4, Math.min(rawLeft, containerRect.width - tipW - 4));
+    const top = Math.max(4, rawTop);
+    this.tooltipTarget.style.left = `${left}px`;
+    this.tooltipTarget.style.top = `${top}px`;
+  }
+}
+
+export { Chart as default };
+//# sourceMappingURL=chart_component_controller.js.map

package/dist/javascript/collection/app/components/midwest/chart_component/chart_component_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart_component_controller.js","sources":["../../../../../../../app/components/midwest/chart_component/chart_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class Chart extends Controller<HTMLElement> {\n  static targets = ['tooltip', 'svg']\n  static values = { tooltipEnabled: { type: Boolean, default: true } }\n\n  declare readonly tooltipTarget: HTMLElement\n  declare readonly hasTooltipTarget: boolean\n  declare readonly svgTarget: SVGElement\n  declare readonly hasSvgTarget: boolean\n  declare tooltipEnabledValue: boolean\n\n  connect (): void {\n    if (this.tooltipEnabledValue && this.hasTooltipTarget) {\n      this.attachListeners()\n    }\n  }\n\n  disconnect (): void {\n    if (!this.hasSvgTarget) return\n    this.svgTarget.removeEventListener('pointerover', this.showTooltipOnPointer)\n    this.svgTarget.removeEventListener('pointermove', this.moveTooltip)\n    this.svgTarget.removeEventListener('pointerout', this.hideTooltip)\n    this.svgTarget.removeEventListener('focusin', this.showTooltipOnFocus)\n    this.svgTarget.removeEventListener('focusout', this.hideTooltip)\n  }\n\n  private attachListeners (): void {\n    this.svgTarget.addEventListener('pointerover', this.showTooltipOnPointer)\n    this.svgTarget.addEventListener('pointermove', this.moveTooltip)\n    this.svgTarget.addEventListener('pointerout', this.hideTooltip)\n    this.svgTarget.addEventListener('focusin', this.showTooltipOnFocus)\n    this.svgTarget.addEventListener('focusout', this.hideTooltip)\n  }\n\n  // Arrow functions so `this` is stable for add/removeEventListener pairing.\n\n  private showTooltipOnPointer = (event: PointerEvent): void => {\n    if (!this.hasTooltipTarget) return\n    const target = (event.target as SVGElement).closest('[data-tooltip-content]') as SVGElement | null\n    if (!target) return\n    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? ''\n    this.tooltipTarget.classList.add('is-visible')\n    this.positionAtPointer(event)\n  }\n\n  // Reposition tooltip as the pointer moves within the SVG so it tracks the cursor.\n  private moveTooltip = (event: PointerEvent): void => {\n    if (!this.tooltipTarget.classList.contains('is-visible')) return\n    this.positionAtPointer(event)\n  }\n\n  // Show and position the tooltip above the focused element for keyboard users.\n  private showTooltipOnFocus = (event: FocusEvent): void => {\n    if (!this.hasTooltipTarget) return\n    const target = (event.target as SVGElement).closest('[data-tooltip-content]') as SVGElement | null\n    if (!target) return\n    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? ''\n    this.tooltipTarget.classList.add('is-visible')\n    this.positionAtElement(target)\n  }\n\n  private hideTooltip = (): void => {\n    if (!this.hasTooltipTarget) return\n    this.tooltipTarget.classList.remove('is-visible')\n  }\n\n  // Position the tooltip relative to the pointer cursor.\n  private positionAtPointer (event: PointerEvent): void {\n    const rect    = this.element.getBoundingClientRect()\n    const tipW    = this.tooltipTarget.offsetWidth\n    const tipH    = this.tooltipTarget.offsetHeight\n    const rawLeft = event.clientX - rect.left + 8\n    const rawTop  = event.clientY - rect.top - 28\n    const left    = Math.min(rawLeft, rect.width - tipW - 4)\n    const top     = Math.max(rawTop, tipH + 4)\n    this.tooltipTarget.style.left = `${left}px`\n    this.tooltipTarget.style.top  = `${top}px`\n  }\n\n  // Position the tooltip centred above a focused SVG element (keyboard navigation).\n  private positionAtElement (el: SVGElement): void {\n    const containerRect = this.element.getBoundingClientRect()\n    const elRect        = el.getBoundingClientRect()\n    const tipW          = this.tooltipTarget.offsetWidth\n    const tipH          = this.tooltipTarget.offsetHeight\n    const rawLeft       = elRect.left - containerRect.left + (elRect.width / 2) - (tipW / 2)\n    const rawTop        = elRect.top - containerRect.top - tipH - 8\n    const left          = Math.max(4, Math.min(rawLeft, containerRect.width - tipW - 4))\n    const top           = Math.max(4, rawTop)\n    this.tooltipTarget.style.left = `${left}px`\n    this.tooltipTarget.style.top  = `${top}px`\n  }\n}\n"],"names":[],"mappings":";;AAEA,MAAqB,cAAc,UAAwB,CAAA;AAAA,EACzD,OAAO,OAAA,GAAU,CAAC,SAAA,EAAW,KAAK,CAAA,CAAA;AAAA,EAClC,OAAO,SAAS,EAAE,cAAA,EAAgB,EAAE,IAAM,EAAA,OAAA,EAAS,OAAS,EAAA,IAAA,EAAO,EAAA,CAAA;AAAA,EAQnE,OAAiB,GAAA;AACf,IAAI,IAAA,IAAA,CAAK,mBAAuB,IAAA,IAAA,CAAK,gBAAkB,EAAA;AACrD,MAAA,IAAA,CAAK,eAAgB,EAAA,CAAA;AAAA,KACvB;AAAA,GACF;AAAA,EAEA,UAAoB,GAAA;AAClB,IAAA,IAAI,CAAC,IAAK,CAAA,YAAA;AAAc,MAAA,OAAA;AACxB,IAAA,IAAA,CAAK,SAAU,CAAA,mBAAA,CAAoB,aAAe,EAAA,IAAA,CAAK,oBAAoB,CAAA,CAAA;AAC3E,IAAA,IAAA,CAAK,SAAU,CAAA,mBAAA,CAAoB,aAAe,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AAClE,IAAA,IAAA,CAAK,SAAU,CAAA,mBAAA,CAAoB,YAAc,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AACjE,IAAA,IAAA,CAAK,SAAU,CAAA,mBAAA,CAAoB,SAAW,EAAA,IAAA,CAAK,kBAAkB,CAAA,CAAA;AACrE,IAAA,IAAA,CAAK,SAAU,CAAA,mBAAA,CAAoB,UAAY,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AAAA,GACjE;AAAA,EAEQ,eAAyB,GAAA;AAC/B,IAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,CAAiB,aAAe,EAAA,IAAA,CAAK,oBAAoB,CAAA,CAAA;AACxE,IAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,CAAiB,aAAe,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AAC/D,IAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,CAAiB,YAAc,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AAC9D,IAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,CAAiB,SAAW,EAAA,IAAA,CAAK,kBAAkB,CAAA,CAAA;AAClE,IAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,CAAiB,UAAY,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AAAA,GAC9D;AAAA;AAAA,EAIQ,oBAAA,GAAuB,CAAC,KAA8B,KAAA;AAC5D,IAAA,IAAI,CAAC,IAAK,CAAA,gBAAA;AAAkB,MAAA,OAAA;AAC5B,IAAA,MAAM,MAAU,GAAA,KAAA,CAAM,MAAsB,CAAA,OAAA,CAAQ,wBAAwB,CAAA,CAAA;AAC5E,IAAA,IAAI,CAAC,MAAA;AAAQ,MAAA,OAAA;AACb,IAAA,IAAA,CAAK,aAAc,CAAA,WAAA,GAAc,MAAO,CAAA,OAAA,CAAQ,cAAkB,IAAA,EAAA,CAAA;AAClE,IAAK,IAAA,CAAA,aAAA,CAAc,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,kBAAkB,KAAK,CAAA,CAAA;AAAA,GAC9B,CAAA;AAAA;AAAA,EAGQ,WAAA,GAAc,CAAC,KAA8B,KAAA;AACnD,IAAA,IAAI,CAAC,IAAA,CAAK,aAAc,CAAA,SAAA,CAAU,SAAS,YAAY,CAAA;AAAG,MAAA,OAAA;AAC1D,IAAA,IAAA,CAAK,kBAAkB,KAAK,CAAA,CAAA;AAAA,GAC9B,CAAA;AAAA;AAAA,EAGQ,kBAAA,GAAqB,CAAC,KAA4B,KAAA;AACxD,IAAA,IAAI,CAAC,IAAK,CAAA,gBAAA;AAAkB,MAAA,OAAA;AAC5B,IAAA,MAAM,MAAU,GAAA,KAAA,CAAM,MAAsB,CAAA,OAAA,CAAQ,wBAAwB,CAAA,CAAA;AAC5E,IAAA,IAAI,CAAC,MAAA;AAAQ,MAAA,OAAA;AACb,IAAA,IAAA,CAAK,aAAc,CAAA,WAAA,GAAc,MAAO,CAAA,OAAA,CAAQ,cAAkB,IAAA,EAAA,CAAA;AAClE,IAAK,IAAA,CAAA,aAAA,CAAc,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,kBAAkB,MAAM,CAAA,CAAA;AAAA,GAC/B,CAAA;AAAA,EAEQ,cAAc,MAAY;AAChC,IAAA,IAAI,CAAC,IAAK,CAAA,gBAAA;AAAkB,MAAA,OAAA;AAC5B,IAAK,IAAA,CAAA,aAAA,CAAc,SAAU,CAAA,MAAA,CAAO,YAAY,CAAA,CAAA;AAAA,GAClD,CAAA;AAAA;AAAA,EAGQ,kBAAmB,KAA2B,EAAA;AACpD,IAAM,MAAA,IAAA,GAAU,IAAK,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAA;AACnD,IAAM,MAAA,IAAA,GAAU,KAAK,aAAc,CAAA,WAAA,CAAA;AACnC,IAAM,MAAA,IAAA,GAAU,KAAK,aAAc,CAAA,YAAA,CAAA;AACnC,IAAA,MAAM,OAAU,GAAA,KAAA,CAAM,OAAU,GAAA,IAAA,CAAK,IAAO,GAAA,CAAA,CAAA;AAC5C,IAAA,MAAM,MAAU,GAAA,KAAA,CAAM,OAAU,GAAA,IAAA,CAAK,GAAM,GAAA,EAAA,CAAA;AAC3C,IAAA,MAAM,OAAU,IAAK,CAAA,GAAA,CAAI,SAAS,IAAK,CAAA,KAAA,GAAQ,OAAO,CAAC,CAAA,CAAA;AACvD,IAAA,MAAM,GAAU,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,EAAQ,OAAO,CAAC,CAAA,CAAA;AACzC,IAAK,IAAA,CAAA,aAAA,CAAc,KAAM,CAAA,IAAA,GAAO,CAAG,EAAA,IAAA,CAAA,EAAA,CAAA,CAAA;AACnC,IAAK,IAAA,CAAA,aAAA,CAAc,KAAM,CAAA,GAAA,GAAO,CAAG,EAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AAAA,GACrC;AAAA;AAAA,EAGQ,kBAAmB,EAAsB,EAAA;AAC/C,IAAM,MAAA,aAAA,GAAgB,IAAK,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAA;AACzD,IAAM,MAAA,MAAA,GAAgB,GAAG,qBAAsB,EAAA,CAAA;AAC/C,IAAM,MAAA,IAAA,GAAgB,KAAK,aAAc,CAAA,WAAA,CAAA;AACzC,IAAM,MAAA,IAAA,GAAgB,KAAK,aAAc,CAAA,YAAA,CAAA;AACzC,IAAM,MAAA,OAAA,GAAgB,OAAO,IAAO,GAAA,aAAA,CAAc,OAAQ,MAAO,CAAA,KAAA,GAAQ,IAAM,IAAO,GAAA,CAAA,CAAA;AACtF,IAAA,MAAM,MAAgB,GAAA,MAAA,CAAO,GAAM,GAAA,aAAA,CAAc,MAAM,IAAO,GAAA,CAAA,CAAA;AAC9D,IAAM,MAAA,IAAA,GAAgB,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,CAAK,GAAI,CAAA,OAAA,EAAS,aAAc,CAAA,KAAA,GAAQ,IAAO,GAAA,CAAC,CAAC,CAAA,CAAA;AACnF,IAAA,MAAM,GAAgB,GAAA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,MAAM,CAAA,CAAA;AACxC,IAAK,IAAA,CAAA,aAAA,CAAc,KAAM,CAAA,IAAA,GAAO,CAAG,EAAA,IAAA,CAAA,EAAA,CAAA,CAAA;AACnC,IAAK,IAAA,CAAA,aAAA,CAAc,KAAM,CAAA,GAAA,GAAO,CAAG,EAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AAAA,GACrC;AACF;;;;"}

package/dist/javascript/midwest.d.ts

@@ -50,6 +50,30 @@ declare class CountdownTimer extends Controller {
     disconnect(): void;
 }
 
+declare class Chart extends Controller<HTMLElement> {
+    static targets: string[];
+    static values: {
+        tooltipEnabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+    readonly tooltipTarget: HTMLElement;
+    readonly hasTooltipTarget: boolean;
+    readonly svgTarget: SVGElement;
+    readonly hasSvgTarget: boolean;
+    tooltipEnabledValue: boolean;
+    connect(): void;
+    disconnect(): void;
+    private attachListeners;
+    private showTooltipOnPointer;
+    private moveTooltip;
+    private showTooltipOnFocus;
+    private hideTooltip;
+    private positionAtPointer;
+    private positionAtElement;
+}
+
 declare function registerMidwestControllers(application: any): void;
 
-export { Banner, Card, CountdownTimer, registerMidwestControllers };
+export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };

package/dist/javascript/midwest.js

@@ -3656,6 +3656,90 @@ class AvatarGroup extends Controller {
   }
 }
 
+class Chart extends Controller {
+  static targets = ["tooltip", "svg"];
+  static values = { tooltipEnabled: { type: Boolean, default: true } };
+  connect() {
+    if (this.tooltipEnabledValue && this.hasTooltipTarget) {
+      this.attachListeners();
+    }
+  }
+  disconnect() {
+    if (!this.hasSvgTarget)
+      return;
+    this.svgTarget.removeEventListener("pointerover", this.showTooltipOnPointer);
+    this.svgTarget.removeEventListener("pointermove", this.moveTooltip);
+    this.svgTarget.removeEventListener("pointerout", this.hideTooltip);
+    this.svgTarget.removeEventListener("focusin", this.showTooltipOnFocus);
+    this.svgTarget.removeEventListener("focusout", this.hideTooltip);
+  }
+  attachListeners() {
+    this.svgTarget.addEventListener("pointerover", this.showTooltipOnPointer);
+    this.svgTarget.addEventListener("pointermove", this.moveTooltip);
+    this.svgTarget.addEventListener("pointerout", this.hideTooltip);
+    this.svgTarget.addEventListener("focusin", this.showTooltipOnFocus);
+    this.svgTarget.addEventListener("focusout", this.hideTooltip);
+  }
+  // Arrow functions so `this` is stable for add/removeEventListener pairing.
+  showTooltipOnPointer = (event) => {
+    if (!this.hasTooltipTarget)
+      return;
+    const target = event.target.closest("[data-tooltip-content]");
+    if (!target)
+      return;
+    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? "";
+    this.tooltipTarget.classList.add("is-visible");
+    this.positionAtPointer(event);
+  };
+  // Reposition tooltip as the pointer moves within the SVG so it tracks the cursor.
+  moveTooltip = (event) => {
+    if (!this.tooltipTarget.classList.contains("is-visible"))
+      return;
+    this.positionAtPointer(event);
+  };
+  // Show and position the tooltip above the focused element for keyboard users.
+  showTooltipOnFocus = (event) => {
+    if (!this.hasTooltipTarget)
+      return;
+    const target = event.target.closest("[data-tooltip-content]");
+    if (!target)
+      return;
+    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? "";
+    this.tooltipTarget.classList.add("is-visible");
+    this.positionAtElement(target);
+  };
+  hideTooltip = () => {
+    if (!this.hasTooltipTarget)
+      return;
+    this.tooltipTarget.classList.remove("is-visible");
+  };
+  // Position the tooltip relative to the pointer cursor.
+  positionAtPointer(event) {
+    const rect = this.element.getBoundingClientRect();
+    const tipW = this.tooltipTarget.offsetWidth;
+    const tipH = this.tooltipTarget.offsetHeight;
+    const rawLeft = event.clientX - rect.left + 8;
+    const rawTop = event.clientY - rect.top - 28;
+    const left = Math.min(rawLeft, rect.width - tipW - 4);
+    const top = Math.max(rawTop, tipH + 4);
+    this.tooltipTarget.style.left = `${left}px`;
+    this.tooltipTarget.style.top = `${top}px`;
+  }
+  // Position the tooltip centred above a focused SVG element (keyboard navigation).
+  positionAtElement(el) {
+    const containerRect = this.element.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const tipW = this.tooltipTarget.offsetWidth;
+    const tipH = this.tooltipTarget.offsetHeight;
+    const rawLeft = elRect.left - containerRect.left + elRect.width / 2 - tipW / 2;
+    const rawTop = elRect.top - containerRect.top - tipH - 8;
+    const left = Math.max(4, Math.min(rawLeft, containerRect.width - tipW - 4));
+    const top = Math.max(4, rawTop);
+    this.tooltipTarget.style.left = `${left}px`;
+    this.tooltipTarget.style.top = `${top}px`;
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -3673,7 +3757,8 @@ function registerMidwestControllers(application) {
   application.register("midwest-badge", Badge);
   application.register("midwest-confirmation", ConfirmationController);
   application.register("midwest-avatar-group", AvatarGroup);
+  application.register("midwest-chart", Chart);
 }
 
-export { Banner, Card, CountdownTimer, registerMidwestControllers };
+export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };
 //# sourceMappingURL=midwest.js.map