@tet/tet-components 1.4.16-testing → 1.4.17-testing

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

@@ -58,14 +58,15 @@ export class TetDynamicCard {
     rootElementRef = null;
     BREAKPOINTS = {
         MOBILE: 768,
+        TABLET_SMALL: 1024,
         TABLET: 1440,
         DESKTOP: 1920
     };
     CARD_SIZES = {
         standard: {
-            'S': 'fit-content',
-            'M': 'calc(50% - 0.75rem)',
-            'XL': '100%',
+            S: 'fit-content',
+            M: 'calc(50% - 0.75rem)',
+            XL: '100%'
         },
         responsive: {
             mobile: '100%',
@@ -74,27 +75,13 @@ export class TetDynamicCard {
         }
     };
     getCardSize(width) {
-        if (this.originalSize === 'L') {
-            if (width < this.BREAKPOINTS.MOBILE) {
-                return (this.sizeChangeBreakpoint === 'Mob' || this.sizeChangeBreakpoint === 'Tab') ? 'S' : 'XL';
-            }
-            else if (width < this.BREAKPOINTS.TABLET) {
-                return this.sizeChangeBreakpoint === 'Tab' ? 'S' : 'XL';
-            }
-            else {
-                return this.originalSize;
-            }
-        }
-        else if (this.originalSize === 'M') {
-            if (width < this.BREAKPOINTS.MOBILE) {
-                return (this.sizeChangeBreakpoint === 'Mob' || this.sizeChangeBreakpoint === 'Tab') ? 'S' : 'XL';
-            }
-            else if (width < this.BREAKPOINTS.TABLET) {
-                return this.sizeChangeBreakpoint === 'Tab' ? 'S' : this.originalSize;
-            }
-            else {
-                return this.originalSize;
-            }
+        if (width < this.BREAKPOINTS.MOBILE)
+            return 'XL';
+        if (width < this.BREAKPOINTS.TABLET_SMALL)
+            return 'M';
+        const isAdaptiveSize = this.originalSize === 'L' || this.originalSize === 'M';
+        if (isAdaptiveSize && width < this.BREAKPOINTS.TABLET) {
+            return this.sizeChangeBreakpoint === 'Tab' ? 'S' : this.originalSize;
         }
         return this.originalSize;
     }
@@ -113,36 +100,21 @@ export class TetDynamicCard {
         }
     }
     getCardWidth(size, width) {
-        if (this.isInCarousel) {
+        if (this.isInCarousel)
             return 'fit-content';
-        }
-        const adaptiveSize = this.originalSize === 'L' || this.originalSize === 'M';
-        if (width < this.BREAKPOINTS.MOBILE) {
-            if (adaptiveSize && (this.sizeChangeBreakpoint === 'Mob' || this.sizeChangeBreakpoint === 'Tab')) {
-                return 'fit-content';
-            }
-            // Special handling
-            if (size === 'L' || size === 'M') {
-                return this.CARD_SIZES.responsive.mobile;
-            }
-        }
-        else if (width < this.BREAKPOINTS.TABLET) {
-            if (adaptiveSize && this.sizeChangeBreakpoint === 'Tab') {
+        if (width < this.BREAKPOINTS.MOBILE)
+            return this.CARD_SIZES.responsive.mobile;
+        const isAdaptiveSize = this.originalSize === 'L' || this.originalSize === 'M';
+        if (width < this.BREAKPOINTS.TABLET) {
+            if (isAdaptiveSize && this.sizeChangeBreakpoint === 'Tab')
                 return 'fit-content';
-            }
-            if (size === 'L') {
+            if (size === 'M')
+                return this.CARD_SIZES.standard.M;
+            if (size === 'L')
                 return this.CARD_SIZES.responsive.tablet;
-            }
         }
-        else if (width < this.BREAKPOINTS.DESKTOP) {
-            if (size === 'L') {
-                return this.CARD_SIZES.responsive.tablet;
-            }
-        }
-        else {
-            if (size === 'L') {
-                return this.CARD_SIZES.responsive.desktop;
-            }
+        else if (size === 'L') {
+            return width < this.BREAKPOINTS.DESKTOP ? this.CARD_SIZES.responsive.tablet : this.CARD_SIZES.responsive.desktop;
         }
         return this.CARD_SIZES.standard[size] || 'fit-content';
     }
@@ -177,7 +149,7 @@ export class TetDynamicCard {
     }
     handleClick = (event) => {
         const path = event.composedPath();
-        const isButtonClick = path.some(el => el instanceof HTMLElement && el.classList?.contains('button'));
+        const isButtonClick = path.some((el) => el instanceof HTMLElement && el.classList?.contains('button'));
         if (!isButtonClick) {
             if (this.buttonRef && this.linkHref) {
                 const button = this.buttonRef.shadowRoot?.querySelector('button');
@@ -192,31 +164,39 @@ export class TetDynamicCard {
     };
     renderTags() {
         const dateTagColor = this.theme === 'dark' ? this.dateTagColorDark : this.dateTagColorLight;
-        return (h("div", { class: "tags-container", part: "tags" }, this.tags?.length > 0 && (h("div", { class: "tags" }, this.tags.map(tag => (h("span", { class: "tag" }, tag))))), this.dateTag && (h("div", { class: "tags" }, h("div", { class: `tag colored colored--${dateTagColor}`, ref: (elm) => { this.dateTagColorRef = elm; } }, h("span", { class: "date-tag-text" }, this.dateTag))))));
+        return (h("div", { class: "tags-container", part: "tags" }, this.tags?.length > 0 && (h("div", { class: "tags" }, this.tags.map((tag) => (h("span", { class: "tag" }, tag))))), this.dateTag && (h("div", { class: "tags" }, h("div", { class: `tag colored colored--${dateTagColor}`, ref: (elm) => {
+                this.dateTagColorRef = elm;
+            } }, h("span", { class: "date-tag-text" }, this.dateTag))))));
     }
     renderPrice() {
         if (!this.priceTagOptions?.show)
             return null;
-        return (h("div", { class: "price", part: "price" }, h("tet-price-view", { ref: elm => { this.priceViewRef = elm; }, font: this.priceTagOptions.font || "Gilroy, Arial, sans-serif", background: this.priceTagOptions.background, staticColors: this.priceTagOptions.isStatic, theme: this.theme, size: "S", "heading-text": this.priceTagOptions.headingText, "price-type": this.priceTagOptions.priceType, "euro-price": this.priceTagOptions.euroPrice?.toString(), "cents-price": this.priceTagOptions.centsPrice?.toString(), "footer-text": this.priceTagOptions.footerText, "footer-text-type": this.priceTagOptions.footerTextType })));
+        return (h("div", { class: "price", part: "price" }, h("tet-price-view", { ref: (elm) => {
+                this.priceViewRef = elm;
+            }, font: this.priceTagOptions.font || 'Gilroy, Arial, sans-serif', background: this.priceTagOptions.background, staticColors: this.priceTagOptions.isStatic, theme: this.theme, size: "S", "heading-text": this.priceTagOptions.headingText, "price-type": this.priceTagOptions.priceType, "euro-price": this.priceTagOptions.euroPrice?.toString(), "cents-price": this.priceTagOptions.centsPrice?.toString(), "footer-text": this.priceTagOptions.footerText, "footer-text-type": this.priceTagOptions.footerTextType })));
     }
     renderButton() {
         if (!this.linkText)
             return null;
         const buttonProps = {
-            type: 'primary',
-            size: 'small',
-            theme: this.theme,
-            url: this.linkHref,
+            'type': 'primary',
+            'size': 'small',
+            'theme': this.theme,
+            'url': this.linkHref,
             'url-target': this.linkNewTab ? '_blank' : '_self',
             'accessibility-label': this.linkText
         };
-        return (h("div", { class: "button", part: "button" }, h("tet-button", { ...buttonProps, ref: elm => { this.buttonRef = elm; } }, this.linkText)));
+        return (h("div", { class: "button", part: "button" }, h("tet-button", { ...buttonProps, ref: (elm) => {
+                this.buttonRef = elm;
+            } }, this.linkText)));
     }
     render() {
-        return (h(Host, { key: '205f5179423b98cb0e6a402a978de60373f91949', class: {
+        return (h(Host, { key: 'e835560322a1509753b6391ff1148137f2669395', class: {
                 'dynamic-card': true,
                 'is-focused': this.isFocused
-            }, "data-index": this.index, ref: (elm) => { this.rootElementRef = elm; } }, h("div", { key: '03c41e05dd26dd306389c5d67d38162e01b94eb3', class: `card
+            }, "data-index": this.index, ref: (elm) => {
+                this.rootElementRef = elm;
+            } }, h("div", { key: '9155b5ea0293ef39c54f8d66c0df6c2931cf3d52', class: `card
             theme-${this.theme}
             size-${this.currentSize}
             position-${this.pictureLayoutShiftPosition}
@@ -224,7 +204,7 @@ export class TetDynamicCard {
           `, onClick: this.handleClick, onKeyUp: (event) => {
                 if (event.key === 'Enter')
                     this.handleClick(event);
-            }, tabindex: 0, part: "card", "aria-labelledby": this.cardTitle }, h("div", { key: 'cf9e6bd3a4cb4ca86296d5d7194d86e3d8640c8f', class: "image", part: "image" }, h("slot", { key: '588a5110fa086136b3c6451ce09fac05cdc915af', name: "image" }), this.renderPrice(), this.renderTags()), h("div", { key: 'fd40a3a0a20284a9007baf58262b4edfe2da0a08', class: "content-container" }, h("div", { key: '4e1f956e4337ce6c070c6b96a0d23e71164b216a', class: "content", part: "content" }, this.cardTitle && (h("h3", { key: '4b3da4a9a7d6891b18f853206e7e2edcbb470e6b', class: "title", part: "title" }, this.cardTitle)), this.subtitle && (h("p", { key: '06bf2fcc83e4b39138a97793ac416e8eed119493', class: "subtitle", part: "subtitle" }, this.subtitle))), this.renderButton()))));
+            }, tabindex: 0, part: "card", "aria-labelledby": this.cardTitle }, h("div", { key: '6923cd94ffceae462b08d99e82a9c3f0dae21f84', class: "image", part: "image" }, h("slot", { key: '4fe4f5e2c4edffb8229073f6cf59a0c4cac6fc43', name: "image" }), this.renderPrice(), this.renderTags()), h("div", { key: '2fda1db6c8b3828caf41e20aab7e09033581e007', class: "content-container" }, h("div", { key: '5b5c81bd36839cd84ea23f2872007026e24b957e', class: "content", part: "content" }, this.cardTitle && (h("h3", { key: '6b52cd192997cd9bbbab8ff4d9c19e31ead757c9', class: "title", part: "title" }, this.cardTitle)), this.subtitle && (h("p", { key: '2dd27ca9c13653ef5542950307fdd4583dd67fb9', class: "subtitle", part: "subtitle" }, this.subtitle))), this.renderButton()))));
     }
     static get is() { return "tet-dynamic-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class TetBusinessNavigation {
         this.mainMenuItemId = undefined;
         this.positions = { scrollLeft: 0, mouseX: 0 };
         this.expanded = true;
-        this.sublevelsOpened = false;
+        this.openedMenuIds = new Set();
     }
     navigationContainer;
     isPointerDown;
@@ -21,8 +21,7 @@ export class TetBusinessNavigation {
         if (!this.menuItems || this.menuItems.length === 0) {
             return;
         }
-        this.selectedItemId = this.menuItems.find((item) => item.selected === true)?.id || this.menuItems[0].id;
-        this.mainMenuItemId = this.selectedItemId;
+        this.handleNavInitialState();
         processTranslations('tet-components', this.language || 'lv').then(() => forceUpdate(this));
     }
     /** Method to run on menu item selection */
@@ -35,6 +34,27 @@ export class TetBusinessNavigation {
         localStorage.setItem('selectedSublevelId', JSON.stringify(mainMenuId ? id : ''));
         this.menuClickEvent.emit({ id });
     }
+    /** Sets the initial selected and open state for the navigation menu based on selected main or sublevel items. */
+    handleNavInitialState() {
+        this.mainMenuItemId = this.menuItems[0].id;
+        this.selectedItemId = this.menuItems[0].id;
+        const selectedMainItem = this.menuItems.find((item) => item.selected)?.id;
+        if (selectedMainItem) {
+            this.mainMenuItemId = selectedMainItem;
+            this.selectedItemId = selectedMainItem;
+            return;
+        }
+        for (const item of this.menuItems) {
+            const selectedSub = (item.sublevels || []).find((sub) => sub.selected);
+            if (selectedSub) {
+                this.selectedItemId = selectedSub.id;
+                this.mainMenuItemId = item.id;
+                this.openedMenuIds = new Set([item.id]);
+                localStorage.setItem('selectedSublevelId', JSON.stringify(selectedSub.id));
+                return;
+            }
+        }
+    }
     /**
      * Initialises the mouse drag.
      * @param {MouseEvent} event Current mouse event.
@@ -77,12 +97,11 @@ export class TetBusinessNavigation {
     toggleMenu = (e) => {
         e.preventDefault();
         if (this.expanded) {
-            this.selectedItemId = this.mainMenuItemId === this.selectedItemId ? this.selectedItemId : this.mainMenuItemId;
+            this.selectedItemId = this.mainMenuItemId;
         }
         else {
             const sublevelId = Number(localStorage.getItem('selectedSublevelId'));
-            this.selectedItemId = sublevelId > 0 ? sublevelId : this.mainMenuItemId;
-            this.sublevelsOpened = sublevelId > 0;
+            this.selectedItemId = sublevelId || this.mainMenuItemId;
         }
         this.expanded = !this.expanded;
     };
@@ -91,12 +110,14 @@ export class TetBusinessNavigation {
         if (this.selectedItemId !== id) {
             this.selectedItemId = id;
         }
-        this.sublevelsOpened = !this.sublevelsOpened;
+        const newSet = new Set(this.openedMenuIds);
+        newSet.has(id) ? newSet.delete(id) : newSet.add(id);
+        this.openedMenuIds = newSet;
         localStorage.setItem('selectedSublevelId', JSON.stringify(''));
     };
     /** Render second menu level */
     renderSublevelItems = (sublevels, id) => {
-        if (!this.sublevelsOpened) {
+        if (!this.openedMenuIds.has(id)) {
             return null;
         }
         const renderSublevelItem = sublevels.map((item) => (h("button", { class: { 'business-navigation-item': true, 'sublevel': true, 'selected': this.selectedItemId === item.id }, key: item.id, onClick: () => this.selectMenuItem(item.id, id) }, h("span", { class: { 'business-navigation-item__title': true, 'sublevel': true } }, item.name))));
@@ -105,9 +126,9 @@ export class TetBusinessNavigation {
     /** Render menu item */
     renderMenuItem = (menuItem) => {
         const { id, icon, name, sublevels } = menuItem;
-        const { expanded, sublevelsOpened } = this;
+        const { expanded, openedMenuIds } = this;
         const withSublevels = expanded && sublevels && sublevels.length > 0;
-        return (h("div", { class: "business-navigation-item__wrapper" }, h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => (withSublevels ? this.toggleSublevels(id) : this.selectMenuItem(id)), "aria-label": name }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), !this.expandable || expanded ? (h("span", { class: "business-navigation-item__title" }, name)) : (h("tet-tooltip", { class: "business-navigation-item__tooltip", position: TooltipPosition.RIGHT, theme: this.theme }, name)), withSublevels && (h("tet-icon", { class: { 'business-navigation-item__chevron': true, 'sublevelOpened': sublevelsOpened }, name: sublevelsOpened ? 'chevron-up' : 'chevron-down' }))), withSublevels && this.renderSublevelItems(sublevels, id)));
+        return (h("div", { class: "business-navigation-item__wrapper" }, h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => (withSublevels ? this.toggleSublevels(id) : this.selectMenuItem(id)), "aria-label": name }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), !this.expandable || expanded ? (h("span", { class: "business-navigation-item__title" }, name)) : (h("tet-tooltip", { class: "business-navigation-item__tooltip", position: TooltipPosition.RIGHT, theme: this.theme }, name)), withSublevels && (h("tet-icon", { class: { 'business-navigation-item__chevron': true, 'sublevelOpened': openedMenuIds.has(id) }, name: openedMenuIds.has(id) ? 'chevron-up' : 'chevron-down' }))), withSublevels && this.renderSublevelItems(sublevels, id)));
     };
     /** Render button to expand and minimize the menu container. */
     renderExpandButton = () => {
@@ -119,7 +140,7 @@ export class TetBusinessNavigation {
     /** Render Functional Component*/
     render() {
         const { menuItems, theme, expandable } = this;
-        return (h("div", { key: '752d6551dbd03ab8b4f99aede53a5a16dbf56bd1', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'f98adeb81486957f810f73fe689749c4b3583547', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
+        return (h("div", { key: '7d9c836c1d13e3b7d010946a9ba7e772a1f41987', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'e1dfb7594222452bd8cd2cad8bbfe5e80cefff0e', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
     }
     static get is() { return "tet-business-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -228,7 +249,7 @@ export class TetBusinessNavigation {
             "mainMenuItemId": {},
             "positions": {},
             "expanded": {},
-            "sublevelsOpened": {}
+            "openedMenuIds": {}
         };
     }
     static get events() {

package/dist/components/{p-57c05c8d.js → p-92c98bea.js}

@@ -20,7 +20,7 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
         this.mainMenuItemId = undefined;
         this.positions = { scrollLeft: 0, mouseX: 0 };
         this.expanded = true;
-        this.sublevelsOpened = false;
+        this.openedMenuIds = new Set();
     }
     navigationContainer;
     isPointerDown;
@@ -30,8 +30,7 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
         if (!this.menuItems || this.menuItems.length === 0) {
             return;
         }
-        this.selectedItemId = this.menuItems.find((item) => item.selected === true)?.id || this.menuItems[0].id;
-        this.mainMenuItemId = this.selectedItemId;
+        this.handleNavInitialState();
         processTranslations('tet-components', this.language || 'lv').then(() => forceUpdate(this));
     }
     /** Method to run on menu item selection */
@@ -44,6 +43,27 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
         localStorage.setItem('selectedSublevelId', JSON.stringify(mainMenuId ? id : ''));
         this.menuClickEvent.emit({ id });
     }
+    /** Sets the initial selected and open state for the navigation menu based on selected main or sublevel items. */
+    handleNavInitialState() {
+        this.mainMenuItemId = this.menuItems[0].id;
+        this.selectedItemId = this.menuItems[0].id;
+        const selectedMainItem = this.menuItems.find((item) => item.selected)?.id;
+        if (selectedMainItem) {
+            this.mainMenuItemId = selectedMainItem;
+            this.selectedItemId = selectedMainItem;
+            return;
+        }
+        for (const item of this.menuItems) {
+            const selectedSub = (item.sublevels || []).find((sub) => sub.selected);
+            if (selectedSub) {
+                this.selectedItemId = selectedSub.id;
+                this.mainMenuItemId = item.id;
+                this.openedMenuIds = new Set([item.id]);
+                localStorage.setItem('selectedSublevelId', JSON.stringify(selectedSub.id));
+                return;
+            }
+        }
+    }
     /**
      * Initialises the mouse drag.
      * @param {MouseEvent} event Current mouse event.
@@ -86,12 +106,11 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
     toggleMenu = (e) => {
         e.preventDefault();
         if (this.expanded) {
-            this.selectedItemId = this.mainMenuItemId === this.selectedItemId ? this.selectedItemId : this.mainMenuItemId;
+            this.selectedItemId = this.mainMenuItemId;
         }
         else {
             const sublevelId = Number(localStorage.getItem('selectedSublevelId'));
-            this.selectedItemId = sublevelId > 0 ? sublevelId : this.mainMenuItemId;
-            this.sublevelsOpened = sublevelId > 0;
+            this.selectedItemId = sublevelId || this.mainMenuItemId;
         }
         this.expanded = !this.expanded;
     };
@@ -100,12 +119,14 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
         if (this.selectedItemId !== id) {
             this.selectedItemId = id;
         }
-        this.sublevelsOpened = !this.sublevelsOpened;
+        const newSet = new Set(this.openedMenuIds);
+        newSet.has(id) ? newSet.delete(id) : newSet.add(id);
+        this.openedMenuIds = newSet;
         localStorage.setItem('selectedSublevelId', JSON.stringify(''));
     };
     /** Render second menu level */
     renderSublevelItems = (sublevels, id) => {
-        if (!this.sublevelsOpened) {
+        if (!this.openedMenuIds.has(id)) {
             return null;
         }
         const renderSublevelItem = sublevels.map((item) => (h("button", { class: { 'business-navigation-item': true, 'sublevel': true, 'selected': this.selectedItemId === item.id }, key: item.id, onClick: () => this.selectMenuItem(item.id, id) }, h("span", { class: { 'business-navigation-item__title': true, 'sublevel': true } }, item.name))));
@@ -114,9 +135,9 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
     /** Render menu item */
     renderMenuItem = (menuItem) => {
         const { id, icon, name, sublevels } = menuItem;
-        const { expanded, sublevelsOpened } = this;
+        const { expanded, openedMenuIds } = this;
         const withSublevels = expanded && sublevels && sublevels.length > 0;
-        return (h("div", { class: "business-navigation-item__wrapper" }, h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => (withSublevels ? this.toggleSublevels(id) : this.selectMenuItem(id)), "aria-label": name }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), !this.expandable || expanded ? (h("span", { class: "business-navigation-item__title" }, name)) : (h("tet-tooltip", { class: "business-navigation-item__tooltip", position: TooltipPosition.RIGHT, theme: this.theme }, name)), withSublevels && (h("tet-icon", { class: { 'business-navigation-item__chevron': true, 'sublevelOpened': sublevelsOpened }, name: sublevelsOpened ? 'chevron-up' : 'chevron-down' }))), withSublevels && this.renderSublevelItems(sublevels, id)));
+        return (h("div", { class: "business-navigation-item__wrapper" }, h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => (withSublevels ? this.toggleSublevels(id) : this.selectMenuItem(id)), "aria-label": name }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), !this.expandable || expanded ? (h("span", { class: "business-navigation-item__title" }, name)) : (h("tet-tooltip", { class: "business-navigation-item__tooltip", position: TooltipPosition.RIGHT, theme: this.theme }, name)), withSublevels && (h("tet-icon", { class: { 'business-navigation-item__chevron': true, 'sublevelOpened': openedMenuIds.has(id) }, name: openedMenuIds.has(id) ? 'chevron-up' : 'chevron-down' }))), withSublevels && this.renderSublevelItems(sublevels, id)));
     };
     /** Render button to expand and minimize the menu container. */
     renderExpandButton = () => {
@@ -128,7 +149,7 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
     /** Render Functional Component*/
     render() {
         const { menuItems, theme, expandable } = this;
-        return (h("div", { key: '752d6551dbd03ab8b4f99aede53a5a16dbf56bd1', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'f98adeb81486957f810f73fe689749c4b3583547', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
+        return (h("div", { key: '7d9c836c1d13e3b7d010946a9ba7e772a1f41987', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'e1dfb7594222452bd8cd2cad8bbfe5e80cefff0e', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
     }
     static get style() { return TetBusinessNavigationStyle0; }
 }, [1, "tet-business-navigation", {
@@ -140,7 +161,7 @@ const TetBusinessNavigation = /*@__PURE__*/ proxyCustomElement(class TetBusiness
         "mainMenuItemId": [32],
         "positions": [32],
         "expanded": [32],
-        "sublevelsOpened": [32],
+        "openedMenuIds": [32],
         "selectMenuItem": [64]
     }]);
 function defineCustomElement() {

package/dist/components/tet-b2b-configurator.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$i } from './p-9c5b6894.js';
 import { d as defineCustomElement$h } from './p-48f61462.js';
 import { d as defineCustomElement$g } from './p-a41cd76b.js';
 import { d as defineCustomElement$f } from './p-29ac3413.js';
-import { d as defineCustomElement$e } from './p-57c05c8d.js';
+import { d as defineCustomElement$e } from './p-92c98bea.js';
 import { d as defineCustomElement$d } from './p-0aa896e1.js';
 import { d as defineCustomElement$c } from './p-48cff30b.js';
 import { d as defineCustomElement$b } from './p-58e92936.js';

package/dist/components/tet-business-navigation.js

@@ -1,4 +1,4 @@
-import { T as TetBusinessNavigation$1, d as defineCustomElement$1 } from './p-57c05c8d.js';
+import { T as TetBusinessNavigation$1, d as defineCustomElement$1 } from './p-92c98bea.js';
 
 const TetBusinessNavigation = TetBusinessNavigation$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tet-dynamic-card.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './p-48cff30b.js';
 import { d as defineCustomElement$3 } from './p-f035c2cb.js';
 import { d as defineCustomElement$2 } from './p-41a7c21a.js';
 
-const tetDynamicCardCss = ":host{--image-type:cover;--image-background-color:var(--tc-background-white-black);--card-width-mobile:17.5rem;--card-height-mobile:27.75rem;--card-width-tablet:21.375rem;--card-height-tablet:33.875rem;--card-width-desktop:25.625rem;--card-height-desktop:39.5rem;--option-card-bg:var(--tc-background-white-black);--option-card-text:var(--tc-text-primary);--option-card-border:var(--tc-border-quaternary);display:block;font-family:var(--tet-font-family-primary)}.card{-webkit-user-drag:none;user-select:none;cursor:pointer;background:var(--tc-background-white-black);border-radius:1rem;border:0.0625rem solid var(--tc-border-quaternary);overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;margin:0 auto;min-width:var(--card-width-mobile);width:var(--card-width-mobile);height:var(--card-height-mobile);transition:box-shadow 0.15s ease}.card.size-S{width:var(--card-width-mobile);height:var(--card-height-mobile)}.card.size-XL,.card.size-L,.card.size-M{width:100%}.card:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem}.card:hover{box-shadow:0 4px 24px 0 rgba(0, 0, 0, 0.1), 0 1.5px 6px 0 rgba(0, 0, 0, 0.08)}.card:hover ::slotted(img){transform:scale(1.06)}.card:active{box-shadow:0 0 1px 0 rgba(12, 12, 14, 0.08), 0 1px 3px 0 rgba(12, 12, 14, 0.12)}.card:active ::slotted(img){transform:scale(1.01)}.content-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.image{-webkit-user-drag:none;user-select:none;flex-shrink:0;width:100%;height:16.125rem;overflow:hidden;position:relative;background-color:var(--image-background-color)}.image ::slotted(img){transition:transform 0.3s ease;width:100%;height:100%;object-fit:var(--image-type);display:block}.price{position:absolute;bottom:0.75rem;right:0.75rem;z-index:1}.tags-container{position:absolute;top:0.75rem;left:0.75rem;display:flex;flex-direction:column;gap:0.25rem;z-index:1}.content{height:auto;padding:0 1rem;text-align:center}.title{margin:0;font-family:var(--font-family-fallback);font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;color:var(--tc-text-primary);line-height:1.5rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word;max-height:3rem}.subtitle{color:var(--tc-text-primary);text-align:center;font-family:var(--font-family-content);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:-0.003125rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word;max-height:2.5rem}.button{margin-top:auto;margin-bottom:1.5rem;width:fit-content;text-wrap:nowrap}.tags-container{position:absolute;top:0.75rem;left:0.75rem;display:flex;flex-direction:column;gap:0.25rem}.tags{display:flex;flex-wrap:wrap;gap:0.25rem}.tag{border:0.0625px solid var(--tc-border-tertiary);padding:0.1875rem 0.3125rem;border-radius:0.375rem;background:var(--tc-layer-primary);color:var(--tc-text-primary);font-family:var(--font-family-content);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem}.tag.colored--white{background:var(--tc-layer-primary);color:var(--tc-text-primary);border:0.0625px solid var(--tc-border-tertiary)}.tag.colored--black{color:var(--tc-text-primary-dark);background:var(--tc-layer-primary-dark);border:0.0625px solid var(--tc-border-primary)}.tag.colored--yellow{background:var(--tc-yellow-20);color:var(--tc-text-primary);border:0.0625px solid var(--tc-border-tertiary)}.theme-dark{background:var(--tc-layer-primary-dark);border:0.0625rem solid var(--tc-border-quaternary-dark)}.theme-dark .title{color:var(--tc-text-primary-dark)}.theme-dark .subtitle{color:var(--tc-text-primary-dark)}.theme-dark .tag:not(.colored){color:var(--tc-text-primary-dark);background:var(--tc-layer-primary-dark);border:0.0625px solid var(--tc-border-primary)}@media all and (min-width: 48rem){.card{width:var(--card-width-tablet);height:var(--card-height-tablet)}.card.size-S{width:var(--card-width-tablet);height:var(--card-height-tablet)}.card.size-M{width:100%}.card.size-M .image{width:100%;height:24.25rem}.card.size-M.carousel-true{width:44rem}.card.size-XL,.card.size-L{width:100%;flex-direction:row;gap:0}.card.size-XL .image,.card.size-L .image{width:60%;height:100%}.card.size-XL .button,.card.size-L .button{margin-top:0}.card.size-XL.position-right,.card.size-L.position-right{flex-direction:row-reverse}.card.size-XL.carousel-true,.card.size-L.carousel-true{width:44rem}.image{width:var(--card-width-tablet);height:var(--card-width-tablet)}.title{font-size:1.5rem;line-height:1.75rem;max-height:3.5rem}.tag{font-size:0.875rem;line-height:1.25rem;letter-spacing:-0.003125rem}}@media all and (min-width: 90rem){.card.size-M{width:100%}.card.size-M.carousel-true{width:39.375rem}.card.size-L{width:100%;flex-direction:row;gap:0}.card.size-L .image{width:62%;height:100%}.card.size-L .button{margin-top:0}.card.size-L.position-right{flex-direction:row-reverse}.card.size-L.carousel-true{width:57.25rem}.card.size-XL .image{width:64%}.card.size-XL.carousel-true{width:80.25rem}}@media all and (min-width: 120rem){.card{width:var(--card-width-desktop);height:var(--card-height-desktop)}.card.size-S{width:var(--card-width-desktop);height:var(--card-height-desktop)}.card.size-L.carousel-true{width:83.125rem}.card.size-XL .image{width:72%}.card.size-XL.carousel-true{width:110.25rem}.image{width:var(--card-width-desktop);height:var(--card-width-desktop)}.title{font-size:1.75rem;line-height:2rem;max-height:4rem}.subtitle{font-size:1rem;line-height:1.5rem;letter-spacing:-0.00625rem;max-height:3rem}}";
+const tetDynamicCardCss = ":host{--image-type:cover;--image-background-color:var(--tc-background-white-black);--card-width-mobile:17.5rem;--card-height-mobile:27.75rem;--card-width-tablet:21.375rem;--card-height-tablet:33.875rem;--card-width-desktop:25.625rem;--card-height-desktop:39.5rem;--option-card-bg:var(--tc-background-white-black);--option-card-text:var(--tc-text-primary);--option-card-border:var(--tc-border-quaternary);display:block;font-family:var(--tet-font-family-primary)}.card{-webkit-user-drag:none;user-select:none;cursor:pointer;background:var(--tc-background-white-black);border-radius:1rem;border:0.0625rem solid var(--tc-border-quaternary);overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;margin:0 auto;min-width:var(--card-width-mobile);width:var(--card-width-mobile);height:var(--card-height-mobile);transition:box-shadow 0.15s ease}.card.size-S{width:var(--card-width-mobile);height:var(--card-height-mobile)}.card.size-XL,.card.size-L,.card.size-M{width:100%}.card:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem}.card:hover{box-shadow:0 4px 24px 0 rgba(0, 0, 0, 0.1), 0 1.5px 6px 0 rgba(0, 0, 0, 0.08)}.card:hover ::slotted(img){transform:scale(1.06)}.card:active{box-shadow:0 0 1px 0 rgba(12, 12, 14, 0.08), 0 1px 3px 0 rgba(12, 12, 14, 0.12)}.card:active ::slotted(img){transform:scale(1.01)}.content-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.image{-webkit-user-drag:none;user-select:none;flex-shrink:0;width:100%;height:16.125rem;overflow:hidden;position:relative;background-color:var(--image-background-color)}.image ::slotted(img){transition:transform 0.3s ease;width:100%;height:100%;object-fit:var(--image-type);display:block}.price{position:absolute;bottom:0.75rem;right:0.75rem;z-index:1}.tags-container{position:absolute;top:0.75rem;left:0.75rem;display:flex;flex-direction:column;gap:0.25rem;z-index:1}.content{height:auto;padding:0 1rem;text-align:center}.title{margin:0;font-family:var(--font-family-fallback);font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;color:var(--tc-text-primary);line-height:1.5rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word;max-height:3rem}.subtitle{color:var(--tc-text-primary);text-align:center;font-family:var(--font-family-content);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:-0.003125rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word;max-height:2.5rem}.button{margin-top:auto;margin-bottom:1.5rem;width:fit-content;text-wrap:nowrap}.tags-container{position:absolute;top:0.75rem;left:0.75rem;display:flex;flex-direction:column;gap:0.25rem}.tags{display:flex;flex-wrap:wrap;gap:0.25rem}.tag{border:0.0625px solid var(--tc-border-tertiary);padding:0.1875rem 0.3125rem;border-radius:0.375rem;background:var(--tc-layer-primary);color:var(--tc-text-primary);font-family:var(--font-family-content);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem}.tag.colored--white{background:var(--tc-layer-primary);color:var(--tc-text-primary);border:0.0625px solid var(--tc-border-tertiary)}.tag.colored--black{color:var(--tc-text-primary-dark);background:var(--tc-layer-primary-dark);border:0.0625px solid var(--tc-border-primary)}.tag.colored--yellow{background:var(--tc-yellow-20);color:var(--tc-text-primary);border:0.0625px solid var(--tc-border-tertiary)}.theme-dark{background:var(--tc-layer-primary-dark);border:0.0625rem solid var(--tc-border-quaternary-dark)}.theme-dark .title{color:var(--tc-text-primary-dark)}.theme-dark .subtitle{color:var(--tc-text-primary-dark)}.theme-dark .tag:not(.colored){color:var(--tc-text-primary-dark);background:var(--tc-layer-primary-dark);border:0.0625px solid var(--tc-border-primary)}@media all and (min-width: 48rem){.card{width:var(--card-width-tablet);height:var(--card-height-tablet)}.card.size-S{width:var(--card-width-tablet);height:var(--card-height-tablet)}.card.size-M{width:100%}.card.size-M .image{width:100%}.card.size-M.carousel-true{width:44rem}.card.size-XL,.card.size-L{width:100%;flex-direction:row;gap:0}.card.size-XL .image,.card.size-L .image{width:60%;height:100%}.card.size-XL .button,.card.size-L .button{margin-top:0}.card.size-XL.position-right,.card.size-L.position-right{flex-direction:row-reverse}.card.size-XL.carousel-true,.card.size-L.carousel-true{width:44rem}.image{width:var(--card-width-tablet);height:var(--card-width-tablet)}.title{font-size:1.5rem;line-height:1.75rem;max-height:3.5rem}.tag{font-size:0.875rem;line-height:1.25rem;letter-spacing:-0.003125rem}}@media all and (min-width: 90rem){.card.size-M{width:100%}.card.size-M.carousel-true{width:39.375rem}.card.size-L{width:100%;flex-direction:row;gap:0}.card.size-L .image{width:62%;height:100%}.card.size-L .button{margin-top:0}.card.size-L.position-right{flex-direction:row-reverse}.card.size-L.carousel-true{width:57.25rem}.card.size-XL .image{width:64%}.card.size-XL.carousel-true{width:80.25rem}}@media all and (min-width: 120rem){.card{width:var(--card-width-desktop);height:var(--card-height-desktop)}.card.size-S{width:var(--card-width-desktop);height:var(--card-height-desktop)}.card.size-L.carousel-true{width:83.125rem}.card.size-XL .image{width:72%}.card.size-XL.carousel-true{width:110.25rem}.image{width:var(--card-width-desktop);height:var(--card-width-desktop)}.title{font-size:1.75rem;line-height:2rem;max-height:4rem}.subtitle{font-size:1rem;line-height:1.5rem;letter-spacing:-0.00625rem;max-height:3rem}}";
 const TetDynamicCardStyle0 = tetDynamicCardCss;
 
 const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard extends H {
@@ -57,14 +57,15 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
     rootElementRef = null;
     BREAKPOINTS = {
         MOBILE: 768,
+        TABLET_SMALL: 1024,
         TABLET: 1440,
         DESKTOP: 1920
     };
     CARD_SIZES = {
         standard: {
-            'S': 'fit-content',
-            'M': 'calc(50% - 0.75rem)',
-            'XL': '100%',
+            S: 'fit-content',
+            M: 'calc(50% - 0.75rem)',
+            XL: '100%'
         },
         responsive: {
             mobile: '100%',
@@ -73,27 +74,13 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
         }
     };
     getCardSize(width) {
-        if (this.originalSize === 'L') {
-            if (width < this.BREAKPOINTS.MOBILE) {
-                return (this.sizeChangeBreakpoint === 'Mob' || this.sizeChangeBreakpoint === 'Tab') ? 'S' : 'XL';
-            }
-            else if (width < this.BREAKPOINTS.TABLET) {
-                return this.sizeChangeBreakpoint === 'Tab' ? 'S' : 'XL';
-            }
-            else {
-                return this.originalSize;
-            }
-        }
-        else if (this.originalSize === 'M') {
-            if (width < this.BREAKPOINTS.MOBILE) {
-                return (this.sizeChangeBreakpoint === 'Mob' || this.sizeChangeBreakpoint === 'Tab') ? 'S' : 'XL';
-            }
-            else if (width < this.BREAKPOINTS.TABLET) {
-                return this.sizeChangeBreakpoint === 'Tab' ? 'S' : this.originalSize;
-            }
-            else {
-                return this.originalSize;
-            }
+        if (width < this.BREAKPOINTS.MOBILE)
+            return 'XL';
+        if (width < this.BREAKPOINTS.TABLET_SMALL)
+            return 'M';
+        const isAdaptiveSize = this.originalSize === 'L' || this.originalSize === 'M';
+        if (isAdaptiveSize && width < this.BREAKPOINTS.TABLET) {
+            return this.sizeChangeBreakpoint === 'Tab' ? 'S' : this.originalSize;
         }
         return this.originalSize;
     }
@@ -112,36 +99,21 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
         }
     }
     getCardWidth(size, width) {
-        if (this.isInCarousel) {
+        if (this.isInCarousel)
             return 'fit-content';
-        }
-        const adaptiveSize = this.originalSize === 'L' || this.originalSize === 'M';
-        if (width < this.BREAKPOINTS.MOBILE) {
-            if (adaptiveSize && (this.sizeChangeBreakpoint === 'Mob' || this.sizeChangeBreakpoint === 'Tab')) {
-                return 'fit-content';
-            }
-            // Special handling
-            if (size === 'L' || size === 'M') {
-                return this.CARD_SIZES.responsive.mobile;
-            }
-        }
-        else if (width < this.BREAKPOINTS.TABLET) {
-            if (adaptiveSize && this.sizeChangeBreakpoint === 'Tab') {
+        if (width < this.BREAKPOINTS.MOBILE)
+            return this.CARD_SIZES.responsive.mobile;
+        const isAdaptiveSize = this.originalSize === 'L' || this.originalSize === 'M';
+        if (width < this.BREAKPOINTS.TABLET) {
+            if (isAdaptiveSize && this.sizeChangeBreakpoint === 'Tab')
                 return 'fit-content';
-            }
-            if (size === 'L') {
+            if (size === 'M')
+                return this.CARD_SIZES.standard.M;
+            if (size === 'L')
                 return this.CARD_SIZES.responsive.tablet;
-            }
         }
-        else if (width < this.BREAKPOINTS.DESKTOP) {
-            if (size === 'L') {
-                return this.CARD_SIZES.responsive.tablet;
-            }
-        }
-        else {
-            if (size === 'L') {
-                return this.CARD_SIZES.responsive.desktop;
-            }
+        else if (size === 'L') {
+            return width < this.BREAKPOINTS.DESKTOP ? this.CARD_SIZES.responsive.tablet : this.CARD_SIZES.responsive.desktop;
         }
         return this.CARD_SIZES.standard[size] || 'fit-content';
     }
@@ -176,7 +148,7 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
     }
     handleClick = (event) => {
         const path = event.composedPath();
-        const isButtonClick = path.some(el => el instanceof H && el.classList?.contains('button'));
+        const isButtonClick = path.some((el) => el instanceof H && el.classList?.contains('button'));
         if (!isButtonClick) {
             if (this.buttonRef && this.linkHref) {
                 const button = this.buttonRef.shadowRoot?.querySelector('button');
@@ -191,31 +163,39 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
     };
     renderTags() {
         const dateTagColor = this.theme === 'dark' ? this.dateTagColorDark : this.dateTagColorLight;
-        return (h("div", { class: "tags-container", part: "tags" }, this.tags?.length > 0 && (h("div", { class: "tags" }, this.tags.map(tag => (h("span", { class: "tag" }, tag))))), this.dateTag && (h("div", { class: "tags" }, h("div", { class: `tag colored colored--${dateTagColor}`, ref: (elm) => { this.dateTagColorRef = elm; } }, h("span", { class: "date-tag-text" }, this.dateTag))))));
+        return (h("div", { class: "tags-container", part: "tags" }, this.tags?.length > 0 && (h("div", { class: "tags" }, this.tags.map((tag) => (h("span", { class: "tag" }, tag))))), this.dateTag && (h("div", { class: "tags" }, h("div", { class: `tag colored colored--${dateTagColor}`, ref: (elm) => {
+                this.dateTagColorRef = elm;
+            } }, h("span", { class: "date-tag-text" }, this.dateTag))))));
     }
     renderPrice() {
         if (!this.priceTagOptions?.show)
             return null;
-        return (h("div", { class: "price", part: "price" }, h("tet-price-view", { ref: elm => { this.priceViewRef = elm; }, font: this.priceTagOptions.font || "Gilroy, Arial, sans-serif", background: this.priceTagOptions.background, staticColors: this.priceTagOptions.isStatic, theme: this.theme, size: "S", "heading-text": this.priceTagOptions.headingText, "price-type": this.priceTagOptions.priceType, "euro-price": this.priceTagOptions.euroPrice?.toString(), "cents-price": this.priceTagOptions.centsPrice?.toString(), "footer-text": this.priceTagOptions.footerText, "footer-text-type": this.priceTagOptions.footerTextType })));
+        return (h("div", { class: "price", part: "price" }, h("tet-price-view", { ref: (elm) => {
+                this.priceViewRef = elm;
+            }, font: this.priceTagOptions.font || 'Gilroy, Arial, sans-serif', background: this.priceTagOptions.background, staticColors: this.priceTagOptions.isStatic, theme: this.theme, size: "S", "heading-text": this.priceTagOptions.headingText, "price-type": this.priceTagOptions.priceType, "euro-price": this.priceTagOptions.euroPrice?.toString(), "cents-price": this.priceTagOptions.centsPrice?.toString(), "footer-text": this.priceTagOptions.footerText, "footer-text-type": this.priceTagOptions.footerTextType })));
     }
     renderButton() {
         if (!this.linkText)
             return null;
         const buttonProps = {
-            type: 'primary',
-            size: 'small',
-            theme: this.theme,
-            url: this.linkHref,
+            'type': 'primary',
+            'size': 'small',
+            'theme': this.theme,
+            'url': this.linkHref,
             'url-target': this.linkNewTab ? '_blank' : '_self',
             'accessibility-label': this.linkText
         };
-        return (h("div", { class: "button", part: "button" }, h("tet-button", { ...buttonProps, ref: elm => { this.buttonRef = elm; } }, this.linkText)));
+        return (h("div", { class: "button", part: "button" }, h("tet-button", { ...buttonProps, ref: (elm) => {
+                this.buttonRef = elm;
+            } }, this.linkText)));
     }
     render() {
-        return (h(Host, { key: '205f5179423b98cb0e6a402a978de60373f91949', class: {
+        return (h(Host, { key: 'e835560322a1509753b6391ff1148137f2669395', class: {
                 'dynamic-card': true,
                 'is-focused': this.isFocused
-            }, "data-index": this.index, ref: (elm) => { this.rootElementRef = elm; } }, h("div", { key: '03c41e05dd26dd306389c5d67d38162e01b94eb3', class: `card
+            }, "data-index": this.index, ref: (elm) => {
+                this.rootElementRef = elm;
+            } }, h("div", { key: '9155b5ea0293ef39c54f8d66c0df6c2931cf3d52', class: `card
             theme-${this.theme}
             size-${this.currentSize}
             position-${this.pictureLayoutShiftPosition}
@@ -223,7 +203,7 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
           `, onClick: this.handleClick, onKeyUp: (event) => {
                 if (event.key === 'Enter')
                     this.handleClick(event);
-            }, tabindex: 0, part: "card", "aria-labelledby": this.cardTitle }, h("div", { key: 'cf9e6bd3a4cb4ca86296d5d7194d86e3d8640c8f', class: "image", part: "image" }, h("slot", { key: '588a5110fa086136b3c6451ce09fac05cdc915af', name: "image" }), this.renderPrice(), this.renderTags()), h("div", { key: 'fd40a3a0a20284a9007baf58262b4edfe2da0a08', class: "content-container" }, h("div", { key: '4e1f956e4337ce6c070c6b96a0d23e71164b216a', class: "content", part: "content" }, this.cardTitle && (h("h3", { key: '4b3da4a9a7d6891b18f853206e7e2edcbb470e6b', class: "title", part: "title" }, this.cardTitle)), this.subtitle && (h("p", { key: '06bf2fcc83e4b39138a97793ac416e8eed119493', class: "subtitle", part: "subtitle" }, this.subtitle))), this.renderButton()))));
+            }, tabindex: 0, part: "card", "aria-labelledby": this.cardTitle }, h("div", { key: '6923cd94ffceae462b08d99e82a9c3f0dae21f84', class: "image", part: "image" }, h("slot", { key: '4fe4f5e2c4edffb8229073f6cf59a0c4cac6fc43', name: "image" }), this.renderPrice(), this.renderTags()), h("div", { key: '2fda1db6c8b3828caf41e20aab7e09033581e007', class: "content-container" }, h("div", { key: '5b5c81bd36839cd84ea23f2872007026e24b957e', class: "content", part: "content" }, this.cardTitle && (h("h3", { key: '6b52cd192997cd9bbbab8ff4d9c19e31ead757c9', class: "title", part: "title" }, this.cardTitle)), this.subtitle && (h("p", { key: '2dd27ca9c13653ef5542950307fdd4583dd67fb9', class: "subtitle", part: "subtitle" }, this.subtitle))), this.renderButton()))));
     }
     static get watchers() { return {
         "theme": ["onThemeChanged"],