@unabridged/midwest 0.14.2 → 0.15.0

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

@@ -19,6 +19,8 @@ import ConfirmationController from '../../../components/midwest/confirmation_com
 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';
+import Range from '../../../components/midwest/form/range_component/range_component_controller.js';
+import Rating from '../../../components/midwest/rating_component/rating_component_controller.js';
 
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
@@ -38,6 +40,8 @@ function registerMidwestControllers(application) {
   application.register("midwest-confirmation", ConfirmationController);
   application.register("midwest-avatar-group", AvatarGroup);
   application.register("midwest-chart", Chart);
+  application.register("midwest-range", Range);
+  application.register("midwest-rating", Rating);
 }
 
 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'\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;;;;"}
+{"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'\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  /* EXPORTS */\n}\n"],"names":["Confirmation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBO,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;AAE/C;;;;"}

package/dist/javascript/collection/app/components/midwest/form/range_component/range_component_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from '@hotwired/stimulus';
+
+class Range extends Controller {
+  static targets = ["input", "output"];
+  connect() {
+    this.sync();
+  }
+  update() {
+    this.sync();
+  }
+  sync() {
+    const input = this.inputTarget;
+    const min = Number(input.min) || 0;
+    const max = Number(input.max) || 100;
+    const val = Number(input.value);
+    const pct = max === min ? 0 : (val - min) / (max - min) * 100;
+    input.style.setProperty("--pct", `${pct}%`);
+    if (this.hasOutputTarget) {
+      this.outputTarget.value = String(val);
+    }
+  }
+}
+
+export { Range as default };
+//# sourceMappingURL=range_component_controller.js.map

