@unabridged/midwest 0.10.2 → 0.12.0

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

@@ -11,6 +11,9 @@ import Carousel from '../../../components/midwest/carousel_component/carousel_co
 import FormLiveSummary from '../../../components/midwest/form/live_summary_component/live_summary_component_controller'
 import Form from '../../../components/midwest/form/form_controller'
 import CountdownTimer from '../../../components/midwest/countdown_timer_component/countdown_timer_component_controller'
+import Badge from '../../../components/midwest/badge_component/badge_component_controller'
+import Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'
+import AvatarGroup from '../../../components/midwest/avatar_group_component/avatar_group_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer }
@@ -29,5 +32,8 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-carousel', Carousel)
   application.register('midwest-form-live-summary', FormLiveSummary)
   application.register('midwest-form', Form)
+  application.register('midwest-badge', Badge)
+  application.register('midwest-confirmation', Confirmation)
+  application.register('midwest-avatar-group', AvatarGroup)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -536,6 +536,11 @@ class Banner extends Controller {
     this.element.classList.add("visible");
   }
   close() {
+    if (!this.element.classList.contains("animated")) {
+      this.element.style.display = "none";
+      return;
+    }
+    this.element.classList.remove("shown");
     this.element.classList.add("closing");
     setTimeout(() => {
       this.element.classList.add("closed");
@@ -3155,21 +3160,37 @@ class Tabs extends Controller {
 
 class Tooltip extends Controller {
   static targets = ["popover"];
+  static values = {
+    delay: { type: Number, default: 0 }
+  };
+  showTimer = null;
   connect() {
     document.addEventListener("keydown", this.handleKeydown);
   }
   disconnect() {
     document.removeEventListener("keydown", this.handleKeydown);
+    this.cancelShow();
   }
   show() {
-    this.popoverTarget.showPopover();
+    if (this.delayValue > 0) {
+      this.showTimer = setTimeout(() => this.popoverTarget.showPopover(), this.delayValue);
+    } else {
+      this.popoverTarget.showPopover();
+    }
   }
   hide() {
+    this.cancelShow();
     try {
       this.popoverTarget.hidePopover();
     } catch {
     }
   }
+  cancelShow() {
+    if (this.showTimer !== null) {
+      clearTimeout(this.showTimer);
+      this.showTimer = null;
+    }
+  }
   handleKeydown = (event) => {
     if (event.key !== "Escape")
       return;
@@ -3189,18 +3210,22 @@ const NON_SUBMITTING_INPUT_TYPES = /* @__PURE__ */ new Set([
   "reset",
   "submit"
 ]);
+const FORM_ELEMENT_TAGS = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]);
 class Carousel extends Controller {
   static targets = ["track", "prev", "next", "dot"];
   static values = {
-    wizard: { type: Boolean, default: false }
+    wizard: { type: Boolean, default: false },
+    autoplay: { type: Number, default: 0 }
   };
   observer = null;
   _currentIndex = 0;
   _maxUnlocked = 0;
   _lastTouchX = 0;
+  _autoplayTimer = null;
   connect() {
     this.setupObserver();
     this.updateNavigation();
+    this.element.addEventListener("keydown", this.handleArrowKeys);
     if (this.wizardValue) {
       this.element.addEventListener("keydown", this.handleKeydown);
       this.trackTarget.addEventListener("wheel", this.handleWheel, { passive: false });
@@ -3208,13 +3233,22 @@ class Carousel extends Controller {
       this.trackTarget.addEventListener("touchmove", this.handleTouchMove, { passive: false });
       this.updateSlideAccessibility();
     }
+    if (this.autoplayValue > 0) {
+      this.startAutoplay();
+      this.element.addEventListener("mouseenter", this.pauseAutoplay);
+      this.element.addEventListener("mouseleave", this.resumeAutoplay);
+    }
   }
   disconnect() {
     this.observer?.disconnect();
+    this.element.removeEventListener("keydown", this.handleArrowKeys);
     this.element.removeEventListener("keydown", this.handleKeydown);
+    this.element.removeEventListener("mouseenter", this.pauseAutoplay);
+    this.element.removeEventListener("mouseleave", this.resumeAutoplay);
     this.trackTarget.removeEventListener("wheel", this.handleWheel);
     this.trackTarget.removeEventListener("touchstart", this.handleTouchStart);
     this.trackTarget.removeEventListener("touchmove", this.handleTouchMove);
+    this.stopAutoplay();
   }
   next() {
     this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
@@ -3250,6 +3284,22 @@ class Carousel extends Controller {
     this.updateNavigation();
   }
   // Arrow function so `this` is stable for add/removeEventListener pairing.
+  // Handles ArrowLeft/ArrowRight for keyboard slide navigation. Skips form
+  // elements so arrow keys continue to work normally inside inputs and selects.
+  handleArrowKeys = (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+      return;
+    const target = event.target;
+    if (FORM_ELEMENT_TAGS.has(target.tagName) || target.isContentEditable)
+      return;
+    event.preventDefault();
+    if (event.key === "ArrowLeft") {
+      this.previous();
+    } else {
+      this.next();
+    }
+  };
+  // Arrow function so `this` is stable for add/removeEventListener pairing.
   handleKeydown = (event) => {
     if (event.key !== "Enter")
       return;
@@ -3284,6 +3334,34 @@ class Carousel extends Controller {
       event.preventDefault();
     }
   };
+  pauseAutoplay = () => {
+    this.stopAutoplay();
+  };
+  resumeAutoplay = () => {
+    this.startAutoplay();
+  };
+  startAutoplay() {
+    if (this.autoplayValue <= 0 || this._autoplayTimer !== null)
+      return;
+    this._autoplayTimer = setInterval(() => {
+      this.autoplayAdvance();
+    }, this.autoplayValue);
+  }
+  stopAutoplay() {
+    if (this._autoplayTimer === null)
+      return;
+    clearInterval(this._autoplayTimer);
+    this._autoplayTimer = null;
+  }
+  autoplayAdvance() {
+    const atEnd = this._currentIndex >= this.slides.length - 1;
+    if (atEnd) {
+      const firstSlide = this.slides[0];
+      firstSlide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    } else {
+      this.next();
+    }
+  }
   get slides() {
     return Array.from(this.trackTarget.children);
   }
@@ -3538,6 +3616,46 @@ class CountdownTimer extends Controller {
   }
 }
 
+class Badge extends Controller {
+  remove() {
+    this.element.remove();
+  }
+}
+
+class ConfirmationController extends Controller {
+  static targets = ["input", "submitButton"];
+  static values = { confirmText: String };
+  connect() {
+    this.validate();
+  }
+  validate() {
+    const matches = this.inputTarget.value === this.confirmTextValue;
+    this.submitButtonTarget.classList.toggle("disabled", !matches);
+    this.submitButtonTarget.setAttribute("aria-disabled", String(!matches));
+    if (matches) {
+      this.submitButtonTarget.removeAttribute("tabindex");
+    } else {
+      this.submitButtonTarget.setAttribute("tabindex", "-1");
+    }
+  }
+}
+
+class AvatarGroup extends Controller {
+  static targets = ["overflow", "hidden"];
+  expand() {
+    this.element.classList.add("is-expanding");
+    this.hiddenTargets.forEach((wrapper) => {
+      wrapper.classList.add("is-visible");
+    });
+    if (this.hasOverflowTarget) {
+      this.overflowTarget.classList.add("avatar-overflow-hiding");
+      this.overflowTarget.addEventListener("transitionend", () => {
+        this.overflowTarget.remove();
+      }, { once: true });
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -3552,6 +3670,9 @@ function registerMidwestControllers(application) {
   application.register("midwest-carousel", Carousel);
   application.register("midwest-form-live-summary", FormLiveSummary);
   application.register("midwest-form", Form);
+  application.register("midwest-badge", Badge);
+  application.register("midwest-confirmation", ConfirmationController);
+  application.register("midwest-avatar-group", AvatarGroup);
 }
 
 export { Banner, Card, CountdownTimer, registerMidwestControllers };