q2-tecton-elements 1.45.3 → 1.46.0

package/dist/esm/q2-carousel.entry.js

@@ -5042,6 +5042,19 @@ const Q2Carousel = class {
         // COMPUTED //
         this.guid = createGuid();
         // METHODS //
+        this.handlePopovers = (event) => {
+            const { swiper, carouselPaneWrapperElement } = this;
+            if (event.detail.open) {
+                carouselPaneWrapperElement.style.left = `${swiper === null || swiper === void 0 ? void 0 : swiper.translate}px`;
+                carouselPaneWrapperElement.style.transform = null;
+                swiper.disable();
+            }
+            else {
+                carouselPaneWrapperElement.style.left = null;
+                carouselPaneWrapperElement.style.transform = `translate3d(${swiper === null || swiper === void 0 ? void 0 : swiper.translate}px, 0, 0)`;
+                swiper.enable();
+            }
+        };
         this.onMutationObserved = () => {
             this.organizePanes();
             this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
@@ -5060,7 +5073,7 @@ const Q2Carousel = class {
                 this.tearDownCarousel();
             }
             this.autoPlayInProgress = this.autoPlay;
-            this.swiper = new Swiper(carouselWrapper, carouselOptions);
+            new Swiper(carouselWrapper, carouselOptions);
             (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
             if (this.autoPlayInProgress)
                 this.swiper.autoplay.start();
@@ -5227,6 +5240,19 @@ const Q2Carousel = class {
                             preventScroll: true,
                         });
                 },
+                afterInit: swiper => {
+                    var _a;
+                    this.swiper = swiper;
+                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
+                },
+                slideChangeTransitionEnd: () => {
+                    var _a;
+                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.addEventListener('popoverStateChanged', this.handlePopovers);
+                },
+                slideChangeTransitionStart: () => {
+                    var _a;
+                    (_a = this.activePane) === null || _a === void 0 ? void 0 : _a.removeEventListener('popoverStateChanged', this.handlePopovers);
+                },
             },
         };
         this.fullWidthDisplayOptions = Object.assign({ slidesPerView: 1, spaceBetween: 100 }, this.universalCarouselOptions);
@@ -5271,6 +5297,11 @@ const Q2Carousel = class {
             ? this.fullWidthDisplayOptions
             : this.peekContentDisplayOptions;
     }
+    get activePane() {
+        var _a, _b;
+        const activeSlide = (_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slides[this.swiper.activeIndex]) !== null && _b !== void 0 ? _b : 0;
+        return activeSlide instanceof HTMLElement ? activeSlide : null;
+    }
     get dynamicPaginationDots() {
         return this.paneCount && this.paneCount > 5;
     }
@@ -5351,7 +5382,7 @@ const Q2Carousel = class {
         let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
         if (this.showNavigationArrows)
             paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (h(Host, { key: '0c3b0f78014d3b4e345436df243b6bcfd208d892', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (h(Fragment, null, this.paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(this.label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, h("slot", null)))))));
+        return (h(Host, { key: '8cf58284630932436f3c6cd631f42d52870d6b86', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (h(Fragment, null, this.paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(this.label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, h("slot", null)))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {