@orangesk/orange-design-system 2.0.0-beta.18 → 2.0.0-beta.19

package/src/components/AnchorNavigation/styles/mixins.scss

@@ -7,6 +7,8 @@
 @use "../../Megamenu/styles/config" as megamenuConfig;
 @use "sass:map" as sass-map;
 
+$body-text-small: sass-map.get(typography.$body-text, "small");
+
 @mixin anchor-navigation() {
   position: sticky;
   top: 0;
@@ -35,6 +37,8 @@
   text-decoration: none !important;
   display: inline-block;
   cursor: pointer;
+  font-size: sass-map.get($body-text-small, "font-size") !important;
+  line-height: sass-map.get($body-text-small, "line-height") !important;
   font-weight: 700 !important;
 
   &:last-child {

package/src/components/Carousel/Carousel.static.ts

@@ -27,6 +27,7 @@ import {
   CLASS_SLIDE_NEXT,
   CLASS_SLIDE_PREV,
   CLASS_BLEED_RIGHT,
+  CLASS_VIEWPORT_WRAPPER,
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
@@ -49,6 +50,7 @@ export const defaultConfig: SwiperOptions = {
     enabled: true,
     horizontalClass: CLASS_SCROLLBAR_HORIZONTAL,
     dragClass: CLASS_SCROLLBAR_DRAG,
+    hide: false,
   },
   slidesPerView: 1.2,
   a11y: {
@@ -105,7 +107,6 @@ export default class Carousel {
 
     (this.element as any).ODS_Carousel = this;
 
-    // Defer initialization to ensure DOM is ready
     requestAnimationFrame(() => {
       this.init();
     });
@@ -121,30 +122,110 @@ export default class Carousel {
 
     this.instance = new Swiper(this.viewport, {
       ...this.config,
+      enabled: false,
       modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard],
       on: {
         slideChange: this.handleSlideChange,
         slideChangeTransitionEnd: () => {
-          // Update external controls after transition completes
           this.updateExternalControlsState();
         },
       },
     });
 
-    // Check if this is a bleed-right carousel and adjust after initialization
+    this.updateCarouselEnabledState();
+
     if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
       this.adjustConfigForBleedRight();
+      this.fixBleedRightScrollbar();
+    }
+
+    if (this.instance && typeof this.instance.on === "function") {
+      this.instance.on("resize", () => {
+        this.updateCarouselEnabledState();
+      });
     }
 
-    // Initialize external controls
     this.initExternalControls();
   }
 
+  /**
+   * Fix scrollbar drag size and position for bleed-right carousels.
+   * Overrides Swiper's default scrollbar calculations to work correctly with bleed-right layouts.
+   */
+  fixBleedRightScrollbar() {
+    const updateScrollbar = () => {
+      const viewportWrapper = this.element.querySelector(
+        `.${CLASS_VIEWPORT_WRAPPER}`,
+      ) as HTMLElement;
+      const scrollbar = this.instance?.scrollbar;
+
+      if (!viewportWrapper || !scrollbar || !scrollbar.dragEl) {
+        return;
+      }
+
+      const slidesCount = this.instance.slides.length;
+      const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+
+      // Only show scrollbar when there are more slides than visible at once
+      if (slidesCount > slidesPerView) {
+        if (scrollbar.el) {
+          scrollbar.el.style.display = "";
+        }
+
+        const scrollbarWidth = scrollbar.el.offsetWidth;
+
+        // Calculate drag handle size based on the ratio of visible slides to total slides
+        // Example: 3 visible out of 5 total = 60% of scrollbar width
+        const visibleRatio = slidesPerView / slidesCount;
+        const dragSize = visibleRatio * scrollbarWidth;
+        // Ensure minimum 30px for usability
+        const finalDragSize = Math.max(dragSize, 30);
+
+        scrollbar.dragEl.style.width = `${finalDragSize}px`;
+        scrollbar.dragEl.style.display = "";
+
+        // Calculate scrollbar position based on carousel's actual scroll position
+        const maxScrollableSlides = slidesCount - slidesPerView;
+        const currentTranslate = Math.abs(this.instance.translate || 0);
+        const slideSize = this.instance.slidesSizesGrid?.[0] || 0;
+
+        // Determine how far we've scrolled as a ratio (0 = start, 1 = end)
+        const maxTranslateValue = maxScrollableSlides * slideSize;
+        const scrollRatio =
+          maxTranslateValue > 0
+            ? Math.min(currentTranslate / maxTranslateValue, 1)
+            : 0;
+
+        // Position scrollbar drag handle proportionally
+        const maxDragTranslate = scrollbarWidth - finalDragSize;
+        const dragTranslateX = scrollRatio * maxDragTranslate;
+
+        scrollbar.dragEl.style.transform = `translate3d(${dragTranslateX}px, 0, 0)`;
+      } else {
+        // Hide scrollbar when all slides are visible (no scrolling needed)
+        if (scrollbar.el) {
+          scrollbar.el.style.display = "none";
+        }
+      }
+    };
+
+    // Initial update (double requestAnimationFrame ensures DOM is fully ready)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(updateScrollbar);
+    });
+
+    // Keep scrollbar in sync with carousel state changes
+    this.instance.on("progress", updateScrollbar);
+    this.instance.on("slideChange", updateScrollbar);
+    this.instance.on("resize", updateScrollbar);
+    this.instance.on("update", updateScrollbar);
+    this.instance.on("setTranslate", updateScrollbar);
+  }
+
   getElements() {
     this.viewport = this.element.querySelector(SELECTOR_VIEWPORT)!;
     this.track = this.viewport.querySelector(SELECTOR_TRACK)!;
 
-    // Ensure pagination container has proper role
     const paginationEl = this.element.querySelector(
       SELECTOR_DOTS,
     ) as HTMLElement | null;
@@ -186,71 +267,90 @@ export default class Carousel {
     };
   }
 
-  adjustConfigForBleedRight() {
-    // For bleed-right variant, calculate the exact bleed amount dynamically
-    // This allows the last slide to scroll back to align with container edge
+  /**
+   * Enable or disable the carousel based on whether content requires scrolling.
+   * Carousel is enabled only when there are more slides than can fit in the current viewport.
+   */
+  private updateCarouselEnabledState(): void {
+    if (!this.instance || !this.instance.params) return;
 
-    // Wait for next frame to ensure container has final dimensions
-    requestAnimationFrame(() => {
-      // Find the container element
-      const container = this.element.closest(".container") as HTMLElement;
-      if (!container || !this.instance) return;
+    const slidesCount = this.instance.slides.length;
+    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
 
-      // Calculate the actual bleed amount with limits to match CSS
-      const containerWidth = container.offsetWidth;
-      const halfViewportWidth = window.innerWidth / 2;
-      const halfContainerWidth = containerWidth / 2;
-      let bleedAmount = halfViewportWidth - halfContainerWidth;
+    if (slidesCount > slidesPerView) {
+      this.instance.enable();
+    } else {
+      this.instance.disable();
+    }
+  }
 
-      // On very large screens (above 2K), stop the bleeding effect entirely
-      if (window.innerWidth >= 2560) {
-        bleedAmount = 0;
-      }
+  /**
+   * Calculate how much the carousel should extend beyond the container (bleed effect).
+   * On screens 2560px and wider, the bleed effect is disabled.
+   */
+  private calculateBleedAmount(container: HTMLElement): number {
+    const containerWidth = container.offsetWidth;
+    const halfViewportWidth = window.innerWidth / 2;
+    const halfContainerWidth = containerWidth / 2;
+    let bleedAmount = halfViewportWidth - halfContainerWidth;
+
+    if (window.innerWidth >= 2560) {
+      bleedAmount = 0;
+    }
 
-      // Only add offset if there's actual bleeding (positive value)
-      if (bleedAmount > 0) {
-        // Update the Swiper configuration
-        // Add offset only on the right side for right bleed effect
-        this.instance.params.slidesOffsetAfter = bleedAmount;
-        this.instance.update();
-      } else {
-        // Remove offset if no bleeding should occur
-        this.instance.params.slidesOffsetAfter = 0;
-        this.instance.update();
-      }
+    return Math.max(bleedAmount, 0);
+  }
 
-      // Also listen for window resize to recalculate
-      const handleResize = () => {
-        if (this.instance && container) {
-          const newContainerWidth = container.offsetWidth;
-          const newHalfViewportWidth = window.innerWidth / 2;
-          const newHalfContainerWidth = newContainerWidth / 2;
-          let newBleedAmount = newHalfViewportWidth - newHalfContainerWidth;
-
-          // Apply same limits as above
-          if (window.innerWidth >= 2560) {
-            newBleedAmount = 0;
-          }
+  /**
+   * Apply the bleed offset to extend the carousel beyond the container edge.
+   * Only applies when content exceeds the visible area.
+   */
+  private applyBleedOffset(
+    viewportWrapper: HTMLElement,
+    bleedAmount: number,
+  ): void {
+    const visibleWidth = viewportWrapper.clientWidth;
+    const totalWidth = this.track.scrollWidth;
+    const contentFitsWithoutScroll = totalWidth <= visibleWidth + 5;
+
+    if (bleedAmount > 0 && !contentFitsWithoutScroll) {
+      this.instance.params.slidesOffsetAfter = bleedAmount;
+    } else {
+      this.instance.params.slidesOffsetAfter = 0;
+    }
 
-          if (newBleedAmount > 0) {
-            this.instance.params.slidesOffsetAfter = newBleedAmount;
-          } else {
-            this.instance.params.slidesOffsetAfter = 0;
-          }
-          this.instance.update();
-        }
-      };
+    this.instance.update();
+  }
 
-      // Remove any existing resize listener to avoid duplicates
-      window.removeEventListener("resize", handleResize);
-      window.addEventListener("resize", handleResize);
+  /**
+   * Configure bleed-right carousel to extend beyond the container edge.
+   * Calculates the exact offset needed for the carousel to reach the viewport edge
+   * while keeping the last slide aligned with the container edge when scrolled to the end.
+   */
+  adjustConfigForBleedRight() {
+    requestAnimationFrame(() => {
+      const container = this.element.closest(".container") as HTMLElement;
+      if (!container || !this.instance) return;
+
+      const viewportWrapper = this.element.querySelector(
+        `.${CLASS_VIEWPORT_WRAPPER}`,
+      ) as HTMLElement;
+      if (!viewportWrapper) return;
+
+      const bleedAmount = this.calculateBleedAmount(container);
+      this.applyBleedOffset(viewportWrapper, bleedAmount);
+
+      // Recalculate bleed on window resize
+      this.instance.on("resize", () => {
+        const newBleedAmount = this.calculateBleedAmount(container);
+        this.applyBleedOffset(viewportWrapper, newBleedAmount);
+      });
     });
   }
 
   /**
-   * Handles the slide change event on the carousel.
-   * Updates the tooltip position for the active slide and hides tooltips for non-active slides.
-   * Also updates accessibility attributes for pagination buttons and external controls state.
+   * Handle carousel slide change events.
+   * Updates tooltip positions and accessibility states for the active slide.
    */
   handleSlideChange() {
     const activeSlide = this.track.querySelector(SELECTOR_ACTIVE);
@@ -266,13 +366,11 @@ export default class Carousel {
       this.hideAllTooltips(nonActiveSlides);
     }
 
-    // Update external controls state based on current position
     this.updateExternalControlsState();
   }
 
   /**
-   * Updates the position of tooltips for the given element.
-   * @param {HTMLElement} element - The element containing tooltip triggers.
+   * Update tooltip positions for elements within a slide.
    */
   updateTooltipPosition(element: HTMLElement) {
     const tooltipTriggers = element.querySelectorAll(
@@ -295,8 +393,7 @@ export default class Carousel {
   }
 
   /**
-   * Hides all tooltips for the given elements.
-   * @param {NodeListOf<HTMLElement>} elements - The elements containing tooltip triggers.
+   * Hide all tooltips for non-active slides.
    */
   hideAllTooltips(elements: NodeListOf<Element>) {
     elements.forEach((element) => {
@@ -322,20 +419,18 @@ export default class Carousel {
   }
 
   /**
-   * Initialize external controls that reference this carousel
+   * Initialize external navigation controls that reference this carousel via data attributes.
+   * Supports prev/next buttons placed anywhere in the DOM.
    */
   initExternalControls() {
-    // Get carousel ID from data-carousel-id or element id
     const carouselId = this.element.dataset.carouselId || this.element.id;
 
     if (!carouselId) {
-      return; // No ID to reference, skip external controls
+      return;
     }
 
-    // Store carousel ID for later use
     this.carouselId = carouselId;
 
-    // Find all elements with data-carousel-controls matching this carousel's ID
     const controlElements = document.querySelectorAll(
       `[data-carousel-controls="${carouselId}"]`,
     );
@@ -343,12 +438,10 @@ export default class Carousel {
     controlElements.forEach((control) => {
       const htmlControl = control as HTMLElement;
 
-      // Skip if already initialized to avoid duplicate event listeners
       if (htmlControl.hasAttribute("data-carousel-initialized")) {
         return;
       }
 
-      // Remove any existing event listener first (just in case)
       if ((htmlControl as any)._carouselClickHandler) {
         htmlControl.removeEventListener(
           "click",
@@ -358,7 +451,6 @@ export default class Carousel {
 
       const action = htmlControl.dataset.carouselAction;
 
-      // Create bound event handler to avoid multiple listeners
       const clickHandler = (e: Event) => {
         e.preventDefault();
         if (htmlControl.hasAttribute("disabled")) {
@@ -374,7 +466,6 @@ export default class Carousel {
       if (action === "next" || action === "prev") {
         htmlControl.addEventListener("click", clickHandler);
 
-        // Add ARIA attributes for accessibility
         htmlControl.setAttribute(
           "aria-label",
           action === "next"
@@ -383,20 +474,18 @@ export default class Carousel {
         );
         htmlControl.setAttribute("type", "button");
 
-        // Store the handler reference for potential cleanup
         (htmlControl as any)._carouselClickHandler = clickHandler;
       }
 
-      // Mark as initialized to avoid duplicate event listeners
       htmlControl.setAttribute("data-carousel-initialized", "true");
     });
 
-    // Update initial state of external controls
     this.updateExternalControlsState();
   }
 
   /**
-   * Update the disabled state of external controls based on current slide position
+   * Update the disabled state of external navigation controls.
+   * Controls are disabled at the start/end of the carousel based on slide position.
    */
   updateExternalControlsState() {
     if (!this.carouselId || !this.instance) {
@@ -404,19 +493,21 @@ export default class Carousel {
     }
 
     const isAtStart = this.instance.isBeginning;
-    const isAtEnd = this.instance.isEnd;
+    const slidesCount = this.instance.slides.length;
+    const slidesPerView = this.instance.params.slidesPerView as number;
+    const activeIndex = this.instance.activeIndex;
+
+    // Check if we've reached the end (when there are no more slides to scroll to)
+    const isAtEnd = activeIndex + slidesPerView >= slidesCount;
 
-    // Find all prev controls for this carousel
     const prevControls = document.querySelectorAll(
       `[data-carousel-controls="${this.carouselId}"][data-carousel-action="prev"]`,
     );
 
-    // Find all next controls for this carousel
     const nextControls = document.querySelectorAll(
       `[data-carousel-controls="${this.carouselId}"][data-carousel-action="next"]`,
     );
 
-    // Update prev controls
     prevControls.forEach((control) => {
       const htmlControl = control as HTMLElement;
       if (isAtStart) {
@@ -430,7 +521,6 @@ export default class Carousel {
       }
     });
 
-    // Update next controls
     nextControls.forEach((control) => {
       const htmlControl = control as HTMLElement;
       if (isAtEnd) {
@@ -446,7 +536,7 @@ export default class Carousel {
   }
 
   /**
-   * Go to the next slide
+   * Navigate to the next slide.
    */
   slideNext() {
     if (this.instance) {
@@ -455,7 +545,7 @@ export default class Carousel {
   }
 
   /**
-   * Go to the previous slide
+   * Navigate to the previous slide.
    */
   slidePrev() {
     if (this.instance) {
@@ -464,16 +554,14 @@ export default class Carousel {
   }
 
   /**
-   * Get the current active slide index
-   * @returns {number} The current slide index
+   * Get the current active slide index.
    */
   getActiveIndex(): number {
     return this.instance ? this.instance.activeIndex : 0;
   }
 
   /**
-   * Add event listener for slide changes
-   * @param {Function} callback - Callback function to execute on slide change
+   * Register a callback for slide change events.
    */
   onSlideChange(callback: (activeIndex: number) => void) {
     if (this.instance) {
@@ -518,9 +606,7 @@ export default class Carousel {
   }
 
   /**
-   * Find carousel instance by ID or data attribute
-   * @param {string} carouselId - The ID or data attribute value of the carousel
-   * @returns {Carousel | null} The carousel instance or null
+   * Find a carousel instance by its ID or data-carousel-id attribute.
    */
   static getInstanceById(carouselId: string): Carousel | null {
     const element =