@tet/tet-components 1.3.60-staging → 1.3.61-staging

package/dist/collection/components/basic/carousel/tet-carousel/tet-carousel.js

@@ -1,6 +1,8 @@
 import { h, Host } from "@stencil/core";
 export class TetCarousel {
     constructor() {
+        this.draggedAnchor = null;
+        this.dragMoved = false;
         this.trackElement = null;
         this.dragStartX = 0;
         this.dragOffset = 0;
@@ -27,16 +29,30 @@ export class TetCarousel {
             this.dragOffset = -(idx * window.innerWidth);
         };
         this.onPointerDown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
             this.isDragging = true;
             this.dragStartX = e.screenX;
+            this.dragMoved = false;
             document.body.style.userSelect = 'none';
             document.addEventListener('pointermove', this.onPointerMove);
             document.addEventListener('pointerup', this.onPointerUp);
+            let el = e.target;
+            this.draggedAnchor = null;
+            while (el) {
+                if (el.tagName === 'A') {
+                    this.draggedAnchor = el;
+                    break;
+                }
+                el = el.parentElement;
+            }
         };
         this.onPointerMove = (e) => {
             var _a, _b, _c;
             if (!this.isDragging)
                 return;
+            this.dragMoved = true;
             const delta = e.screenX - this.dragStartX;
             let _dragOffset = this.dragOffset;
             _dragOffset += delta;
@@ -57,13 +73,25 @@ export class TetCarousel {
                 this.trackElement.style.transform = `translateX(${this.dragOffset}px)`;
             }
         };
-        this.onPointerUp = () => {
+        this.onPointerUp = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
             if (!this.isDragging)
                 return;
             this.isDragging = false;
             document.body.style.userSelect = '';
             document.removeEventListener('pointermove', this.onPointerMove);
             document.removeEventListener('pointerup', this.onPointerUp);
+            if (this.draggedAnchor && this.dragMoved) {
+                const preventClick = (ev) => {
+                    var _a;
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    (_a = this.draggedAnchor) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', preventClick, true);
+                };
+                this.draggedAnchor.addEventListener('click', preventClick, true);
+            }
         };
         this.activeIndex = 0;
         this.screenCount = 0;
@@ -110,10 +138,10 @@ export class TetCarousel {
         window.removeEventListener('resize', this.getScreenCount.bind(this));
     }
     render() {
-        return (h(Host, { key: '6e5cfccec6e90056ba1e57138ee21aabb74202cc' }, h("div", { key: 'e626de146f4fc7a16f10b1ad2baef47d3f386abd', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '6100942899ef46c8702d2ba8310d857bd490c38d', class: "tet-carousel__container" }, h("div", { key: 'c944da1c30a264215b4f5644e422b0ef120a1d92', class: "tet-carousel__track", ref: (el) => (this.trackElement = el), style: {
+        return (h(Host, { key: '82455d2dfb8240a27e0e1b11dd68faad64ddfce3' }, h("div", { key: '96c8f171564ba89c9ec4a1d27040bf76d0e8c839', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '14306d6b91013f12d914493b2e134a883841e689', class: "tet-carousel__container" }, h("div", { key: '3b3ab56bf32a4b696db69d05ace95314068c908b', class: "tet-carousel__track", ref: (el) => (this.trackElement = el), style: {
                 transform: `translateX(${this.dragOffset}px)`,
                 transition: this.isDragging ? 'none' : `transform ${this.transitionDuration}ms ${this.transitionTiming}`
-            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: '3d02121d844f2afc87943f54d68f79ef8166d665' }))), h("div", { key: 'b58afd0fb79b1053e81ef8d93043f6821900ee18', class: "tet-carousel__controls" }, this.showButtons && (h("div", { key: 'f8d5860fe97855458150168e623c4e274ea02e12', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '455f9ec9ff0cf2d7796904d0a0aa0a007fc1b382', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }))), this.showDots && (h("div", { key: 'a7721ecb513e207dbb56a46056dc0e97b64df874', class: "tet-carousel__dots" }, Array.from({ length: this.screenCount }).map((_, idx) => (h("span", { class: `tet-carousel__dot${idx === this.activeIndex ? ' active' : ''}`, key: idx, onClick: () => this.handleDotClick(idx) }))))), this.showButtons && (h("div", { key: 'ecf5f7626031d97b3a7e8b7cd4faa132a233a346', class: "tet-carousel__buttons " }, h("tet-button", { key: '84a5ac3c5f5c273cd800d57ccde3607972306f2b', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }), h("tet-button", { key: 'b0941cdc9b7f0f731d9336bfb09482cc399a0fd6', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, onClick: this.handleNext, "aria-label": "Next", disabled: this.screenCount <= 1 || this.activeIndex === this.screenCount - 1 })))))));
+            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: '783ef1e0e5c558d698dd8591516d0cc4d613d890' }))), h("div", { key: '1fec30c7e26abc29218753da2c774c1736747b6b', class: "tet-carousel__controls" }, this.showButtons && (h("div", { key: '5d0e4c0dd7190384f8c96ff3aaed94db90e7d663', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '8a065ab58157140a87ba884254d7f3f5afe72c71', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }))), this.showDots && (h("div", { key: '9c6231e50f7c469254eeaba757a07fd4169d4dc2', class: "tet-carousel__dots" }, Array.from({ length: this.screenCount }).map((_, idx) => (h("span", { class: `tet-carousel__dot${idx === this.activeIndex ? ' active' : ''}`, key: idx, onClick: () => this.handleDotClick(idx) }))))), this.showButtons && (h("div", { key: 'aeb93d78f058d96f4e16253624b7cef6512ec167', class: "tet-carousel__buttons " }, h("tet-button", { key: '5bab8de73d3033df20101a810f89895d47f64fd5', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": "Previous", disabled: this.screenCount <= 1 || this.activeIndex === 0 }), h("tet-button", { key: 'f624005ca2aeda63dd730162d9a0b1538ceef561', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, onClick: this.handleNext, "aria-label": "Next", disabled: this.screenCount <= 1 || this.activeIndex === this.screenCount - 1 })))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }