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

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"
             }, {