package/dist/javascript/collection/app/components/midwest/form/range_component/range_component_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range_component_controller.js","sources":["../../../../../../../../app/components/midwest/form/range_component/range_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class Range extends Controller<HTMLElement> {\n  static targets = ['input', 'output']\n\n  declare readonly inputTarget: HTMLInputElement\n  declare readonly hasOutputTarget: boolean\n  declare readonly outputTarget: HTMLOutputElement\n\n  connect () {\n    // The inline style already has the correct --pct from the server render, but\n    // sync here in case the value was mutated before Stimulus connected (e.g.\n    // browser autofill or Turbo cache restoration).\n    this.sync()\n  }\n\n  update () {\n    this.sync()\n  }\n\n  private sync () {\n    const input = this.inputTarget\n    const min = Number(input.min) || 0\n    const max = Number(input.max) || 100\n    const val = Number(input.value)\n    const pct = max === min ? 0 : ((val - min) / (max - min)) * 100\n\n    input.style.setProperty('--pct', `${pct}%`)\n\n    if (this.hasOutputTarget) {\n      this.outputTarget.value = String(val)\n    }\n  }\n}\n"],"names":[],"mappings":";;AAEA,MAAqB,cAAc,UAAwB,CAAA;AAAA,EACzD,OAAO,OAAA,GAAU,CAAC,OAAA,EAAS,QAAQ,CAAA,CAAA;AAAA,EAMnC,OAAW,GAAA;AAIT,IAAA,IAAA,CAAK,IAAK,EAAA,CAAA;AAAA,GACZ;AAAA,EAEA,MAAU,GAAA;AACR,IAAA,IAAA,CAAK,IAAK,EAAA,CAAA;AAAA,GACZ;AAAA,EAEQ,IAAQ,GAAA;AACd,IAAA,MAAM,QAAQ,IAAK,CAAA,WAAA,CAAA;AACnB,IAAA,MAAM,GAAM,GAAA,MAAA,CAAO,KAAM,CAAA,GAAG,CAAK,IAAA,CAAA,CAAA;AACjC,IAAA,MAAM,GAAM,GAAA,MAAA,CAAO,KAAM,CAAA,GAAG,CAAK,IAAA,GAAA,CAAA;AACjC,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAC9B,IAAA,MAAM,MAAM,GAAQ,KAAA,GAAA,GAAM,KAAM,GAAM,GAAA,GAAA,KAAQ,MAAM,GAAQ,CAAA,GAAA,GAAA,CAAA;AAE5D,IAAA,KAAA,CAAM,KAAM,CAAA,WAAA,CAAY,OAAS,EAAA,CAAA,EAAG,GAAM,CAAA,CAAA,CAAA,CAAA,CAAA;AAE1C,IAAA,IAAI,KAAK,eAAiB,EAAA;AACxB,MAAK,IAAA,CAAA,YAAA,CAAa,KAAQ,GAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA,KACtC;AAAA,GACF;AACF;;;;"}

package/dist/javascript/collection/app/components/midwest/rating_component/rating_component_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from '@hotwired/stimulus';
+
+class Rating extends Controller {
+  static targets = ["star"];
+  connect() {
+    this.refreshFilledState();
+  }
+  preview(event) {
+    const label = event.currentTarget;
+    const hoverValue = Number(label.dataset.value);
+    this.starTargets.forEach((star) => {
+      const starValue = Number(star.dataset.value);
+      star.classList.toggle("is-previewed", starValue <= hoverValue);
+    });
+  }
+  resetPreview() {
+    this.starTargets.forEach((star) => star.classList.remove("is-previewed"));
+    this.refreshFilledState();
+  }
+  select(event) {
+    const label = event.currentTarget;
+    const input = this.element.querySelector(
+      `#${label.htmlFor}`
+    );
+    if (input) {
+      input.checked = true;
+      this.element.classList.add("has-value");
+    }
+    this.refreshFilledState();
+  }
+  refreshFilledState() {
+    const checked = this.element.querySelector(
+      'input[type="radio"]:checked'
+    );
+    const selectedValue = checked ? Number(checked.value) : 0;
+    this.starTargets.forEach((star) => {
+      const starValue = Number(star.dataset.value);
+      star.classList.toggle("is-filled", starValue <= selectedValue);
+    });
+    if (selectedValue > 0) {
+      this.element.classList.add("has-value");
+    }
+  }
+}
+
+export { Rating as default };
+//# sourceMappingURL=rating_component_controller.js.map

package/dist/javascript/collection/app/components/midwest/rating_component/rating_component_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating_component_controller.js","sources":["../../../../../../../app/components/midwest/rating_component/rating_component_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\nexport default class Rating extends Controller<HTMLElement> {\n  static targets = ['star']\n\n  declare readonly starTargets: HTMLLabelElement[]\n\n  connect () {\n    this.refreshFilledState()\n  }\n\n  preview (event: MouseEvent) {\n    const label = event.currentTarget as HTMLLabelElement\n    const hoverValue = Number(label.dataset.value)\n\n    this.starTargets.forEach(star => {\n      const starValue = Number(star.dataset.value)\n      star.classList.toggle('is-previewed', starValue <= hoverValue)\n    })\n  }\n\n  resetPreview () {\n    this.starTargets.forEach(star => star.classList.remove('is-previewed'))\n    this.refreshFilledState()\n  }\n\n  select (event: MouseEvent) {\n    const label = event.currentTarget as HTMLLabelElement\n    const input = this.element.querySelector<HTMLInputElement>(\n      `#${label.htmlFor}`\n    )\n    if (input) {\n      input.checked = true\n      this.element.classList.add('has-value')\n    }\n    this.refreshFilledState()\n  }\n\n  private refreshFilledState () {\n    const checked = this.element.querySelector<HTMLInputElement>(\n      'input[type=\"radio\"]:checked'\n    )\n    const selectedValue = checked ? Number(checked.value) : 0\n\n    this.starTargets.forEach(star => {\n      const starValue = Number(star.dataset.value)\n      star.classList.toggle('is-filled', starValue <= selectedValue)\n    })\n\n    if (selectedValue > 0) {\n      this.element.classList.add('has-value')\n    }\n  }\n}\n"],"names":[],"mappings":";;AAEA,MAAqB,eAAe,UAAwB,CAAA;AAAA,EAC1D,OAAO,OAAU,GAAA,CAAC,MAAM,CAAA,CAAA;AAAA,EAIxB,OAAW,GAAA;AACT,IAAA,IAAA,CAAK,kBAAmB,EAAA,CAAA;AAAA,GAC1B;AAAA,EAEA,QAAS,KAAmB,EAAA;AAC1B,IAAA,MAAM,QAAQ,KAAM,CAAA,aAAA,CAAA;AACpB,IAAA,MAAM,UAAa,GAAA,MAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAE7C,IAAK,IAAA,CAAA,WAAA,CAAY,QAAQ,CAAQ,IAAA,KAAA;AAC/B,MAAA,MAAM,SAAY,GAAA,MAAA,CAAO,IAAK,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAC3C,MAAA,IAAA,CAAK,SAAU,CAAA,MAAA,CAAO,cAAgB,EAAA,SAAA,IAAa,UAAU,CAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,YAAgB,GAAA;AACd,IAAA,IAAA,CAAK,YAAY,OAAQ,CAAA,CAAA,IAAA,KAAQ,KAAK,SAAU,CAAA,MAAA,CAAO,cAAc,CAAC,CAAA,CAAA;AACtE,IAAA,IAAA,CAAK,kBAAmB,EAAA,CAAA;AAAA,GAC1B;AAAA,EAEA,OAAQ,KAAmB,EAAA;AACzB,IAAA,MAAM,QAAQ,KAAM,CAAA,aAAA,CAAA;AACpB,IAAM,MAAA,KAAA,GAAQ,KAAK,OAAQ,CAAA,aAAA;AAAA,MACzB,IAAI,KAAM,CAAA,OAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AACA,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,KAAA,CAAM,OAAU,GAAA,IAAA,CAAA;AAChB,MAAK,IAAA,CAAA,OAAA,CAAQ,SAAU,CAAA,GAAA,CAAI,WAAW,CAAA,CAAA;AAAA,KACxC;AACA,IAAA,IAAA,CAAK,kBAAmB,EAAA,CAAA;AAAA,GAC1B;AAAA,EAEQ,kBAAsB,GAAA;AAC5B,IAAM,MAAA,OAAA,GAAU,KAAK,OAAQ,CAAA,aAAA;AAAA,MAC3B,6BAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,aAAgB,GAAA,OAAA,GAAU,MAAO,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,CAAA,CAAA;AAExD,IAAK,IAAA,CAAA,WAAA,CAAY,QAAQ,CAAQ,IAAA,KAAA;AAC/B,MAAA,MAAM,SAAY,GAAA,MAAA,CAAO,IAAK,CAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAC3C,MAAA,IAAA,CAAK,SAAU,CAAA,MAAA,CAAO,WAAa,EAAA,SAAA,IAAa,aAAa,CAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAED,IAAA,IAAI,gBAAgB,CAAG,EAAA;AACrB,MAAK,IAAA,CAAA,OAAA,CAAQ,SAAU,CAAA,GAAA,CAAI,WAAW,CAAA,CAAA;AAAA,KACxC;AAAA,GACF;AACF;;;;"}

package/dist/javascript/midwest.js

@@ -3740,6 +3740,70 @@ class Chart extends Controller {
   }
 }
 
+class Range extends Controller {
+  static targets = ["input", "output"];
+  connect() {
+    this.sync();
+  }
+  update() {
+    this.sync();
+  }
+  sync() {
+    const input = this.inputTarget;
+    const min = Number(input.min) || 0;
+    const max = Number(input.max) || 100;
+    const val = Number(input.value);
+    const pct = max === min ? 0 : (val - min) / (max - min) * 100;
+    input.style.setProperty("--pct", `${pct}%`);
+    if (this.hasOutputTarget) {
+      this.outputTarget.value = String(val);
+    }
+  }
+}
+
+class Rating extends Controller {
+  static targets = ["star"];
+  connect() {
+    this.refreshFilledState();
+  }
+  preview(event) {
+    const label = event.currentTarget;
+    const hoverValue = Number(label.dataset.value);
+    this.starTargets.forEach((star) => {
+      const starValue = Number(star.dataset.value);
+      star.classList.toggle("is-previewed", starValue <= hoverValue);
+    });
+  }
+  resetPreview() {
+    this.starTargets.forEach((star) => star.classList.remove("is-previewed"));
+    this.refreshFilledState();
+  }
+  select(event) {
+    const label = event.currentTarget;
+    const input = this.element.querySelector(
+      `#${label.htmlFor}`
+    );
+    if (input) {
+      input.checked = true;
+      this.element.classList.add("has-value");
+    }
+    this.refreshFilledState();
+  }
+  refreshFilledState() {
+    const checked = this.element.querySelector(
+      'input[type="radio"]:checked'
+    );
+    const selectedValue = checked ? Number(checked.value) : 0;
+    this.starTargets.forEach((star) => {
+      const starValue = Number(star.dataset.value);
+      star.classList.toggle("is-filled", starValue <= selectedValue);
+    });
+    if (selectedValue > 0) {
+      this.element.classList.add("has-value");
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -3758,6 +3822,8 @@ function registerMidwestControllers(application) {
   application.register("midwest-confirmation", ConfirmationController);
   application.register("midwest-avatar-group", AvatarGroup);
   application.register("midwest-chart", Chart);
+  application.register("midwest-range", Range);
+  application.register("midwest-rating", Rating);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };