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

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

@@ -2,175 +2,6 @@ import { h, Host, forceUpdate } from "@stencil/core";
 import { processTranslations, t } from "../../../../services/translations/index";
 export class TetCarousel {
     constructor() {
-        this.draggedAnchor = null;
-        this.dragMoved = false;
-        this.dragPointerStartX = 0;
-        this.trackElement = null;
-        this.dragStartX = 0;
-        this.handleMove = () => {
-            const assigned = this.getSlotElements();
-            if (!assigned)
-                return 1;
-            const item = assigned[this.activeItem];
-            if (item) {
-                this.moveToItem(item);
-            }
-        };
-        this.handlePrev = () => {
-            if (this.activeItem <= 0)
-                return;
-            this.afterLayout(() => {
-                const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
-                if (this.activeItem && this.activeItem < visibleItems) {
-                    this.activeItem -= this.activeItem;
-                }
-                else {
-                    this.activeItem -= visibleItems;
-                }
-                this.handleMove();
-            });
-        };
-        this.handleNext = () => {
-            if (this.activeItem >= this.totalItems - 1)
-                return;
-            this.afterLayout(() => {
-                const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
-                if (this.totalItems - this.activeItem < visibleItems) {
-                    this.activeItem = this.totalItems - 1;
-                }
-                else {
-                    this.activeItem += visibleItems;
-                }
-                this.handleMove();
-            });
-        };
-        this.moveToLastScreen = () => {
-            const wrapperWidth = this.getViewportWidth();
-            const totalWidth = this.getSlotClientWidth();
-            this.dragOffset = -(totalWidth - wrapperWidth);
-        };
-        this.calcLastScreenElement = (target) => {
-            // Calculate first element on last screen
-            const assigned = this.getSlotElements();
-            if (!assigned)
-                return null;
-            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) {
-                    return { item, index };
-                }
-            }
-            return { item: assigned[0], index: 0 };
-        };
-        this.handleDotClick = (idx) => {
-            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();
-            }
-            const { item, index } = this.calcLastScreenElement(targetDragOffset);
-            if (!this.isLastViewport(targetDragOffset)) {
-                if (!item)
-                    return;
-                this.moveToItem(item, index);
-            }
-            else {
-                if (index || index === 0) {
-                    this.activeItem = index;
-                }
-                this.moveToLastScreen();
-            }
-        };
-        this.onPointerDown = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            this.isDragging = true;
-            this.dragStartX = e.screenX;
-            this.dragMoved = false;
-            this.dragPointerStartX = e.screenX;
-            document.body.style.userSelect = 'none';
-            document.addEventListener('pointermove', this.onPointerMove);
-            document.addEventListener('pointerup', this.onPointerUp);
-            let el = e.target;
-            this.draggedAnchor = null;
-            while (el) {
-                if (el.tagName === 'A' || el.getAttribute('tabindex')) {
-                    this.draggedAnchor = el;
-                    break;
-                }
-                el = el.parentElement;
-            }
-        };
-        this.onPointerMove = (e) => {
-            var _a, _b;
-            if (!this.isDragging)
-                return;
-            // Only consider this a move (and prevent clicks) when movement exceeds a small threshold.
-            const moveDistanceFromStart = Math.abs(e.screenX - this.dragPointerStartX);
-            if (!this.dragMoved && moveDistanceFromStart > 5) {
-                this.dragMoved = true;
-                if (this.trackElement) {
-                    try {
-                        (_b = (_a = this.trackElement).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
-                    }
-                    catch (_c) { }
-                }
-            }
-            const delta = e.screenX - this.dragStartX;
-            let _dragOffset = this.dragOffset;
-            _dragOffset += delta;
-            this.dragStartX = e.screenX;
-            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;
-            if (this.trackElement) {
-                try {
-                    (_b = (_a = this.trackElement).releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
-                }
-                catch (_c) { }
-            }
-            if (!this.isDragging)
-                return;
-            // 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.
-            const delta = e.screenX - this.dragPointerStartX;
-            if (Math.abs(delta) > this.swipeThreshold) {
-                if (delta < 0) {
-                    this.handleNext();
-                }
-                if (delta > 0) {
-                    this.handlePrev();
-                }
-            }
-            document.body.style.userSelect = '';
-            document.removeEventListener('pointermove', this.onPointerMove);
-            document.removeEventListener('pointerup', this.onPointerUp);
-            if (this.draggedAnchor && this.dragMoved) {
-                const preventClick = (ev) => {
-                    var _a;
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    (_a = this.draggedAnchor) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', preventClick, true);
-                };
-                this.draggedAnchor.addEventListener('click', preventClick, true);
-            }
-        };
         this.activeDotIndex = 0;
         this.dotCount = 0;
         this.totalItems = 0;
@@ -190,6 +21,12 @@ export class TetCarousel {
         this.label = undefined;
         this.language = 'lv';
     }
+    draggedAnchor = null;
+    dragMoved = false;
+    dragPointerStartX = 0;
+    trackElement = null;
+    container;
+    dragStartX = 0;
     async onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
@@ -197,8 +34,7 @@ export class TetCarousel {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     getSlotElements() {
-        var _a;
-        const slot = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const slot = this.container?.querySelector('slot');
         if (!slot)
             return undefined;
         let assigned = slot.assignedElements ? slot.assignedElements() : [];
@@ -210,12 +46,10 @@ export class TetCarousel {
         return assigned;
     }
     getViewportWidth() {
-        var _a;
-        return ((_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
+        return this.container?.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;
+        return this.trackElement?.querySelector('slot')?.offsetWidth || window.innerWidth;
     }
     // Run a callback after layout/paint to ensure DOM measurements are up to date
     afterLayout(cb) {
@@ -260,6 +94,8 @@ export class TetCarousel {
         }
         return count;
     }
+    leftGradientRef;
+    rightGradientRef;
     checkGradient() {
         if (this.showGradient) {
             const absOffset = Math.abs(this.dragOffset);
@@ -299,8 +135,50 @@ export class TetCarousel {
         const totalWidth = this.getSlotClientWidth();
         // Precise: add a dot whenever there's any overflow beyond a full viewport
         const exactScreens = Math.ceil(totalWidth / Math.max(1, viewportWidth));
-        this.dotCount = Math.max(1, Math.min(this === null || this === void 0 ? void 0 : this.maxDots, exactScreens));
+        this.dotCount = Math.max(1, Math.min(this?.maxDots, exactScreens));
     }
+    handleMove = () => {
+        const assigned = this.getSlotElements();
+        if (!assigned)
+            return 1;
+        const item = assigned[this.activeItem];
+        if (item) {
+            this.moveToItem(item);
+        }
+    };
+    handlePrev = () => {
+        if (this.activeItem <= 0)
+            return;
+        this.afterLayout(() => {
+            const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
+            if (this.activeItem && this.activeItem < visibleItems) {
+                this.activeItem -= this.activeItem;
+            }
+            else {
+                this.activeItem -= visibleItems;
+            }
+            this.handleMove();
+        });
+    };
+    handleNext = () => {
+        if (this.activeItem >= this.totalItems - 1)
+            return;
+        this.afterLayout(() => {
+            const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
+            if (this.totalItems - this.activeItem < visibleItems) {
+                this.activeItem = this.totalItems - 1;
+            }
+            else {
+                this.activeItem += visibleItems;
+            }
+            this.handleMove();
+        });
+    };
+    moveToLastScreen = () => {
+        const wrapperWidth = this.getViewportWidth();
+        const totalWidth = this.getSlotClientWidth();
+        this.dragOffset = -(totalWidth - wrapperWidth);
+    };
     calculateGradient(item, relativeLeft) {
         const totalWidth = this.getSlotClientWidth();
         const offsetWidth = item.offsetWidth;
@@ -310,6 +188,125 @@ export class TetCarousel {
         gradientOffset = relativeRight < 160 ? 0 : gradientOffset;
         return gradientOffset;
     }
+    calcLastScreenElement = (target) => {
+        // Calculate first element on last screen
+        const assigned = this.getSlotElements();
+        if (!assigned)
+            return null;
+        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) {
+                return { item, index };
+            }
+        }
+        return { item: assigned[0], index: 0 };
+    };
+    handleDotClick = (idx) => {
+        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();
+        }
+        const { item, index } = this.calcLastScreenElement(targetDragOffset);
+        if (!this.isLastViewport(targetDragOffset)) {
+            if (!item)
+                return;
+            this.moveToItem(item, index);
+        }
+        else {
+            if (index || index === 0) {
+                this.activeItem = index;
+            }
+            this.moveToLastScreen();
+        }
+    };
+    onPointerDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        this.isDragging = true;
+        this.dragStartX = e.screenX;
+        this.dragMoved = false;
+        this.dragPointerStartX = e.screenX;
+        document.body.style.userSelect = 'none';
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+        let el = e.target;
+        this.draggedAnchor = null;
+        while (el) {
+            if (el.tagName === 'A' || el.getAttribute('tabindex')) {
+                this.draggedAnchor = el;
+                break;
+            }
+            el = el.parentElement;
+        }
+    };
+    onPointerMove = (e) => {
+        if (!this.isDragging)
+            return;
+        // Only consider this a move (and prevent clicks) when movement exceeds a small threshold.
+        const moveDistanceFromStart = Math.abs(e.screenX - this.dragPointerStartX);
+        if (!this.dragMoved && moveDistanceFromStart > 5) {
+            this.dragMoved = true;
+            if (this.trackElement) {
+                try {
+                    this.trackElement.setPointerCapture?.(e.pointerId);
+                }
+                catch { }
+            }
+        }
+        const delta = e.screenX - this.dragStartX;
+        let _dragOffset = this.dragOffset;
+        _dragOffset += delta;
+        this.dragStartX = e.screenX;
+        const wrapperWidth = this.getViewportWidth();
+        const totalWidth = this.getSlotClientWidth();
+        const totalScrollableWidth = -(totalWidth - wrapperWidth);
+        if (totalScrollableWidth < _dragOffset && _dragOffset < 0) {
+            this.dragOffset = _dragOffset;
+        }
+    };
+    onPointerUp = (e) => {
+        if (this.trackElement) {
+            try {
+                this.trackElement.releasePointerCapture?.(e.pointerId);
+            }
+            catch { }
+        }
+        if (!this.isDragging)
+            return;
+        // 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.
+        const delta = e.screenX - this.dragPointerStartX;
+        if (Math.abs(delta) > this.swipeThreshold) {
+            if (delta < 0) {
+                this.handleNext();
+            }
+            if (delta > 0) {
+                this.handlePrev();
+            }
+        }
+        document.body.style.userSelect = '';
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        if (this.draggedAnchor && this.dragMoved) {
+            const preventClick = (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.draggedAnchor?.removeEventListener('click', preventClick, true);
+            };
+            this.draggedAnchor.addEventListener('click', preventClick, true);
+        }
+    };
     _showButtons() {
         if (!this.showButtons) {
             return false;
@@ -335,14 +332,14 @@ export class TetCarousel {
         this.checkGradient();
         this.initSlotListeners();
     }
+    slotObserver;
     handleSlotChange() {
         this.getDotCount();
         this.checkGradient();
         forceUpdate(this);
     }
     initSlotListeners() {
-        var _a;
-        const slot = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const slot = this.container?.querySelector('slot');
         if (!slot)
             return;
         // add listeners for slot elements
@@ -417,14 +414,13 @@ export class TetCarousel {
         }
     }
     disconnectedCallback() {
-        var _a, _b;
         window.removeEventListener('resize', this.getDotCount.bind(this));
-        const slot = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const slot = this.container?.querySelector('slot');
         if (slot) {
             slot.removeEventListener('slotchange', () => this.handleSlotChange());
         }
         if (this.slotObserver) {
-            (_b = this.slotObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            this.slotObserver?.disconnect();
             this.slotObserver = null;
         }
         document.removeEventListener('pointermove', this.onPointerMove);

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

@@ -6,24 +6,6 @@ import { defaultColorIcons } from "./default-color-icons";
  */
 export class TetIcon {
     constructor() {
-        this.getIconMap = () => {
-            if (!iconStore.iconMap) {
-                const iconMapUrl = getAssetPath('assets/icons/icon-map.json');
-                const parseResponse = (response) => response.json();
-                iconStore.iconMap = fetch(iconMapUrl).then(parseResponse);
-            }
-            return iconStore.iconMap;
-        };
-        this.getIcon = async (name) => {
-            const iconMap = await this.getIconMap();
-            if (!iconStore.icons[name] && iconMap[name]) {
-                const iconUrl = getAssetPath(iconMap[name]);
-                const parseResponse = (response) => response.status === 404 ? null : response.text();
-                iconStore.icons[name] = fetch(iconUrl).then(parseResponse);
-            }
-            return iconStore.icons[name];
-        };
-        this.shouldUseDefaultColor = () => (this.useDefaultColor || defaultColorIcons.includes(this.name));
         this.name = 'info-circle';
         this.theme = 'classic';
         this.type = 'primary';
@@ -31,6 +13,7 @@ export class TetIcon {
         this.accessibilityLabel = '';
         this.focusable = false;
     }
+    iconContainer;
     /** Watcher that detects the name prop change and initiates the icon change. */
     onNameChange() {
         this.setIcon(this.name);
@@ -48,15 +31,33 @@ export class TetIcon {
             !!svgHtml && (this.iconContainer.innerHTML = svgHtml);
         });
     }
+    getIconMap = () => {
+        if (!iconStore.iconMap) {
+            const iconMapUrl = getAssetPath('assets/icons/icon-map.json');
+            const parseResponse = (response) => response.json();
+            iconStore.iconMap = fetch(iconMapUrl).then(parseResponse);
+        }
+        return iconStore.iconMap;
+    };
+    getIcon = async (name) => {
+        const iconMap = await this.getIconMap();
+        if (!iconStore.icons[name] && iconMap[name]) {
+            const iconUrl = getAssetPath(iconMap[name]);
+            const parseResponse = (response) => response.status === 404 ? null : response.text();
+            iconStore.icons[name] = fetch(iconUrl).then(parseResponse);
+        }
+        return iconStore.icons[name];
+    };
+    shouldUseDefaultColor = () => (this.useDefaultColor || defaultColorIcons.includes(this.name));
     render() {
-        return (h("span", { key: 'a1755c0393939da8ace88f20c15414eac2b67e6e', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", Object.assign({ key: 'a81e4f3560576a3015634f17e964ea18aa9ae9e7', class: {
+        return (h("span", { key: 'a1755c0393939da8ace88f20c15414eac2b67e6e', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: 'a81e4f3560576a3015634f17e964ea18aa9ae9e7', class: {
                 'icon-container': true,
                 'default-color': this.shouldUseDefaultColor(),
                 [this.theme]: true,
                 [this.type]: true,
-            }, ref: (element) => (this.iconContainer = element) }, (this.accessibilityLabel
-            ? { "aria-label": this.accessibilityLabel, "role": "img" }
-            : { "role": "presentation" })))));
+            }, ref: (element) => (this.iconContainer = element), ...(this.accessibilityLabel
+                ? { "aria-label": this.accessibilityLabel, "role": "img" }
+                : { "role": "presentation" }) })));
     }
     static get is() { return "tet-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-spinner/tet-spinner.js

@@ -4,25 +4,14 @@ import { h } from "@stencil/core";
  */
 export class TetSpinner {
     constructor() {
-        /** 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;
     }
+    element;
+    /** The reference to the spinner element */
+    spinner = null;
     onTypeChange(type) {
         if (type === 'determinate') {
             return;
@@ -46,6 +35,18 @@ export class TetSpinner {
     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,

package/dist/collection/components/basic/steppers/tet-banner-nav/tet-banner-nav.js

@@ -5,14 +5,6 @@ import { h, forceUpdate } from "@stencil/core";
  */
 export class TetBannerNavigation {
     constructor() {
-        this.handlePauseClick = () => {
-            if (this.isPaused) {
-                this.play();
-            }
-            else {
-                this.pause();
-            }
-        };
         this.slides = 4;
         this.duration = 5000;
         this.paused = false;
@@ -31,6 +23,18 @@ export class TetBannerNavigation {
             this.play();
         }
     }
+    /**
+     * Auto-advance timer reference
+     */
+    autoTimer;
+    /**
+     * Emitted when slide changes
+     */
+    slideChange;
+    /**
+     * Emitted when pause state changes
+     */
+    pauseStateChange;
     async onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
@@ -109,6 +113,14 @@ export class TetBannerNavigation {
             this.autoTimer = undefined;
         }
     }
+    handlePauseClick = () => {
+        if (this.isPaused) {
+            this.play();
+        }
+        else {
+            this.pause();
+        }
+    };
     render() {
         if (this.slides === 1)
             return null;

package/dist/collection/components/basic/steppers/tet-business-round-stepper/tet-business-round-stepper.js

@@ -4,19 +4,19 @@ import { h } from "@stencil/core";
  */
 export class TetBusinessRoundStepper {
     constructor() {
-        /**
-         * Renders a business stepper step.
-         *
-         * @param stepData
-         * @returns
-         */
-        this.renderStepData = (stepData) => {
-            return (h("div", { class: "business-stepper__step" }, h("div", { class: "business-stepper__icon", style: { 'background-color': stepData.color } }, h("tet-icon", { name: stepData.icon, theme: this.theme })), h("span", { class: "business-stepper__title" }, stepData.description), h("p", { class: "business-stepper__text" }, stepData.text)));
-        };
         this.stepperData = [];
         this.layout = 'row';
         this.theme = 'light';
     }
+    /**
+     * Renders a business stepper step.
+     *
+     * @param stepData
+     * @returns
+     */
+    renderStepData = (stepData) => {
+        return (h("div", { class: "business-stepper__step" }, h("div", { class: "business-stepper__icon", style: { 'background-color': stepData.color } }, h("tet-icon", { name: stepData.icon, theme: this.theme })), h("span", { class: "business-stepper__title" }, stepData.description), h("p", { class: "business-stepper__text" }, stepData.text)));
+    };
     render() {
         return (h("div", { key: '46f68347298a2d722ed7b9243a591727dd7bd732', class: {
                 'business-stepper': true,

package/dist/collection/components/basic/steppers/tet-round-stepper/tet-round-stepper.js

@@ -10,6 +10,10 @@ export class TetRoundStepper {
         this.hideIcons = false;
         this.theme = 'light';
     }
+    /**
+     * The root element of the stepper component.
+     */
+    host;
     componentDidLoad() {
         this.calculateContainerWidth();
     }