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

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

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-37ed3ebb.js';
-import { d as defineCustomElement$4 } from './p-68f0e894.js';
-import { d as defineCustomElement$3 } from './p-b0d6ed2e.js';
-import { d as defineCustomElement$2 } from './p-530ef38b.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-c9d79ad4.js';
+import { d as defineCustomElement$4 } from './p-36c5e434.js';
+import { d as defineCustomElement$3 } from './p-9ee3e98b.js';
+import { d as defineCustomElement$2 } from './p-f44eb3d8.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 TetDynamicCardStyle0 = tetDynamicCardCss;
@@ -12,65 +12,6 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
         this.__registerHost();
         this.__attachShadow();
         this.tetDynamicCardClickEvent = createEvent(this, "tetDynamicCardClickEvent", 7);
-        this.priceViewRef = null;
-        this.buttonRef = null;
-        this.dateTagColorRef = null;
-        this.rootElementRef = null;
-        this.BREAKPOINTS = {
-            MOBILE: 768,
-            TABLET: 1440,
-            DESKTOP: 1920
-        };
-        this.CARD_SIZES = {
-            standard: {
-                'S': 'fit-content',
-                'M': 'calc(50% - 0.75rem)',
-                'XL': '100%',
-            },
-            responsive: {
-                mobile: '100%',
-                tablet: 'calc(100% - var(--card-width-tablet) - 1.5rem - 2px)',
-                desktop: 'calc(100% - var(--card-width-desktop) - 1.5rem - 2px)',
-            }
-        };
-        this.resizeCard = (width) => {
-            this.currentSize = this.getCardSize(width);
-            this.rootElementRef.style.minWidth = this.getMinWidth(width);
-            this.rootElementRef.style.width = this.getCardWidth(this.currentSize, width);
-        };
-        this.resizeObserver = new ResizeObserver(() => {
-            var _a, _b, _c, _d, _e, _f;
-            const width = window.innerWidth;
-            this.resizeCard(width);
-            if (width < 768) {
-                (_a = this.priceViewRef) === null || _a === void 0 ? void 0 : _a.setAttribute('size', 'S');
-                (_b = this.buttonRef) === null || _b === void 0 ? void 0 : _b.setAttribute('size', 'small');
-            }
-            else if (width < 1920) {
-                (_c = this.priceViewRef) === null || _c === void 0 ? void 0 : _c.setAttribute('size', 'M');
-                (_d = this.buttonRef) === null || _d === void 0 ? void 0 : _d.setAttribute('size', 'medium');
-            }
-            else {
-                (_e = this.priceViewRef) === null || _e === void 0 ? void 0 : _e.setAttribute('size', 'M');
-                (_f = this.buttonRef) === null || _f === void 0 ? void 0 : _f.setAttribute('size', 'large');
-            }
-        });
-        this.handleClick = (event) => {
-            var _a;
-            const path = event.composedPath();
-            const isButtonClick = path.some(el => { var _a; return el instanceof H && ((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains('button')); });
-            if (!isButtonClick) {
-                if (this.buttonRef && this.linkHref) {
-                    const button = (_a = this.buttonRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
-                    if (button) {
-                        button.click();
-                    }
-                }
-            }
-            else {
-                this.tetDynamicCardClickEvent.emit();
-            }
-        };
         this.theme = 'light';
         this.size = 'S';
         this.sizeChangeBreakpoint = 'None';
@@ -95,20 +36,42 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
         this.currentSize = null;
     }
     onThemeChanged(theme) {
-        var _a, _b, _c, _d;
         if (theme === 'dark') {
-            (_a = this.dateTagColorRef) === null || _a === void 0 ? void 0 : _a.classList.remove(`tag--${this.dateTagColorLight}`);
-            (_b = this.dateTagColorRef) === null || _b === void 0 ? void 0 : _b.classList.add(`tag--${this.dateTagColorDark}`);
+            this.dateTagColorRef?.classList.remove(`tag--${this.dateTagColorLight}`);
+            this.dateTagColorRef?.classList.add(`tag--${this.dateTagColorDark}`);
         }
         else {
-            (_c = this.dateTagColorRef) === null || _c === void 0 ? void 0 : _c.classList.remove(`tag--${this.dateTagColorDark}`);
-            (_d = this.dateTagColorRef) === null || _d === void 0 ? void 0 : _d.classList.add(`tag--${this.dateTagColorLight}`);
+            this.dateTagColorRef?.classList.remove(`tag--${this.dateTagColorDark}`);
+            this.dateTagColorRef?.classList.add(`tag--${this.dateTagColorLight}`);
         }
     }
     onSizeChange() {
         this.originalSize = this.size;
         this.resizeCard(window.innerWidth);
     }
+    /** Event emitted when the card is clicked */
+    tetDynamicCardClickEvent;
+    priceViewRef = null;
+    buttonRef = null;
+    dateTagColorRef = null;
+    rootElementRef = null;
+    BREAKPOINTS = {
+        MOBILE: 768,
+        TABLET: 1440,
+        DESKTOP: 1920
+    };
+    CARD_SIZES = {
+        standard: {
+            'S': 'fit-content',
+            'M': 'calc(50% - 0.75rem)',
+            'XL': '100%',
+        },
+        responsive: {
+            mobile: '100%',
+            tablet: 'calc(100% - var(--card-width-tablet) - 1.5rem - 2px)',
+            desktop: 'calc(100% - var(--card-width-desktop) - 1.5rem - 2px)',
+        }
+    };
     getCardSize(width) {
         if (this.originalSize === 'L') {
             if (width < this.BREAKPOINTS.MOBILE) {
@@ -182,6 +145,27 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
         }
         return this.CARD_SIZES.standard[size] || 'fit-content';
     }
+    resizeCard = (width) => {
+        this.currentSize = this.getCardSize(width);
+        this.rootElementRef.style.minWidth = this.getMinWidth(width);
+        this.rootElementRef.style.width = this.getCardWidth(this.currentSize, width);
+    };
+    resizeObserver = new ResizeObserver(() => {
+        const width = window.innerWidth;
+        this.resizeCard(width);
+        if (width < 768) {
+            this.priceViewRef?.setAttribute('size', 'S');
+            this.buttonRef?.setAttribute('size', 'small');
+        }
+        else if (width < 1920) {
+            this.priceViewRef?.setAttribute('size', 'M');
+            this.buttonRef?.setAttribute('size', 'medium');
+        }
+        else {
+            this.priceViewRef?.setAttribute('size', 'M');
+            this.buttonRef?.setAttribute('size', 'large');
+        }
+    });
     componentWillLoad() {
         this.originalSize = this.size;
         this.currentSize = this.size;
@@ -190,16 +174,29 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
         this.onThemeChanged(this.theme);
         this.resizeObserver.observe(window.document.body);
     }
+    handleClick = (event) => {
+        const path = event.composedPath();
+        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');
+                if (button) {
+                    button.click();
+                }
+            }
+        }
+        else {
+            this.tetDynamicCardClickEvent.emit();
+        }
+    };
     renderTags() {
-        var _a;
         const dateTagColor = this.theme === 'dark' ? this.dateTagColorDark : this.dateTagColorLight;
-        return (h("div", { class: "tags-container", part: "tags" }, ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.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() {
-        var _a, _b, _c;
-        if (!((_a = this.priceTagOptions) === null || _a === void 0 ? void 0 : _a.show))
+        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": (_b = this.priceTagOptions.euroPrice) === null || _b === void 0 ? void 0 : _b.toString(), "cents-price": (_c = this.priceTagOptions.centsPrice) === null || _c === void 0 ? void 0 : _c.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)
@@ -212,7 +209,7 @@ const TetDynamicCard$1 = /*@__PURE__*/ proxyCustomElement(class TetDynamicCard e
             'url-target': this.linkNewTab ? '_blank' : '_self',
             'accessibility-label': this.linkText
         };
-        return (h("div", { class: "button", part: "button" }, h("tet-button", Object.assign({}, 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: '2c7a5efbaf1b36a29465e35322207afbc991bbae', class: {

package/dist/components/tet-expandable-input.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-c9d79ad4.js';
 import { g as getConvertedPixels } from './p-165a8492.js';
-import { d as defineCustomElement$3 } from './p-b0d6ed2e.js';
-import { d as defineCustomElement$2 } from './p-df1fe72c.js';
+import { d as defineCustomElement$3 } from './p-9ee3e98b.js';
+import { d as defineCustomElement$2 } from './p-754dce81.js';
 
 const tetExpandableInputCss = "@font-face{font-family:Avenir Next;src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix);src:url(assets/fonts/8e7462a9501f48c43c58f870188b3fb2.eot?#iefix) format(\"eot\"),url(assets/fonts/3c3e10968ffc97c2a52c5830f9886d1f.woff2) format(\"woff2\"),url(assets/fonts/660fbf858d30d7685fa4b166080f5980.woff) format(\"woff\"),url(assets/fonts/2b7748589092fd1a10b806abdfb562ff.ttf) format(\"truetype\");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix);src:url(assets/fonts/d5e25ad69d0ea31f3b8f66d634ca40fe.eot?#iefix) format(\"eot\"),url(assets/fonts/aad36ecead30948bb30fe0ef818b749c.woff2) format(\"woff2\"),url(assets/fonts/c437d7752feaf3f056bbf8613e898d3a.woff) format(\"woff\"),url(assets/fonts/b8df4d02ef5de13a813917a85bc4a9c4.ttf) format(\"truetype\");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix);src:url(assets/fonts/046190c9a2f724b925df848737b03819.eot?#iefix) format(\"eot\"),url(assets/fonts/4d52f8276a74ea8efbad833ed790367c.woff2) format(\"woff2\"),url(assets/fonts/a067695dd1b87e927f4056c040d84669.woff) format(\"woff\"),url(assets/fonts/510a664af9771b72d4ce5e637109ca3c.ttf) format(\"truetype\");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix);src:url(assets/fonts/0715de188f56c99aa615905f7e06292e.eot?#iefix) format(\"eot\"),url(assets/fonts/63f5acc71d9852468683a4bfe824a28f.woff2) format(\"woff2\"),url(assets/fonts/ed94c737da267752ce0abd79bb003ff6.woff) format(\"woff\"),url(assets/fonts/6302f55a6dc6b12365177dc89b7d63cf.ttf) format(\"truetype\");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix);src:url(assets/fonts/3f76abc23eef0596c499840db84213bb.eot?#iefix) format(\"eot\"),url(assets/fonts/1fe7da97fe9dbe1349aca9b54b5fdf69.woff2) format(\"woff2\"),url(assets/fonts/dacc6a84278e221422902af99579ada5.woff) format(\"woff\"),url(assets/fonts/e530c573663a3a07243d303fbf7db508.ttf) format(\"truetype\");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Avenir Next;src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix);src:url(assets/fonts/75f8489ba53f19968feaa3e2eb78c569.eot?#iefix) format(\"eot\"),url(assets/fonts/93ec0034623fc696601ab99aba652d4c.woff2) format(\"woff2\"),url(assets/fonts/d73c8eb1c13abe1237366aa3ee829a59.woff) format(\"woff\"),url(assets/fonts/7b6dcef99f3f4b23346e23925ec8678f.ttf) format(\"truetype\");font-weight:600;font-style:italic;font-display:swap}.tet-icon{font-family:Tet Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}@font-face{font-family:Tet Icons;src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot);src:url(assets/fonts/d2ce51cdcd0b9707af186f8d50023d23.eot?#iefix) format(\"embedded-opentype\"),url(assets/fonts/25f10ef322a1220b2e9e11db38b73892.woff2) format(\"woff2\"),url(assets/fonts/fed75ac1edcf1c25cdd8612d2c365f9a.woff) format(\"woff\"),url(assets/fonts/df7fbe67cabb13cb837172a73c46378a.ttf) format(\"truetype\"),url(assets/fonts/5486d8c87e2abc6c13ed952a6cc96658.svg#tet-icons) format(\"svg\");font-weight:400;font-style:normal}.tet-icon:before{content:\"\\E84E\"}.tet-icon--sm{font-size:1.125rem}.tet-icon--md{font-size:1.5rem}.tet-icon--lg{font-size:2.25rem}.tet-icon--xl{font-size:3rem}.tet-icon--xxl{font-size:4rem}.tet-icon--0{font-size:0}.tet-icon--1{font-size:.0625rem}.tet-icon--2{font-size:.125rem}.tet-icon--3{font-size:.1875rem}.tet-icon--4{font-size:.25rem}.tet-icon--5{font-size:.3125rem}.tet-icon--6{font-size:.375rem}.tet-icon--7{font-size:.4375rem}.tet-icon--8{font-size:.5rem}.tet-icon--9{font-size:.5625rem}.tet-icon--10{font-size:.625rem}.tet-icon--11{font-size:.6875rem}.tet-icon--12{font-size:.75rem}.tet-icon--13{font-size:.8125rem}.tet-icon--14{font-size:.875rem}.tet-icon--15{font-size:.9375rem}.tet-icon--16{font-size:1rem}.tet-icon--17{font-size:1.0625rem}.tet-icon--18{font-size:1.125rem}.tet-icon--19{font-size:1.1875rem}.tet-icon--20{font-size:1.25rem}.tet-icon--21{font-size:1.3125rem}.tet-icon--22{font-size:1.375rem}.tet-icon--23{font-size:1.4375rem}.tet-icon--24{font-size:1.5rem}.tet-icon--25{font-size:1.5625rem}.tet-icon--26{font-size:1.625rem}.tet-icon--27{font-size:1.6875rem}.tet-icon--28{font-size:1.75rem}.tet-icon--29{font-size:1.8125rem}.tet-icon--30{font-size:1.875rem}.tet-icon--31{font-size:1.9375rem}.tet-icon--32{font-size:2rem}.tet-icon--33{font-size:2.0625rem}.tet-icon--34{font-size:2.125rem}.tet-icon--35{font-size:2.1875rem}.tet-icon--36{font-size:2.25rem}.tet-icon--37{font-size:2.3125rem}.tet-icon--38{font-size:2.375rem}.tet-icon--39{font-size:2.4375rem}.tet-icon--40{font-size:2.5rem}.tet-icon--41{font-size:2.5625rem}.tet-icon--42{font-size:2.625rem}.tet-icon--43{font-size:2.6875rem}.tet-icon--44{font-size:2.75rem}.tet-icon--45{font-size:2.8125rem}.tet-icon--46{font-size:2.875rem}.tet-icon--47{font-size:2.9375rem}.tet-icon--48{font-size:3rem}.tet-icon--49{font-size:3.0625rem}.tet-icon--50{font-size:3.125rem}.tet-icon--51{font-size:3.1875rem}.tet-icon--52{font-size:3.25rem}.tet-icon--53{font-size:3.3125rem}.tet-icon--54{font-size:3.375rem}.tet-icon--55{font-size:3.4375rem}.tet-icon--56{font-size:3.5rem}.tet-icon--57{font-size:3.5625rem}.tet-icon--58{font-size:3.625rem}.tet-icon--59{font-size:3.6875rem}.tet-icon--60{font-size:3.75rem}.tet-icon--61{font-size:3.8125rem}.tet-icon--62{font-size:3.875rem}.tet-icon--63{font-size:3.9375rem}.tet-icon--64{font-size:4rem}.tet-icon--65{font-size:4.0625rem}.tet-icon--66{font-size:4.125rem}.tet-icon--67{font-size:4.1875rem}.tet-icon--68{font-size:4.25rem}.tet-icon--69{font-size:4.3125rem}.tet-icon--70{font-size:4.375rem}.tet-icon--71{font-size:4.4375rem}.tet-icon--72{font-size:4.5rem}.tet-icon--73{font-size:4.5625rem}.tet-icon--74{font-size:4.625rem}.tet-icon--75{font-size:4.6875rem}.tet-icon--76{font-size:4.75rem}.tet-icon--77{font-size:4.8125rem}.tet-icon--78{font-size:4.875rem}.tet-icon--79{font-size:4.9375rem}.tet-icon--80{font-size:5rem}.tet-icon--81{font-size:5.0625rem}.tet-icon--82{font-size:5.125rem}.tet-icon--83{font-size:5.1875rem}.tet-icon--84{font-size:5.25rem}.tet-icon--85{font-size:5.3125rem}.tet-icon--86{font-size:5.375rem}.tet-icon--87{font-size:5.4375rem}.tet-icon--88{font-size:5.5rem}.tet-icon--89{font-size:5.5625rem}.tet-icon--90{font-size:5.625rem}.tet-icon--91{font-size:5.6875rem}.tet-icon--92{font-size:5.75rem}.tet-icon--93{font-size:5.8125rem}.tet-icon--94{font-size:5.875rem}.tet-icon--95{font-size:5.9375rem}.tet-icon--96{font-size:6rem}.tet-icon--97{font-size:6.0625rem}.tet-icon--98{font-size:6.125rem}.tet-icon--99{font-size:6.1875rem}.tet-icon--100{font-size:6.25rem}.tet-icon--101{font-size:6.3125rem}.tet-icon__add:before{content:\"\\E800\"}.tet-icon__alert-circled:before{content:\"\\E801\"}.tet-icon__alert:before{content:\"\\E802\"}.tet-icon__bank:before{content:\"\\E803\"}.tet-icon__box:before{content:\"\\E804\"}.tet-icon__download:before{content:\"\\E805\"}.tet-icon__burger:before{content:\"\\E806\"}.tet-icon__cancel:before{content:\"\\E807\"}.tet-icon__printer:before{content:\"\\E808\"}.tet-icon__cart-add:before{content:\"\\E809\"}.tet-icon__cart-remove:before{content:\"\\E80A\"}.tet-icon__cart:before{content:\"\\E80B\"}.tet-icon__chat:before{content:\"\\E80C\"}.tet-icon__arrow-up:before{content:\"\\E80D\"}.tet-icon__calendar:before{content:\"\\E80E\"}.tet-icon__help-circled:before{content:\"\\E80F\"}.tet-icon__edit:before{content:\"\\E810\"}.tet-icon__external-link:before{content:\"\\E811\"}.tet-icon__gift:before{content:\"\\E812\"}.tet-icon__person:before{content:\"\\E813\"}.tet-icon__heart:before{content:\"\\E814\"}.tet-icon__language:before{content:\"\\E815\"}.tet-icon__help:before{content:\"\\E816\"}.tet-icon__home-1:before{content:\"\\E817\"}.tet-icon__location:before{content:\"\\E818\"}.tet-icon__home-3:before{content:\"\\E819\"}.tet-icon__chart-even:before{content:\"\\E81A\"}.tet-icon__info-2:before{content:\"\\E81B\"}.tet-icon__key:before{content:\"\\E81C\"}.tet-icon__info:before{content:\"\\E81D\"}.tet-icon__lock-opened:before{content:\"\\E81E\"}.tet-icon__lock-outlined:before{content:\"\\E81F\"}.tet-icon__lock:before{content:\"\\E820\"}.tet-icon__laptop-filled:before{content:\"\\E821\"}.tet-icon__mail:before{content:\"\\E822\"}.tet-icon__options:before{content:\"\\E823\"}.tet-icon__chart-uneven:before{content:\"\\E824\"}.tet-icon__mail-2:before{content:\"\\E825\"}.tet-icon__remove:before{content:\"\\E826\"}.tet-icon__mobile-filled:before{content:\"\\E827\"}.tet-icon__ilu-calendar-check:before{content:\"\\E828\"}.tet-icon__settings-outlined:before{content:\"\\E829\"}.tet-icon__tablet:before{content:\"\\E82A\"}.tet-icon__thumb-up:before{content:\"\\E82B\"}.tet-icon__ilu-purchase:before{content:\"\\E82C\"}.tet-icon__chart-even-outlined:before{content:\"\\E82D\"}.tet-icon__movie:before{content:\"\\E82E\"}.tet-icon__percent:before{content:\"\\E82F\"}.tet-icon__ilu-change-whenever:before{content:\"\\E830\"}.tet-icon__truck:before{content:\"\\E831\"}.tet-icon__zero:before{content:\"\\E832\"}.tet-icon__attach:before{content:\"\\E833\"}.tet-icon__cloud-done:before{content:\"\\E834\"}.tet-icon__cloud-download:before{content:\"\\E835\"}.tet-icon__cloud-upload:before{content:\"\\E836\"}.tet-icon__cloud:before{content:\"\\E837\"}.tet-icon__folder:before{content:\"\\E838\"}.tet-icon__remote:before{content:\"\\E839\"}.tet-icon__router:before{content:\"\\E83A\"}.tet-icon__shield-filled:before{content:\"\\E83B\"}.tet-icon__shield:before{content:\"\\E83C\"}.tet-icon__ilu-devices:before{content:\"\\E83D\"}.tet-icon__ilu-get-points:before{content:\"\\E83E\"}.tet-icon__tv:before{content:\"\\E83F\"}.tet-icon__ilu-internet:before{content:\"\\E840\"}.tet-icon__wifi-outlined:before{content:\"\\E841\"}.tet-icon__wifi:before{content:\"\\E842\"}.tet-icon__description-outlined:before{content:\"\\E843\"}.tet-icon__laptop:before{content:\"\\E844\"}.tet-icon__chart-uneven-outlined:before{content:\"\\E845\"}.tet-icon__meter:before{content:\"\\E846\"}.tet-icon__mobile:before{content:\"\\E847\"}.tet-icon__phone:before{content:\"\\E848\"}.tet-icon__plug-filled:before{content:\"\\E849\"}.tet-icon__plug:before{content:\"\\E84A\"}.tet-icon__print:before{content:\"\\E84B\"}.tet-icon__camera:before{content:\"\\E84C\"}.tet-icon__clock:before{content:\"\\E84D\"}.tet-icon__placeholder:before{content:\"\\E84E\"}.tet-icon__tv-filled:before{content:\"\\E84F\"}.tet-icon__arrow-down:before{content:\"\\E850\"}.tet-icon__arrow-left:before{content:\"\\E851\"}.tet-icon__arrow-right:before{content:\"\\E852\"}.tet-icon__description:before{content:\"\\E853\"}.tet-icon__login:before{content:\"\\E854\"}.tet-icon__check:before{content:\"\\E855\"}.tet-icon__chevron-down:before{content:\"\\E856\"}.tet-icon__chevron-left:before{content:\"\\E857\"}.tet-icon__chevron-right:before{content:\"\\E858\"}.tet-icon__chevron-up:before{content:\"\\E859\"}.tet-icon__close-circled:before{content:\"\\E85A\"}.tet-icon__close:before{content:\"\\E85B\"}.tet-icon__more-horizontal:before{content:\"\\E85C\"}.tet-icon__more-vertical:before{content:\"\\E85D\"}.tet-icon__refresh:before{content:\"\\E85E\"}.tet-icon__facebook:before{content:\"\\E85F\"}.tet-icon__instagram:before{content:\"\\E860\"}.tet-icon__linkedin:before{content:\"\\E861\"}.tet-icon__people:before{content:\"\\E862\"}.tet-icon__logout:before{content:\"\\E863\"}.tet-icon__share:before{content:\"\\E864\"}.tet-icon__twitter:before{content:\"\\E865\"}.tet-icon__cancel-filled:before{content:\"\\E866\"}.tet-icon__done:before{content:\"\\E867\"}.tet-icon__star-filled:before{content:\"\\E868\"}.tet-icon__star:before{content:\"\\E869\"}.tet-icon__clipboard:before{content:\"\\E86A\"}.tet-icon__ilu-calendar:before{content:\"\\E86B\"}.tet-icon__check-circled:before{content:\"\\E86C\"}.tet-icon__ilu-choose-channels:before{content:\"\\E86D\"}.tet-icon__search:before{content:\"\\E86E\"}.tet-icon__warning:before{content:\"\\E86F\"}.tet-icon__ilu-clock-1:before{content:\"\\E870\"}.tet-icon__ilu-fold:before{content:\"\\E871\"}.tet-icon__ilu-letter:before{content:\"\\E872\"}.tet-icon__ilu-pay:before{content:\"\\E873\"}.tet-icon__ilu-meter:before{content:\"\\E874\"}.tet-icon__ilu-sign:before{content:\"\\E875\"}.tet-icon__smart-watch-filled:before{content:\"\\E876\"}.tet-icon__washing-machine-filled:before{content:\"\\E877\"}.tet-icon__bullet:before{content:\"\\E878\"}.tet-icon__sound:before{content:\"\\E879\"}.tet-icon__dropdown:before{content:\"\\E87A\"}.tet-icon__mask-pass:before{content:\"\\E87B\"}.tet-icon__select:before{content:\"\\E87C\"}.tet-icon__text-area-sizing:before{content:\"\\E87D\"}.tet-icon__unmask-pass:before{content:\"\\E87E\"}.tet-icon__bullet-small:before{content:\"\\E882\"}.tet-icon__electric-bolt:before{content:\"\\E880\"}.tet-icon__sun:before{content:\"\\E881\"}:host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{display:block;outline:none;width:100%;--expandable-input-font-size:1rem;--expandable-input-border-radius:2rem;--expandable-input-font-family:Inter;--expandable-input-font:400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;--expandable-input-container-justify-content:flex-end;--expandable-input-container-height:2.75rem;--expandable-input-container-close-padding:0.75rem 1rem;--expandable-input-desktop-collapsed-icon-left-padding:0.75rem;--expandable-input-mobile-collapsed-icon-left-padding:0.625rem;--expandable-input-close-button-text-color:var(--tc-text-primary);--expandable-input-desktop-collapsed-border-color:var(--tc-border-quaternary);--expandable-input-desktop-collapsed-background-color:var(--tc-layer-secondary);--expandable-input-desktop-collapsed-background-hover-color:var(--tc-menu-item-hover);--expandable-input-icon-secondary-color:var(--tc-icon-secondary);--expandable-input-mobile-input-default-state-text-color:var(--tc-text-secondary)}.container{display:flex;flex-direction:row;justify-content:var(--expandable-input-container-justify-content);align-items:center;min-height:var(--expandable-input-container-height);height:var(--expandable-input-container-height)}.container.small{--expandable-input-container-height:2.25rem;--expandable-input-container-close-padding:0.5rem 0.75rem;--expandable-input-desktop-collapsed-icon-left-padding:0.5rem;--expandable-input-mobile-collapsed-icon-left-padding:0.375rem}.container.dark{--expandable-input-close-button-text-color:var(--tc-text-primary-dark);--expandable-input-desktop-collapsed-border-color:var(--tc-border-quaternary-dark);--expandable-input-desktop-collapsed-background-color:var(--tc-layer-secondary-dark);--expandable-input-desktop-collapsed-background-hover-color:var(--tc-menu-item-hover-dark);--expandable-input-icon-secondary-color:var(--tc-icon-secondary-dark);--expandable-input-mobile-input-default-state-text-color:var(--tc-text-secondary-dark)}.container .icon.icon-left{pointer-events:none}.container .input-close{display:flex;align-items:center;padding:var(--expandable-input-container-close-padding);cursor:pointer;color:var(--expandable-input-close-button-text-color);border-radius:0.625rem}.container .input-close:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125remrem;transition:outline 0s}.container .input-close.dark:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline:0.125rem solid var(--tc-blue-40-dark);outline-offset:-0.125remrem;transition:outline 0s}.container .input-close.hide{display:none}.container .input-wrapper{display:flex;max-width:100%;width:18.375rem;gap:0.5rem}.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-right,.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-left{--input-icon-color:var(--expandable-input-icon-secondary-color)}.container.mobile.expanded tet-input:not(:focus-within) .tet-input__base.sc-tet-input{color:var(--expandable-input-mobile-input-default-state-text-color)}.container.mobile:not(.expanded) tet-input{--input-icon-left-position:var(--expandable-input-mobile-collapsed-icon-left-padding);--input-icon-size:1.5rem}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input{--input-border-color:transparent;--input-background-color:transparent;--input-hover-background-color:transparent;--input-border-disabled:transparent;--input-disabled-background-color:transparent}.container.desktop:not(.expanded) tet-input{--input-icon-left-position:var(--expandable-input-desktop-collapsed-icon-left-padding)}.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input{--input-border-color:var(--expandable-input-desktop-collapsed-border-color);--input-background-color:var(--expandable-input-desktop-collapsed-background-color);--input-hover-background-color:var(--expandable-input-desktop-collapsed-background-hover-color);transition:background-color 300ms ease-in-out, border 300ms ease-in-out}.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input:not([disabled],.error):hover{border-color:transparent}.container.mobile tet-input,.container.desktop tet-input{--input-icon-size:1.25rem}.container.mobile:not(.expanded) .with-icon--left.sc-tet-input,.container.desktop:not(.expanded) .with-icon--left.sc-tet-input{padding-left:0}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input,.container.desktop:not(.expanded) .tet-input__base.sc-tet-input{--input-border-radius:2rem}.container.mobile:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]),.container.desktop:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]){cursor:pointer}.container.mobile.expanded .input-wrapper,.container.desktop.expanded .input-wrapper{width:100%;height:100%}.container.desktop-expanded .icon{transition:opacity 300ms, color 300ms}.container.desktop-expanded.expanded .input.with-icon--left.sc-tet-input{padding-left:2.5rem}.container.desktop-expanded.expanded .input-wrapper{width:100%;height:100%}.container.desktop-expanded.expanded .icon{transition:opacity 300ms, color 300ms}.container tet-input.tet-input{flex-grow:1;--input-font-size:var(--expandable-input-font-size);--input-border-radius:var(--expandable-input-border-radius);--input-font-family:var(--expandable-input-font-family);--input-height:var(--expandable-input-container-height)}.container tet-input.tet-input tet-icon{--icon-container-display:flex}";
 const TetExpandableInputStyle0 = tetExpandableInputCss;
@@ -18,76 +18,6 @@ const TetExpandableInput$1 = /*@__PURE__*/ proxyCustomElement(class TetExpandabl
         this.__attachShadow();
         this.beforeStateChange = createEvent(this, "before-state-change", 7);
         this.afterStateChange = createEvent(this, "after-state-change", 7);
-        /**
-         * The currently running animation
-         */
-        this.animation = null;
-        this.setupInput = () => {
-            this.handleInputEventListeners();
-            this.setupInputWidth();
-        };
-        /**
-         * The method to handle hasInputValue state.
-         */
-        this.handleHasInputValueState = (event) => {
-            const { target } = event;
-            if (target instanceof HTMLInputElement) {
-                this.hasInputValue = target.value.length > 0;
-            }
-        };
-        /**
-         * Handles closing the input when the Escape key is pressed and the input is expanded.
-         */
-        this.handleCloseInputOnEsc = (event) => {
-            if (this.expanded && event.key === 'Escape') {
-                this.host.blur();
-            }
-        };
-        /**
-         * Handles closing the input when the close button element is activated.
-         */
-        this.handleCloseButtonAction = (event) => {
-            if (event.type === 'click' ||
-                (event.type === 'keydown' && 'key' in event && (event.key === 'Enter' || event.key === ' '))) {
-                if (event.type === 'keydown') {
-                    event.preventDefault();
-                }
-                this.host.blur();
-            }
-        };
-        /**
-         * Handles the animation of the input.
-         * @param {number} animationStartWidth The width of the input before the animation.
-         * @param {number} animationEndWidth The width of the input after the animation.
-         */
-        this.animateWidth = async (animationStartWidth, animationEndWidth) => {
-            this.cancelAnimation();
-            const animationStartWidthPx = `${animationStartWidth}px`;
-            const animationEndWidthPx = `${animationEndWidth}px`;
-            const animation = this.inputWrapper.animate([
-                {
-                    width: animationStartWidthPx,
-                },
-                {
-                    // For mobile mode unexpanded width must be equal to input field height
-                    width: animationEndWidthPx,
-                },
-            ], {
-                duration: this.animationDuration,
-                fill: 'forwards',
-            });
-            this.animation = animation;
-            try {
-                if (await animation.finished) {
-                    // Commit styles on successful animation.
-                    animation.commitStyles();
-                }
-            }
-            catch (_a) {
-                // Finish animation in case of failure.
-                this.inputWrapper.style.width = animationEndWidthPx;
-            }
-        };
         this.expanded = false;
         this.hasInputValue = false;
         this.class = '';
@@ -109,6 +39,23 @@ const TetExpandableInput$1 = /*@__PURE__*/ proxyCustomElement(class TetExpandabl
         this.closeInputText = '';
         this.darkMode = false;
     }
+    /**
+     * Reference to the input element.
+     */
+    inputHtmlElement;
+    /**
+     * Reference to the input closing element.
+     */
+    closeInputHtmlElement;
+    /**
+     * Reference to the input wrapper element.
+     */
+    inputWrapper;
+    /**
+     * The currently running animation
+     */
+    animation = null;
+    get host() { return this; }
     onModeChange() {
         this.setState(this.expanded);
     }
@@ -139,19 +86,26 @@ const TetExpandableInput$1 = /*@__PURE__*/ proxyCustomElement(class TetExpandabl
      * @param changeState Determines whether the `expanded` state should be changed with animation. Optional parameter.
      */
     async setState(expanded) {
-        var _a, _b;
         if (this.disabled) {
             return;
         }
         if (expanded) {
             this.expand();
-            (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
+            this.closeInputHtmlElement?.classList.remove('hide');
         }
         else {
             this.shrink();
-            (_b = this.closeInputHtmlElement) === null || _b === void 0 ? void 0 : _b.classList.add('hide');
+            this.closeInputHtmlElement?.classList.add('hide');
         }
     }
+    /**
+     * The event emitted before the start of the expanding or shrinking animation of the input.
+     */
+    beforeStateChange;
+    /**
+     * The event emitted after the end of the expanding or shrinking animation of the input.
+     */
+    afterStateChange;
     /**
      * The handler method for the blur event.
      */
@@ -174,13 +128,16 @@ const TetExpandableInput$1 = /*@__PURE__*/ proxyCustomElement(class TetExpandabl
         this.inputHtmlElement.removeEventListener('keydown', this.handleCloseInputOnEsc);
         this.inputHtmlElement.removeEventListener('input', this.handleHasInputValueState);
     }
+    setupInput = () => {
+        this.handleInputEventListeners();
+        this.setupInputWidth();
+    };
     /**
      * The method to handle input width.
      */
     setupInputWidth() {
-        var _a;
         const minWidth = componentSizes[this.size] / 16 + 'rem';
-        (_a = this.animation) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.animation?.cancel();
         this.inputWrapper.style.width =
             this.mode !== 'desktop-expanded' ? `${minWidth}` : `${getConvertedPixels(this.closedWidth) / 16}rem`;
     }
@@ -188,6 +145,35 @@ const TetExpandableInput$1 = /*@__PURE__*/ proxyCustomElement(class TetExpandabl
         this.inputHtmlElement.addEventListener('keydown', this.handleCloseInputOnEsc);
         this.inputHtmlElement.addEventListener('input', this.handleHasInputValueState);
     }
+    /**
+     * The method to handle hasInputValue state.
+     */
+    handleHasInputValueState = (event) => {
+        const { target } = event;
+        if (target instanceof HTMLInputElement) {
+            this.hasInputValue = target.value.length > 0;
+        }
+    };
+    /**
+     * Handles closing the input when the Escape key is pressed and the input is expanded.
+     */
+    handleCloseInputOnEsc = (event) => {
+        if (this.expanded && event.key === 'Escape') {
+            this.host.blur();
+        }
+    };
+    /**
+     * Handles closing the input when the close button element is activated.
+     */
+    handleCloseButtonAction = (event) => {
+        if (event.type === 'click' ||
+            (event.type === 'keydown' && 'key' in event && (event.key === 'Enter' || event.key === ' '))) {
+            if (event.type === 'keydown') {
+                event.preventDefault();
+            }
+            this.host.blur();
+        }
+    };
     /**
      * Expands the input to the width of the host element's width
      */
@@ -235,13 +221,45 @@ const TetExpandableInput$1 = /*@__PURE__*/ proxyCustomElement(class TetExpandabl
             });
         });
     }
+    /**
+     * Handles the animation of the input.
+     * @param {number} animationStartWidth The width of the input before the animation.
+     * @param {number} animationEndWidth The width of the input after the animation.
+     */
+    animateWidth = async (animationStartWidth, animationEndWidth) => {
+        this.cancelAnimation();
+        const animationStartWidthPx = `${animationStartWidth}px`;
+        const animationEndWidthPx = `${animationEndWidth}px`;
+        const animation = this.inputWrapper.animate([
+            {
+                width: animationStartWidthPx,
+            },
+            {
+                // For mobile mode unexpanded width must be equal to input field height
+                width: animationEndWidthPx,
+            },
+        ], {
+            duration: this.animationDuration,
+            fill: 'forwards',
+        });
+        this.animation = animation;
+        try {
+            if (await animation.finished) {
+                // Commit styles on successful animation.
+                animation.commitStyles();
+            }
+        }
+        catch {
+            // Finish animation in case of failure.
+            this.inputWrapper.style.width = animationEndWidthPx;
+        }
+    };
     /**
      * Persists current input wrapper's animation progress left between 0 and 1 and cancels it.
      */
     cancelAnimation() {
-        var _a, _b;
-        (_a = this.animation) === null || _a === void 0 ? void 0 : _a.commitStyles();
-        (_b = this.animation) === null || _b === void 0 ? void 0 : _b.cancel();
+        this.animation?.commitStyles();
+        this.animation?.cancel();
     }
     /**
      * Determines if the placeholder text and the action icon (right) must be rendered
@@ -278,7 +296,6 @@ const TetExpandableInput$1 = /*@__PURE__*/ proxyCustomElement(class TetExpandabl
                 [this.size]: true,
             }, tabIndex: -1 }, h("div", { key: '6b884626357642719968e257a28f9b2261812a78', class: "input-wrapper", ref: (element) => (this.inputWrapper = element), tabIndex: -1 }, h("tet-input", { key: 'e41ce8c6cfac721b92ae86798e9ef7403c48ac4d', class: "tet-input expandable", "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.hasInputValue && this.expanded ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.darkMode ? 'dark' : this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "mode": ["onModeChange"],
         "size": ["onSizeChange"]

package/dist/components/tet-expansion-panel.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, h } from './p-c9d79ad4.js';
 
 const tetExpansionPanelCss = ":host{--padding:1rem;--animation-duration:.15s;--content-background-color:transparent}.tet-expansion-panel{display:grid;grid-template-rows:0fr;transition:all var(--animation-duration)}.tet-expansion-panel-content{overflow:hidden;background:var(--content-background-color);transition:all var(--animation-duration)}.tet-expansion-panel.open{grid-template-rows:1fr}.tet-expansion-panel.open .tet-expansion-panel-content{padding:var(--padding)}";
 const TetExpansionPanelStyle0 = tetExpansionPanelCss;
@@ -8,36 +8,23 @@ const TetExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class TetExpansionP
         super();
         this.__registerHost();
         this.__attachShadow();
-        /**
-         * Opens or closes the expansion panel.
-         */
-        this.handleToggleElementClick = () => {
-            this.toggleState();
-        };
-        /**
-         * Toggles the state of the inner expansion panel.
-         */
-        this.toggleState = () => {
-            this.state = this.state === 'open' ? 'closed' : 'open';
-        };
         this.state = undefined;
         this.toggleElement = null;
         this.initialState = 'closed';
     }
+    get element() { return this; }
     connectedCallback() {
-        var _a, _b;
         if (typeof this.toggleElement === 'string') {
             const root = this.element.getRootNode();
             this.toggleElement = root.querySelector(this.toggleElement);
         }
-        (_a = this.toggleElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleToggleElementClick);
-        (_b = this.toggleElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.handleToggleElementClick);
+        this.toggleElement?.removeEventListener('click', this.handleToggleElementClick);
+        this.toggleElement?.addEventListener('click', this.handleToggleElementClick);
         this.state = this.initialState;
     }
     disconnectedCallback() {
-        var _a;
         if (typeof this.toggleElement !== 'string') {
-            (_a = this.toggleElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleToggleElementClick);
+            this.toggleElement?.removeEventListener('click', this.handleToggleElementClick);
         }
     }
     /**
@@ -64,10 +51,21 @@ const TetExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class TetExpansionP
     async getState() {
         return this.state;
     }
+    /**
+     * Opens or closes the expansion panel.
+     */
+    handleToggleElementClick = () => {
+        this.toggleState();
+    };
+    /**
+     * Toggles the state of the inner expansion panel.
+     */
+    toggleState = () => {
+        this.state = this.state === 'open' ? 'closed' : 'open';
+    };
     render() {
         return (h("div", { key: '110cb94243dcfad7ef9c8091b4efb52a236cd66a', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '0bf5be975a4841659b09f4130e6bd332e5e3159b', class: "tet-expansion-panel-content" }, h("slot", { key: 'c43bff135d4885ae5a67a0266782fadb4a36afa8' }))));
     }
-    get element() { return this; }
     static get style() { return TetExpansionPanelStyle0; }
 }, [1, "tet-expansion-panel", {
         "toggleElement": [1025, "toggle-element"],