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

package/dist/collection/components/simple/inputs/tet-stepper-input/tet-stepper-input.js

@@ -6,28 +6,6 @@ import { processTranslations, t } from "../../../../services/translations/index"
  */
 export class TetStepperInput {
     constructor() {
-        /**
-         * Reduces value by step
-         */
-        this.onMinusClick = (e) => {
-            e && e.stopPropagation();
-            if (this.value - this.step < this.min) {
-                this.value = this.min;
-                return;
-            }
-            this.value -= this.step;
-        };
-        /**
-         * Increases value by step
-         */
-        this.onPlusClick = (e) => {
-            e && e.stopPropagation();
-            if (this.value + this.step > this.max) {
-                this.value = this.max;
-                return;
-            }
-            this.value += this.step;
-        };
         this.value = undefined;
         this.theme = 'light';
         this.min = undefined;
@@ -37,6 +15,12 @@ export class TetStepperInput {
         this.accessibilityLabel = '';
         this.language = 'lv';
     }
+    /** Reference to the input element. */
+    inputElement;
+    /**
+     * Emits input event
+     */
+    inputValueChanged;
     async onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
@@ -98,6 +82,28 @@ export class TetStepperInput {
         }
         inputElement.value = `${this.value}`;
     }
+    /**
+     * Reduces value by step
+     */
+    onMinusClick = (e) => {
+        e && e.stopPropagation();
+        if (this.value - this.step < this.min) {
+            this.value = this.min;
+            return;
+        }
+        this.value -= this.step;
+    };
+    /**
+     * Increases value by step
+     */
+    onPlusClick = (e) => {
+        e && e.stopPropagation();
+        if (this.value + this.step > this.max) {
+            this.value = this.max;
+            return;
+        }
+        this.value += this.step;
+    };
     /**
      * Handles keyboard input for an option item.
      *
@@ -123,7 +129,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '547aa8f4aaa5e32644ffd167b8414ce4aba15a1a', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '1b42018358a0f74802674711b3a511083f419b58', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '434bb70aca31a846a6b6b08f7537b6b301381c78', name: "remove" })), h("input", Object.assign({ key: 'df2f260f815a44d61805afec29efbe898a33c69c', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: 'eef0803d6b69ce5fb7b88388f8cc832517c3c7ea', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: 'dfa3df6d1b3fb209a4b5831bfffd281bf6968e88', name: "add" }))));
+        return (h("div", { key: '547aa8f4aaa5e32644ffd167b8414ce4aba15a1a', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '1b42018358a0f74802674711b3a511083f419b58', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '434bb70aca31a846a6b6b08f7537b6b301381c78', name: "remove" })), h("input", { key: 'df2f260f815a44d61805afec29efbe898a33c69c', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("tet-button", { key: 'eef0803d6b69ce5fb7b88388f8cc832517c3c7ea', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: 'dfa3df6d1b3fb209a4b5831bfffd281bf6968e88', name: "add" }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-textarea/tet-textarea.js

@@ -4,19 +4,6 @@ import { h, Host } from "@stencil/core";
  */
 export class TetTextarea {
     constructor() {
-        /**
-         * Set Keyboard Focus State on Input if Tab key is pressed.
-         */
-        this.addKeyboardFocus = () => {
-            this.focusVisible = this.isKeyboardFocus;
-        };
-        /**
-         * Removes Keyboard Focus State.
-         */
-        this.removeKeyboardFocus = () => {
-            this.focusVisible = false;
-        };
-        this.renderErrorMessages = () => (h("div", { class: { 'errors': true, [`tet-textarea__${this.theme}`]: true, 'errors--hidden': this.disabled } }, this.errorMessages.map((message) => h("p", { class: 'tet-textarea__error-message' }, message))));
         this.value = '';
         this.label = '';
         this.placeholder = '';
@@ -42,6 +29,19 @@ export class TetTextarea {
         this.isKeyboardFocus = false;
         this.focusVisible = false;
     }
+    /**
+     * Set Keyboard Focus State on Input if Tab key is pressed.
+     */
+    addKeyboardFocus = () => {
+        this.focusVisible = this.isKeyboardFocus;
+    };
+    /**
+     * Removes Keyboard Focus State.
+     */
+    removeKeyboardFocus = () => {
+        this.focusVisible = false;
+    };
+    renderErrorMessages = () => (h("div", { class: { 'errors': true, [`tet-textarea__${this.theme}`]: true, 'errors--hidden': this.disabled } }, this.errorMessages.map((message) => h("p", { class: 'tet-textarea__error-message' }, message))));
     render() {
         const { value, label, placeholder, disabled, errorMessages, theme, renderErrorMessages } = this;
         const textareaClasses = {

package/dist/collection/components/simple/lists/tet-news-card-list/tet-news-card-list.js

@@ -9,39 +9,6 @@ import { h, Host } from "@stencil/core";
  */
 export class TetNewsCardList {
     constructor() {
-        /**
-         * Disables the default image events to address the image dragging issue in Firefox.
-         */
-        this.disableImageEvents = (event) => {
-            event.preventDefault();
-        };
-        /**
-         * Adds the hover class on the image and anchor hover events.
-         * @param event MouseEvent
-         */
-        this.handleCardMouseOver = (event) => {
-            const cardElement = event.currentTarget.closest('.tet-news-card');
-            cardElement.classList.add('hover');
-        };
-        /**
-         * Removes the hover class on the image and anchor hover events.
-         * @param event MouseEvent
-         */
-        this.handleCardMouseLeave = (event) => {
-            const cardElement = event.currentTarget.closest('.tet-news-card');
-            cardElement.classList.remove('hover');
-        };
-        /**
-         * Renders a single list item.
-         * @param item
-         */
-        this.renderListCard = (item, index) => {
-            var _a;
-            return (h("div", { class: {
-                    "tet-news-card": true,
-                    [this.theme]: true,
-                }, part: "card-list-item" }, h("a", { class: "tet-news-card__link-container", "data-index": index, href: item.redirectHref, target: item.redirectNewTab ? '_blank' : '', onMouseOver: this.handleCardMouseOver, onMouseLeave: this.handleCardMouseLeave, onFocus: this.handleCardMouseOver, onBlur: this.handleCardMouseLeave, onClick: item.clickCallback }, h("div", { class: "tet-news-card__image__container" }, h("div", { class: "tet-news-card__image", onMouseDown: this.disableImageEvents }, h("img", { src: item.imageSrc, alt: (_a = item.imageAlt) !== null && _a !== void 0 ? _a : '' }))), item.date && h("span", { class: "tet-news-card__date" }, item.date), h("span", { class: "tet-news-card__title" }, item.title), h("span", { class: "tet-news-card__divider" }), h("div", { class: "tet-news-card__link" }, h("span", { class: "tet-news-card__underline" }, item.redirectText), ' ', h("tet-icon", { class: "tet-news-card__link-icon", name: "chevron-right" })))));
-        };
         this.items = [];
         this.withControls = true;
         this.scrollFullWidth = false;
@@ -53,6 +20,42 @@ export class TetNewsCardList {
         this.withVirtualScroll = false;
         this.theme = 'light';
     }
+    /**
+     * The DOM root component element.
+     */
+    element;
+    /**
+     * Disables the default image events to address the image dragging issue in Firefox.
+     */
+    disableImageEvents = (event) => {
+        event.preventDefault();
+    };
+    /**
+     * Adds the hover class on the image and anchor hover events.
+     * @param event MouseEvent
+     */
+    handleCardMouseOver = (event) => {
+        const cardElement = event.currentTarget.closest('.tet-news-card');
+        cardElement.classList.add('hover');
+    };
+    /**
+     * Removes the hover class on the image and anchor hover events.
+     * @param event MouseEvent
+     */
+    handleCardMouseLeave = (event) => {
+        const cardElement = event.currentTarget.closest('.tet-news-card');
+        cardElement.classList.remove('hover');
+    };
+    /**
+     * Renders a single list item.
+     * @param item
+     */
+    renderListCard = (item, index) => {
+        return (h("div", { class: {
+                "tet-news-card": true,
+                [this.theme]: true,
+            }, part: "card-list-item" }, h("a", { class: "tet-news-card__link-container", "data-index": index, href: item.redirectHref, target: item.redirectNewTab ? '_blank' : '', onMouseOver: this.handleCardMouseOver, onMouseLeave: this.handleCardMouseLeave, onFocus: this.handleCardMouseOver, onBlur: this.handleCardMouseLeave, onClick: item.clickCallback }, h("div", { class: "tet-news-card__image__container" }, h("div", { class: "tet-news-card__image", onMouseDown: this.disableImageEvents }, h("img", { src: item.imageSrc, alt: item.imageAlt ?? '' }))), item.date && h("span", { class: "tet-news-card__date" }, item.date), h("span", { class: "tet-news-card__title" }, item.title), h("span", { class: "tet-news-card__divider" }), h("div", { class: "tet-news-card__link" }, h("span", { class: "tet-news-card__underline" }, item.redirectText), ' ', h("tet-icon", { class: "tet-news-card__link-icon", name: "chevron-right" })))));
+    };
     render() {
         const { withControls, withMouseDrag, withScrollbar, withVirtualScroll, initialScrollAmount, disableScroll, scrollFullWidth, controlScrollAmount, } = this;
         const props = {
@@ -65,7 +68,7 @@ export class TetNewsCardList {
             scrollFullWidth,
             controlScrollAmount,
         };
-        return (h(Host, { key: 'd6b5b0f92ceb7c6f34054daeca7f0f235a5e2abe' }, h("tet-card-list", Object.assign({ key: '9974ee9b4181e1c380bee3e079c67184f2f8cd44', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
+        return (h(Host, { key: 'd6b5b0f92ceb7c6f34054daeca7f0f235a5e2abe' }, h("tet-card-list", { key: '9974ee9b4181e1c380bee3e079c67184f2f8cd44', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true, ...props }, this.items.map((item, index) => this.renderListCard(item, index)))));
     }
     static get is() { return "tet-news-card-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/lists/tet-selection-list/tet-selection-list.js

@@ -9,72 +9,20 @@ import { isObject } from "../../../../services/utils/index";
  */
 export class TetSelectionList {
     constructor() {
-        /**
-         * Toggles the selected item.
-         *
-         * @param item
-         */
-        this.toggleItem = (item) => {
-            const selectionStrategy = this.multipleSelections ? this.multipleSelectionToggle : this.singleSelectionToggle;
-            selectionStrategy(item);
-            this.itemSelected.emit(item);
-            // Re-assign the value to trigger array change detection.
-            this.selectedItems = [...this.selectedItems];
-        };
-        /**
-         * Handles multiple (checkbox) selection logic.
-         *
-         * @param item
-         */
-        this.multipleSelectionToggle = (item) => {
-            if (!this.selectedItems.includes(item)) {
-                this.selectedItems.push(item);
-            }
-            else {
-                this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
-            }
-        };
-        /**
-         * Handles single (radio) selection logic.
-         *
-         * @param item
-         */
-        this.singleSelectionToggle = (item) => {
-            if (!this.selectedItems.includes(item)) {
-                this.selectedItems = [];
-            }
-            this.selectedItems.push(item);
-        };
-        /**
-         * Calculates the context of the particular list item.
-         *
-         * @param item
-         */
-        this.getListItemContext = (item) => {
-            return { selected: this.selectedItems.includes(item) };
-        };
-        /**
-         * Renders a single list item.
-         *
-         * @param item
-         */
-        this.renderListItem = (item) => {
-            const itemContext = this.getListItemContext(item);
-            const renderedResult = this.itemRenderFunction(item, itemContext);
-            // JSX is an object and doesn't render properly via innerHTML.
-            const content = isObject(renderedResult) ? renderedResult : h("div", { innerHTML: renderedResult });
-            return h("li", { class: "list-item", part: "selection-list-item", onClick: () => this.toggleItem(item) }, content);
-        };
         this.items = [];
         this.preSelectedItems = [];
         this.multipleSelections = true;
-        this.itemRenderFunction = (data) => data === null || data === void 0 ? void 0 : data.toString();
+        this.itemRenderFunction = (data) => data?.toString();
         this.identifier = undefined;
         this.selectedItems = [];
     }
     onPreselectedItemsChanged(items) {
         items.forEach(this.toggleItem);
     }
+    /** The event that is emitted when an item is selected or de-selected. */
+    itemSelected;
+    /** The event that is emitted when the component is loaded. */
+    selectionListRendered;
     componentWillLoad() {
         this.preSelectedItems.forEach(this.toggleItem);
     }
@@ -94,6 +42,62 @@ export class TetSelectionList {
     async getSelectedItems() {
         return this.selectedItems;
     }
+    /**
+     * Toggles the selected item.
+     *
+     * @param item
+     */
+    toggleItem = (item) => {
+        const selectionStrategy = this.multipleSelections ? this.multipleSelectionToggle : this.singleSelectionToggle;
+        selectionStrategy(item);
+        this.itemSelected.emit(item);
+        // Re-assign the value to trigger array change detection.
+        this.selectedItems = [...this.selectedItems];
+    };
+    /**
+     * Handles multiple (checkbox) selection logic.
+     *
+     * @param item
+     */
+    multipleSelectionToggle = (item) => {
+        if (!this.selectedItems.includes(item)) {
+            this.selectedItems.push(item);
+        }
+        else {
+            this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
+        }
+    };
+    /**
+     * Handles single (radio) selection logic.
+     *
+     * @param item
+     */
+    singleSelectionToggle = (item) => {
+        if (!this.selectedItems.includes(item)) {
+            this.selectedItems = [];
+        }
+        this.selectedItems.push(item);
+    };
+    /**
+     * Calculates the context of the particular list item.
+     *
+     * @param item
+     */
+    getListItemContext = (item) => {
+        return { selected: this.selectedItems.includes(item) };
+    };
+    /**
+     * Renders a single list item.
+     *
+     * @param item
+     */
+    renderListItem = (item) => {
+        const itemContext = this.getListItemContext(item);
+        const renderedResult = this.itemRenderFunction(item, itemContext);
+        // JSX is an object and doesn't render properly via innerHTML.
+        const content = isObject(renderedResult) ? renderedResult : h("div", { innerHTML: renderedResult });
+        return h("li", { class: "list-item", part: "selection-list-item", onClick: () => this.toggleItem(item) }, content);
+    };
     render() {
         return (h("ul", { key: '5d21c21153564b6bf82dce1244c6753c572ea0e4', class: "list", part: "selection-list" }, this.items.map(this.renderListItem)));
     }

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.js

@@ -25,6 +25,14 @@ export class TetTextList {
         this.listIcon = 'check';
         this.theme = 'light';
     }
+    /**
+     * The passed children of the host HTML element.
+     */
+    children;
+    /**
+     * The host HTML element of the component.
+     */
+    host;
     /**
      * Lifecycle method.
      */
@@ -94,8 +102,12 @@ export class TetTextList {
      * @returns The class names.
      */
     getListClassName(props, classes = []) {
-        const additionalClassNames = classes.reduce((entries, className) => (Object.assign(Object.assign({}, entries), { [`text-list${className}`]: true })), {});
-        return Object.assign({ 'text-list': true, [`text-list--type-${props.listType}`]: !props.withIcon }, additionalClassNames);
+        const additionalClassNames = classes.reduce((entries, className) => ({ ...entries, [`text-list${className}`]: true }), {});
+        return {
+            'text-list': true,
+            [`text-list--type-${props.listType}`]: !props.withIcon,
+            ...additionalClassNames,
+        };
     }
     render() {
         const { withIcon, listType, theme } = this;

package/dist/collection/components/simple/menu/tet-business-navigation/tet-business-navigation.js

@@ -1,66 +1,69 @@
 import { h } from "@stencil/core";
 export class TetBusinessNavigation {
     constructor() {
-        /**
-         * Initialises the mouse drag.
-         * @param {MouseEvent} event Current mouse event.
-         */
-        this.onContainerMouseDown = (event) => {
-            this.isPointerDown = true;
-            this.positions = {
-                scrollLeft: this.navigationContainer.scrollLeft,
-                mouseX: event.clientX
-            };
-            this.navigationContainer.addEventListener('mousemove', this.onContainerMouseMove);
-            this.navigationContainer.addEventListener('mouseup', this.onContainerMouseUp);
-            this.navigationContainer.addEventListener('mouseleave', this.onContainerMouseUp);
-        };
-        /**
-         * Scrolls the `navigationContainer` 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.navigationContainer.scrollTo(this.positions.scrollLeft - deltaX, 0);
-        };
-        /**
-         * Removes mouse drag events.
-         */
-        this.onContainerMouseUp = () => {
-            this.isPointerDown = false;
-            this.navigationContainer.removeEventListener('mousemove', this.onContainerMouseMove);
-            this.navigationContainer.removeEventListener('mouseup', this.onContainerMouseUp);
-            this.navigationContainer.removeEventListener('mouseleave', this.onContainerMouseUp);
-        };
-        /** Render menu item */
-        this.renderMenuItem = (menuItem) => {
-            const { id, icon, name } = menuItem;
-            return (h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => this.selectMenuItem(id) }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), h("span", { class: "business-navigation-item__title" }, name)));
-        };
         this.menuItems = undefined;
         this.theme = 'light';
         this.selectedItemId = undefined;
         this.positions = { scrollLeft: 0, mouseX: 0 };
     }
+    navigationContainer;
+    isPointerDown;
+    /** Event emitter for menu item click passing menu id */
+    menuClickEvent;
     /** Method to run on menu item selection */
     async selectMenuItem(id) {
         this.selectedItemId = id;
         this.menuClickEvent.emit({ id });
     }
     componentWillLoad() {
-        var _a;
         if (!this.menuItems || this.menuItems.length === 0) {
             return;
         }
-        this.selectedItemId = ((_a = this.menuItems.find((item) => item.selected === true)) === null || _a === void 0 ? void 0 : _a.id) || this.menuItems[0].id;
+        this.selectedItemId = this.menuItems.find((item) => item.selected === true)?.id || this.menuItems[0].id;
     }
+    /**
+     * Initialises the mouse drag.
+     * @param {MouseEvent} event Current mouse event.
+     */
+    onContainerMouseDown = (event) => {
+        this.isPointerDown = true;
+        this.positions = {
+            scrollLeft: this.navigationContainer.scrollLeft,
+            mouseX: event.clientX
+        };
+        this.navigationContainer.addEventListener('mousemove', this.onContainerMouseMove);
+        this.navigationContainer.addEventListener('mouseup', this.onContainerMouseUp);
+        this.navigationContainer.addEventListener('mouseleave', this.onContainerMouseUp);
+    };
+    /**
+     * Scrolls the `navigationContainer` 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.navigationContainer.scrollTo(this.positions.scrollLeft - deltaX, 0);
+    };
+    /**
+     * Removes mouse drag events.
+     */
+    onContainerMouseUp = () => {
+        this.isPointerDown = false;
+        this.navigationContainer.removeEventListener('mousemove', this.onContainerMouseMove);
+        this.navigationContainer.removeEventListener('mouseup', this.onContainerMouseUp);
+        this.navigationContainer.removeEventListener('mouseleave', this.onContainerMouseUp);
+    };
+    /** Render menu item */
+    renderMenuItem = (menuItem) => {
+        const { id, icon, name } = menuItem;
+        return (h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => this.selectMenuItem(id) }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), h("span", { class: "business-navigation-item__title" }, name)));
+    };
     /** Render Functional Component*/
     render() {
         const { menuItems, theme } = this;

package/dist/collection/components/simple/menu/tet-menu/tet-menu.js

@@ -78,8 +78,7 @@ export class TetMenu {
      * @param subLevel
      */
     renderSubItem(subLevel) {
-        var _a, _b;
-        const subMenuItems = (_a = subLevel.subLevels) === null || _a === void 0 ? void 0 : _a.map((_subLevel) => {
+        const subMenuItems = subLevel.subLevels?.map((_subLevel) => {
             return this.renderSublevelItem(_subLevel);
         });
         let iconLeft = '';
@@ -105,14 +104,14 @@ export class TetMenu {
             });
         }
         const subTitle = subLevel.subTitle && subLevel.subTitle.length !== 0 ? (h("div", { class: "menu__dropdown__list__sub-title" }, subLevel.subTitle)) : ('');
-        const itemId = ((_b = subLevel.id) === null || _b === void 0 ? void 0 : _b.toString()) || null;
+        const itemId = subLevel.id?.toString() || null;
         return (h("li", null, h("a", { id: itemId, href: subLevel.link, class: {
                 'menu--active': subLevel.active,
                 'menu--highlighted': subLevel.highlighted,
                 'line-top': subLevel.lineTop,
                 'text-color-secondary': subLevel.textColorSecondary,
                 'translation-none': subLevel.translationNone,
-                'menu--submenu': !!(subMenuItems === null || subMenuItems === void 0 ? void 0 : subMenuItems.length)
+                'menu--submenu': !!subMenuItems?.length
             }, tabIndex: 0 }, iconLeft, h("div", null, h("div", null, subLevel.title), subTitle, this.renderCheckmark(subLevel)), iconRight, !!subMenuItems && (h("tet-icon", { class: "menu__chevron", name: "chevron-right", theme: this.darkMode ? 'dark' : 'light' })), !!subMenuItems && (h("div", { class: { left: this.isSubmenuLeft, right: !this.isSubmenuLeft, menu__sublist: true } }, h("ul", { class: { content: true } }, subMenuItems))))));
     }
     /**

package/dist/collection/components/simple/menu/tet-menu-mobile/tet-menu-mobile.js

@@ -4,15 +4,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetMenuMobile {
     constructor() {
-        /**
-         * Method trigering on the first level element click.
-         * Toggles the expanded state.
-         */
-        this.firstLevelClick = () => {
-            if (this.hasDropdownContent) {
-                this.isExpanded = !this.isExpanded;
-            }
-        };
         this.isActive = false;
         this.firstLevelTitle = '';
         this.firstLevelLink = '';
@@ -23,6 +14,10 @@ export class TetMenuMobile {
         this.hasDropdownContent = false;
         this.subMenuState = [];
     }
+    /**
+     * The root element of the component.
+     */
+    rootElement;
     /**
      * Lifecycle method.
      */
@@ -31,6 +26,15 @@ export class TetMenuMobile {
         const hasListEndSlot = Boolean(this.rootElement.querySelector('[slot="list-end"]'));
         this.hasDropdownContent = hasListStartSlot || hasListEndSlot || Boolean(this.subLevels.length);
     }
+    /**
+     * Method trigering on the first level element click.
+     * Toggles the expanded state.
+     */
+    firstLevelClick = () => {
+        if (this.hasDropdownContent) {
+            this.isExpanded = !this.isExpanded;
+        }
+    };
     secondLevelClick(key, canClick) {
         if (!canClick) {
             return;
@@ -76,12 +80,11 @@ export class TetMenuMobile {
      * @param subLevel
      */
     renderSubItem(subLevel, isSubLevel = false) {
-        var _a;
-        const subMenuItems = (_a = subLevel.subLevels) === null || _a === void 0 ? void 0 : _a.map(_subLevel => {
+        const subMenuItems = subLevel.subLevels?.map(_subLevel => {
             return this.renderSubItem(_subLevel, true);
         });
         let href = 'javascript:void(0)';
-        const canBeClicked = !!(subMenuItems === null || subMenuItems === void 0 ? void 0 : subMenuItems.length);
+        const canBeClicked = !!subMenuItems?.length;
         if (!canBeClicked) {
             href = subLevel.link;
         }

package/dist/collection/components/simple/menu/tet-navigation-mobile/tet-navigation-mobile.js

@@ -4,24 +4,24 @@ import { Host, h } from "@stencil/core";
  */
 export class TetNavigationMobile {
     constructor() {
-        /**
-         * Toggles `isTogglerExpanded` value on toggler element click.
-         */
-        this.onTogglerClick = () => {
-            this.isTogglerExpanded = !this.isTogglerExpanded;
-        };
-        /**
-         * Handle Key Down event of navigation toggler.
-         */
-        this.handleKeyDown = (event) => {
-            if (['Enter', ' '].includes(event.key)) {
-                this.onTogglerClick();
-            }
-        };
         this.darkMode = false;
         this.isTogglerExpanded = false;
         this.isTogglerVisible = true;
     }
+    /**
+     * Toggles `isTogglerExpanded` value on toggler element click.
+     */
+    onTogglerClick = () => {
+        this.isTogglerExpanded = !this.isTogglerExpanded;
+    };
+    /**
+     * Handle Key Down event of navigation toggler.
+     */
+    handleKeyDown = (event) => {
+        if (['Enter', ' '].includes(event.key)) {
+            this.onTogglerClick();
+        }
+    };
     /**
      * Method for hiding the toggler element.
      */
@@ -47,6 +47,10 @@ export class TetNavigationMobile {
     async close() {
         this.isTogglerExpanded = false;
     }
+    /**
+     * The event to be emitted on the `isTogglerExpanded` value change.
+     */
+    mainDropdownToggle;
     /**
      * Listens for `isTogglerExpanded` value change and emits the value through `mainDropdownToggle`.
      */