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

package/dist/collection/services/utils/inertia-scroll.js

@@ -5,195 +5,39 @@
  * dispatches `content-scroll` and `content-scroll-end` events to the `rootElement`.
  */
 export class InertiaScroll {
+    /** Determines whether the scroll logic is enabled. */
+    isEnabled = false;
+    /** Determines whether the user is currently dragging the content. */
+    isDragging = false;
+    /** Determines whether the content is currently being scrolled with inertia. */
+    isScrolling = false;
+    /** The current pointer position on the X asis. */
+    pointerX = 0;
+    /** The previous pointer position on the X asis from ~50ms ago. */
+    pointerXOld = 0;
+    /** The speed of the pointer movement for calculating the innertia after the user interaction. */
+    pointerSpeedXOld = 0;
+    /** The speed of current scroll */
+    scrollSpeed = 0;
+    /** The root element of the scroll. */
+    rootElement = null;
+    /** the scroll container created inside of `element` to mimic scroll behaviour. */
+    scrollContainer = null;
+    /** The reference of the interval timer used for updating pointer related values. */
+    timer = null;
+    /** The custom class to be applied to the `scrollContainer`. */
+    scrollableElementClass = '';
+    /** The speed of `animateScroll` scroll animation. */
+    animationSpeed = 0;
+    /** The amount of horizontal scroll from which to disable vertical scrolling. */
+    scrollAmount = 10;
+    /** The width of the window beneath witch to disable vertical scroll when scrolling horizontally. */
+    mobileBreakpoint = 740;
     /**
      * Attaches the `window` listeners and initialises the
      * @param {IInertiaScroll} configuration
      */
     constructor({ rootElement, scrollableElementClass, animationSpeed = 200 }) {
-        /** Determines whether the scroll logic is enabled. */
-        this.isEnabled = false;
-        /** Determines whether the user is currently dragging the content. */
-        this.isDragging = false;
-        /** Determines whether the content is currently being scrolled with inertia. */
-        this.isScrolling = false;
-        /** The current pointer position on the X asis. */
-        this.pointerX = 0;
-        /** The previous pointer position on the X asis from ~50ms ago. */
-        this.pointerXOld = 0;
-        /** The speed of the pointer movement for calculating the innertia after the user interaction. */
-        this.pointerSpeedXOld = 0;
-        /** The speed of current scroll */
-        this.scrollSpeed = 0;
-        /** The root element of the scroll. */
-        this.rootElement = null;
-        /** the scroll container created inside of `element` to mimic scroll behaviour. */
-        this.scrollContainer = null;
-        /** The reference of the interval timer used for updating pointer related values. */
-        this.timer = null;
-        /** The custom class to be applied to the `scrollContainer`. */
-        this.scrollableElementClass = '';
-        /** The speed of `animateScroll` scroll animation. */
-        this.animationSpeed = 0;
-        /** The amount of horizontal scroll from which to disable vertical scrolling. */
-        this.scrollAmount = 10;
-        /** The width of the window beneath witch to disable vertical scroll when scrolling horizontally. */
-        this.mobileBreakpoint = 740;
-        /**
-         * Applies required styles to the `rootElement`.
-         * Creates `scrollContainer` inside of the `rootElement`.
-         * Moves the `rootElement` innerHTML into the `scrollContainer`.
-         * Attaches listeners to the `rootElement`.
-         */
-        this.makeScrollable = () => {
-            this.rootElement.style.display = 'grid';
-            this.rootElement.style.gridAutoFlow = 'column';
-            this.rootElement.style.position = 'relative';
-            this.rootElement.style.overflow = 'hidden';
-            this.rootElement.style.width = '100%';
-            this.rootElement.style.height = '100%';
-            const innerHTML = this.rootElement.innerHTML;
-            this.scrollContainer = document.createElement('div');
-            this.rootElement.innerHTML = '';
-            this.rootElement.appendChild(this.scrollContainer);
-            this.scrollContainer.innerHTML = innerHTML;
-            this.scrollContainer.setAttribute('part', 'scroll-container');
-            this.scrollContainer.classList.add(this.scrollableElementClass);
-            this.scrollContainer.style.overflow = 'visible';
-            this.scrollContainer.style.position = 'relative';
-            this.scrollContainer.style.left = '0px';
-            this.scrollContainer.style.display = 'grid';
-            this.scrollContainer.style.gridAutoFlow = 'column';
-            this.scrollSpeed = 0;
-            this.rootElement.addEventListener('mousedown', this.onMouseDown, { passive: false });
-            this.rootElement.addEventListener('touchstart', this.onTouchStart);
-        };
-        /** Mouse down event handler. */
-        this.onMouseDown = (event) => {
-            this.onPointerDown(event.clientX);
-        };
-        /** Touch start event handler. */
-        this.onTouchStart = (event) => {
-            for (let i = 0; i < event.changedTouches.length; i++) {
-                const touch = event.changedTouches[i];
-                this.onPointerDown(touch.clientX);
-            }
-        };
-        /** Mouse move event handler. */
-        this.onMouseMove = (event) => {
-            if (this.isDragging) {
-                this.onPointerMove(event.clientX);
-            }
-        };
-        /** Touch move event handler. */
-        this.onTouchMove = (event) => {
-            if (this.isDragging) {
-                for (let i = 0; i < event.changedTouches.length; i++) {
-                    const touch = event.changedTouches[i];
-                    this.onPointerMove(touch.clientX);
-                }
-            }
-        };
-        /** Mouse up event handler. */
-        this.onMouseUp = () => {
-            this.onPointerRelease();
-        };
-        /** Touch end event handler. */
-        this.onTouchEnd = (event) => {
-            for (let i = 0; i < event.changedTouches.length; i++) {
-                this.onPointerRelease();
-            }
-        };
-        /** Sets the scroll parameters to the initial state for scroll start. */
-        this.onPointerDown = (x) => {
-            if (!this.isEnabled) {
-                return;
-            }
-            this.scrollSpeed = 0;
-            this.pointerSpeedXOld = 0;
-            this.isDragging = true;
-            this.pointerX = this.pointerXOld = x;
-        };
-        /** Stops the manual scroll by user and sets the initial state for the inertia scroll. */
-        this.onPointerRelease = () => {
-            if (!this.isEnabled) {
-                return;
-            }
-            if (this.isDragging) {
-                this.scrollSpeed = this.pointerSpeedXOld;
-                this.isScrolling = true;
-                this.isDragging = false;
-                this.scrollContainer.style.userSelect = null;
-                this.scrollContainer.style.pointerEvents = null;
-                document.querySelector('body').style.overflowY = null;
-            }
-        };
-        /** Calculates the distance traveled by the pointer while it's pressed updating the `scrollContainer` position. */
-        this.onPointerMove = (x) => {
-            if (!this.isEnabled) {
-                return;
-            }
-            if (!this.isDragging) {
-                return;
-            }
-            this.scrollContainer.style.userSelect = 'none';
-            this.scrollContainer.style.pointerEvents = 'none';
-            // Get the distance the mouse has moved.
-            let scrollDelta = x - this.pointerX;
-            if (Math.abs(scrollDelta) > this.scrollAmount && window.innerWidth < this.mobileBreakpoint) {
-                document.querySelector('body').style.overflowY = 'hidden';
-            }
-            const { scrollLeft, scrollWidth } = this;
-            // Scroll past the end of content, to mimic bounce.
-            if ((scrollLeft < 0 && scrollDelta > 0) || (scrollLeft > scrollWidth && scrollDelta < 0)) {
-                scrollDelta /= 3;
-            }
-            // Increase the left position by the amount scrolled.
-            this.scrollContainer.style.left = `-${scrollLeft - scrollDelta}px`;
-            // Store the position to calculate the next pointer move.
-            this.pointerX = x;
-        };
-        /**
-         * Animation cycle.
-         * Handles the inertial scroll after user has stoped the interaction.
-         */
-        this.scrollUpdate = () => {
-            if (this.isEnabled) {
-                requestAnimationFrame(this.scrollUpdate);
-            }
-            if (!this.isDragging && !this.isScrolling) {
-                return;
-            }
-            // Continue scrolling after drag end with scroll innertia.
-            let { scrollLeft } = this;
-            scrollLeft -= this.scrollSpeed;
-            // Slow down gradually.
-            this.scrollSpeed *= 0.9;
-            if (Math.abs(this.scrollSpeed) < 0.1) {
-                this.scrollSpeed = 0;
-            }
-            // Reach content left end. Trigger a bounce effect.
-            if (scrollLeft < 0) {
-                scrollLeft *= 0.7;
-            }
-            // Reach content right end. Trigger a bounce effect.
-            const { scrollWidth } = this;
-            if (scrollLeft > scrollWidth) {
-                scrollLeft = scrollWidth + (scrollLeft - scrollWidth) * 0.3;
-            }
-            // Update scroll position.
-            this.scrollContainer.style.left = -scrollLeft + 'px';
-            if (this.scrollSpeed === 0 && !this.isDragging && this.isScrolling) {
-                this.isScrolling = false;
-                this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
-                    detail: Object.assign({}, this.currentScroll),
-                }));
-            }
-            if (this.isDragging || this.isScrolling) {
-                this.rootElement.dispatchEvent(new CustomEvent('content-scroll', {
-                    detail: Object.assign({}, this.currentScroll),
-                }));
-            }
-        };
         this.rootElement = rootElement;
         this.scrollableElementClass = scrollableElementClass;
         this.animationSpeed = animationSpeed;
@@ -247,13 +91,11 @@ export class InertiaScroll {
     }
     /** Gets the current `scrollLeft` value of the `scrollableContainer`. */
     get scrollLeft() {
-        var _a, _b;
-        return Math.round(Math.abs(parseFloat((_b = (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.left) || 0));
+        return Math.round(Math.abs(parseFloat(this.scrollContainer?.style?.left) || 0));
     }
     /** Get the total available `scrollWidth` value of the `scrollableContainer`. */
     get scrollWidth() {
-        var _a, _b;
-        return Math.round(((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) - ((_b = this.rootElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0);
+        return Math.round(this.scrollContainer?.getBoundingClientRect().width - this.rootElement?.getBoundingClientRect().width || 0);
     }
     /** Enables the scroll. */
     enable() {
@@ -287,7 +129,10 @@ export class InertiaScroll {
             return;
         }
         this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
-            detail: Object.assign(Object.assign({}, this.currentScroll), { scrollSpeed: scrollResult > scrollLeft ? -1 : 1 }),
+            detail: {
+                ...this.currentScroll,
+                scrollSpeed: scrollResult > scrollLeft ? -1 : 1,
+            },
         }));
     }
     /** Scrolls the passed element to the center of the viewport if possible.
@@ -325,7 +170,10 @@ export class InertiaScroll {
             return;
         }
         this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
-            detail: Object.assign(Object.assign({}, this.currentScroll), { scrollSpeed: scrollOptions.left > scrollLeft ? -1 : 1 }),
+            detail: {
+                ...this.currentScroll,
+                scrollSpeed: scrollOptions.left > scrollLeft ? -1 : 1,
+            },
         }));
     }
     /**
@@ -356,11 +204,175 @@ export class InertiaScroll {
                     resolve();
                 }
                 this.rootElement.dispatchEvent(new CustomEvent('content-scroll', {
-                    detail: Object.assign(Object.assign({}, this.currentScroll), { scrollSpeed: scrollAmount < 0 ? -1 : 1, isUserScroll: false }),
+                    detail: {
+                        ...this.currentScroll,
+                        scrollSpeed: scrollAmount < 0 ? -1 : 1,
+                        isUserScroll: false,
+                    },
                 }));
             };
             animate(currentTime);
         });
         await promise;
     }
+    /**
+     * Applies required styles to the `rootElement`.
+     * Creates `scrollContainer` inside of the `rootElement`.
+     * Moves the `rootElement` innerHTML into the `scrollContainer`.
+     * Attaches listeners to the `rootElement`.
+     */
+    makeScrollable = () => {
+        this.rootElement.style.display = 'grid';
+        this.rootElement.style.gridAutoFlow = 'column';
+        this.rootElement.style.position = 'relative';
+        this.rootElement.style.overflow = 'hidden';
+        this.rootElement.style.width = '100%';
+        this.rootElement.style.height = '100%';
+        const innerHTML = this.rootElement.innerHTML;
+        this.scrollContainer = document.createElement('div');
+        this.rootElement.innerHTML = '';
+        this.rootElement.appendChild(this.scrollContainer);
+        this.scrollContainer.innerHTML = innerHTML;
+        this.scrollContainer.setAttribute('part', 'scroll-container');
+        this.scrollContainer.classList.add(this.scrollableElementClass);
+        this.scrollContainer.style.overflow = 'visible';
+        this.scrollContainer.style.position = 'relative';
+        this.scrollContainer.style.left = '0px';
+        this.scrollContainer.style.display = 'grid';
+        this.scrollContainer.style.gridAutoFlow = 'column';
+        this.scrollSpeed = 0;
+        this.rootElement.addEventListener('mousedown', this.onMouseDown, { passive: false });
+        this.rootElement.addEventListener('touchstart', this.onTouchStart);
+    };
+    /** Mouse down event handler. */
+    onMouseDown = (event) => {
+        this.onPointerDown(event.clientX);
+    };
+    /** Touch start event handler. */
+    onTouchStart = (event) => {
+        for (let i = 0; i < event.changedTouches.length; i++) {
+            const touch = event.changedTouches[i];
+            this.onPointerDown(touch.clientX);
+        }
+    };
+    /** Mouse move event handler. */
+    onMouseMove = (event) => {
+        if (this.isDragging) {
+            this.onPointerMove(event.clientX);
+        }
+    };
+    /** Touch move event handler. */
+    onTouchMove = (event) => {
+        if (this.isDragging) {
+            for (let i = 0; i < event.changedTouches.length; i++) {
+                const touch = event.changedTouches[i];
+                this.onPointerMove(touch.clientX);
+            }
+        }
+    };
+    /** Mouse up event handler. */
+    onMouseUp = () => {
+        this.onPointerRelease();
+    };
+    /** Touch end event handler. */
+    onTouchEnd = (event) => {
+        for (let i = 0; i < event.changedTouches.length; i++) {
+            this.onPointerRelease();
+        }
+    };
+    /** Sets the scroll parameters to the initial state for scroll start. */
+    onPointerDown = (x) => {
+        if (!this.isEnabled) {
+            return;
+        }
+        this.scrollSpeed = 0;
+        this.pointerSpeedXOld = 0;
+        this.isDragging = true;
+        this.pointerX = this.pointerXOld = x;
+    };
+    /** Stops the manual scroll by user and sets the initial state for the inertia scroll. */
+    onPointerRelease = () => {
+        if (!this.isEnabled) {
+            return;
+        }
+        if (this.isDragging) {
+            this.scrollSpeed = this.pointerSpeedXOld;
+            this.isScrolling = true;
+            this.isDragging = false;
+            this.scrollContainer.style.userSelect = null;
+            this.scrollContainer.style.pointerEvents = null;
+            document.querySelector('body').style.overflowY = null;
+        }
+    };
+    /** Calculates the distance traveled by the pointer while it's pressed updating the `scrollContainer` position. */
+    onPointerMove = (x) => {
+        if (!this.isEnabled) {
+            return;
+        }
+        if (!this.isDragging) {
+            return;
+        }
+        this.scrollContainer.style.userSelect = 'none';
+        this.scrollContainer.style.pointerEvents = 'none';
+        // Get the distance the mouse has moved.
+        let scrollDelta = x - this.pointerX;
+        if (Math.abs(scrollDelta) > this.scrollAmount && window.innerWidth < this.mobileBreakpoint) {
+            document.querySelector('body').style.overflowY = 'hidden';
+        }
+        const { scrollLeft, scrollWidth } = this;
+        // Scroll past the end of content, to mimic bounce.
+        if ((scrollLeft < 0 && scrollDelta > 0) || (scrollLeft > scrollWidth && scrollDelta < 0)) {
+            scrollDelta /= 3;
+        }
+        // Increase the left position by the amount scrolled.
+        this.scrollContainer.style.left = `-${scrollLeft - scrollDelta}px`;
+        // Store the position to calculate the next pointer move.
+        this.pointerX = x;
+    };
+    /**
+     * Animation cycle.
+     * Handles the inertial scroll after user has stoped the interaction.
+     */
+    scrollUpdate = () => {
+        if (this.isEnabled) {
+            requestAnimationFrame(this.scrollUpdate);
+        }
+        if (!this.isDragging && !this.isScrolling) {
+            return;
+        }
+        // Continue scrolling after drag end with scroll innertia.
+        let { scrollLeft } = this;
+        scrollLeft -= this.scrollSpeed;
+        // Slow down gradually.
+        this.scrollSpeed *= 0.9;
+        if (Math.abs(this.scrollSpeed) < 0.1) {
+            this.scrollSpeed = 0;
+        }
+        // Reach content left end. Trigger a bounce effect.
+        if (scrollLeft < 0) {
+            scrollLeft *= 0.7;
+        }
+        // Reach content right end. Trigger a bounce effect.
+        const { scrollWidth } = this;
+        if (scrollLeft > scrollWidth) {
+            scrollLeft = scrollWidth + (scrollLeft - scrollWidth) * 0.3;
+        }
+        // Update scroll position.
+        this.scrollContainer.style.left = -scrollLeft + 'px';
+        if (this.scrollSpeed === 0 && !this.isDragging && this.isScrolling) {
+            this.isScrolling = false;
+            this.rootElement.dispatchEvent(new CustomEvent('content-scroll-end', {
+                detail: {
+                    ...this.currentScroll,
+                },
+            }));
+        }
+        if (this.isDragging || this.isScrolling) {
+            this.rootElement.dispatchEvent(new CustomEvent('content-scroll', {
+                detail: {
+                    ...this.currentScroll,
+                },
+            }));
+        }
+    };
 }

package/dist/collection/services/utils/object.js

@@ -17,7 +17,10 @@ const flatten = (object, processFunction = () => true) => {
         if (!processFunction({ key, value: object[key] })) {
             return accumulator;
         }
-        return Object.assign(Object.assign({}, accumulator), (isObject(object[key]) ? flatten(object[key], processFunction) : { [key]: object[key] }));
+        return {
+            ...accumulator,
+            ...(isObject(object[key]) ? flatten(object[key], processFunction) : { [key]: object[key] })
+        };
     }, {});
 };
 /**
@@ -26,9 +29,8 @@ const flatten = (object, processFunction = () => true) => {
  * @param object
  */
 const convertObjectValuesToStrings = (object) => {
-    var _a;
     for (const key in object) {
-        object[key] = (_a = object[key]) === null || _a === void 0 ? void 0 : _a.toString();
+        object[key] = object[key]?.toString();
     }
     return object;
 };

