@tet/tet-components 1.3.133-testing → 1.3.134-staging

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

@@ -1,4 +1,5 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, forceUpdate } from "@stencil/core";
+import { processTranslations, t } from "../../../../services/translations/index";
 export class TetCarousel {
     constructor() {
         this.draggedAnchor = null;
@@ -12,37 +13,65 @@ export class TetCarousel {
         this.trackElement = null;
         this.dragStartX = 0;
         this.swipeStart = 0;
-        this.handlePrev = () => {
+        this.handleMove = () => {
             var _a;
-            if (this.activeIndex > 0) {
-                this.activeIndex -= 1;
+            const slot = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+            if (!slot)
+                return 1;
+            const assigned = slot.assignedElements ? slot.assignedElements() : [];
+            const item = assigned[this.activeItem];
+            if (item) {
+                this.moveToItem(item);
+            }
+        };
+        this.handlePrev = () => {
+            if (this.activeItem > 0) {
+                this.activeItem -= 1;
             }
-            const wrapperWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-            this.dragOffset = -(this.activeIndex * wrapperWidth);
+            this.handleMove();
         };
         this.handleNext = () => {
-            var _a;
-            if (this.activeIndex < this.screenCount - 1) {
-                this.activeIndex += 1;
+            if (this.activeItem < this.totalItems) {
+                this.activeItem += 1;
             }
-            const wrapperWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-            this.dragOffset = -(this.activeIndex * wrapperWidth);
-            this.checkForLastScreen();
+            this.handleMove();
+        };
+        this.moveToLastScreen = () => {
+            const wrapperWidth = this.getViewportWidth();
+            const totalWidth = this.getSlotClientWidth();
+            this.dragOffset = -(totalWidth - wrapperWidth);
         };
-        this.checkForLastScreen = () => {
-            var _a, _b, _c;
-            if (this.screenCount - 1 === this.activeIndex && !this.isDragging) {
-                const wrapperWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-                const totalWidth = ((_c = (_b = this.trackElement) === null || _b === void 0 ? void 0 : _b.querySelector('slot')) === null || _c === void 0 ? void 0 : _c.offsetWidth) || window.innerWidth;
-                this.dragOffset = -(totalWidth - wrapperWidth);
+        this.moveToTarget = (target) => {
+            var _a;
+            const slot = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+            if (!slot)
+                return 1;
+            const assigned = slot.assignedElements ? slot.assignedElements() : [];
+            for (const [index, item] of assigned.entries()) {
+                const rect = item.getBoundingClientRect();
+                const trackRect = this.trackElement.getBoundingClientRect();
+                let relativeLeft = rect.left - trackRect.left;
+                const gradientOffset = this.calculateGradient(item, relativeLeft);
+                if (relativeLeft >= target - this.swipeThreshold + gradientOffset) {
+                    this.moveToItem(item, index);
+                    return;
+                }
             }
+            this.moveToItem(assigned[0], 0);
+            return;
         };
         this.handleDotClick = (idx) => {
-            var _a;
-            this.activeIndex = idx;
-            const wrapperWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-            this.dragOffset = -(idx * wrapperWidth);
-            this.checkForLastScreen();
+            this.activeDotIndex = idx;
+            const totalWidth = this.getSlotClientWidth();
+            let targetDragOffset = 0;
+            if (this.dotCount - 1 === this.activeDotIndex && !this.isDragging) {
+                const viewPortWidth = this.getViewportWidth();
+                targetDragOffset = totalWidth - viewPortWidth;
+            }
+            else {
+                targetDragOffset = idx * this.getDotScreenLength();
+            }
+            this.moveToTarget(targetDragOffset);
         };
         this.onPointerDown = (e) => {
             e.preventDefault();
@@ -68,7 +97,6 @@ export class TetCarousel {
             }
         };
         this.onPointerMove = (e) => {
-            var _a, _b, _c;
             if (!this.isDragging)
                 return;
             // Only consider this a move (and prevent clicks) when movement exceeds a small threshold.
@@ -85,21 +113,20 @@ export class TetCarousel {
             let _dragOffset = this.dragOffset;
             _dragOffset += delta;
             this.dragStartX = e.screenX;
-            const wrapperWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-            const totalWidth = ((_c = (_b = this.trackElement) === null || _b === void 0 ? void 0 : _b.querySelector('slot')) === null || _c === void 0 ? void 0 : _c.offsetWidth) || window.innerWidth;
+            const wrapperWidth = this.getViewportWidth();
+            const totalWidth = this.getSlotClientWidth();
             const totalScrollableWidth = -(totalWidth - wrapperWidth);
             if (totalScrollableWidth < _dragOffset && _dragOffset < 0) {
                 this.dragOffset = _dragOffset;
             }
         };
         this.onPointerUp = (e) => {
-            var _a, _b, _c;
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
             if (!this.isDragging)
                 return;
-            // Snap activeIndex when dragOffset passes threshold from last index position
+            // Snap activeDotIndex when dragOffset passes threshold from last index position
             this.isDragging = false;
             // Let the once:true capture handler auto-remove itself. Clear flag after a tick.
             if (this.clickPreventAdded) {
@@ -108,17 +135,7 @@ export class TetCarousel {
                 }, 0);
             }
             if (Math.abs(this.dragOffset - this.swipeStart) > this.swipeThreshold) {
-                const indexOffsett = this.dragOffset < this.swipeStart ? 1 : -1;
-                let index = this.activeIndex + indexOffsett;
-                index = Math.max(0, Math.min(index, this.screenCount - 1));
-                this.activeIndex = index;
-                const wrapperWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-                if (this.screenCount - 1 === this.activeIndex && !this.isDragging) {
-                    const totalWidth = ((_c = (_b = this.trackElement) === null || _b === void 0 ? void 0 : _b.querySelector('slot')) === null || _c === void 0 ? void 0 : _c.offsetWidth) || window.innerWidth;
-                    this.dragOffset = -(totalWidth - wrapperWidth);
-                    return;
-                }
-                this.dragOffset = -(index * wrapperWidth);
+                this.moveToTarget(-this.dragOffset);
             }
             document.body.style.userSelect = '';
             document.removeEventListener('pointermove', this.onPointerMove);
@@ -133,10 +150,10 @@ export class TetCarousel {
                 this.draggedAnchor.addEventListener('click', preventClick, true);
             }
         };
-        this.activeIndex = 0;
-        this.screenCount = 0;
+        this.activeDotIndex = 0;
+        this.dotCount = 0;
         this.totalItems = 0;
-        this.items = [];
+        this.activeItem = 0;
         this.theme = 'light';
         this.isDragging = false;
         this.dragOffset = 0;
@@ -148,17 +165,46 @@ export class TetCarousel {
         this.transitionTiming = 'cubic-bezier(0.77,0,0.175,1)';
         this.buttonIconLeft = 'arrow-left';
         this.buttonIconRight = 'arrow-right';
-        this.containerClass = '';
-        this.trackClass = '';
-        this.buttonClass = '';
-        this.dotClass = '';
+        this.maxDots = 8;
+        this.language = 'lv';
+    }
+    async onLanguageChange(language) {
+        processTranslations('tet-components', language).then(() => forceUpdate(this));
+    }
+    componentWillLoad() {
+        processTranslations('tet-components', this.language).then(() => forceUpdate(this));
+    }
+    getViewportWidth() {
+        var _a;
+        return ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
+    }
+    getSlotClientWidth() {
+        var _a, _b;
+        return ((_b = (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.offsetWidth) || window.innerWidth;
+    }
+    getDotScreenLength() {
+        const totalWidth = this.getSlotClientWidth();
+        return (totalWidth / this.dotCount);
+    }
+    isLast(lastScreenBorder, position) {
+        const totalWidth = this.getSlotClientWidth();
+        const relativeLeftToEnd = totalWidth - position;
+        return relativeLeftToEnd <= lastScreenBorder;
+    }
+    isLastViewport(position) {
+        const viewportWidth = this.getViewportWidth();
+        return this.isLast(viewportWidth, position);
+    }
+    isLastDotScreen(position, dotScreenLength) {
+        const viewportWidth = this.getViewportWidth();
+        const lastScreenBorder = Math.max(dotScreenLength, viewportWidth);
+        return this.isLast(lastScreenBorder, position);
     }
     checkGradient() {
-        var _a, _b, _c;
         if (this.showGradient) {
             const absOffset = Math.abs(this.dragOffset);
-            const wrapperWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-            const totalWidth = ((_c = (_b = this.trackElement) === null || _b === void 0 ? void 0 : _b.querySelector('slot')) === null || _c === void 0 ? void 0 : _c.offsetWidth) || window.innerWidth;
+            const wrapperWidth = this.getViewportWidth();
+            const totalWidth = this.getSlotClientWidth();
             const rightEdgeDistance = totalWidth - absOffset - wrapperWidth;
             if (rightEdgeDistance >= 0) {
                 const rightEdge = rightEdgeDistance < 16;
@@ -181,39 +227,43 @@ export class TetCarousel {
             this.rightGradientRef.style.opacity = "0";
         }
     }
-    getScreenCount() {
-        var _a, _b;
+    getDotCount() {
+        var _a;
         const slot = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
         if (!slot)
             return 1;
         const assigned = slot.assignedElements ? slot.assignedElements() : [];
         if (assigned.length === 0)
             return 1;
-        let totalWidth = 0;
-        assigned.forEach((el, index) => {
-            totalWidth += el.offsetWidth || 0;
-            this.items.push({ id: index, width: el.offsetWidth || 0 });
-        });
-        if (totalWidth === 0) {
-            totalWidth = assigned.length * window.innerWidth;
-        }
-        const screenWidth = ((_b = this.container) === null || _b === void 0 ? void 0 : _b.offsetWidth) || window.innerWidth;
         this.totalItems = assigned.length;
-        this.screenCount = Math.ceil(totalWidth / screenWidth);
-    }
-    disableTabIndex() {
-        const buttonComponents = this.container.querySelectorAll('tet-button');
-        buttonComponents.forEach((btnComponent) => {
-            const btn = btnComponent.shadowRoot.querySelector('button');
-            btn.setAttribute('tabIndex', '-1');
+        const viewportWidth = this.getViewportWidth();
+        const totalWidth = this.getSlotClientWidth();
+        let count = 0;
+        assigned.forEach((el) => {
+            const rect = el.getBoundingClientRect();
+            const trackRect = this.trackElement.getBoundingClientRect();
+            let relativeLeft = rect.left - trackRect.left;
+            if (relativeLeft > totalWidth - viewportWidth) {
+                this.dotCount = Math.min(this === null || this === void 0 ? void 0 : this.maxDots, count + 1);
+                return;
+            }
+            count = Math.min(this === null || this === void 0 ? void 0 : this.maxDots, Math.ceil(relativeLeft / viewportWidth));
         });
     }
+    calculateGradient(item, relativeLeft) {
+        const totalWidth = this.getSlotClientWidth();
+        const offsetWidth = item.offsetWidth;
+        let relativeRight = totalWidth - relativeLeft - offsetWidth;
+        let gradientOffset = this.showGradient ? 160 : 0;
+        gradientOffset = relativeLeft < 160 ? relativeLeft : gradientOffset;
+        gradientOffset = relativeRight < 160 ? 0 : gradientOffset;
+        return gradientOffset;
+    }
     componentDidLoad() {
-        this.getScreenCount();
-        window.addEventListener('resize', this.getScreenCount.bind(this));
+        this.getDotCount();
+        window.addEventListener('resize', this.getDotCount.bind(this));
         this.addAnchorFocusListeners();
         this.checkGradient();
-        this.disableTabIndex();
     }
     addAnchorFocusListeners() {
         if (!this.trackElement)
@@ -233,40 +283,57 @@ export class TetCarousel {
             }
             const tabIndexElements = Array.from(el.querySelectorAll('[tabindex="0"]'));
             anchors = anchors.concat(tabIndexElements);
+            if (el.shadowRoot) {
+                const deepTabIndexElements = Array.from(el.shadowRoot.querySelectorAll('[tabindex="0"]'));
+                anchors = anchors.concat(deepTabIndexElements);
+            }
         });
-        anchors.forEach((a) => {
+        anchors.forEach((a, index) => {
             a.addEventListener('focus', () => {
-                var _a, _b, _c;
-                const screenWidth = ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
-                const rect = a.getBoundingClientRect();
-                const trackRect = this.trackElement.getBoundingClientRect();
-                let relativeLeft = rect.left - trackRect.left;
-                const totalWidth = ((_c = (_b = this.trackElement) === null || _b === void 0 ? void 0 : _b.querySelector('slot')) === null || _c === void 0 ? void 0 : _c.offsetWidth) || window.innerWidth;
-                let relativeRight = totalWidth - relativeLeft - a.offsetWidth;
-                // calculations for active index/dots
-                let index = Math.round(-this.dragOffset / screenWidth);
-                index = Math.max(0, Math.min(index, this.screenCount - 1));
-                let gradientOffset = this.showGradient ? 160 : 0;
-                gradientOffset = relativeLeft < 160 ? relativeLeft : gradientOffset;
-                gradientOffset = relativeRight < 160 ? 0 : gradientOffset;
-                relativeLeft -= gradientOffset;
-                const screenIdx = Math.floor((relativeLeft - gradientOffset) / screenWidth);
-                this.activeIndex = Math.max(0, Math.min(screenIdx, this.screenCount - 1));
-                if (totalWidth > screenWidth + relativeLeft) {
-                    this.dragOffset = -relativeLeft;
-                }
-                this.checkForLastScreen();
+                this.moveToItem(a, index);
             });
         });
     }
+    clampDotIndex(dotIndex) {
+        return Math.max(0, Math.min(dotIndex, this.dotCount - 1));
+    }
+    setDotIndex(position, gradientOffset) {
+        let dotIndex = 0;
+        const dotScreenLength = this.getDotScreenLength();
+        if (this.isLastDotScreen(position, dotScreenLength)) {
+            dotIndex = this.dotCount - 1;
+        }
+        else {
+            dotIndex = Math.floor((position + gradientOffset) / dotScreenLength);
+        }
+        this.activeDotIndex = this.clampDotIndex(dotIndex);
+    }
+    moveToItem(item, index) {
+        if (index || index === 0) {
+            this.activeItem = index;
+        }
+        const rect = item.getBoundingClientRect();
+        const trackRect = this.trackElement.getBoundingClientRect();
+        let relativeLeft = rect.left - trackRect.left;
+        const gradientOffset = this.calculateGradient(item, relativeLeft);
+        this.setDotIndex(relativeLeft, gradientOffset);
+        if (!this.isLastViewport(relativeLeft)) {
+            this.dragOffset = -relativeLeft;
+        }
+        else {
+            this.moveToLastScreen();
+        }
+    }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.getScreenCount.bind(this));
+        window.removeEventListener('resize', this.getDotCount.bind(this));
     }
     render() {
-        return (h(Host, { key: '5992f1f40379e5324c9db3454ffb9d6664d2acaf' }, h("div", { key: 'a6abf4aadb39f6a65de46d740925f5824f256def', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: 'abfd06f3c4e8428551c2865814e008803bd588f3', class: "tet-carousel__container" }, h("div", { key: '00a9b8d59d49b7105b52cad50c1d7c37444e8e65', class: "tet-carousel__gradient-left", ref: (el) => { this.leftGradientRef = el; } }), h("div", { key: '238281755c985345ef7733621b39cd4807a276f7', class: "tet-carousel__gradient-right", ref: (el) => { this.rightGradientRef = el; } }), h("div", { key: '9351c5b0da6e5dc93d92f055826b0344b85da996', class: "tet-carousel__track", ref: (el) => (this.trackElement = el), style: {
+        return (h(Host, { key: 'd2a06bc0e502d130ad3642fcbda590a003e6f305' }, h("div", { key: '96ac837374a1ad150f925a44dc534547426a13e1', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: 'e8f8f9b22d1a2170bb4f3a7e5834d2832c18b853', class: "tet-carousel__container" }, h("div", { key: '63e2d90692e0d5a6b58e919016a3baf614c7bfb3', class: "tet-carousel__gradient-left", ref: (el) => { this.leftGradientRef = el; } }), h("div", { key: '29c271641073f62bade810d4f3f05666fbc48f78', class: "tet-carousel__gradient-right", ref: (el) => { this.rightGradientRef = el; } }), h("div", { key: 'c6ca2fe643e5fe9a1ab4fe9b383ac033939a268f', 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: 'f410268e9234ffe63d5c26568da7c07fe8126847' }))), h("div", { key: 'afc0d8a7dc118c855404b5e691f48b3bfe008c24', class: "tet-carousel__controls" }, this.showButtons && (h("div", { key: '70a6583e47543b1915d71cb44940211c17c1e99f', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '28c31103f4fa7c062b1d7fa5e3e93320420e7760', 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: 'c0578a8db9faacef7770c3ee6a78ef6f5344f9c6', 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: '317982c0a2f35fd46f98c47c66641bb416ac4ab4', class: "tet-carousel__buttons " }, h("tet-button", { key: 'd7b06315e10b17295b25ea188d2d1a4817cb9aa7', 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: '17110d87b3b6855ac9f78f68fd6345d2ad7122df', 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: '70203e9f192cdc419352b8c37b6525c46b947aac' }))), (this.showButtons || this.showDots) && (h("div", { key: '104db94f8bfe2d26c939fd906089bac09a190f39', class: "tet-carousel__controls" }, this.showButtons && (h("div", { key: 'a359503a813556b1ae04663b67bffc80fb6d3eba', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: 'b879d216ee1475385528534e1e7ba582cc6340fa', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this.showDots && (h("div", { key: 'fe2fa44f42636e6d1a1d9a216db73ebff6063f51', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onClick: () => this.handleDotClick(idx) }))))), this.showButtons && (h("div", { key: '6fef3b90e8646571d8947fd81785bf1dbffe636b', class: "tet-carousel__buttons " }, h("tet-button", { key: '8e51c2e7a3585c36ba144a6c8f6a57f4c1c3bd48', 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": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: 'affb86f1c2c3dd128389b1bea0179806512ea3d1', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, onClick: this.handleNext, "aria-label": t('components-carousel-next'), disabled: this.dotCount <= 1
+                || this.activeItem === this.totalItems - 1
+                || this.isLastViewport(-this.dragOffset) }))))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -444,92 +511,65 @@ export class TetCarousel {
                 "reflect": false,
                 "defaultValue": "'arrow-right'"
             },
-            "containerClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Additional CSS class for the carousel container."
-                },
-                "attribute": "container-class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "trackClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Additional CSS class for the carousel track."
-                },
-                "attribute": "track-class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "buttonClass": {
-                "type": "string",
+            "maxDots": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Additional CSS class for the navigation buttons."
+                    "text": "Maximum number of dots."
                 },
-                "attribute": "button-class",
+                "attribute": "max-dots",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "8"
             },
-            "dotClass": {
+            "language": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Language",
+                    "resolved": "\"en\" | \"lv\" | \"ru\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "@services/translations",
+                            "id": "src/services/translations/index.ts::Language"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Additional CSS class for the navigation dots."
+                    "text": "The translation language."
                 },
-                "attribute": "dot-class",
+                "attribute": "language",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "'lv'"
             }
         };
     }
     static get states() {
         return {
-            "activeIndex": {},
-            "screenCount": {},
+            "activeDotIndex": {},
+            "dotCount": {},
             "totalItems": {},
-            "items": {},
+            "activeItem": {},
             "isDragging": {},
             "dragOffset": {}
         };
     }
     static get watchers() {
         return [{
+                "propName": "language",
+                "methodName": "onLanguageChange"
+            }, {
                 "propName": "showGradient",
                 "methodName": "checkGradient"
             }, {

package/dist/components/index.js

@@ -92,7 +92,7 @@ import { TetThankYouViewV3 } from './tet-thank-you-view-v3.js';
 import { TetTooltip } from './tet-tooltip.js';
 import { TetTvGiftBlock } from './tet-tv-gift-block.js';
 import { TetTvGiftList } from './tet-tv-gift-list.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-37ed3ebb.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-5749376d.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {

package/dist/components/{p-d8c79647.js → p-14ef6feb.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-5749376d.js';
 import { g as getConvertedPixels } from './p-165a8492.js';
-import { d as defineCustomElement$2 } from './p-e4b59b85.js';
-import { d as defineCustomElement$1 } from './p-d7f5b61c.js';
+import { d as defineCustomElement$2 } from './p-9e91b356.js';
+import { d as defineCustomElement$1 } from './p-19ad34f9.js';
 
 /**
  * Adds the `mobile-like` inertial scroll logic without calling the native `scroll` event

package/dist/components/{p-e409203b.js → p-1706d847.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-37ed3ebb.js';
-import { d as defineCustomElement$2 } from './p-e4b59b85.js';
-import { d as defineCustomElement$1 } from './p-d7f5b61c.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-5749376d.js';
+import { d as defineCustomElement$2 } from './p-9e91b356.js';
+import { d as defineCustomElement$1 } from './p-19ad34f9.js';
 
 const tetNumberInputCss = "@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--number-input-height:3.5rem;--number-input-background-color:var(--tc-layer-primary);--number-input-border-radius:0.75rem;--number-input-border-color:var(--tc-border-secondary);--number-input-border-color-active:var(--tc-border-primary);--number-input-border-color-error:var( --tc-alert-accent-error);--number-input-text-color:var(--tc-text-primary);--number-input-text-secondary-color:var(--tc-text-secondary);--number-input-dropdown-active:var(--tc-layer-tertiary);--number-input-max-width:21.625rem;--number-input-focus-outline-color:var(--tc-blue-40);--number-input-disabled:var(--tc-background-secondary);--number-input-disabled-text:var(--tc-text-tertiary);--number-input-dropdown-border:var(--tc-border-tertiary);max-width:var(--number-input-max-width);display:block}.number-input{display:flex;flex-direction:column}.number-input.dark{--number-input-background-color:var(--tc-layer-primary-dark);--number-input-border-color:var(--tc-border-secondary-dark);--number-input-border-color-active:var(--tc-border-primary-dark);--number-input-border-color-error:var(--tc-alert-accent-error-dark);--number-input-text-color:var(--tc-text-primary-dark);--number-input-text-secondary-color:var(--tc-text-secondary-dark);--number-input-dropdown-active:var(--tc-layer-tertiary-dark);--number-input-disabled:var(--tc-background-secondary-dark);--number-input-disabled-text:var(--tc-text-tertiary-dark);--number-input-dropdown-border:var(--tc-border-tertiary-dark);--number-input-focus-outline-color:var(--tc-blue-40-dark)}.number-input__label{margin-bottom:0.25rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__input{border:none;outline:none;appearance:textfield;-moz-appearance:textfield;padding-inline:0;padding-block:0;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input__input-suffix{font:400 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color);margin-left:0.25rem}.number-input__input-invisible{visibility:hidden;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";position:absolute;pointer-events:none}.number-input__input-container{position:relative;display:flex;border:0.063rem solid var(--number-input-border-color);align-items:baseline;justify-content:center;padding:0.9375rem;cursor:pointer;height:var(--number-input-height);box-sizing:border-box;background-color:var(--number-input-background-color);border-radius:var(--number-input-border-radius)}.number-input__input-container:active,.number-input__input-container:focus-within{outline:none;border:0.063rem solid var(--number-input-border-color-active)}.number-input__input-container.focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s;outline-color:var(--number-input-focus-outline-color);border-color:var(--number-input-border-color-active)}.number-input__input--hidden{opacity:0;position:absolute}.number-input__helper-text{margin-top:0.25rem;font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__cheveron{display:flex;align-self:center;position:absolute;right:1rem;--icon-size:1.25rem;background:transparent;border:none;outline:none;cursor:pointer;--button-border:none;--button-padding-small:0.5rem}.number-input__cheveron:focus,.number-input__cheveron:focus-visible{--button-box-shadow:none}.number-input__dropdown{border:0.0625rem solid var(--number-input-dropdown-border);position:absolute;width:100%;top:3.625rem;background-color:var(--number-input-background-color);padding:0.625rem 0;border-radius:0.75rem;z-index:1;color:var(--number-input-text-color)}.number-input__dropdown:focus-within{outline:none}.number-input__dropdown-item{display:flex;align-items:center;padding:0.5rem 1rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__dropdown-item.active{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0rem;transition:outline 0s;border-radius:0.125rem;outline-color:var(--number-input-focus-outline-color)}.number-input__dropdown-item:hover{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item .check{margin-left:auto}.number-input.disabled .number-input__input-container,.number-input.disabled .number-input__input{background-color:var(--number-input-disabled);border-color:var(--number-input-disabled);cursor:not-allowed}.number-input.disabled .number-input__input,.number-input.disabled .number-input__input-suffix{color:var(--number-input-disabled-text)}.number-input.error .number-input__input-container{border:0.063rem solid var(--number-input-border-color-error)}.number-input.error .number-input__helper-text{color:var(--number-input-border-color-error)}@media all and (min-width: 48rem){.number-input .number-input__label{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}}.number-input tet-icon{--icon-color:var(--number-input-text-color)}.number-input .number-input__input{color:var(--number-input-text-color);background-color:var(--number-input-background-color)}";
 const TetNumberInputStyle0 = tetNumberInputCss;

package/dist/components/{p-d3f63a7a.js → p-18bfd643.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, f as forceUpdate, c as Host } from './p-37ed3ebb.js';
-import { t as translate, p as processTranslations } from './p-aca28e71.js';
-import { d as defineCustomElement$4 } from './p-d7f5b61c.js';
-import { d as defineCustomElement$3 } from './p-8b3d80aa.js';
-import { d as defineCustomElement$2 } from './p-b71cc97c.js';
-import { d as defineCustomElement$1 } from './p-86da5272.js';
+import { p as proxyCustomElement, H, d as createEvent, h, f as forceUpdate, c as Host } from './p-5749376d.js';
+import { t as translate, p as processTranslations } from './p-f0503bac.js';
+import { d as defineCustomElement$4 } from './p-19ad34f9.js';
+import { d as defineCustomElement$3 } from './p-5ba3b696.js';
+import { d as defineCustomElement$2 } from './p-649085aa.js';
+import { d as defineCustomElement$1 } from './p-cf026e83.js';
 
 class AddressOffersProductsFilters {
     constructor(onFilterSelect) {

package/dist/components/{p-d7f5b61c.js → p-19ad34f9.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-37ed3ebb.js';
-import { g as getRenderingRef, f as forceUpdate } from './p-a0d406ca.js';
+import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-5749376d.js';
+import { g as getRenderingRef, f as forceUpdate } from './p-8f91eb96.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);