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

package/dist/collection/components/basic/buttons/tet-radio/tet-radio.js

@@ -5,11 +5,6 @@ import { randomString } from "../../../../services/utils/index";
  */
 export class TetRadio {
     constructor() {
-        this.handleInputChange = ({ target }) => {
-            const { value, checked } = this;
-            this.checked = target.checked;
-            this.check.emit({ value, checked: !checked });
-        };
         this.theme = 'classic';
         this.label = undefined;
         this.accessibilityLabel = '';
@@ -19,6 +14,10 @@ export class TetRadio {
         this.checked = false;
         this.inputAutofocus = false;
     }
+    /** Randomly generated id for the HTML input element, necessary because it is scoped. */
+    id;
+    /** The event that is emitted whenever the control element is checked. */
+    check;
     /**
      * Changes the checked prop of the component.
      *
@@ -36,6 +35,11 @@ export class TetRadio {
             event.preventDefault();
         }
     }
+    handleInputChange = ({ target }) => {
+        const { value, checked } = this;
+        this.checked = target.checked;
+        this.check.emit({ value, checked: !checked });
+    };
     /**
      * Lifecycle method.
      * Attributes are not allowed to be initialized in constructor. It can be done here, before the first render.
@@ -45,7 +49,7 @@ export class TetRadio {
     }
     render() {
         const { id, disabled, value, checked, name, label, handleInputChange, accessibilityLabel, inputAutofocus } = this;
-        return (h(Host, { key: '04f5fbf34c4380a326590399687dfbf45a2f6644' }, h("div", { key: 'caff5bc5f6c42d0004352dc313fe5184a75cd01c', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: 'c1b4a1007c5b3dc6ce8a319111f4327b1cf15c7a', class: "radio__container", htmlFor: id }, h("input", Object.assign({ key: 'c1c43ff284676518d77d0cf0d02212553d6d67e0', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: handleInputChange, autofocus: inputAutofocus }, (accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), { tabindex: this.checked ? '0' : '-1', role: "radio", "aria-checked": this.checked ? 'true' : 'false' })), h("span", { key: '686b33ac07a9e389d459d8525dc4ccab915aa0b6', class: "radio__input" }), label ? (h("span", { class: "radio__label", innerHTML: label })) : (h("span", { class: "radio__label" }, h("slot", null)))))));
+        return (h(Host, { key: '04f5fbf34c4380a326590399687dfbf45a2f6644' }, h("div", { key: 'caff5bc5f6c42d0004352dc313fe5184a75cd01c', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: 'c1b4a1007c5b3dc6ce8a319111f4327b1cf15c7a', class: "radio__container", htmlFor: id }, h("input", { key: 'c1c43ff284676518d77d0cf0d02212553d6d67e0', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), tabindex: this.checked ? '0' : '-1', role: "radio", "aria-checked": this.checked ? 'true' : 'false' }), h("span", { key: '686b33ac07a9e389d459d8525dc4ccab915aa0b6', class: "radio__input" }), label ? (h("span", { class: "radio__label", innerHTML: label })) : (h("span", { class: "radio__label" }, h("slot", null)))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/basic/buttons/tet-switch/tet-switch.js

@@ -14,6 +14,8 @@ export class TetSwitch {
         this.disabled = false;
         this.checked = false;
     }
+    /** The event that is emitted whenever the control element is checked. */
+    check;
     /**
      * Changes the checked prop of the component.
      *
@@ -31,7 +33,7 @@ export class TetSwitch {
     }
     render() {
         const { label, name, theme, disabled, checked, accessibilityLabel } = this;
-        return (h(Host, { key: '23be36b9c734a9c43e9644337a58e4ede719215d' }, h("div", { key: '9411a81d872b6ead7ad41bd4d49cbe68fb7d58d7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: 'fe5904e6eab9bd90a7de89d7ff843da2f454adf9', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", Object.assign({ key: 'cff6902a5fcc1febcd40df5a76a0f5b10956c8cc', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this) }, (accessibilityLabel ? { "aria-label": accessibilityLabel } : {}))), h("span", { key: '70f3b5f739f0f6aa898b358963cfa534cab5f3d1', class: { "switch__input": true, [this.theme]: true } }, h("span", { key: '5366d7f0edf9b561cf987ddb19bebf8d98d8984f', class: "switch__state" })), label
+        return (h(Host, { key: '23be36b9c734a9c43e9644337a58e4ede719215d' }, h("div", { key: '9411a81d872b6ead7ad41bd4d49cbe68fb7d58d7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: 'fe5904e6eab9bd90a7de89d7ff843da2f454adf9', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: 'cff6902a5fcc1febcd40df5a76a0f5b10956c8cc', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), h("span", { key: '70f3b5f739f0f6aa898b358963cfa534cab5f3d1', class: { "switch__input": true, [this.theme]: true } }, h("span", { key: '5366d7f0edf9b561cf987ddb19bebf8d98d8984f', class: "switch__state" })), label
             ? h("span", { class: "switch__label", innerHTML: label })
             : h("span", { class: "switch__label" }, h("slot", null))))));
     }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-content/tet-tab-content.js

@@ -2,15 +2,6 @@ import { h, Host } from "@stencil/core";
 import { isFocusableElementOrChild } from "../../../../../services/utils/index";
 export class TetTabContent {
     constructor() {
-        /** The child tab elements. */
-        this.tabContentSlides = [];
-        /**
-         * The `tabSelected` event handler.
-         * Sets the tab to the new tab id.
-         */
-        this.onTabSelect = (event) => {
-            this.selectTab(event.detail.new);
-        };
         this.dataName = undefined;
         this.defaultTab = 0;
         this.parentContainer = document;
@@ -20,6 +11,14 @@ export class TetTabContent {
         this.previousParentContainer = undefined;
         this.theme = undefined;
     }
+    /** The root of the component. */
+    element;
+    /** The child tab elements. */
+    tabContentSlides = [];
+    /** The event triggered on selection of the tab. */
+    select;
+    /** MutationObserver instance to watch for theme attribute changes on associated tab header. */
+    themeObserver;
     componentWillLoad() {
         this.previousDataName = this.dataName;
         this.previousParentContainer = this.parentContainer;
@@ -60,18 +59,16 @@ export class TetTabContent {
      * Updates the theme by checking the associated tab header
      */
     initParentTheme() {
-        var _a;
         const tabHeader = this.parentContainer.querySelector(`tet-tab-header[data-name="${this.dataName}"]`);
-        this.theme = (_a = tabHeader === null || tabHeader === void 0 ? void 0 : tabHeader.getAttribute('theme')) !== null && _a !== void 0 ? _a : '';
+        this.theme = tabHeader?.getAttribute('theme') ?? '';
     }
     /**
      * Initializes the content slides of the tab.
      */
     initTabContentSlides() {
-        var _a;
         this.tabContentSlides = Array.from(this.element.children);
         const associatedTab = this.parentContainer.querySelector(`tet-tab-header[data-name="${this.dataName}"]`);
-        const idSuffix = (_a = associatedTab === null || associatedTab === void 0 ? void 0 : associatedTab.getAttribute('data-id-suffix')) !== null && _a !== void 0 ? _a : '';
+        const idSuffix = associatedTab?.getAttribute('data-id-suffix') ?? '';
         this.tabContentSlides.forEach((tab, index) => {
             const tabFirstChild = tab.firstElementChild;
             let isFirstElementFocusable = false;
@@ -119,6 +116,13 @@ export class TetTabContent {
             tabComponent.removeEventListener('tabSelected', this.onTabSelect);
         });
     }
+    /**
+     * The `tabSelected` event handler.
+     * Sets the tab to the new tab id.
+     */
+    onTabSelect = (event) => {
+        this.selectTab(event.detail.new);
+    };
     /**
      * Changes the component's active tab to the specific index.
      * @param id The ID of the tab that should be marked as active.

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -9,59 +9,6 @@ import { debounce } from "../../../../../services/utils/index";
  */
 export class TetTabHeader {
     constructor() {
-        this.autoplayInterval = [];
-        this.tabListeners = new WeakMap();
-        /**
-         * Initialises the mouse drag.
-         * @param {MouseEvent} event Current mouse event.
-         */
-        this.onContainerMouseDown = (event) => {
-            this.isPointerDown = true;
-            this.positions = {
-                scrollLeft: this.tabElement.scrollLeft,
-                mouseX: event.clientX
-            };
-            this.tabElement.addEventListener('mousemove', this.onContainerMouseMove);
-            this.tabElement.addEventListener('mouseup', this.onContainerMouseUp);
-            this.tabElement.addEventListener('mouseleave', this.onContainerMouseUp);
-        };
-        /**
-         * Scrolls the `tabElement` on mouse drag.
-         * @param {MouseEvent} e Current mouse event.
-         */
-        this.onContainerMouseMove = (e) => {
-            e.preventDefault();
-            const mouseButton = e.buttons;
-            this.isPointerDown = mouseButton === 1;
-            if (!this.isPointerDown) {
-                this.onContainerMouseUp();
-                return;
-            }
-            const deltaX = e.clientX - this.positions.mouseX;
-            this.tabElement.scrollTo(this.positions.scrollLeft - deltaX, 0);
-        };
-        /**
-         * Removes mouse drag events.
-         */
-        this.onContainerMouseUp = () => {
-            this.isPointerDown = false;
-            this.tabElement.removeEventListener('mousemove', this.onContainerMouseMove);
-            this.tabElement.removeEventListener('mouseup', this.onContainerMouseUp);
-            this.tabElement.removeEventListener('mouseleave', this.onContainerMouseUp);
-        };
-        /**
-         * The `tabElement` scroll handler.
-         * Animates the segment active element after initial scroll of the container.
-         */
-        this.onInitialScroll = () => {
-            this.tabElement.removeEventListener('scroll', this.debounceOnInitialScroll);
-            this.animateActiveSegment(true);
-        };
-        /**
-         * Debounced `onInitialScroll`.
-         * Calls `onInitialScroll` after the scroll has ended.
-         */
-        this.debounceOnInitialScroll = debounce(this.onInitialScroll, 10);
         this.theme = undefined;
         this.darkMode = false;
         this.type = undefined;
@@ -90,6 +37,17 @@ export class TetTabHeader {
             transition: ''
         };
     }
+    tabElement;
+    tabContainer;
+    tabHeaders;
+    tabHeadersNotDisabled;
+    animationObserver;
+    isPointerDown;
+    autoplayInterval = [];
+    tabListeners = new WeakMap();
+    element;
+    /** The event triggered on tab selection. */
+    select;
     /**
      * Expose toggle of autoplay
      * @param active sets state of autoplay
@@ -212,8 +170,7 @@ export class TetTabHeader {
         };
         const observer = new MutationObserver((mutations) => {
             mutations.every((mutation) => {
-                var _a;
-                if ((_a = mutation.oldValue) === null || _a === void 0 ? void 0 : _a.includes('disabled')) {
+                if (mutation.oldValue?.includes('disabled')) {
                     this.initTabHeaders();
                     observer.disconnect();
                     return false;
@@ -227,14 +184,12 @@ export class TetTabHeader {
         this.initTabHeaders();
     }
     disconnectedCallback() {
-        var _a;
         this.cleanupTabListeners();
         this.stopAutoplay();
-        (_a = this.animationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.animationObserver?.disconnect();
     }
     cleanupTabListeners() {
-        var _a;
-        (_a = this.tabHeaders) === null || _a === void 0 ? void 0 : _a.forEach(tab => {
+        this.tabHeaders?.forEach(tab => {
             const listeners = this.tabListeners.get(tab);
             if (listeners) {
                 tab.removeEventListener('click', listeners.click);
@@ -243,6 +198,44 @@ export class TetTabHeader {
             }
         });
     }
+    /**
+     * Initialises the mouse drag.
+     * @param {MouseEvent} event Current mouse event.
+     */
+    onContainerMouseDown = (event) => {
+        this.isPointerDown = true;
+        this.positions = {
+            scrollLeft: this.tabElement.scrollLeft,
+            mouseX: event.clientX
+        };
+        this.tabElement.addEventListener('mousemove', this.onContainerMouseMove);
+        this.tabElement.addEventListener('mouseup', this.onContainerMouseUp);
+        this.tabElement.addEventListener('mouseleave', this.onContainerMouseUp);
+    };
+    /**
+     * Scrolls the `tabElement` on mouse drag.
+     * @param {MouseEvent} e Current mouse event.
+     */
+    onContainerMouseMove = (e) => {
+        e.preventDefault();
+        const mouseButton = e.buttons;
+        this.isPointerDown = mouseButton === 1;
+        if (!this.isPointerDown) {
+            this.onContainerMouseUp();
+            return;
+        }
+        const deltaX = e.clientX - this.positions.mouseX;
+        this.tabElement.scrollTo(this.positions.scrollLeft - deltaX, 0);
+    };
+    /**
+     * Removes mouse drag events.
+     */
+    onContainerMouseUp = () => {
+        this.isPointerDown = false;
+        this.tabElement.removeEventListener('mousemove', this.onContainerMouseMove);
+        this.tabElement.removeEventListener('mouseup', this.onContainerMouseUp);
+        this.tabElement.removeEventListener('mouseleave', this.onContainerMouseUp);
+    };
     onSegmentedChange(segmented) {
         if (segmented && this.animationObserver === undefined) {
             this.initAnimationObserver();
@@ -309,11 +302,10 @@ export class TetTabHeader {
     initTabHeaderImages() {
         this.tabHeaders = Array.from(this.element.children);
         this.tabHeaders.forEach((tab) => {
-            var _a;
             const imageSrc = tab.getAttribute('data-image');
             if (imageSrc) {
                 const imageActiveSrc = tab.getAttribute('data-image-active');
-                const imageAlt = (_a = tab.getAttribute('data-image-alt')) !== null && _a !== void 0 ? _a : '';
+                const imageAlt = tab.getAttribute('data-image-alt') ?? '';
                 const image = document.createElement('img');
                 image.src = imageSrc;
                 image.alt = imageAlt;
@@ -436,8 +428,7 @@ export class TetTabHeader {
      * @param id The id of the tab element.
      */
     getTabElement(id) {
-        var _a;
-        if (!((_a = this.tabHeaders) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!this.tabHeaders?.length) {
             return null;
         }
         let selectedTab;
@@ -452,6 +443,19 @@ export class TetTabHeader {
         }
         return this.tabHeaders[0];
     }
+    /**
+     * The `tabElement` scroll handler.
+     * Animates the segment active element after initial scroll of the container.
+     */
+    onInitialScroll = () => {
+        this.tabElement.removeEventListener('scroll', this.debounceOnInitialScroll);
+        this.animateActiveSegment(true);
+    };
+    /**
+     * Debounced `onInitialScroll`.
+     * Calls `onInitialScroll` after the scroll has ended.
+     */
+    debounceOnInitialScroll = debounce(this.onInitialScroll, 10);
     /**
      * Creates the style object for the tabs component.
      * @returns The style object.

package/dist/collection/components/basic/buttons/tet-tag-group/tet-tag-group.js

@@ -7,18 +7,18 @@ import { isFunction } from "../../../../services/utils/index";
  */
 export class TetTagGroup {
     constructor() {
-        /**
-         * Renders a single tag.
-         *
-         * @param tag
-         */
-        this.renderTag = (tag) => {
-            return (h("tet-tag", { class: "single-tag", part: "tag", tagTitle: tag.title, count: tag.count, active: tag.active, showIcon: tag.showIcon, language: this.language, theme: this.theme, disabled: tag.disabled, onClick: () => isFunction(tag.clickAction) ? tag.clickAction(tag) : null }));
-        };
         this.language = 'lv';
         this.tags = [];
         this.theme = 'classic';
     }
+    /**
+     * Renders a single tag.
+     *
+     * @param tag
+     */
+    renderTag = (tag) => {
+        return (h("tet-tag", { class: "single-tag", part: "tag", tagTitle: tag.title, count: tag.count, active: tag.active, showIcon: tag.showIcon, language: this.language, theme: this.theme, disabled: tag.disabled, onClick: () => isFunction(tag.clickAction) ? tag.clickAction(tag) : null }));
+    };
     render() {
         return h("div", { key: 'f619e65de3bb1720a15764e3efdb076ea66a0ada', class: "tags" }, this.tags.map(this.renderTag));
     }