package/dist/collection/services/validators/validators/e-mail.js

@@ -2,6 +2,11 @@
  * The email validator class.
  */
 class EMailAddressValidator {
+    errorMessage;
+    /**
+     * The regex for the email validation.
+     */
+    emailAddressRegex = '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$';
     /**
      * Constructor.
      *
@@ -9,10 +14,6 @@ class EMailAddressValidator {
      */
     constructor(errorMessage) {
         this.errorMessage = errorMessage;
-        /**
-         * The regex for the email validation.
-         */
-        this.emailAddressRegex = '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$';
     }
     /**
      * Returns validation error message.
@@ -26,7 +27,7 @@ class EMailAddressValidator {
      * @param value
      */
     validate(value) {
-        const validateValue = value === null || value === void 0 ? void 0 : value.trim();
+        const validateValue = value?.trim();
         // A generic email address must meet pattern with @ and dot.
         return RegExp(this.emailAddressRegex).test(validateValue);
     }

package/dist/collection/services/validators/validators/phone.js

@@ -2,6 +2,12 @@
  * The phone validator class.
  */
 class PhoneNumberValidator {
+    errorMessage;
+    /**
+     * The regex for the phone validation.
+     */
+    latvianPhoneNumberRegex = '^(((\\+371|00371)[26])|[26])([0-9]{7}$)';
+    phoneNumberRegex = '^(?:00|\\+)\\d+$';
     /**
      * Constructor.
      *
@@ -9,11 +15,6 @@ class PhoneNumberValidator {
      */
     constructor(errorMessage) {
         this.errorMessage = errorMessage;
-        /**
-         * The regex for the phone validation.
-         */
-        this.latvianPhoneNumberRegex = '^(((\\+371|00371)[26])|[26])([0-9]{7}$)';
-        this.phoneNumberRegex = '^(?:00|\\+)\\d+$';
     }
     /**
      * Returns validation error message.

package/dist/collection/services/validators/validators/required.js

@@ -2,6 +2,7 @@
  * Required field validator class.
  */
 class RequiredValidator {
+    errorMessage;
     /**
      * Constructor.
      *
@@ -22,7 +23,7 @@ class RequiredValidator {
      * @param value
      */
     validate(value) {
-        return !!(value === null || value === void 0 ? void 0 : value.trim());
+        return !!value?.trim();
     }
 }
 export { RequiredValidator };

package/dist/components/index.js

@@ -94,7 +94,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-88af3744.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {

package/dist/components/{p-045bec85.js → p-03f68fa0.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, h } from './p-88af3744.js';
 
 const tetSpinnerCss = ":host{display:flex;--spinner-primary-color:var(--tc-blue-40);--spinner-secondary-color:transparent;--spinner-size:1.5rem;--spinner-indicator-size:0.23rem;--spinner-progress:0}.dark-theme{--spinner-primary-color:var(--tc-spinner-gradient-value-1-dark);--spinner-secondary-color:var(--tc-spinner-gradient-value-2-dark)}.light-theme{--spinner-primary-color:var(--tc-spinner-gradient-value-1);--spinner-secondary-color:var(--tc-spinner-gradient-value-2)}.size--medium{--spinner-size:2rem;--spinner-indicator-size:0.3rem}.size--large{--spinner-size:2.5rem;--spinner-indicator-size:0.375rem}@keyframes indeterminate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.spinner{position:relative;width:var(--spinner-size);height:var(--spinner-size)}.spinner::before{display:block;content:\"\";right:0;top:43%;width:var(--spinner-indicator-size);aspect-ratio:1;position:absolute;background-color:var(--spinner-primary-color);border-radius:50%}.spinner__gradient{width:2.5rem;height:2.5rem;border-radius:50%;background:conic-gradient(from 90deg, var(--spinner-secondary-color) 0%, var(--spinner-primary-color) 76%, var(--spinner-primary-color) 100%) border-box}.spinner--indeterminate{animation:indeterminate 1.5s infinite steps(100)}.spinner--determinate{transform:rotate(calc(var(--spinner-progress) * 2.7deg))}.spinner--determinate .spinner__gradient{background:conic-gradient(from 90deg, var(--spinner-secondary-color) 0%, var(--spinner-primary-color) calc(76% - var(--spinner-progress) * 0.76%), var(--spinner-primary-color) 100%) border-box}";
 const TetSpinnerStyle0 = tetSpinnerCss;
@@ -8,25 +8,14 @@ const TetSpinner = /*@__PURE__*/ proxyCustomElement(class TetSpinner extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        /** The reference to the spinner element */
-        this.spinner = null;
-        /** Sets foreignObject attributes manually as a workaround to stenciljs bug in JSX translation */
-        this.setForeignObjectAttributes = () => {
-            const foreignObject = this.spinner.querySelector('foreignObject');
-            if (foreignObject === null || foreignObject === undefined) {
-                return;
-            }
-            foreignObject.setAttribute('x', '0');
-            foreignObject.setAttribute('y', '0');
-            foreignObject.setAttribute('width', '40px');
-            foreignObject.setAttribute('height', '40px');
-            foreignObject.setAttribute('clip-path', 'url(#clip)');
-        };
         this.theme = 'classic';
         this.size = 'small';
         this.type = 'indeterminate';
         this.previousProgress = 0;
     }
+    get element() { return this; }
+    /** The reference to the spinner element */
+    spinner = null;
     onTypeChange(type) {
         if (type === 'determinate') {
             return;
@@ -50,6 +39,18 @@ const TetSpinner = /*@__PURE__*/ proxyCustomElement(class TetSpinner extends H {
     componentDidLoad() {
         this.setForeignObjectAttributes();
     }
+    /** Sets foreignObject attributes manually as a workaround to stenciljs bug in JSX translation */
+    setForeignObjectAttributes = () => {
+        const foreignObject = this.spinner.querySelector('foreignObject');
+        if (foreignObject === null || foreignObject === undefined) {
+            return;
+        }
+        foreignObject.setAttribute('x', '0');
+        foreignObject.setAttribute('y', '0');
+        foreignObject.setAttribute('width', '40px');
+        foreignObject.setAttribute('height', '40px');
+        foreignObject.setAttribute('clip-path', 'url(#clip)');
+    };
     render() {
         return (h("div", { key: '32db0c934ad63e442b8bcaf4ee7ddde7671fa0f2', ref: element => (this.spinner = element), class: {
                 spinner: true,
@@ -59,7 +60,6 @@ const TetSpinner = /*@__PURE__*/ proxyCustomElement(class TetSpinner extends H {
             } }, h("svg", { key: '8fd29831970ee911a493b0d685fce49ec64a2c6d', viewBox: "0 0 40 40" }, h("clipPath", { key: '434716703b3f6fffd3b97e8a40b0a32d69459b84', id: "clip" }, h("path", { key: '7f666240c50a3e35f82f388e1ab7bf0cfc2d32b2', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
               0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '62289dbcbb5b8844df4ce10d9f3482a31f4aa6e6' }, h("div", { key: '445d72c9458368235926e2e2771d181f1c39827d', class: "spinner__gradient" })))));
     }
-    get element() { return this; }
     static get watchers() { return {
         "type": ["onTypeChange"]
     }; }