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

package/dist/components/{p-35e72a2b.js → p-01f21691.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-37ed3ebb.js';
-import { d as defineCustomElement$2 } from './p-68f0e894.js';
-import { d as defineCustomElement$1 } from './p-b0d6ed2e.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-c9d79ad4.js';
+import { d as defineCustomElement$2 } from './p-36c5e434.js';
+import { d as defineCustomElement$1 } from './p-9ee3e98b.js';
 
 const tetNumberInputCss = "@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{--number-input-height:3.5rem;--number-input-background-color:var(--tc-layer-primary);--number-input-border-radius:0.75rem;--number-input-border-color:var(--tc-border-secondary);--number-input-border-color-active:var(--tc-border-primary);--number-input-border-color-error:var( --tc-alert-accent-error);--number-input-text-color:var(--tc-text-primary);--number-input-text-secondary-color:var(--tc-text-secondary);--number-input-dropdown-active:var(--tc-layer-tertiary);--number-input-max-width:21.625rem;--number-input-focus-outline-color:var(--tc-blue-40);--number-input-disabled:var(--tc-background-secondary);--number-input-disabled-text:var(--tc-text-tertiary);--number-input-dropdown-border:var(--tc-border-tertiary);max-width:var(--number-input-max-width);display:block}.number-input{display:flex;flex-direction:column}.number-input.dark{--number-input-background-color:var(--tc-layer-primary-dark);--number-input-border-color:var(--tc-border-secondary-dark);--number-input-border-color-active:var(--tc-border-primary-dark);--number-input-border-color-error:var(--tc-alert-accent-error-dark);--number-input-text-color:var(--tc-text-primary-dark);--number-input-text-secondary-color:var(--tc-text-secondary-dark);--number-input-dropdown-active:var(--tc-layer-tertiary-dark);--number-input-disabled:var(--tc-background-secondary-dark);--number-input-disabled-text:var(--tc-text-tertiary-dark);--number-input-dropdown-border:var(--tc-border-tertiary-dark);--number-input-focus-outline-color:var(--tc-blue-40-dark)}.number-input__label{margin-bottom:0.25rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__input{border:none;outline:none;appearance:textfield;-moz-appearance:textfield;padding-inline:0;padding-block:0;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input__input-suffix{font:400 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color);margin-left:0.25rem}.number-input__input-invisible{visibility:hidden;font:500 1.25rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";position:absolute;pointer-events:none}.number-input__input-container{position:relative;display:flex;border:0.063rem solid var(--number-input-border-color);align-items:baseline;justify-content:center;padding:0.9375rem;cursor:pointer;height:var(--number-input-height);box-sizing:border-box;background-color:var(--number-input-background-color);border-radius:var(--number-input-border-radius)}.number-input__input-container:active,.number-input__input-container:focus-within{outline:none;border:0.063rem solid var(--number-input-border-color-active)}.number-input__input-container.focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s;outline-color:var(--number-input-focus-outline-color);border-color:var(--number-input-border-color-active)}.number-input__input--hidden{opacity:0;position:absolute}.number-input__helper-text{margin-top:0.25rem;font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";color:var(--number-input-text-secondary-color)}.number-input__cheveron{display:flex;align-self:center;position:absolute;right:1rem;--icon-size:1.25rem;background:transparent;border:none;outline:none;cursor:pointer;--button-border:none;--button-padding-small:0.5rem}.number-input__cheveron:focus,.number-input__cheveron:focus-visible{--button-box-shadow:none}.number-input__dropdown{border:0.0625rem solid var(--number-input-dropdown-border);position:absolute;width:100%;top:3.625rem;background-color:var(--number-input-background-color);padding:0.625rem 0;border-radius:0.75rem;z-index:1;color:var(--number-input-text-color)}.number-input__dropdown:focus-within{outline:none}.number-input__dropdown-item{display:flex;align-items:center;padding:0.5rem 1rem;font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.number-input__dropdown-item.active{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0rem;transition:outline 0s;border-radius:0.125rem;outline-color:var(--number-input-focus-outline-color)}.number-input__dropdown-item:hover{background-color:var(--number-input-dropdown-active)}.number-input__dropdown-item .check{margin-left:auto}.number-input.disabled .number-input__input-container,.number-input.disabled .number-input__input{background-color:var(--number-input-disabled);border-color:var(--number-input-disabled);cursor:not-allowed}.number-input.disabled .number-input__input,.number-input.disabled .number-input__input-suffix{color:var(--number-input-disabled-text)}.number-input.error .number-input__input-container{border:0.063rem solid var(--number-input-border-color-error)}.number-input.error .number-input__helper-text{color:var(--number-input-border-color-error)}@media all and (min-width: 48rem){.number-input .number-input__label{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}}.number-input tet-icon{--icon-color:var(--number-input-text-color)}.number-input .number-input__input{color:var(--number-input-text-color);background-color:var(--number-input-background-color)}";
 const TetNumberInputStyle0 = tetNumberInputCss;
@@ -12,7 +12,7 @@ const TetNumberInputStyle0 = tetNumberInputCss;
  */
 function focusPreviousElement(element) {
     const previous = element.previousElementSibling;
-    previous === null || previous === void 0 ? void 0 : previous.focus();
+    previous?.focus();
 }
 /**
  * Utility function to focus the next element of an element.
@@ -21,7 +21,7 @@ function focusPreviousElement(element) {
  */
 function focusNextElement(element) {
     const next = element.nextElementSibling;
-    next === null || next === void 0 ? void 0 : next.focus();
+    next?.focus();
 }
 const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
     constructor() {
@@ -29,41 +29,6 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         this.__registerHost();
         this.__attachShadow();
         this.inputValueChanged = createEvent(this, "inputValueChanged", 7);
-        /**
-         * Changes dropdown state
-         */
-        this.onChevronClick = () => {
-            this.isOpen = !this.isOpen;
-            this.onDropdownOpenChanged();
-        };
-        /**
-         * Closes dropdown
-         */
-        this.closeDropdown = () => {
-            this.isOpen = false;
-        };
-        /**
-         * Renders dropdown content
-         */
-        this.dropdownItemRefs = [];
-        this.renderDropdownContent = () => {
-            this.dropdownItemRefs = [];
-            if (!this.suffixes)
-                return [];
-            return this.suffixes.map((_suffix, i) => {
-                const isActive = this.suffix === _suffix;
-                return (h("div", { ref: el => { this.dropdownItemRefs[i] = el; }, onClick: () => this.onDropdownItemClick(_suffix), onKeyDown: this.handleOptionKeydown(() => this.onDropdownItemClick(_suffix)), class: { 'number-input__dropdown-item': true, 'active': isActive }, tabIndex: 0 }, _suffix.name, isActive && h("tet-icon", { class: "check", name: "check" })));
-            });
-        };
-        /**
-         * Move focus from input element to dropdown
-         */
-        this.handleContainerKeydown = (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                this.onChevronClick();
-            }
-        };
         this.label = undefined;
         this.theme = 'light';
         this.accessibilityLabel = '';
@@ -82,6 +47,17 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         this.isValueHidden = false;
         this.isKeyboardFocus = false;
     }
