@tet/tet-components 1.3.157-testing → 1.4.0-staging

package/dist/collection/components/advanced/cards/tet-card-list/tet-card-list.js

@@ -8,340 +8,6 @@ import { getConvertedPixels, InertiaScroll } from "../../../../services/utils/in
  */
 export class TetCardList {
     constructor() {
-        /**
-         * The arrays containing cloned content elements.
-         */
-        this.virtualScrollPrependClones = [];
-        this.virtualScrollAppendClones = [];
-        /**
-         * Stores the content scroll and pointer positions for use with pointer events.
-         */
-        this.scrollDetails = null;
-        /**
-         * Stores the `element` left and width values to limit html reflows.
-         */
-        this.dimensions = { element: { left: 0, width: 0 } };
-        /**
-         * The css gap value set between elements.
-         */
-        this.elementGap = 16;
-        /**
-         * Determines if the content is currently being scrolled.
-         */
-        this.isScrolling = false;
-        /**
-         * Scrolls the element to the horizontal center of the viewport.
-         * @param querySelector The query selector of the element that will be scrolled to the center of view.
-         * @param isSmooth determines whether the scroll should be animated.
-         * @param isQuiet determines wheter scroll events should be triggered.
-         */
-        this.scrollToElementCenter = async (querySelector, isSmooth = true, isQuiet = false) => {
-            let childNodes = Array.from(this.element.children);
-            if (this.withVirtualScroll) {
-                childNodes = Array.from(this.element.querySelectorAll('[data-id]'));
-            }
-            const elementToCenter = childNodes.find(childNode => childNode.matches(querySelector));
-            if (elementToCenter === null || elementToCenter === undefined) {
-                return;
-            }
-            await this.inertialScroll.scrollToElement(elementToCenter, isSmooth, isQuiet);
-            if (this.withOverflowOpacity) {
-                this.updateChildElementOverflowOpacity();
-            }
-        };
-        /**
-         * Calculates the width of the scroll thumb in percentage relative to the content. Sets up the
-         * width parameters of the scroll thumb.
-         */
-        this.setupScrollbar = () => {
-            const { currentScroll } = this.inertialScroll;
-            this.scrollThumbWidth =
-                (this.scrollContainerRef.clientWidth / (currentScroll.scrollWidth + this.scrollContainerRef.clientWidth)) * 100;
-            if (this.scrollbarRef === undefined) {
-                return;
-            }
-            this.scrollbarRef.style.width = `${this.scrollThumbWidth}%`;
-            this.scrollbarRef.style.left = `${this.currentScrollbarScroll}%`;
-        };
-        /**
-         * Prevents the event if scrolling is disabled.
-         * @param event Event
-         */
-        this.handleDisableScroll = (event) => {
-            if (!this.disableScroll) {
-                return;
-            }
-            event.preventDefault();
-        };
-        /**
-         * The scroll event handler. Updates the card item classes as they are scrolled out of view.
-         * Updates the control element classes as the content scroll reaches either end of the scroll.
-         * Updates the position of the visual scrollbar thumb element.
-         */
-        this.handleScroll = () => {
-            this.cardScroll.emit({
-                totalAvailableScrollWidth: this.scrollDetails.scrollWidth,
-                currentScroll: this.scrollDetails.scrollLeft,
-            });
-            const elementChildren = Array.from(this.element.children);
-            if (this.withActiveElement) {
-                const activeClone = elementChildren.find(element => element.attributes['data-clone-id'] && element.classList.contains(this.activeElementClass));
-                if (activeClone !== undefined) {
-                    activeClone.classList.remove(this.activeElementClass);
-                    const cloneOffset = activeClone.getBoundingClientRect().left;
-                    const activeOriginal = elementChildren.find(element => element.classList.contains(this.activeElementClass));
-                    if (activeOriginal !== undefined) {
-                        const originalOffset = activeOriginal.getBoundingClientRect().left;
-                        const scrollDelta = cloneOffset - originalOffset;
-                        this.inertialScroll.scrollTo({ left: this.scrollDetails.scrollLeft - scrollDelta }, true);
-                        this.updateChildElementOverflowOpacity();
-                    }
-                }
-                this.setActiveCenteredElement();
-            }
-            if (this.withVirtualScroll) {
-                this.moveElements();
-                this.updateChildElementOverflowOpacity();
-            }
-        };
-        /**
-         * Handles toggling of the `activeElementClass` on elements during pointer drag events.
-         */
-        this.setActiveCenteredElement = () => {
-            let isScrollRight = this.scrollDetails.scrollSpeed > 0;
-            let isScrollLeft = this.scrollDetails.scrollSpeed < 0;
-            const elementChildren = Array.from(this.element.children);
-            const elementPositions = elementChildren.map(child => child.getBoundingClientRect());
-            const elementRect = this.element.getBoundingClientRect();
-            /** Determine the center point of the bounding element */
-            const centerPoint = elementRect.width / 2 + elementRect.left;
-            /** Determine the index of the child card overlapping with the `centerPoint` */
-            let centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width >= centerPoint);
-            /** Set index to the first element in case list is scrolled to the start */
-            if (centeredElementIndex === 1 && isScrollLeft && this.scrollDetails.scrollLeft === 0) {
-                centeredElementIndex = 0;
-            }
-            /** Set index to the last element in case list is scrolled to the end */
-            if (centeredElementIndex === elementPositions.length - 2 &&
-                isScrollRight &&
-                this.scrollDetails.scrollLeft + this.scrollContainerRef.getBoundingClientRect().width >=
-                    this.scrollDetails.scrollWidth) {
-                centeredElementIndex = elementPositions.length - 1;
-            }
-            /** Calculate the index of the next element in case `centerPoint` is in between two elements */
-            if (centeredElementIndex === -1) {
-                if (isScrollRight) {
-                    centeredElementIndex = elementPositions.findIndex(element => element.left - this.elementGap <= centerPoint && element.left + element.width >= centerPoint);
-                }
-                if (isScrollLeft) {
-                    centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width + this.elementGap >= centerPoint);
-                }
-            }
-            const currentActiveElements = elementChildren.filter(element => element.classList.contains(this.activeElementClass));
-            currentActiveElements.forEach(element => element.classList.remove(this.activeElementClass));
-            const nextElement = elementChildren[centeredElementIndex];
-            if (this.withVirtualScroll && (nextElement === null || nextElement === void 0 ? void 0 : nextElement.hasAttribute('data-clone-id'))) {
-                const nextOriginalElement = elementChildren.find(element => { var _a; return ((_a = element.attributes['data-id']) === null || _a === void 0 ? void 0 : _a.value) === nextElement.getAttribute('data-clone-id'); });
-                nextOriginalElement.classList.add(this.activeElementClass);
-            }
-            if (nextElement !== undefined) {
-                nextElement.classList.add(this.activeElementClass);
-            }
-            this.updateControlVisibility();
-        };
-        /**
-         * Shifts the elements and scroll position.
-         * Gets the first and the last of the original elements and shifts both the original
-         * and the cloned elements depending on the scroll direction.
-         * Updates the currently set scroll values to hide the shift of the elements.
-         */
-        this.moveElements = () => {
-            var _a, _b;
-            if (!this.withVirtualScroll) {
-                return;
-            }
-            const { width, left } = this.dimensions.element;
-            const firstOriginalElement = this.getFirstOriginal();
-            const lastOriginalElement = this.getLastOriginal();
-            const firstOriginalRect = firstOriginalElement.getBoundingClientRect();
-            const lastOriginalRect = lastOriginalElement.getBoundingClientRect();
-            const lastOriginalRight = lastOriginalRect.right - left;
-            const isLastOriginalInViewport = lastOriginalRight < width;
-            if (isLastOriginalInViewport && ((_a = this.scrollDetails) === null || _a === void 0 ? void 0 : _a.scrollSpeed) < 0) {
-                const movedElementDataId = parseInt(firstOriginalElement.getAttribute('data-id'), 10);
-                const positionDelta = firstOriginalRect.width + this.elementGap;
-                const secondOriginalElement = firstOriginalElement.nextElementSibling;
-                this.inertialScroll.scrollBy({ left: -positionDelta }, true);
-                lastOriginalElement.insertAdjacentElement('afterend', firstOriginalElement);
-                secondOriginalElement.insertAdjacentElement('beforebegin', this.virtualScrollPrependClones[movedElementDataId]);
-                this.element.insertAdjacentElement('beforeend', this.virtualScrollAppendClones[movedElementDataId]);
-            }
-            const firstOriginalLeft = firstOriginalRect.left - left;
-            const isFirstOriginalInViewport = firstOriginalLeft > 0;
-            if (isFirstOriginalInViewport && ((_b = this.scrollDetails) === null || _b === void 0 ? void 0 : _b.scrollSpeed) > 0) {
-                const secondToLastElement = lastOriginalElement.previousElementSibling;
-                const positionDelta = lastOriginalRect.width + this.elementGap;
-                const movedElementDataId = parseInt(lastOriginalElement.getAttribute('data-id'), 10);
-                this.inertialScroll.scrollBy({ left: positionDelta }, true);
-                firstOriginalElement.insertAdjacentElement('beforebegin', lastOriginalElement);
-                secondToLastElement.insertAdjacentElement('afterend', this.virtualScrollAppendClones[movedElementDataId]);
-                this.element.insertAdjacentElement('afterbegin', this.virtualScrollPrependClones[movedElementDataId]);
-            }
-        };
-        /**
-         * Stops event propagation bubbling to the `contentElement`
-         * @param event PointerEvent
-         */
-        this.handleControlPointerDown = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            event.stopImmediatePropagation();
-        };
-        /**
-         * Handles the left control click.
-         */
-        this.handleLeftControl = async () => {
-            if (this.isScrolling) {
-                return;
-            }
-            this.isScrolling = true;
-            if (this.withActiveElement) {
-                const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
-                let previousElement = currentActive.previousElementSibling;
-                if (previousElement === null) {
-                    return;
-                }
-                currentActive.classList.remove(this.activeElementClass);
-                if (previousElement.hasAttribute('data-clone-id')) {
-                    this.scrollDetails.scrollSpeed = 1;
-                    this.moveElements();
-                    previousElement = currentActive.previousElementSibling;
-                    if (this.withOverflowOpacity) {
-                        this.updateChildElementOverflowOpacity();
-                    }
-                }
-                previousElement.classList.add(this.activeElementClass);
-                await this.scrollToElementCenter(`.${this.activeElementClass}`);
-                this.moveElements();
-                this.updateControlVisibility();
-            }
-            else if (this.scrollFullWidth) {
-                const scrollRect = this.scrollContainerRef.getBoundingClientRect();
-                const scrollWidth = scrollRect.width;
-                const scrollStart = scrollRect.left;
-                const firstElement = Array.from(this.element.children).find(child => {
-                    const childRect = child.getBoundingClientRect();
-                    return childRect.left < scrollStart && childRect.right + this.elementGap > scrollStart;
-                });
-                if (firstElement !== undefined) {
-                    const firstElementRight = firstElement.getBoundingClientRect().right;
-                    const scrollEnd = scrollRect.left + scrollWidth;
-                    await this.inertialScroll.scrollBy({ left: -(scrollEnd - firstElementRight), behavior: 'smooth' });
-                }
-                else {
-                    await this.inertialScroll.scrollBy({ left: -scrollWidth, behavior: 'smooth' });
-                }
-            }
-            else {
-                await this.inertialScroll.scrollBy({ left: -this.controlScrollAmount, behavior: 'smooth' });
-            }
-            this.isScrolling = false;
-        };
-        /**
-         * Handles the right control click.
-         */
-        this.handleRightControl = async () => {
-            if (this.isScrolling) {
-                return;
-            }
-            this.isScrolling = true;
-            if (this.withActiveElement) {
-                const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
-                let nextElement = currentActive.nextElementSibling;
-                if (nextElement === null) {
-                    return;
-                }
-                currentActive.classList.remove(this.activeElementClass);
-                if (nextElement.hasAttribute('data-clone-id')) {
-                    this.scrollDetails.scrollSpeed = -1;
-                    this.moveElements();
-                    nextElement = currentActive.nextElementSibling;
-                    if (this.withOverflowOpacity) {
-                        this.updateChildElementOverflowOpacity();
-                    }
-                }
-                nextElement.classList.add(this.activeElementClass);
-                await this.scrollToElementCenter(`.${this.activeElementClass}`);
-                this.moveElements();
-                this.updateControlVisibility();
-            }
-            else if (this.scrollFullWidth) {
-                const scrollRect = this.scrollContainerRef.getBoundingClientRect();
-                const scrollWidth = scrollRect.width;
-                const scrollEnd = scrollWidth + scrollRect.left;
-                const lastElement = Array.from(this.element.children).find(child => {
-                    const childRect = child.getBoundingClientRect();
-                    return childRect.left - this.elementGap < scrollEnd && childRect.right > scrollEnd;
-                });
-                if (lastElement !== undefined) {
-                    const lastElementLeft = lastElement.getBoundingClientRect().left;
-                    const scrollStart = scrollRect.left;
-                    await this.inertialScroll.scrollBy({ left: lastElementLeft - scrollStart, behavior: 'smooth' });
-                }
-                else {
-                    await this.inertialScroll.scrollBy({ left: scrollWidth, behavior: 'smooth' });
-                }
-            }
-            else {
-                await this.inertialScroll.scrollBy({ left: this.controlScrollAmount, behavior: 'smooth' });
-            }
-            this.isScrolling = false;
-        };
-        /**
-         * Handles the keyup event on the right control.
-         * If the key is "Enter" or "Space", will trigger navigation to the next card.
-         * @param e - The keyboard event object.
-         */
-        this.handleRightControlKeyUp = (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-                this.handleRightControl();
-            }
-        };
-        /**
-         * Handles the keyup event on the left control.
-         * If the key is "Enter" or "Space", will trigger navigation to the previous card.
-         * @param e - The keyboard event object.
-         */
-        this.handleLeftControlKeyUp = (e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-                this.handleLeftControl();
-            }
-        };
-        /**
-         * Updates the visibility of the control element.
-         */
-        this.updateControlVisibility = (scroll = this.scrollDetails) => {
-            let controlVisibility = {
-                left: false,
-                right: false,
-            };
-            if (this.withControls) {
-                if (scroll === null) {
-                    controlVisibility = {
-                        left: false,
-                        right: true,
-                    };
-                }
-                else {
-                    controlVisibility.left = scroll.scrollLeft - 1 <= 0 ? false : true;
-                    controlVisibility.right = scroll.scrollLeft >= scroll.scrollWidth ? false : true;
-                }
-            }
-            // Only update if there are changes.
-            if (JSON.stringify(controlVisibility) !== JSON.stringify(this.controlVisibility)) {
-                this.controlVisibility = controlVisibility;
-            }
-        };
         this.controlVisibility = { left: true, right: true };
         this.scrollThumbWidth = 0;
         this.isSmallContainer = false;
