q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-carousel/q2-carousel.js

@@ -1,10 +1,9 @@
 import { Fragment, Host, h, } from "@stencil/core";
 import Swiper from "swiper";
 import { Autoplay } from "swiper/modules";
-import { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from "../../utils/index";
+import { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement, isMobile } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
 import { filterChildren, hasValidChildren } from "../../utils/component";
-const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
 const carouselDesktopBreakpoint = 1024; /* viewport width where we show 3 full panes */
 /**
  * @name Carousel
@@ -27,8 +26,14 @@ export class Q2Carousel {
         this.compactMode = false;
         /** Manages re-rendering the component when panes are added or removed. */
         this.currentPaneCount = this.paneCount;
+        /** Keeps all carousel panes at the height of the tallest pane. */
+        this.autoHeight = false;
         /** Enables the auto-play feature and starts the carousel without user input. */
         this.autoPlay = false;
+        /** Adjusts width of active pane automatically in compact screen based on the carousel width. */
+        this.autoWidth = false;
+        /** Breakpoint pixel number for switching to compact mode when autoWIdth is enabled, default is 500.*/
+        this.compactBreakpoint = 500;
         /** Display the carousel panes as frameless with no container or shadow. */
         this.framelessPanes = false;
         /** Display the carousel panes full-width rather than with peeking content. */
@@ -52,6 +57,10 @@ export class Q2Carousel {
                 this.tearDownCarousel();
             }
             this.autoPlayInProgress = this.autoPlay;
+            // Pad the DOM with duplicate panes before Swiper initializes so small carousels have
+            // enough slides for loop mode to rearrange neighbors without leaving empty slots.
+            this.syncPaneDuplicates();
+            this.updateCarouselPaneProps();
             // Save the target index before Swiper init — the realIndexChange callback
             // fires during construction and may overwrite this.index
             const targetIndex = this.realIndex;
@@ -61,6 +70,7 @@ export class Q2Carousel {
             (_c = this.activePane) === null || _c === void 0 ? void 0 : _c.addEventListener('popoverStateChanged', this.handlePopovers);
             if (this.autoPlayInProgress)
                 (_d = this.swiper) === null || _d === void 0 ? void 0 : _d.autoplay.start();
+            this.managePaneHeightObserver();
             // Re-observe after Swiper's DOM changes have settled
             requestAnimationFrame(() => {
                 var _a;
@@ -117,29 +127,128 @@ export class Q2Carousel {
                     break;
             }
         };
+        this.managePaneHeightObserver = () => {
+            var _a, _b, _c;
+            if (this.autoHeight) {
+                this.observePaneHeights();
+                return;
+            }
+            (_a = this.paneResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (this.syncPaneHeightFrame !== undefined) {
+                cancelAnimationFrame(this.syncPaneHeightFrame);
+                this.syncPaneHeightFrame = undefined;
+            }
+            this.hostElement.style.removeProperty('--q2-carousel-equal-pane-height');
+            (_c = (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.update) === null || _c === void 0 ? void 0 : _c.call(_b);
+        };
+        this.observePaneHeights = () => {
+            var _a;
+            (_a = this.paneResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (typeof ResizeObserver === 'undefined') {
+                this.schedulePaneHeightSync();
+                return;
+            }
+            this.paneResizeObserver = new ResizeObserver(this.schedulePaneHeightSync);
+            this.hostElement.querySelectorAll('.q2-carousel-pane-main-content').forEach(paneContent => {
+                this.paneResizeObserver.observe(paneContent);
+            });
+            this.schedulePaneHeightSync();
+        };
         this.onMutationObserved = () => {
             if (this.paneCount !== this.currentPaneCount) {
                 this.updateCarouselPaneProps();
                 this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
             }
+            else if (this.autoHeight) {
+                this.schedulePaneHeightSync();
+            }
+        };
+        this.schedulePaneHeightSync = () => {
+            if (this.syncPaneHeightFrame !== undefined) {
+                cancelAnimationFrame(this.syncPaneHeightFrame);
+            }
+            this.syncPaneHeightFrame = requestAnimationFrame(() => {
+                this.syncPaneHeightFrame = undefined;
+                this.syncPaneHeights();
+            });
         };
         this.setCarouselWrapperWidth = () => {
             if (this.insufficientPanes)
                 return;
             this.carouselWrapperWidth = this.carouselWrapper.clientWidth;
         };
+        /**
+         * Swiper's loop mode needs enough DOM slides on both sides of a centered active slide. For
+         * two-pane full-width carousels and 3 to 5 pane peek carousels, we double the pane set in the
+         * DOM by cloning each real pane once, giving Swiper 4 to 10 slides to loop through. Duplicates are tagged with
+         * `data-q2-pane-duplicate`; they're excluded from `paneArray` / `paneCount` / pagination, and
+         * logical index changes are mapped back to the real-pane range via `modulo paneCount`.
+         */
+        this.syncPaneDuplicates = () => {
+            const realPanes = this.paneArray;
+            const realCount = realPanes.length;
+            const needsDuplicates = realCount === 2 || (!this.useFullWidthPanes && realCount >= 3 && realCount <= 5);
+            const existingDuplicates = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
+            existingDuplicates.forEach(node => node.remove());
+            if (!needsDuplicates || realCount === 0)
+                return;
+            const parent = realPanes[0].parentElement;
+            for (let i = 0; i < realCount; i += 1) {
+                // Build a fresh pane and clone only the user-authored slot content. Cloning the
+                // hydrated real pane would copy Stencil's rendered `<article class="...main-content">`
+                // wrapper, so when the duplicate hydrates it re-wraps → nested articles.
+                const clone = document.createElement('q2-carousel-pane');
+                clone.setAttribute('data-q2-pane-duplicate', 'true');
+                clone.setAttribute('aria-hidden', 'true');
+                // Apply the same classes Stencil will add on hydration so Swiper recognizes the
+                // duplicates as slides during initialization (which happens before Stencil runs).
+                clone.classList.add('q2-carousel-pane', 'swiper-slide', `q2-carousel-pane-${i}`);
+                const sourceContentRoot = realPanes[i].querySelector(':scope > article.q2-carousel-pane-main-content') ||
+                    realPanes[i];
+                Array.from(sourceContentRoot.children).forEach(child => {
+                    clone.appendChild(child.cloneNode(true));
+                });
+                parent.appendChild(clone);
+            }
+        };
+        this.syncPaneHeights = () => {
+            var _a, _b;
+            this.hostElement.style.removeProperty('--q2-carousel-equal-pane-height');
+            const paneContentElements = Array.from(this.hostElement.querySelectorAll('.q2-carousel-pane-main-content'));
+            const tallestPaneHeight = Math.max(...paneContentElements.map(paneContent => paneContent.offsetHeight), 0);
+            if (tallestPaneHeight) {
+                this.hostElement.style.setProperty('--q2-carousel-equal-pane-height', `${tallestPaneHeight}px`);
+            }
+            (_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.update) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
         this.tearDownCarousel = () => {
             this.swiper.destroy();
             this.swiper = null;
         };
         this.updateCarouselPaneProps = () => {
-            const { framelessPanes, paneCount, paneArray } = this;
+            const { framelessPanes, paneArray, paneCount } = this;
+            // Swiper's loop mode reorders slide DOM nodes, so DOM order no longer matches pane identity.
+            // When Swiper has tagged a slide, use its data-swiper-slide-index as the authoritative index.
             paneArray.forEach((pane, domIndex) => {
                 const swiperIndex = pane.getAttribute('data-swiper-slide-index');
-                const index = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex;
-                pane.index = index;
+                const rawIndex = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex;
+                const logicalIndex = paneCount > 0 ? rawIndex % paneCount : rawIndex;
+                pane.index = logicalIndex;
+                pane.siblingCount = paneCount;
+                pane.isActivePane = logicalIndex === this.realIndex;
+                pane.slotFrameless = framelessPanes || undefined;
+            });
+            // Duplicate panes mirror real panes visually but never own "active" — active stays unique
+            // on the real DOM pane. Their `index` maps clicks back to the source via `slideToLoop` in
+            // `carouselPaneClicked`.
+            const duplicatePanes = Array.from(this.hostElement.querySelectorAll('q2-carousel-pane[data-q2-pane-duplicate]'));
+            duplicatePanes.forEach((pane, domIndex) => {
+                const swiperIndex = pane.getAttribute('data-swiper-slide-index');
+                const rawIndex = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex + paneCount;
+                const logicalIndex = paneCount > 0 ? rawIndex % paneCount : rawIndex;
+                pane.index = logicalIndex;
                 pane.siblingCount = paneCount;
-                pane.isActivePane = index === this.realIndex;
+                pane.isActivePane = false;
                 pane.slotFrameless = framelessPanes || undefined;
             });
             this.currentPaneCount = paneCount;
@@ -155,7 +264,7 @@ export class Q2Carousel {
         this.renderInsufficientPanesDisplay = () => {
             let insufficientPanesContainerClasses = [
                 'insufficient-pane-feedback',
-                this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',
+                this.useFullWidthPanes ? 'full-width-display' : 'content-peek-display',
             ];
             if (this.compactMode)
                 insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];
@@ -197,10 +306,15 @@ export class Q2Carousel {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        var _a;
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
             this.mutationObserver = null;
         }
+        (_a = this.paneResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.syncPaneHeightFrame !== undefined) {
+            cancelAnimationFrame(this.syncPaneHeightFrame);
+        }
         if (!!this.swiper) {
             this.tearDownCarousel();
         }
@@ -221,15 +335,19 @@ export class Q2Carousel {
             modules: [Autoplay],
             on: {
                 realIndexChange: swiper => {
-                    this.index = swiper.realIndex + 1;
+                    // When peek mode pads the DOM with duplicates (3- or 4-pane carousels),
+                    // `swiper.realIndex` can point at a duplicate; map it back to the 0..paneCount-1
+                    // range so `this.index`, pagination dots, and emitted events stay logical.
+                    const logicalIndex = this.paneCount > 0 ? swiper.realIndex % this.paneCount : swiper.realIndex;
+                    this.index = logicalIndex + 1;
                     this.updateCarouselPaneProps();
                     const isPaginationFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
                     const isCarouselFocused = !!document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
                     const isFocused = isPaginationFocused || isCarouselFocused;
                     this.handleAriaLive(isFocused);
-                    mirrorEmit(this, ['change', 'tctChange'], { index: swiper.realIndex + 1 });
+                    mirrorEmit(this, ['change', 'tctChange'], { index: logicalIndex + 1 });
                     if (isPaginationFocused) {
-                        this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });
+                        this.paginationBtns[logicalIndex].focus({ preventScroll: true });
                     }
                     else if (isCarouselFocused)
                         swiper.slides[swiper.activeIndex].focus({
@@ -315,8 +433,11 @@ export class Q2Carousel {
     ariaLabelObserver() {
         handleAriaLabel(this);
     }
+    autoHeightChanged() {
+        this.managePaneHeightObserver();
+    }
     carouselWrapperWidthChanged() {
-        this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;
+        this.compactMode = this.carouselWrapperWidth < this.compactBreakpoint;
     }
     framelessPanesChanged() {
         this.updateCarouselPaneProps();
@@ -326,19 +447,21 @@ export class Q2Carousel {
         this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
     indexChanged(newIndex) {
-        var _a, _b;
         // this allows the carousel to be swiped programmatically via the index prop
-        if (newIndex !== ((_a = this.swiper) === null || _a === void 0 ? void 0 : _a.realIndex) + 1) {
-            (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.slideToLoop(this.realIndex);
-            // this.swiper?.slideTo(this.realIndex);
+        if (!this.swiper)
+            return;
+        // Small looped carousels duplicate the pane set, so `swiper.realIndex` may point
+        // at a duplicate. Compare against its logical (mod paneCount) equivalent before deciding
+        // to programmatically slide — otherwise the watcher fights our own realIndexChange mapping.
+        const swiperLogicalIndex = this.paneCount > 0 ? this.swiper.realIndex % this.paneCount : this.swiper.realIndex;
+        if (newIndex !== swiperLogicalIndex + 1) {
+            this.swiper.slideToLoop(this.realIndex);
         }
     }
     // #endregion
     // #region Local Methods
     get activeCarouselOptions() {
-        return this.fullWidthPanes || this.framelessPanes
-            ? this.fullWidthDisplayOptions
-            : this.peekContentDisplayOptions;
+        return this.useFullWidthPanes ? this.fullWidthDisplayOptions : this.peekContentDisplayOptions;
     }
     get activePane() {
         var _a, _b, _c;
@@ -352,19 +475,20 @@ export class Q2Carousel {
         return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');
     }
     get paneArray() {
-        return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane'));
+        return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane:not([data-q2-pane-duplicate])'));
     }
     get paneCount() {
         return this.paneArray.length;
     }
     get peekContentDisplayOptions() {
+        const slidesPerView = (this.autoWidth && this.compactMode) || isMobile() ? 1.2 : 2;
         return {
-            slidesPerView: 2,
-            spaceBetween: this.compactMode ? 0 : 10,
+            slidesPerView,
+            spaceBetween: 10,
             centerInsufficientSlides: false,
             breakpoints: {
                 [carouselDesktopBreakpoint]: {
-                    slidesPerView: 2,
+                    slidesPerView,
                 },
             },
             ...this.universalCarouselOptions,
@@ -377,6 +501,14 @@ export class Q2Carousel {
     get useDynamicPaginationDots() {
         return this.paneCount && this.paneCount > 5;
     }
+    /**
+     * Swiper's loop mode rearranges existing DOM slides rather than cloning them. Small pane sets
+     * are padded in `syncPaneDuplicates` so Swiper has enough slides while Pane N still visually
+     * loops back to Pane 1.
+     */
+    get useFullWidthPanes() {
+        return this.fullWidthPanes || this.paneCount < 3;
+    }
     handleAriaLive(activeAndFocused) {
         if (this.autoPlayInProgress && !activeAndFocused) {
             this.ariaLiveValue = 'off';
@@ -386,13 +518,13 @@ export class Q2Carousel {
         }
     }
     render() {
-        const { paneCount, fullWidthPanes, framelessPanes, compactMode, showNavigationArrows, arrowPosition = 'bottom', insufficientPanes, autoPlay, hidePagination, ariaLiveValue, label, } = this;
+        const { paneCount, useFullWidthPanes, framelessPanes, compactMode, showNavigationArrows, arrowPosition = 'bottom', insufficientPanes, autoPlay, hidePagination, ariaLiveValue, label, } = this;
         let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper'];
-        if (fullWidthPanes)
+        if (useFullWidthPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];
         if (framelessPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];
-        if (!fullWidthPanes && !framelessPanes)
+        if (!useFullWidthPanes)
             carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];
         if (compactMode)
             carouselContainerClasses = [...carouselContainerClasses, 'compact'];
@@ -401,11 +533,11 @@ export class Q2Carousel {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (h(Host, { key: '7c8a2c87c41d8621971bff9a22ab8de2439276c5', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (h(Host, { key: '585ada42e719c5fe7f715ea98e266d406e166511', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
             this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
-            this.renderNextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, h("slot", null)), showNavigationArrows && arrowPosition === 'float' && (h("div", { class: "q2-carousel-floating-arrow-wrapper" }, this.renderPrevNavBtn(), this.renderNextNavBtn())))))));
+            this.renderNextNavBtn())), h("div", { class: "q2-carousel-section-wrapper" }, this.edgeFade && h("div", { class: "q2-carousel-edge-fade q2-carousel-edge-fade-left" }), this.edgeFade && h("div", { class: "q2-carousel-edge-fade q2-carousel-edge-fade-right" }), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, h("slot", null)), showNavigationArrows && arrowPosition === 'float' && (h("div", { class: "q2-carousel-floating-arrow-wrapper" }, this.renderPrevNavBtn(), this.renderNextNavBtn()))))))));
     }
     static get is() { return "q2-carousel"; }
     static get originalStyleUrls() {
@@ -461,6 +593,26 @@ export class Q2Carousel {
                 "setter": false,
                 "reflect": true
             },
+            "autoHeight": {
+                "type": "boolean",
+                "attribute": "auto-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keeps all carousel panes at the height of the tallest pane."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "autoPlay": {
                 "type": "boolean",
                 "attribute": "auto-play",
@@ -481,6 +633,65 @@ export class Q2Carousel {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "autoWidth": {
+                "type": "boolean",
+                "attribute": "auto-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adjusts width of active pane automatically in compact screen based on the carousel width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "compactBreakpoint": {
+                "type": "number",
+                "attribute": "compact-breakpoint",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint pixel number for switching to compact mode when autoWIdth is enabled, default is 500."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "500"
+            },
+            "edgeFade": {
+                "type": "boolean",
+                "attribute": "edge-fade",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display a gradient fade on the left and right edges of the carousel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "framelessPanes": {
                 "type": "boolean",
                 "attribute": "frameless-panes",
@@ -715,6 +926,9 @@ export class Q2Carousel {
         return [{
                 "propName": "ariaLabel",
                 "methodName": "ariaLabelObserver"
+            }, {
+                "propName": "autoHeight",
+                "methodName": "autoHeightChanged"
             }, {
                 "propName": "carouselWrapperWidth",
                 "methodName": "carouselWrapperWidthChanged"