+    /** Reference to the input element. */
+    inputElement;
+    /** Reference to the dropdown element. */
+    dropdownElement;
+    /** Reference to the chevron element. */
+    chevronElement;
+    /** Reference to the hidden div input element. */
+    inputElementHidden;
+    inputWrapperElement;
+    /** The resize observer watching element resizes. */
+    resizeObserver;
     /**
      * Expose method to access value
      * @returns {number} value
@@ -97,6 +73,10 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
             this.suffix = this.suffixes.find((_suffix) => _suffix.default) || this.suffixes[0];
         }
     }
+    /**
+     * Emits input event
+     */
+    inputValueChanged;
     /**
      * Event called once after component is fully loaded
      */
@@ -108,8 +88,7 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
             this.isValueHidden = true;
         }
         this.resizeObserver = new ResizeObserver(() => {
-            var _a;
-            this.inputElement.style.width = `${(_a = this.inputElementHidden) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
+            this.inputElement.style.width = `${this.inputElementHidden?.getBoundingClientRect().width}px`;
         });
         this.resizeObserver.observe(this.inputElementHidden);
     }
@@ -196,6 +175,32 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
         this.value = num;
         inputElement.value = num.toString();
     }
+    /**
+     * Changes dropdown state
+     */
+    onChevronClick = () => {
+        this.isOpen = !this.isOpen;
+        this.onDropdownOpenChanged();
+    };
+    /**
+     * Closes dropdown
+     */
+    closeDropdown = () => {
+        this.isOpen = false;
+    };
+    /**
+     * Renders dropdown content
+     */
+    dropdownItemRefs = [];
+    renderDropdownContent = () => {
+        this.dropdownItemRefs = [];
+        if (!this.suffixes)
+            return [];
+        return this.suffixes.map((_suffix, i) => {
+            const isActive = this.suffix === _suffix;
+            return (h("div", { ref: el => { this.dropdownItemRefs[i] = el; }, onClick: () => this.onDropdownItemClick(_suffix), onKeyDown: this.handleOptionKeydown(() => this.onDropdownItemClick(_suffix)), class: { 'number-input__dropdown-item': true, 'active': isActive }, tabIndex: 0 }, _suffix.name, isActive && h("tet-icon", { class: "check", name: "check" })));
+        });
+    };
     /**
      * Handles keyboard input for an option item.
      *
@@ -242,6 +247,15 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
             this.closeDropdown();
         }
     }
+    /**
+     * Move focus from input element to dropdown
+     */
+    handleContainerKeydown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.onChevronClick();
+        }
+    };
     /**
      * Move focus from input element to dropdown
      */
@@ -251,7 +265,7 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
                 const activeSuffixIndex = this.suffixes.findIndex(suffixOption => suffixOption === this.suffix);
                 const indexToFocus = activeSuffixIndex !== -1 ? activeSuffixIndex : 0;
                 const dropdownOptionToFocus = this.dropdownItemRefs[indexToFocus];
-                dropdownOptionToFocus === null || dropdownOptionToFocus === void 0 ? void 0 : dropdownOptionToFocus.focus();
+                dropdownOptionToFocus?.focus();
             }, 0);
         }
     }
@@ -262,7 +276,7 @@ const TetInput = /*@__PURE__*/ proxyCustomElement(class TetInput extends H {
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
         return (h("div", { key: '118205a8409c3704d725fac9f040811c3dec72ec', class: { 'number-input': true, [this.theme]: !!this.theme,
-                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'b10125318d3b01c20415474488cfea6dfff2c679', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '3ac5e21d87dece1809f73a5e63ef2ea500de6c68', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", Object.assign({ key: 'af84d4475b0477a43230c8b7540f459ef32a7738', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("div", { key: '824f8b9c97dbedc6dcd92da97234bb8046b64174', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: 'cd1813ebbc68637c8e1de72d9f06fbf23baff087', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '99525148702c09783d1ecd8b132e264f0a6bb2d3', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: '9b46e466fd2d4539be9bb26c8158344cbadefe0c', name: "chevron-down" }), isOpen && h("tet-icon", { key: '9a381e3c4be32545cb3e94284fb9c2f8282762a3', name: "chevron-up" }))), isOpen && (h("div", { key: '60377dee2379132ca971f4b9f567932d295984d1', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: 'a55d2d842586674dfadcf846e1c0b855b45636a0', class: "number-input__helper-text" }, helperText)));
+                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'b10125318d3b01c20415474488cfea6dfff2c679', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '3ac5e21d87dece1809f73a5e63ef2ea500de6c68', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", { key: 'af84d4475b0477a43230c8b7540f459ef32a7738', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("div", { key: '824f8b9c97dbedc6dcd92da97234bb8046b64174', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: 'cd1813ebbc68637c8e1de72d9f06fbf23baff087', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '99525148702c09783d1ecd8b132e264f0a6bb2d3', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: '9b46e466fd2d4539be9bb26c8158344cbadefe0c', name: "chevron-down" }), isOpen && h("tet-icon", { key: '9a381e3c4be32545cb3e94284fb9c2f8282762a3', name: "chevron-up" }))), isOpen && (h("div", { key: '60377dee2379132ca971f4b9f567932d295984d1', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: 'a55d2d842586674dfadcf846e1c0b855b45636a0', class: "number-input__helper-text" }, helperText)));
     }
     static get watchers() { return {
         "suffix": ["onSuffixChange"]

package/dist/components/{p-cec65d0a.js → p-02c55c0d.js}

@@ -1,18 +1,18 @@
-import { p as proxyCustomElement, H, d as createEvent, h, f as forceUpdate, c as Host } from './p-37ed3ebb.js';
-import { s as state, o as onChange } from './p-e34bf267.js';
-import { A as ApiRequest, e as endpoints } from './p-6830b44d.js';
-import { t as translate, p as processTranslations } from './p-aca28e71.js';
+import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host } from './p-c9d79ad4.js';
+import { s as state, o as onChange } from './p-c996a768.js';
+import { A as ApiRequest, e as endpoints } from './p-94a1eb7a.js';
+import { p as processTranslations, t as translate } from './p-3444731e.js';
 import { g as generateFormUrl } from './p-6e631dc7.js';
-import { d as defineCustomElement$a } from './p-6b7e73c0.js';
-import { d as defineCustomElement$9 } from './p-68f0e894.js';
-import { d as defineCustomElement$8 } from './p-0088d040.js';
-import { d as defineCustomElement$7 } from './p-7790eae2.js';
-import { d as defineCustomElement$6 } from './p-163de6e2.js';
-import { d as defineCustomElement$5 } from './p-b0d6ed2e.js';
-import { d as defineCustomElement$4 } from './p-3fd7310f.js';
-import { d as defineCustomElement$3 } from './p-7ddd71bd.js';
-import { d as defineCustomElement$2 } from './p-817bee22.js';
-import { d as defineCustomElement$1 } from './p-4d33055f.js';
+import { d as defineCustomElement$a } from './p-bd9b1f18.js';
+import { d as defineCustomElement$9 } from './p-36c5e434.js';
+import { d as defineCustomElement$8 } from './p-d7d60ba4.js';
+import { d as defineCustomElement$7 } from './p-99823afc.js';
+import { d as defineCustomElement$6 } from './p-29df1df5.js';
+import { d as defineCustomElement$5 } from './p-9ee3e98b.js';
+import { d as defineCustomElement$4 } from './p-269298f7.js';
+import { d as defineCustomElement$3 } from './p-08fbbbf9.js';
+import { d as defineCustomElement$2 } from './p-8b4a75b2.js';
+import { d as defineCustomElement$1 } from './p-6bfd47c5.js';
 
 var ContractTerm;
 (function (ContractTerm) {
@@ -268,76 +268,6 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
         this.emptyCatalog = createEvent(this, "emptyCatalog", 7);
         this.catalogChange = createEvent(this, "catalogChange", 7);
         this.filtersChange = createEvent(this, "filtersChange", 7);
-        /** The translation group key of the component. */
-        this.translationsGroup = 'tet-components';
-        this.allowedProductsToShowInfo = [
-            'PD_TELCO_SUPER',
-            'PD_TELCO_SUPER_PACK_A',
-            'PD_TELCO_SUPER_PACK_B',
-            'PD_TELCO_SUPER_PACK_C',
-            'PD_TELCO_SUPER_PACK_D',
-            'PD_TELCO_PACKAGE_A',
-            'PD_TELCO_PACKAGE_B',
-            'PD_TELCO_PACKAGE_C',
-            'PD_TELCO_PACKAGE_D',
-            'PD_TELCO_NETFLIX_PACKAGE_A_ITV_SUPER',
-            'PD_TELCO_HBOMAX_IPTV_PACK_A',
-            'PD_TELCO_HBOMAX_IPTV_PACK_B',
-            'PD_TELCO_HBOMAX_IPTV_PACK_C',
-            'PD_TELCO_NETFLIX_PACKAGE_A_SUPER',
-            'PD_TELCO_HBOMAX_OTT_PACK_A_SUPER',
-            'PD_TELCO_HBOMAX_OTT_PACK_B_SUPER',
-            'PD_TELCO_HBOMAX_OTT_PACK_C_SUPER'
-        ];
-        /**
-         * Filters out products that belong to the particular category.
-         *
-         * @param category
-         */
-        this.filterCategoryProducts = (category) => {
-            const filteredCodes = this.subcategoryProductFilters[category.key] || [];
-            if (filteredCodes.length > 0) {
-                return category.products.filter(product => filteredCodes.includes(product.productCode));
-            }
-            const { activeFilters } = state;
-            if (activeFilters.includes('promotions')) {
-                return category.products.filter(this.productHasPromotion.bind(this));
-            }
-            return category.products;
-        };
-        /**
-         * Determines whether the particular category should be rendered.
-         *
-         * @param category
-         */
-        this.showCategory = (category) => {
-            var _a, _b;
-            if (((_a = category.subgroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                return category.subgroups.some(this.showCategory);
-            }
-            const { activeFilters } = state;
-            return ((!category.tag ||
-                ['all', (_b = category.tag) !== null && _b !== void 0 ? _b : ''].some((tag) => activeFilters.includes(tag)) ||
-                (activeFilters.includes('promotions') && this.categoryContainsPromotions(category))) &&
-                this.categoryContainsContractTerms(category) &&
-                this.filterCategoryProducts(category).length > 0);
-        };
-        this.renderSubCategoryHeader = ({ displayTitle, name, landingPage, isOneTv }) => {
-            const categoryName = this.translateProperty(name);
-            const categoryOffersLink = this.translateProperty(landingPage);
-            return [
-                h("div", { class: { 'subcategory-title': true, [`subcategory-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, isOneTv && h("tet-icon", { name: "logo-tet-tv-plus", useDefaultColor: true }), displayTitle && categoryName && h("h3", { class: { [this.theme]: !!this.theme } }, categoryName)),
-                categoryOffersLink && (h("a", { class: { 'subcategory-offers-link': true, [`subcategory-offers-link--${this.theme}`]: !!this.theme, [this.theme]: true }, href: categoryOffersLink, target: "_blank" }, h("span", { class: { 'subcategory-offers-link-text': true, [`subcategory-offers-link-text--${this.theme}`]: !!this.theme, [this.theme]: true } }, translate('components-address-offers-view-more-link')), " -->"))
-            ];
-        };
-        /**
-         * Renders the loader.
-         */
-        this.renderLoader = () => {
-            return (h("div", { class: "placeholder" }, [...Array(2)].map(() => {
-                return (h("div", { class: "placeholder-section" }, h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-section-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "1em", width: "20%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), [...Array(3)].map(() => [h("br", null), h("tet-placeholder", { height: "10em", darkTheme: this.darkMode })])));
-            })));
-        };
         this.addressKey = undefined;
         this.catalog = undefined;
         this.theme = 'light';
@@ -349,6 +279,40 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
         this.showLoader = true;
         this.subcategoryProductFilters = {};
     }
+    /** The translation group key of the component. */
+    translationsGroup = 'tet-components';
+    allowedProductsToShowInfo = [
+        'PD_TELCO_SUPER',
+        'PD_TELCO_SUPER_PACK_A',
+        'PD_TELCO_SUPER_PACK_B',
+        'PD_TELCO_SUPER_PACK_C',
+        'PD_TELCO_SUPER_PACK_D',
+        'PD_TELCO_PACKAGE_A',
+        'PD_TELCO_PACKAGE_B',
+        'PD_TELCO_PACKAGE_C',
+        'PD_TELCO_PACKAGE_D',
+        'PD_TELCO_NETFLIX_PACKAGE_A_ITV_SUPER',
+        'PD_TELCO_HBOMAX_IPTV_PACK_A',
+        'PD_TELCO_HBOMAX_IPTV_PACK_B',
+        'PD_TELCO_HBOMAX_IPTV_PACK_C',
+        'PD_TELCO_NETFLIX_PACKAGE_A_SUPER',
+        'PD_TELCO_HBOMAX_OTT_PACK_A_SUPER',
+        'PD_TELCO_HBOMAX_OTT_PACK_B_SUPER',
+        'PD_TELCO_HBOMAX_OTT_PACK_C_SUPER'
+    ];
+    get element() { return this; }
+    /**
+     * Event that triggers if availability catalog is empty.
+     */
+    emptyCatalog;
+    /**
+     * Event that triggers if availability catalog is loaded or updated.
+     */
+    catalogChange;
+    /**
+     * Event that triggers when active filters have changed.
+     */
+    filtersChange;
     /**
      * Loads new data on addressKey change
      */
@@ -366,7 +330,10 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @param event The event containing the filtered product IDs for the particular subcategory.
      */
     handleFilteredProductsChanged(event) {
-        this.subcategoryProductFilters = Object.assign(Object.assign({}, this.subcategoryProductFilters), { [event.detail.subcategoryId]: event.detail.filteredProductIds });
+        this.subcategoryProductFilters = {
+            ...this.subcategoryProductFilters,
+            [event.detail.subcategoryId]: event.detail.filteredProductIds
+        };
     }
     /**
      * Prepares the translations before the component is rendered.
@@ -420,6 +387,22 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
         }
         this.showLoader = false;
     }
+    /**
+     * Filters out products that belong to the particular category.
+     *
+     * @param category
+     */
+    filterCategoryProducts = (category) => {
+        const filteredCodes = this.subcategoryProductFilters[category.key] || [];
+        if (filteredCodes.length > 0) {
+            return category.products.filter(product => filteredCodes.includes(product.productCode));
+        }
+        const { activeFilters } = state;
+        if (activeFilters.includes('promotions')) {
+            return category.products.filter(this.productHasPromotion.bind(this));
+        }
+        return category.products;
+    };
     /**
      * Translates property
      *
@@ -427,15 +410,31 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @returns {string}
      */
     translateProperty(property) {
-        return (property === null || property === void 0 ? void 0 : property[this.language]) || '';
+        return property?.[this.language] || '';
     }
+    /**
+     * Determines whether the particular category should be rendered.
+     *
+     * @param category
+     */
+    showCategory = (category) => {
+        if (category.subgroups?.length > 0) {
+            return category.subgroups.some(this.showCategory);
+        }
+        const { activeFilters } = state;
+        return ((!category.tag ||
+            ['all', category.tag ?? ''].some((tag) => activeFilters.includes(tag)) ||
+            (activeFilters.includes('promotions') && this.categoryContainsPromotions(category))) &&
+            this.categoryContainsContractTerms(category) &&
+            this.filterCategoryProducts(category).length > 0);
+    };
     /**
      * Determines whether the particular category contains at least one offer that has some promotion applied.
      *
      * @param {StructureModel} category
      */
     categoryContainsPromotions({ products = [] }) {
-        return products === null || products === void 0 ? void 0 : products.some((product) => this.productHasPromotion(product));
+        return products?.some((product) => this.productHasPromotion(product));
     }
     /**
      * Checks if product has promotion
@@ -443,8 +442,7 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @returns {boolean}
      */
     productHasPromotion(product) {
-        var _a;
-        return (_a = product === null || product === void 0 ? void 0 : product.contractTerms) === null || _a === void 0 ? void 0 : _a.some(({ promotionCode }) => promotionCode);
+        return product?.contractTerms?.some(({ promotionCode }) => promotionCode);
     }
     /**
      * Determines whether the particular category contains at least one product that has contractTerms.
@@ -453,7 +451,7 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @returns {boolean}
      */
     categoryContainsContractTerms({ products = [] }) {
-        return products === null || products === void 0 ? void 0 : products.some((product) => this.productHasContractTerms(product));
+        return products?.some((product) => this.productHasContractTerms(product));
     }
     /**
      * Cehcks if product has contract terms
@@ -461,18 +459,15 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @returns {boolean}
      */
     productHasContractTerms(product) {
-        var _a;
-        return !!((_a = product === null || product === void 0 ? void 0 : product.contractTerms) === null || _a === void 0 ? void 0 : _a.length);
+        return !!product?.contractTerms?.length;
     }
     /**
      * Renders top-level categories.
      */
     renderTopCategories() {
-        var _a, _b;
-        return (_b = (_a = state.catalog) === null || _a === void 0 ? void 0 : _a.structure) === null || _b === void 0 ? void 0 : _b.filter(this.showCategory).map((structure) => {
-            var _a;
+        return state.catalog?.structure?.filter(this.showCategory).map((structure) => {
             const categoryName = this.translateProperty(structure.name);
-            return (h("section", { class: { 'category': true, [`category--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName && h("h2", { class: { 'category-title': true, [`category-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName), h("div", { class: { 'category-subcategories': true, [`category-subcategories--${this.theme}`]: !!this.theme, [this.theme]: true } }, this.renderSubCategories(structure.subgroups || [], (_a = state.catalog) === null || _a === void 0 ? void 0 : _a.meta))));
+            return (h("section", { class: { 'category': true, [`category--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName && h("h2", { class: { 'category-title': true, [`category-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName), h("div", { class: { 'category-subcategories': true, [`category-subcategories--${this.theme}`]: !!this.theme, [this.theme]: true } }, this.renderSubCategories(structure.subgroups || [], state.catalog?.meta))));
         });
     }
     /**
@@ -488,6 +483,14 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
                 h("div", { class: "subcategory-filters" }, h("tet-address-offers-filters-products", { catalog: this.catalog, class: `center`, language: this.language, clearFilterButton: true, subcategoryId: category.key, onFilteredProductsChanged: event => this.handleFilteredProductsChanged(event), category: category, theme: this.theme })), h("div", { class: "subcategory-products" }, this.filterCategoryProducts(category).map((product) => this.renderProduct(product, category.theme, meta)))));
         });
     }
+    renderSubCategoryHeader = ({ displayTitle, name, landingPage, isOneTv }) => {
+        const categoryName = this.translateProperty(name);
+        const categoryOffersLink = this.translateProperty(landingPage);
+        return [
+            h("div", { class: { 'subcategory-title': true, [`subcategory-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, isOneTv && h("tet-icon", { name: "logo-tet-tv-plus", useDefaultColor: true }), displayTitle && categoryName && h("h3", { class: { [this.theme]: !!this.theme } }, categoryName)),
+            categoryOffersLink && (h("a", { class: { 'subcategory-offers-link': true, [`subcategory-offers-link--${this.theme}`]: !!this.theme, [this.theme]: true }, href: categoryOffersLink, target: "_blank" }, h("span", { class: { 'subcategory-offers-link-text': true, [`subcategory-offers-link-text--${this.theme}`]: !!this.theme, [this.theme]: true } }, translate('components-address-offers-view-more-link')), " -->"))
+        ];
+    };
     renderUpsellBlock(name, icons, amount) {
         let icon = icons.find(icon => icon.key === 'sac-offers-light');
         const isDarkTheme = this.theme === 'dark';
@@ -516,7 +519,6 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @returns {FunctionalComponent}
      */
     renderProduct(product, theme = 'light', meta) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!this.getContractTerm(product)) {
             return;
         }
@@ -536,8 +538,8 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
         const priceTooltip = tp(this.getContractTermProperty(product, 'priceTooltip'));
         const priceDescription = tp(this.getContractTermProperty(product, 'priceDescription'));
         const contract = this.getContractTermProperty(product, 'contract');
-        const bestChoice = (_b = (_a = this.getAttribute(product.attributes, 'isBestChoice')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : false;
-        const showMaxSportUpsell = (_d = (_c = this.getAttribute(product.attributes, 'showMaxSportUpsell')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : false;
+        const bestChoice = this.getAttribute(product.attributes, 'isBestChoice')?.value ?? false;
+        const showMaxSportUpsell = this.getAttribute(product.attributes, 'showMaxSportUpsell')?.value ?? false;
         let upsellBlock = null;
         if (showMaxSportUpsell && Object.keys(meta)[0] === 'hboMaxSport') {
             const upsellProduct = Object.values(meta)[0];
@@ -552,7 +554,7 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
             if (contractTerm !== 0) {
                 termText = sprintf.sprintf(this.termText, contractTerm);
             }
-            if ((_f = (_e = this.getAttribute(product.attributes, 'availabilityTermUnlimitedOverride')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : false) {
+            if (this.getAttribute(product.attributes, 'availabilityTermUnlimitedOverride')?.value ?? false) {
                 termText = translate('components-indefinite');
             }
         }
@@ -563,15 +565,15 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
                 benefits = contractTermBenefits;
             }
         }
-        const benefitItems = benefits === null || benefits === void 0 ? void 0 : benefits.split('\n').filter(Boolean);
+        const benefitItems = benefits?.split('\n').filter(Boolean);
         let productDescription = null;
-        if ((_g = this.getAttribute(product.attributes, 'isNetflixProduct')) === null || _g === void 0 ? void 0 : _g.value) {
+        if (this.getAttribute(product.attributes, 'isNetflixProduct')?.value) {
             productDescription = translate('components-netflix-card-description');
         }
-        else if ((_h = this.getAttribute(product.attributes, 'isNetflixMaxProduct')) === null || _h === void 0 ? void 0 : _h.value) {
+        else if (this.getAttribute(product.attributes, 'isNetflixMaxProduct')?.value) {
             productDescription = translate('components-netflix-max-card-description');
         }
-        else if ((_j = this.getAttribute(product.attributes, 'isMaxProduct')) === null || _j === void 0 ? void 0 : _j.value) {
+        else if (this.getAttribute(product.attributes, 'isMaxProduct')?.value) {
             productDescription = translate('components-max-card-description');
         }
         const options = {
@@ -581,7 +583,7 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
             infoItemIconName: 'info-circle',
             infoItemTooltipContent: this.getProductInfoItem(product),
             bulletPoints: benefitItems,
-            price: formatPrice(promotionPrice !== null && promotionPrice !== void 0 ? promotionPrice : basePrice, { currency: '' }),
+            price: formatPrice(promotionPrice ?? basePrice, { currency: '' }),
             oldPrice: showDiscount ? formatPrice(basePrice, { currency: '' }) : null,
             currency: translate('components-euro-per-month'),
             priceInfoIconName: priceTooltip ? 'info-circle' : null,
@@ -620,11 +622,10 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @returns {string}
      */
     getProductInfoItem(product) {
-        var _a, _b;
-        const bundleProducts = (_a = product === null || product === void 0 ? void 0 : product.bundleProducts) === null || _a === void 0 ? void 0 : _a.split(',');
+        const bundleProducts = product?.bundleProducts?.split(',');
         // Tet TV+ has the second product code in the `bundleProducts` as the broadband offer code.
         // Tet TV has only one product code in the `bundleProducts` and that is the broadband offer code.
-        const broadbandOfferCode = (_b = bundleProducts === null || bundleProducts === void 0 ? void 0 : bundleProducts[1]) !== null && _b !== void 0 ? _b : bundleProducts === null || bundleProducts === void 0 ? void 0 : bundleProducts[0];
+        const broadbandOfferCode = bundleProducts?.[1] ?? bundleProducts?.[0];
         const broadbandOffer = Object.values(state.catalog.structure[0].products).find((offer) => offer.productCode === broadbandOfferCode);
         if (!this.allowedProductsToShowInfo.includes(product.productCode)) {
             return;
@@ -634,12 +635,10 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
             : this.translateProperty(product.technologySpeed.description);
     }
     getContractTermProperty(product, property) {
-        var _a, _b;
-        return (_b = (_a = this.getContractTerm(product)) === null || _a === void 0 ? void 0 : _a[property]) !== null && _b !== void 0 ? _b : null;
+        return this.getContractTerm(product)?.[property] ?? null;
     }
     getContractTerm(product) {
-        var _a;
-        return (_a = product.contractTerms) === null || _a === void 0 ? void 0 : _a.find((contractTerm) => contractTerm.term === ContractTerm.TwentyFourMonth);
+        return product.contractTerms?.find((contractTerm) => contractTerm.term === ContractTerm.TwentyFourMonth);
     }
     /**
      * Finds product attribute by key.
@@ -649,7 +648,7 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @return ProductAttributeModel
      */
     getAttribute(productAttributes, key) {
-        return productAttributes === null || productAttributes === void 0 ? void 0 : productAttributes.find((attributes) => attributes.key === key);
+        return productAttributes?.find((attributes) => attributes.key === key);
     }
     /**
      * Handles the service application form URL generation for each product.
@@ -667,7 +666,6 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
      * @param product
      */
     getServiceApplicationFormUrl(product) {
-        var _a, _b;
         const baseUrl = this.translateProperty(product.formUrl);
         const promotionCode = this.getContractTermProperty(product, 'promotionCode');
         let parameters = {
@@ -678,16 +676,23 @@ const TetAddressOffers = /*@__PURE__*/ proxyCustomElement(class TetAddressOffers
         }
         parameters.addressKey = this.addressKey;
         parameters.product = product.productCode;
-        const availabilityFormUrlOverride = (_b = (_a = this.getAttribute(product.attributes, 'availabilityFormUrlOverride')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        const availabilityFormUrlOverride = this.getAttribute(product.attributes, 'availabilityFormUrlOverride')?.value ?? '';
         if (availabilityFormUrlOverride) {
             return availabilityFormUrlOverride.toString();
         }
         return generateFormUrl(baseUrl, parameters);
     }
+    /**
+     * Renders the loader.
+     */
+    renderLoader = () => {
+        return (h("div", { class: "placeholder" }, [...Array(2)].map(() => {
+            return (h("div", { class: "placeholder-section" }, h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-section-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "1em", width: "20%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), [...Array(3)].map(() => [h("br", null), h("tet-placeholder", { height: "10em", darkTheme: this.darkMode })])));
+        })));
+    };
     render() {
         return (h(Host, { key: '15466862e81fe36fb8f001019c24a71b0f6c881e' }, this.showLoader ? this.renderLoader() : state.catalog && this.renderTopCategories()));
     }
-    get element() { return this; }
     static get watchers() { return {
         "addressKey": ["onAddressKeyChange"],
         "language": ["onLanguageChanged"]