@@ -362,6 +28,48 @@ export class TetCardList {
         this.iconPrev = '';
         this.iconNext = '';
     }
+    inertialScroll;
+    /**
+     * The DOM root component element.
+     */
+    element;
+    /**
+     * The DOM element of the scrollable content container.
+     */
+    scrollContainerRef;
+    /**
+     * The DOM element of the scroll thumb.
+     */
+    scrollbarRef;
+    /**
+     * The arrays containing cloned content elements.
+     */
+    virtualScrollPrependClones = [];
+    virtualScrollAppendClones = [];
+    /**
+     * Stores the content scroll and pointer positions for use with pointer events.
+     */
+    scrollDetails = null;
+    /**
+     * Stores the `element` left and width values to limit html reflows.
+     */
+    dimensions = { element: { left: 0, width: 0 } };
+    /**
+     * The css gap value set between elements.
+     */
+    elementGap = 16;
+    /**
+     * Determines if the content is currently being scrolled.
+     */
+    isScrolling = false;
+    /**
+     * The event that is emitted when the component is scrolled.
+     */
+    cardScroll;
+    /**
+     * The event that is emitted when the component is scrolled.
+     */
+    contentScrollEnd;
     /**
      * Adds and removes event pointer event handles to the `element` on `withMouseDrag` change.
      * @param withMouseDrag boolean
@@ -420,6 +128,26 @@ export class TetCardList {
     async scrollListToElementCenter(querySelector, isQuiet = false) {
         await this.scrollToElementCenter(querySelector, true, isQuiet);
     }
+    /**
+     * Scrolls the element to the horizontal center of the viewport.
+     * @param querySelector The query selector of the element that will be scrolled to the center of view.
+     * @param isSmooth determines whether the scroll should be animated.
+     * @param isQuiet determines wheter scroll events should be triggered.
+     */
+    scrollToElementCenter = async (querySelector, isSmooth = true, isQuiet = false) => {
+        let childNodes = Array.from(this.element.children);
+        if (this.withVirtualScroll) {
+            childNodes = Array.from(this.element.querySelectorAll('[data-id]'));
+        }
+        const elementToCenter = childNodes.find(childNode => childNode.matches(querySelector));
+        if (elementToCenter === null || elementToCenter === undefined) {
+            return;
+        }
+        await this.inertialScroll.scrollToElement(elementToCenter, isSmooth, isQuiet);
+        if (this.withOverflowOpacity) {
+            this.updateChildElementOverflowOpacity();
+        }
+    };
     /**
      * The lifecycle method that called once just after the component is fully loaded and the first
      * `render()` occurs. Attaches the event listeners to the root element of the component and
@@ -572,11 +300,148 @@ export class TetCardList {
      * Removes the event listeners.
      */
     disconnectedCallback() {
-        var _a, _b;
         this.inertialScroll.detach();
-        (_a = this.scrollContainerRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousewheel', this.handleDisableScroll);
-        (_b = this.scrollContainerRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', this.handleDisableScroll);
+        this.scrollContainerRef?.removeEventListener('mousewheel', this.handleDisableScroll);
+        this.scrollContainerRef?.removeEventListener('touchmove', this.handleDisableScroll);
     }
+    /**
+     * Calculates the width of the scroll thumb in percentage relative to the content. Sets up the
+     * width parameters of the scroll thumb.
+     */
+    setupScrollbar = () => {
+        const { currentScroll } = this.inertialScroll;
+        this.scrollThumbWidth =
+            (this.scrollContainerRef.clientWidth / (currentScroll.scrollWidth + this.scrollContainerRef.clientWidth)) * 100;
+        if (this.scrollbarRef === undefined) {
+            return;
+        }
+        this.scrollbarRef.style.width = `${this.scrollThumbWidth}%`;
+        this.scrollbarRef.style.left = `${this.currentScrollbarScroll}%`;
+    };
+    /**
+     * Prevents the event if scrolling is disabled.
+     * @param event Event
+     */
+    handleDisableScroll = (event) => {
+        if (!this.disableScroll) {
+            return;
+        }
+        event.preventDefault();
+    };
+    /**
+     * The scroll event handler. Updates the card item classes as they are scrolled out of view.
+     * Updates the control element classes as the content scroll reaches either end of the scroll.
+     * Updates the position of the visual scrollbar thumb element.
+     */
+    handleScroll = () => {
+        this.cardScroll.emit({
+            totalAvailableScrollWidth: this.scrollDetails.scrollWidth,
+            currentScroll: this.scrollDetails.scrollLeft,
+        });
+        const elementChildren = Array.from(this.element.children);
+        if (this.withActiveElement) {
+            const activeClone = elementChildren.find(element => element.attributes['data-clone-id'] && element.classList.contains(this.activeElementClass));
+            if (activeClone !== undefined) {
+                activeClone.classList.remove(this.activeElementClass);
+                const cloneOffset = activeClone.getBoundingClientRect().left;
+                const activeOriginal = elementChildren.find(element => element.classList.contains(this.activeElementClass));
+                if (activeOriginal !== undefined) {
+                    const originalOffset = activeOriginal.getBoundingClientRect().left;
+                    const scrollDelta = cloneOffset - originalOffset;
+                    this.inertialScroll.scrollTo({ left: this.scrollDetails.scrollLeft - scrollDelta }, true);
+                    this.updateChildElementOverflowOpacity();
+                }
+            }
+            this.setActiveCenteredElement();
+        }
+        if (this.withVirtualScroll) {
+            this.moveElements();
+            this.updateChildElementOverflowOpacity();
+        }
+    };
+    /**
+     * Handles toggling of the `activeElementClass` on elements during pointer drag events.
+     */
+    setActiveCenteredElement = () => {
+        let isScrollRight = this.scrollDetails.scrollSpeed > 0;
+        let isScrollLeft = this.scrollDetails.scrollSpeed < 0;
+        const elementChildren = Array.from(this.element.children);
+        const elementPositions = elementChildren.map(child => child.getBoundingClientRect());
+        const elementRect = this.element.getBoundingClientRect();
+        /** Determine the center point of the bounding element */
+        const centerPoint = elementRect.width / 2 + elementRect.left;
+        /** Determine the index of the child card overlapping with the `centerPoint` */
+        let centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width >= centerPoint);
+        /** Set index to the first element in case list is scrolled to the start */
+        if (centeredElementIndex === 1 && isScrollLeft && this.scrollDetails.scrollLeft === 0) {
+            centeredElementIndex = 0;
+        }
+        /** Set index to the last element in case list is scrolled to the end */
+        if (centeredElementIndex === elementPositions.length - 2 &&
+            isScrollRight &&
+            this.scrollDetails.scrollLeft + this.scrollContainerRef.getBoundingClientRect().width >=
+                this.scrollDetails.scrollWidth) {
+            centeredElementIndex = elementPositions.length - 1;
+        }
+        /** Calculate the index of the next element in case `centerPoint` is in between two elements */
+        if (centeredElementIndex === -1) {
+            if (isScrollRight) {
+                centeredElementIndex = elementPositions.findIndex(element => element.left - this.elementGap <= centerPoint && element.left + element.width >= centerPoint);
+            }
+            if (isScrollLeft) {
+                centeredElementIndex = elementPositions.findIndex(element => element.left <= centerPoint && element.left + element.width + this.elementGap >= centerPoint);
+            }
+        }
+        const currentActiveElements = elementChildren.filter(element => element.classList.contains(this.activeElementClass));
+        currentActiveElements.forEach(element => element.classList.remove(this.activeElementClass));
+        const nextElement = elementChildren[centeredElementIndex];
+        if (this.withVirtualScroll && nextElement?.hasAttribute('data-clone-id')) {
+            const nextOriginalElement = elementChildren.find(element => element.attributes['data-id']?.value === nextElement.getAttribute('data-clone-id'));
+            nextOriginalElement.classList.add(this.activeElementClass);
+        }
+        if (nextElement !== undefined) {
+            nextElement.classList.add(this.activeElementClass);
+        }
+        this.updateControlVisibility();
+    };
+    /**
+     * Shifts the elements and scroll position.
+     * Gets the first and the last of the original elements and shifts both the original
+     * and the cloned elements depending on the scroll direction.
+     * Updates the currently set scroll values to hide the shift of the elements.
+     */
+    moveElements = () => {
+        if (!this.withVirtualScroll) {
+            return;
+        }
+        const { width, left } = this.dimensions.element;
+        const firstOriginalElement = this.getFirstOriginal();
+        const lastOriginalElement = this.getLastOriginal();
+        const firstOriginalRect = firstOriginalElement.getBoundingClientRect();
+        const lastOriginalRect = lastOriginalElement.getBoundingClientRect();
+        const lastOriginalRight = lastOriginalRect.right - left;
+        const isLastOriginalInViewport = lastOriginalRight < width;
+        if (isLastOriginalInViewport && this.scrollDetails?.scrollSpeed < 0) {
+            const movedElementDataId = parseInt(firstOriginalElement.getAttribute('data-id'), 10);
+            const positionDelta = firstOriginalRect.width + this.elementGap;
+            const secondOriginalElement = firstOriginalElement.nextElementSibling;
+            this.inertialScroll.scrollBy({ left: -positionDelta }, true);
+            lastOriginalElement.insertAdjacentElement('afterend', firstOriginalElement);
+            secondOriginalElement.insertAdjacentElement('beforebegin', this.virtualScrollPrependClones[movedElementDataId]);
+            this.element.insertAdjacentElement('beforeend', this.virtualScrollAppendClones[movedElementDataId]);
+        }
+        const firstOriginalLeft = firstOriginalRect.left - left;
+        const isFirstOriginalInViewport = firstOriginalLeft > 0;
+        if (isFirstOriginalInViewport && this.scrollDetails?.scrollSpeed > 0) {
+            const secondToLastElement = lastOriginalElement.previousElementSibling;
+            const positionDelta = lastOriginalRect.width + this.elementGap;
+            const movedElementDataId = parseInt(lastOriginalElement.getAttribute('data-id'), 10);
+            this.inertialScroll.scrollBy({ left: positionDelta }, true);
+            firstOriginalElement.insertAdjacentElement('beforebegin', lastOriginalElement);
+            secondToLastElement.insertAdjacentElement('afterend', this.virtualScrollAppendClones[movedElementDataId]);
+            this.element.insertAdjacentElement('afterbegin', this.virtualScrollPrependClones[movedElementDataId]);
+        }
+    };
     /**
      * Returns the current scroll in percentage.
      * @returns number representing the current scroll value in percent.
@@ -601,6 +466,160 @@ export class TetCardList {
         }
         return scrollThumbPosition;
     }
+    /**
+     * Stops event propagation bubbling to the `contentElement`
+     * @param event PointerEvent
+     */
+    handleControlPointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+    };
+    /**
+     * Handles the left control click.
+     */
+    handleLeftControl = async () => {
+        if (this.isScrolling) {
+            return;
+        }
+        this.isScrolling = true;
+        if (this.withActiveElement) {
+            const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
+            let previousElement = currentActive.previousElementSibling;
+            if (previousElement === null) {
+                return;
+            }
+            currentActive.classList.remove(this.activeElementClass);
+            if (previousElement.hasAttribute('data-clone-id')) {
+                this.scrollDetails.scrollSpeed = 1;
+                this.moveElements();
+                previousElement = currentActive.previousElementSibling;
+                if (this.withOverflowOpacity) {
+                    this.updateChildElementOverflowOpacity();
+                }
+            }
+            previousElement.classList.add(this.activeElementClass);
+            await this.scrollToElementCenter(`.${this.activeElementClass}`);
+            this.moveElements();
+            this.updateControlVisibility();
+        }
+        else if (this.scrollFullWidth) {
+            const scrollRect = this.scrollContainerRef.getBoundingClientRect();
+            const scrollWidth = scrollRect.width;
+            const scrollStart = scrollRect.left;
+            const firstElement = Array.from(this.element.children).find(child => {
+                const childRect = child.getBoundingClientRect();
+                return childRect.left < scrollStart && childRect.right + this.elementGap > scrollStart;
+            });
+            if (firstElement !== undefined) {
+                const firstElementRight = firstElement.getBoundingClientRect().right;
+                const scrollEnd = scrollRect.left + scrollWidth;
+                await this.inertialScroll.scrollBy({ left: -(scrollEnd - firstElementRight), behavior: 'smooth' });
+            }
+            else {
+                await this.inertialScroll.scrollBy({ left: -scrollWidth, behavior: 'smooth' });
+            }
+        }
+        else {
+            await this.inertialScroll.scrollBy({ left: -this.controlScrollAmount, behavior: 'smooth' });
+        }
+        this.isScrolling = false;
+    };
+    /**
+     * Handles the right control click.
+     */
+    handleRightControl = async () => {
+        if (this.isScrolling) {
+            return;
+        }
+        this.isScrolling = true;
+        if (this.withActiveElement) {
+            const currentActive = this.element.querySelector(`.${this.activeElementClass}`);
+            let nextElement = currentActive.nextElementSibling;
+            if (nextElement === null) {
+                return;
+            }
+            currentActive.classList.remove(this.activeElementClass);
+            if (nextElement.hasAttribute('data-clone-id')) {
+                this.scrollDetails.scrollSpeed = -1;
+                this.moveElements();
+                nextElement = currentActive.nextElementSibling;
+                if (this.withOverflowOpacity) {
+                    this.updateChildElementOverflowOpacity();
+                }
+            }
+            nextElement.classList.add(this.activeElementClass);
+            await this.scrollToElementCenter(`.${this.activeElementClass}`);
+            this.moveElements();
+            this.updateControlVisibility();
+        }
+        else if (this.scrollFullWidth) {
+            const scrollRect = this.scrollContainerRef.getBoundingClientRect();
+            const scrollWidth = scrollRect.width;
+            const scrollEnd = scrollWidth + scrollRect.left;
+            const lastElement = Array.from(this.element.children).find(child => {
+                const childRect = child.getBoundingClientRect();
+                return childRect.left - this.elementGap < scrollEnd && childRect.right > scrollEnd;
+            });
+            if (lastElement !== undefined) {
+                const lastElementLeft = lastElement.getBoundingClientRect().left;
+                const scrollStart = scrollRect.left;
+                await this.inertialScroll.scrollBy({ left: lastElementLeft - scrollStart, behavior: 'smooth' });
+            }
+            else {
+                await this.inertialScroll.scrollBy({ left: scrollWidth, behavior: 'smooth' });
+            }
+        }
+        else {
+            await this.inertialScroll.scrollBy({ left: this.controlScrollAmount, behavior: 'smooth' });
+        }
+        this.isScrolling = false;
+    };
+    /**
+     * Handles the keyup event on the right control.
+     * If the key is "Enter" or "Space", will trigger navigation to the next card.
+     * @param e - The keyboard event object.
+     */
+    handleRightControlKeyUp = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            this.handleRightControl();
+        }
+    };
+    /**
+     * Handles the keyup event on the left control.
+     * If the key is "Enter" or "Space", will trigger navigation to the previous card.
+     * @param e - The keyboard event object.
+     */
+    handleLeftControlKeyUp = (e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            this.handleLeftControl();
+        }
+    };
+    /**
+     * Updates the visibility of the control element.
+     */
+    updateControlVisibility = (scroll = this.scrollDetails) => {
+        let controlVisibility = {
+            left: false,
+            right: false,
+        };
+        if (this.withControls) {
+            if (scroll === null) {
+                controlVisibility = {
+                    left: false,
+                    right: true,
+                };
+            }
+            else {
+                controlVisibility.left = scroll.scrollLeft - 1 <= 0 ? false : true;
+                controlVisibility.right = scroll.scrollLeft >= scroll.scrollWidth ? false : true;
+            }
+        }
+        // Only update if there are changes.
+        if (JSON.stringify(controlVisibility) !== JSON.stringify(this.controlVisibility)) {
+            this.controlVisibility = controlVisibility;
+        }
+    };
     /**
      * Adds or removes the transparency effect to the card items as they enter or leave the viewport.
      */