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

package/dist/collection/components/views/tet-b2b-service-calculator/tet-b2b-service-calculator.js

@@ -6,31 +6,6 @@ import { FULL_SERVICE_UNIT_PRICE_EUROS, REMOTE_SERVICE_UNIT_PRICE_EUROS, FULL_SE
  */
 export class TetB2bServiceCalculator {
     constructor() {
-        this.calculateServiceUnitTotalPrice = (unitCount) => {
-            let price;
-            if (this.withItAdmin) {
-                price = FULL_SERVICE_WITH_IT_ADMIN_UNIT_PRICE_EUROS;
-            }
-            else if (this.withInPersonServiceSupport) {
-                price = FULL_SERVICE_UNIT_PRICE_EUROS;
-            }
-            else {
-                price = REMOTE_SERVICE_UNIT_PRICE_EUROS;
-            }
-            return unitCount * price;
-        };
-        this.handleWithItAdminValueChange = ({ detail }) => {
-            if (detail.checked) {
-                this.withInPersonServiceSupport = true;
-            }
-            this.withItAdmin = detail.checked;
-        };
-        this.handleInPersonServiceSupportValueChange = ({ detail }) => {
-            if (!detail.checked) {
-                this.withItAdmin = false;
-            }
-            this.withInPersonServiceSupport = detail.checked;
-        };
         this.language = 'lv';
         this.totalPrice = 0;
         this.withItAdmin = false;
@@ -50,6 +25,31 @@ export class TetB2bServiceCalculator {
     componentDidLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    calculateServiceUnitTotalPrice = (unitCount) => {
+        let price;
+        if (this.withItAdmin) {
+            price = FULL_SERVICE_WITH_IT_ADMIN_UNIT_PRICE_EUROS;
+        }
+        else if (this.withInPersonServiceSupport) {
+            price = FULL_SERVICE_UNIT_PRICE_EUROS;
+        }
+        else {
+            price = REMOTE_SERVICE_UNIT_PRICE_EUROS;
+        }
+        return unitCount * price;
+    };
+    handleWithItAdminValueChange = ({ detail }) => {
+        if (detail.checked) {
+            this.withInPersonServiceSupport = true;
+        }
+        this.withItAdmin = detail.checked;
+    };
+    handleInPersonServiceSupportValueChange = ({ detail }) => {
+        if (!detail.checked) {
+            this.withItAdmin = false;
+        }
+        this.withInPersonServiceSupport = detail.checked;
+    };
     render() {
         return (h("section", { key: '60fafc2fba61052efe197138c26a62de044a1274', class: "container" }, h("div", { key: 'fc05c180f3e223c8d6f64819435268cb524267aa', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: '29a7d8e18876f0847ee18ba9a9953e8f1c1191f5', class: "calculator-block" }, h("p", { key: 'dd0e5b877a1736545c597b0c5f8988f426f6237f', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '920ad471488bb8bf857f591a52e40854a82ebfad', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: 'bd23c4adfb284c4878c78cb2f7b30da395d08cad', class: "control-container" }, h("div", { key: '268d66e7ecfa4e1dcb46d4d4e1902c9fb7e396ab', class: "control" }, h("tet-checkbox", { key: 'a6135c271dce622b647a1aa2c1c7e64916e9742e', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '5342b2489543a8ea96445904450d049c84818a8e', class: "control" }, h("tet-switch", { key: '1390fb492c1b021295b7f59e321ba135972398f4', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '80d1534c9410f61c2891ad86a026025eb3ac0b6c', class: "monthly-payment-block" }, h("p", { key: 'ee48aeb873b308320a5c548772669d7807ab8ded', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: 'd03f9e14f80c7dd33db7c6685a714aa33137bbbd' }, h("span", { key: '279633ea53692be5b6e5f9fe250575f131231369', class: "price" }, this.totalPrice), h("span", { key: 'e8ead6f10a1f7ad6336b6952922d37f3009327ba', class: "currency" }, t('components-euro-per-month')))))));
     }

package/dist/collection/components/views/tet-business-lines/tet-business-lines.js

@@ -7,26 +7,6 @@ import { processTranslations, t } from "../../../services/translations/index";
  */
 export class TetBusinessLines {
     constructor() {
-        this.translate = (property) => {
-            var _a;
-            return (_a = property === null || property === void 0 ? void 0 : property[this.language]) !== null && _a !== void 0 ? _a : '';
-        };
-        /**
-         * Renders the title and full address for the component.
-         */
-        this.renderHeadings = () => {
-            var _a;
-            return (h("div", { class: "headings" }, h("h2", { class: "title" }, t('components-business-lines-title')), h("p", { class: "full-address" }, (_a = this.address) === null || _a === void 0 ? void 0 : _a.fullAddress)));
-        };
-        this.handleBusinessLineSelection = ({ url }) => {
-            if (!this.translate(url)) {
-                return;
-            }
-            window.open(this.translate(url));
-        };
-        this.renderBusinessLineItem = (businessLine) => {
-            return (h("div", { class: "business-line-item", onClick: () => this.handleBusinessLineSelection(businessLine) }, h("div", { class: "name-container" }, h("tet-icon", { name: businessLine.iconName }), this.translate(businessLine.name)), h("tet-icon", { class: "chevron-icon", name: "chevron-right" })));
-        };
         this.language = 'lv';
         this.addressKey = undefined;
         this.showHeadings = true;
@@ -36,6 +16,8 @@ export class TetBusinessLines {
     onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
+    /** The event that is emitted when business line is selected. */
+    businessLineSelected;
     async onAddressKeyChange() {
         searchAddressByKey(String(this.addressKey)).then((response) => this.address = response);
     }
@@ -44,9 +26,26 @@ export class TetBusinessLines {
         businessLines().then((response) => this.businessLines = response);
         searchAddressByKey(String(this.addressKey)).then((response) => this.address = response);
     }
+    translate = (property) => {
+        return property?.[this.language] ?? '';
+    };
+    /**
+     * Renders the title and full address for the component.
+     */
+    renderHeadings = () => {
+        return (h("div", { class: "headings" }, h("h2", { class: "title" }, t('components-business-lines-title')), h("p", { class: "full-address" }, this.address?.fullAddress)));
+    };
+    handleBusinessLineSelection = ({ url }) => {
+        if (!this.translate(url)) {
+            return;
+        }
+        window.open(this.translate(url));
+    };
+    renderBusinessLineItem = (businessLine) => {
+        return (h("div", { class: "business-line-item", onClick: () => this.handleBusinessLineSelection(businessLine) }, h("div", { class: "name-container" }, h("tet-icon", { name: businessLine.iconName }), this.translate(businessLine.name)), h("tet-icon", { class: "chevron-icon", name: "chevron-right" })));
+    };
     render() {
-        var _a;
-        return (h("div", { key: '97d449a59b86105e2470fffedf30d04d7805000d', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: '9ecbea6151d74f7dcae9d7ce86d57bb61ca5359d', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
+        return (h("div", { key: '97d449a59b86105e2470fffedf30d04d7805000d', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: '9ecbea6151d74f7dcae9d7ce86d57bb61ca5359d', class: "business-line-wrapper" }, this.businessLines?.map(this.renderBusinessLineItem))));
     }
     static get is() { return "tet-business-lines"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-cloud-configurator/tet-cloud-configurator.js

@@ -7,106 +7,6 @@ import { processTranslations, t } from "../../../services/translations/index";
 import { CloudFieldGroup } from "./enums/CloudFieldGroup";
 export class TetCloudConfigurator {
     constructor() {
-        /** An intersection observer for checking if the `footerRef` is in viewport. */
-        this.footerObserver = new IntersectionObserver(([entry]) => {
-            this.isFloatingSummary = entry.intersectionRatio === 0;
-        });
-        /** The field configuration object to be fetched from the metastore. */
-        this.fields = null;
-        /** Handles the form tab changes
-         * @param event A custom event from the `tet-tab-header` component.
-         */
-        this.onTabSelected = (event) => {
-            this.selectedTab = event.detail.new;
-        };
-        /** Handles the `expandable-list` state change. */
-        this.onExpandableListToggle = () => {
-            this.isListExpanded = !this.isListExpanded;
-        };
-        /** Handles the change of the summary period between hourly and monthly pricing.
-         * @param event A custom event from the `tet-radio` component.
-         */
-        this.onSummaryPeriodChange = (event) => {
-            this.selectedPeriod = event.detail.value;
-        };
-        /** Handles the change of the ddos protection checkbox.
-         * @param event A custom event from the `tet-checkbox` component.
-         */
-        this.onDdosProtectionEnabledCheck = (event) => {
-            const { checked } = event.detail;
-            this.formValues['ddos_protection_enabled'].value = checked ? 1 : 0;
-            this.setDefaultValue('bandwidth_capacity');
-            this.setDefaultValue('ddos_protection_bandwidth');
-            this.formValues = Object.assign({}, this.formValues);
-        };
-        /** Handles the value changes of all number inputs
-         * @param value The input value supplied by the `inputValueChanged` emmiters.
-         * @param fieldKey The `key` value from the @see CloudConfiguratorField object.
-         */
-        this.onNumberValueChanged = (detail, fieldKey) => {
-            var _a;
-            const { min } = this.fields[fieldKey];
-            const formValue = this.formValues[fieldKey];
-            let currentValue = detail.value;
-            if (!detail.suffix) {
-                detail.suffix = getDefaultSuffix(fieldKey);
-            }
-            if (((_a = formValue === null || formValue === void 0 ? void 0 : formValue.suffix) === null || _a === void 0 ? void 0 : _a.value) !== detail.suffix.value) {
-                if (detail.suffix.value === 0) {
-                    currentValue = 0;
-                }
-                else {
-                    currentValue = min;
-                }
-            }
-            const prices = this.getPrices(fieldKey, currentValue, detail.suffix);
-            this.formValues[fieldKey] = Object.assign(Object.assign(Object.assign({}, formValue), { value: currentValue, suffix: detail.suffix }), prices);
-            this.formValues = Object.assign({}, this.formValues);
-        };
-        this.onFormSubmit = () => {
-            var _a;
-            const orderedFormValues = getOrderedFormValues(this.formValues);
-            const isDdosEnabled = (_a = this.formValues['ddos_protection_enabled']) === null || _a === void 0 ? void 0 : _a.value;
-            if (isDdosEnabled) {
-                delete orderedFormValues['bandwidth_capacity'];
-            }
-            else {
-                delete orderedFormValues['ddos_protection_bandwidth'];
-            }
-            const data = { formValues: orderedFormValues, totals: this.getTotals() };
-            this.cloudCalculatorSubmit.emit(data);
-        };
-        /** Fetches the field configuration and the translations for the component. */
-        this.fetchData = async () => {
-            const promises = await Promise.all([cloudConfigurator(), processTranslations('cloud-calculator', this.language)]);
-            this.fields = promises[0];
-            this.isLoading = false;
-        };
-        /** Sets the default `formValues` for all `fields` keys. */
-        this.setDefaultValues = () => {
-            for (const fieldKey of Object.keys(this.fields)) {
-                this.setDefaultValue(fieldKey);
-            }
-            const orderedFormValues = getOrderedFormValues(this.formValues);
-            this.formValues = Object.assign({}, orderedFormValues);
-            const inputs = this.root.shadowRoot.querySelectorAll('tet-number-input');
-            inputs.forEach((input) => input.resetSuffix());
-        };
-        /**
-         * Sets the default `formValue` for the `fieldKey` depending on the current `selectedTab` value.
-         * @param fieldKey The `key` value from the @see CloudConfiguratorField object.
-         */
-        this.setDefaultValue = (fieldKey) => {
-            const field = this.fields[fieldKey];
-            const defaultValue = field.default[this.selectedTab] || field.min;
-            const defaultSuffix = getDefaultSuffix(field.key);
-            const prices = this.getPrices(field.key, defaultValue, defaultSuffix);
-            this.formValues[field.key] = Object.assign(Object.assign({ key: field.key, value: defaultValue, title: field.name['lv'], groupKey: field.group, groupName: t(groupKeyTranslationMap[field.group]) }, prices), { suffix: getDefaultSuffix(field.key) });
-        };
-        this.renderTitle = () => {
-            const subtitleKey = `components-cloud-configurator-${this.selectedTab}-subtitle`;
-            return (h(Fragment, null, h("p", { class: "content__subtitle" }, t(subtitleKey))));
-        };
         this.language = 'lv';
         this.containerSelector = '';
         this.theme = 'light';
@@ -121,6 +21,18 @@ export class TetCloudConfigurator {
         this.isListExpanded = false;
         this.parentElement = undefined;
     }
+    /** The root element of the component. */
+    root;
+    /** An intersection observer for checking if the `headerRef` is currently positioned as sticky. */
+    headerObserver;
+    /** An intersection observer for checking if the `footerRef` is in viewport. */
+    footerObserver = new IntersectionObserver(([entry]) => {
+        this.isFloatingSummary = entry.intersectionRatio === 0;
+    });
+    /** The field configuration object to be fetched from the metastore. */
+    fields = null;
+    /** The submit event of the form. */
+    cloudCalculatorSubmit;
     async componentWillLoad() {
         if (this.containerSelector) {
             this.parentElement = document.querySelector(this.containerSelector);
@@ -166,6 +78,107 @@ export class TetCloudConfigurator {
         await processTranslations('cloud-calculator', language);
         forceUpdate(this);
     }
+    /** Handles the form tab changes
+     * @param event A custom event from the `tet-tab-header` component.
+     */
+    onTabSelected = (event) => {
+        this.selectedTab = event.detail.new;
+    };
+    /** Handles the `expandable-list` state change. */
+    onExpandableListToggle = () => {
+        this.isListExpanded = !this.isListExpanded;
+    };
+    /** Handles the change of the summary period between hourly and monthly pricing.
+     * @param event A custom event from the `tet-radio` component.
+     */
+    onSummaryPeriodChange = (event) => {
+        this.selectedPeriod = event.detail.value;
+    };
+    /** Handles the change of the ddos protection checkbox.
+     * @param event A custom event from the `tet-checkbox` component.
+     */
+    onDdosProtectionEnabledCheck = (event) => {
+        const { checked } = event.detail;
+        this.formValues['ddos_protection_enabled'].value = checked ? 1 : 0;
+        this.setDefaultValue('bandwidth_capacity');
+        this.setDefaultValue('ddos_protection_bandwidth');
+        this.formValues = { ...this.formValues };
+    };
+    /** Handles the value changes of all number inputs
+     * @param value The input value supplied by the `inputValueChanged` emmiters.
+     * @param fieldKey The `key` value from the @see CloudConfiguratorField object.
+     */
+    onNumberValueChanged = (detail, fieldKey) => {
+        const { min } = this.fields[fieldKey];
+        const formValue = this.formValues[fieldKey];
+        let currentValue = detail.value;
+        if (!detail.suffix) {
+            detail.suffix = getDefaultSuffix(fieldKey);
+        }
+        if (formValue?.suffix?.value !== detail.suffix.value) {
+            if (detail.suffix.value === 0) {
+                currentValue = 0;
+            }
+            else {
+                currentValue = min;
+            }
+        }
+        const prices = this.getPrices(fieldKey, currentValue, detail.suffix);
+        this.formValues[fieldKey] = {
+            ...formValue,
+            value: currentValue,
+            suffix: detail.suffix,
+            ...prices
+        };
+        this.formValues = { ...this.formValues };
+    };
+    onFormSubmit = () => {
+        const orderedFormValues = getOrderedFormValues(this.formValues);
+        const isDdosEnabled = this.formValues['ddos_protection_enabled']?.value;
+        if (isDdosEnabled) {
+            delete orderedFormValues['bandwidth_capacity'];
+        }
+        else {
+            delete orderedFormValues['ddos_protection_bandwidth'];
+        }
+        const data = { formValues: orderedFormValues, totals: this.getTotals() };
+        this.cloudCalculatorSubmit.emit(data);
+    };
+    /** Fetches the field configuration and the translations for the component. */
+    fetchData = async () => {
+        const promises = await Promise.all([cloudConfigurator(), processTranslations('cloud-calculator', this.language)]);
+        this.fields = promises[0];
+        this.isLoading = false;
+    };
+    /** Sets the default `formValues` for all `fields` keys. */
+    setDefaultValues = () => {
+        for (const fieldKey of Object.keys(this.fields)) {
+            this.setDefaultValue(fieldKey);
+        }
+        const orderedFormValues = getOrderedFormValues(this.formValues);
+        this.formValues = { ...orderedFormValues };
+        const inputs = this.root.shadowRoot.querySelectorAll('tet-number-input');
+        inputs.forEach((input) => input.resetSuffix());
+    };
+    /**
+     * Sets the default `formValue` for the `fieldKey` depending on the current `selectedTab` value.
+     * @param fieldKey The `key` value from the @see CloudConfiguratorField object.
+     */
+    setDefaultValue = (fieldKey) => {
+        const field = this.fields[fieldKey];
+        const defaultValue = field.default[this.selectedTab] || field.min;
+        const defaultSuffix = getDefaultSuffix(field.key);
+        const prices = this.getPrices(field.key, defaultValue, defaultSuffix);
+        this.formValues[field.key] = {
+            key: field.key,
+            value: defaultValue,
+            title: field.name['lv'],
+            groupKey: field.group,
+            groupName: t(groupKeyTranslationMap[field.group]),
+            ...prices,
+            suffix: getDefaultSuffix(field.key)
+        };
+    };
     /**
      * Gets a collection of `key` values from `fields` object containing the `group`.
      * @param fieldGroup The `group` value from the @see CloudConfiguratorField object.
@@ -177,8 +190,7 @@ export class TetCloudConfigurator {
     }
     /** Gets the total calculated sum of selected values */
     getTotals() {
-        var _a;
-        const isDdosEnabled = !!((_a = this.formValues['ddos_protection_enabled']) === null || _a === void 0 ? void 0 : _a.value);
+        const isDdosEnabled = !!this.formValues['ddos_protection_enabled']?.value;
         const totals = { hourly: 0, monthly: 0 };
         for (const formValue of Object.values(this.formValues)) {
             if (formValue.key === 'bandwidth_capacity' && isDdosEnabled) {
@@ -201,7 +213,7 @@ export class TetCloudConfigurator {
     getPrices(fieldKey, value, suffix) {
         const { priceHourly, priceMonthly } = this.fields[fieldKey];
         let multiplier = 1;
-        if (suffix === null || suffix === void 0 ? void 0 : suffix.value) {
+        if (suffix?.value) {
             multiplier = suffix.value;
         }
         if (fieldKey === 'bandwidth_ip') {
@@ -219,13 +231,12 @@ export class TetCloudConfigurator {
      * @param fieldKey The `key` value from the @see CloudConfiguratorField object.
      */
     getMinValue(fieldKey) {
-        var _a;
         const field = this.fields[fieldKey];
         const formValue = this.formValues[fieldKey];
         if (!field) {
             return null;
         }
-        if (((_a = formValue === null || formValue === void 0 ? void 0 : formValue.suffix) === null || _a === void 0 ? void 0 : _a.value) === 0) {
+        if (formValue?.suffix?.value === 0) {
             return 0;
         }
         return field.min;
@@ -268,17 +279,20 @@ export class TetCloudConfigurator {
         }
         return field.description[this.language];
     }
+    renderTitle = () => {
+        const subtitleKey = `components-cloud-configurator-${this.selectedTab}-subtitle`;
+        return (h(Fragment, null, h("p", { class: "content__subtitle" }, t(subtitleKey))));
+    };
     /**
      * Renders the number input using the `fields` configuration and the `formValues` objects.
      * @param fieldKey The `key` value from the @see CloudConfiguratorField object.
      * @param options An object containing additional display conditions not suppied by the `fields` configuration.
      */
     renderNumberInput(fieldKey, options) {
-        var _a;
-        if ((options === null || options === void 0 ? void 0 : options.hidden) === true) {
+        if (options?.hidden === true) {
             return null;
         }
-        return (h("div", { class: "form__input" }, h("tet-number-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), label: this.getLabel(fieldKey), "accessibility-label": this.getHelperText(fieldKey), "button-accessibility-label": getSuffixOptionTitle(fieldKey), helperText: this.getHelperText(fieldKey), value: (_a = this.formValues[fieldKey]) === null || _a === void 0 ? void 0 : _a.value, disabled: options === null || options === void 0 ? void 0 : options.disabled, suffixes: getSuffixes(fieldKey), onInputValueChanged: (event) => this.onNumberValueChanged(event.detail, fieldKey), selectOnFocus: this.selectOnFocus, theme: this.theme })));
+        return (h("div", { class: "form__input" }, h("tet-number-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), label: this.getLabel(fieldKey), "accessibility-label": this.getHelperText(fieldKey), "button-accessibility-label": getSuffixOptionTitle(fieldKey), helperText: this.getHelperText(fieldKey), value: this.formValues[fieldKey]?.value, disabled: options?.disabled, suffixes: getSuffixes(fieldKey), onInputValueChanged: (event) => this.onNumberValueChanged(event.detail, fieldKey), selectOnFocus: this.selectOnFocus, theme: this.theme })));
     }
     /**
      * Renders a row for the expandable list using the `fields` configuration and the `formValues` objects.
@@ -286,9 +300,8 @@ export class TetCloudConfigurator {
      * @param options An object containing additional display conditions not suppied by the `fields` configuration.
      */
     renderExpandableItem(fieldKey) {
-        var _a;
         const field = this.fields[fieldKey];
-        return (h("div", { class: "expandable-item" }, h("div", { class: "expandable-item__description" }, h("div", { class: "expandable-item__title" }, field.name[this.language]), h("div", { class: "expandable-item__helper" }, field.description[this.language])), h("tet-stepper-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), step: 1, value: (_a = this.formValues[fieldKey]) === null || _a === void 0 ? void 0 : _a.value, onInputValueChanged: (event) => this.onNumberValueChanged({ value: event.detail }, fieldKey), selectOnFocus: this.selectOnFocus, "accessibility-label": field.name[this.language], theme: this.theme })));
+        return (h("div", { class: "expandable-item" }, h("div", { class: "expandable-item__description" }, h("div", { class: "expandable-item__title" }, field.name[this.language]), h("div", { class: "expandable-item__helper" }, field.description[this.language])), h("tet-stepper-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), step: 1, value: this.formValues[fieldKey]?.value, onInputValueChanged: (event) => this.onNumberValueChanged({ value: event.detail }, fieldKey), selectOnFocus: this.selectOnFocus, "accessibility-label": field.name[this.language], theme: this.theme })));
     }
     /** Renders the table for the `summary` part. */
     renderSummaryTable() {
@@ -306,7 +319,6 @@ export class TetCloudConfigurator {
      * @param suffix Display suffix value, if empty determined by the value stored in `formValues`.
      */
     renderSummaryRow(groupKey, fieldFilter, suffix) {
-        var _a, _b;
         let fieldKeys;
         let titleTranslationKey = groupKeyTranslationMap[groupKey];
         if (!fieldFilter) {
@@ -317,7 +329,7 @@ export class TetCloudConfigurator {
         }
         if (groupKey === CloudFieldGroup.BANDWIDTH) {
             fieldKeys = fieldKeys.filter((fieldKey) => fieldKey !== 'ddos_protection_enabled');
-            if ((_a = this.formValues['ddos_protection_enabled']) === null || _a === void 0 ? void 0 : _a.value) {
+            if (this.formValues['ddos_protection_enabled']?.value) {
                 fieldKeys = fieldKeys.filter((fieldKey) => fieldKey !== 'bandwidth_capacity');
                 titleTranslationKey = 'components-cloud-configurator-group-bandwidth-ddos';
             }
@@ -341,8 +353,8 @@ export class TetCloudConfigurator {
                 cells.push(h("div", { class: "summary-table__header" }));
             }
             const displayName = this.getLabel(fieldKey);
-            const displaySuffix = suffix || ((_b = formValue.suffix) === null || _b === void 0 ? void 0 : _b.name);
-            cells.push(h("div", { class: "summary-table__label" }, !!displayName && h("span", null, `${displayName},`), h("span", null, `${formValue === null || formValue === void 0 ? void 0 : formValue.value}${displaySuffix}`)));
+            const displaySuffix = suffix || formValue.suffix?.name;
+            cells.push(h("div", { class: "summary-table__label" }, !!displayName && h("span", null, `${displayName},`), h("span", null, `${formValue?.value}${displaySuffix}`)));
             const isMonthly = this.selectedPeriod === CloudSummaryPeriod.MONTHLY;
             const price = formValue[this.selectedPeriod] || 0;
             const valueSuffix = isMonthly
@@ -367,7 +379,6 @@ export class TetCloudConfigurator {
         const msLicenseKeys = this.getFieldKeysByGroup(CloudFieldGroup.MS_LICENSE);
         const formValues = Object.values(this.formValues);
         const summaryCount = formValues.reduce((total, current) => {
-            var _a;
             if (cpuKeys.includes(current.key)) {
                 total.cpu += current.value;
             }
@@ -375,7 +386,7 @@ export class TetCloudConfigurator {
                 total.ram += current.value;
             }
             else if (storageKeys.includes(current.key)) {
-                const multiplier = ((_a = current.suffix) === null || _a === void 0 ? void 0 : _a.value) || 1;
+                const multiplier = current.suffix?.value || 1;
                 total.storage += current.value * multiplier;
             }
             return total;
@@ -400,17 +411,16 @@ export class TetCloudConfigurator {
         return (h(Host, null, h("div", { class: "cloud-configurator" }, h("div", { class: "content" }, h("div", { class: "content__title" }, h("tet-placeholder", { width: "90%", height: "1.75rem", darkTheme: this.theme === 'dark' })), h("div", { class: "content__subtitle" }, h("tet-placeholder", { width: "100%", height: "1rem", darkTheme: this.theme === 'dark' })), h("div", { class: "form", part: "form" }, h("div", { class: "form__group" }, h("div", { class: "form__group-label" }, h("tet-placeholder", { width: "10rem", height: "1rem", darkTheme: this.theme === 'dark' })), h("div", { class: "form__input" }, h("tet-placeholder", { width: "100%", height: "2.875rem", darkTheme: this.theme === 'dark' })), h("div", { class: "form__input" }, h("tet-placeholder", { width: "100%", height: "2.875rem", darkTheme: this.theme === 'dark' }))), h("div", { class: "form__group" }, h("div", { class: "form__group-label" }, h("tet-placeholder", { width: "10rem", height: "1rem", darkTheme: this.theme === 'dark' })), h("div", { class: "form__input" }, h("tet-placeholder", { width: "100%", height: "2.875rem", darkTheme: this.theme === 'dark' })), h("div", { class: "form__input" })))), h("div", { class: "header", part: "header" }, h("div", { class: "inner-wrapper" }, h("tet-placeholder", { width: "25.5rem", height: "2.875rem", darkTheme: this.theme === 'dark' }))))));
     }
     render() {
-        var _a, _b, _c, _d;
         if (this.isLoading) {
             return this.renderPlaceholder();
         }
         processTranslations('cloud-configurator', this.language);
         return (h(Host, null, h("div", { class: { 'cloud-configurator': true, [this.theme]: !!this.theme } }, h("div", { class: { header: true, [this.theme]: !!this.theme }, part: "header", ref: (el) => (this.headerRef = el) }, h("div", { class: "inner-wrapper" }, h("tet-tab-header", { class: "header__segment-switch", segmented: true, position: "center", defaultTab: "small", theme: this.theme, onTabSelected: this.onTabSelected }, h("button", { "data-name": CloudTabName.SMALL }, h("p", null, t('components-cloud-configurator-type-small'))), h("button", { "data-name": CloudTabName.AVERAGE }, h("p", null, t('components-cloud-configurator-type-average'))), h("button", { "data-name": CloudTabName.LARGE }, h("p", null, t('components-cloud-configurator-type-large'))), h("button", { "data-name": CloudTabName.INDIVIDUAL }, h("p", null, t('components-cloud-configurator-type-custom')))))), h("div", { class: "content", part: "content" }, this.renderTitle(), h("div", { class: "form", part: "form" }, h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-vcpu')), this.renderNumberInput('v_cpu_standard'), this.renderNumberInput('v_cpu_performance')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-vram')), this.renderNumberInput('v_ram'), h("div", { class: "form__input" })), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-storage')), this.renderNumberInput('storage_bronze'), this.renderNumberInput('storage_silver'), this.renderNumberInput('storage_gold'), this.renderNumberInput('storage_platinum')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-extra-storage')), this.renderNumberInput('storage_backup'), this.renderNumberInput('storage_object')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-license')), this.renderNumberInput('license_windows'), this.renderNumberInput('license_veeam')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-ms-license')), h("div", { class: { 'expandable-list': true, 'expanded': this.isListExpanded } }, this.renderExpandableItem('sql_server_standard_core'), this.renderExpandableItem('win_rds'), this.renderExpandableItem('win_server_standard_core'), this.renderExpandableItem('win_server_dc_core'), this.renderExpandableItem('sql_server_standard'), this.renderExpandableItem('office_standard'), this.renderExpandableItem('office_professional_plus'), this.renderExpandableItem('cis_suite_standard_core'), this.renderExpandableItem('project_standard'), this.renderExpandableItem('sharepoint_server'), h("div", { class: "expandable-list__toggle-row" }, this.isListExpanded && (h(Fragment, null, h("button", { class: "expandable-list__toggle", onClick: this.onExpandableListToggle, tabIndex: 0 }, t('components-cloud-configurator-ms-license-collapse'), ' ', h("tet-icon", { name: "chevron-up", theme: this.theme })), h("div", { innerHTML: t('components-cloud-configurator-ms-license-full-list') }))), !this.isListExpanded && (h("button", { class: "expandable-list__toggle", onClick: this.onExpandableListToggle, tabIndex: 0 }, t('components-cloud-configurator-ms-license-expand'), ' ', h("tet-icon", { name: "chevron-down", theme: this.theme })))))), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-bandwidth')), this.renderNumberInput('bandwidth_ip'), this.renderNumberInput('bandwidth_router'), this.renderNumberInput('bandwidth_capacity', {
             disabled: true,
-            hidden: Boolean((_a = this.formValues['ddos_protection_enabled']) === null || _a === void 0 ? void 0 : _a.value)
+            hidden: Boolean(this.formValues['ddos_protection_enabled']?.value)
         }), this.renderNumberInput('ddos_protection_bandwidth', {
-            hidden: !Boolean((_b = this.formValues['ddos_protection_enabled']) === null || _b === void 0 ? void 0 : _b.value)
-        }), h("div", { class: "form__input" }), h("div", { class: "form__checkbox" }, h("tet-checkbox", { label: this.getLabel('ddos_protection_enabled'), value: (_c = this.formValues['ddos_protection_enabled']) === null || _c === void 0 ? void 0 : _c.value, checked: !!((_d = this.formValues['ddos_protection_enabled']) === null || _d === void 0 ? void 0 : _d.value), onCheck: this.onDdosProtectionEnabledCheck, theme: this.theme }), h("p", { class: "form__checkbox-helper" }, this.getHelperText('ddos_protection_enabled'))))), h("div", { class: "summary", part: "summary" }, h("h2", { class: "summary__title" }, t('components-cloud-configurator-group-summary')), h("div", { class: "summary__toggle", role: "radiogroup" }, h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.MONTHLY, checked: this.selectedPeriod === CloudSummaryPeriod.MONTHLY, label: t('components-cloud-configurator-summary-period-monthly'), theme: this.theme, onCheck: this.onSummaryPeriodChange }), h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.HOURLY, checked: this.selectedPeriod === CloudSummaryPeriod.HOURLY, label: t('components-cloud-configurator-summary-period-hourly'), theme: this.theme, onCheck: this.onSummaryPeriodChange })), this.renderSummaryTable())), h("div", { class: { 'floating-summary': true, 'floating-summary--is-pinned': this.isFloatingSummary }, part: "floating-summary" }, this.renderFloatingSummary()), h("div", { part: "footer", class: "footer", ref: (el) => (this.footerRef = el) }, h("tet-button", { class: "footer__button", size: "large", type: "primary", theme: this.theme, onClick: this.onFormSubmit }, t('components-cloud-configurator-submit'))))));
+            hidden: !Boolean(this.formValues['ddos_protection_enabled']?.value)
+        }), h("div", { class: "form__input" }), h("div", { class: "form__checkbox" }, h("tet-checkbox", { label: this.getLabel('ddos_protection_enabled'), value: this.formValues['ddos_protection_enabled']?.value, checked: !!this.formValues['ddos_protection_enabled']?.value, onCheck: this.onDdosProtectionEnabledCheck, theme: this.theme }), h("p", { class: "form__checkbox-helper" }, this.getHelperText('ddos_protection_enabled'))))), h("div", { class: "summary", part: "summary" }, h("h2", { class: "summary__title" }, t('components-cloud-configurator-group-summary')), h("div", { class: "summary__toggle", role: "radiogroup" }, h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.MONTHLY, checked: this.selectedPeriod === CloudSummaryPeriod.MONTHLY, label: t('components-cloud-configurator-summary-period-monthly'), theme: this.theme, onCheck: this.onSummaryPeriodChange }), h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.HOURLY, checked: this.selectedPeriod === CloudSummaryPeriod.HOURLY, label: t('components-cloud-configurator-summary-period-hourly'), theme: this.theme, onCheck: this.onSummaryPeriodChange })), this.renderSummaryTable())), h("div", { class: { 'floating-summary': true, 'floating-summary--is-pinned': this.isFloatingSummary }, part: "floating-summary" }, this.renderFloatingSummary()), h("div", { part: "footer", class: "footer", ref: (el) => (this.footerRef = el) }, h("tet-button", { class: "footer__button", size: "large", type: "primary", theme: this.theme, onClick: this.onFormSubmit }, t('components-cloud-configurator-submit'))))));
     }
     static get is() { return "tet-cloud-configurator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-macd-view/tet-macd-view.js

@@ -10,10 +10,6 @@ import { forceUpdate, h, Host } from "@stencil/core";
  */
 export class TetMacdView {
     constructor() {
-        /**
-         * Current MACD order types.
-         */
-        this.currentMacdOrderTypes = [];
         this.language = 'lv';
         this.theme = Theme.LIGHT;
         this.showErrorNotification = false;
@@ -32,11 +28,31 @@ export class TetMacdView {
         this.ceaseFn = undefined;
         this.modifyFn = undefined;
     }
+    /**
+     * The reference to Modal Dialog.
+     */
+    modalDialogEl;
+    /**
+     * The title of Modal Dialog.
+     */
+    modalTitle;
+    /**
+     * The content of Modal Dialog.
+     */
+    modalContent;
+    /**
+     * The Communication redirect url.
+     */
+    communicationRedirectUrl;
+    /**
+     * Current MACD order types.
+     */
+    currentMacdOrderTypes = [];
     onLanguageChange(language) {
         processTranslations('macd', language).then(() => forceUpdate(this));
     }
     async setAccessToken(accessToken) {
-        if ((accessToken === null || accessToken === void 0 ? void 0 : accessToken.length) > 0) {
+        if (accessToken?.length > 0) {
             this.showLoader = true;
             await this.loadMacdOrderTypes();
         }
@@ -46,6 +62,22 @@ export class TetMacdView {
             this.currentMacdOrderTypes = [...macdOrderTypes];
         }
     }
+    /**
+     * The event is emitted when the user click on MACD order type.
+     */
+    selectedMacdOrderType;
+    /**
+     * The event is emitted when the user click on "Communicate" CTA.
+     */
+    openCommunication;
+    /**
+     * The event is emitted when there are issues loading data from backend.
+     */
+    errorLoading;
+    /**
+     * The event is emitted when User clicks on Modal Dialog action buttons.
+     */
+    communicationDialogResponse;
     async componentWillLoad() {
         processTranslations('macd', this.language).then(() => forceUpdate(this));
         if (this.hasMacdOrderTypes(this.macdOrderTypes)) {
@@ -54,8 +86,7 @@ export class TetMacdView {
         }
     }
     async componentDidLoad() {
-        var _a;
-        if (((_a = this.accessToken) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        if (this.accessToken?.length > 0) {
             this.showLoader = true;
             await this.loadMacdOrderTypes();
         }
@@ -65,7 +96,7 @@ export class TetMacdView {
      * optional can pass arg with macdOrderTypes that will be checked instead.
      */
     hasMacdOrderTypes(macdOrderTypes) {
-        const arrayToCheck = macdOrderTypes !== null && macdOrderTypes !== void 0 ? macdOrderTypes : this.currentMacdOrderTypes;
+        const arrayToCheck = macdOrderTypes ?? this.currentMacdOrderTypes;
         return Array.isArray(arrayToCheck) && arrayToCheck.length > 0;
     }
     /**
@@ -219,12 +250,10 @@ export class TetMacdView {
      * Renders Modal Dialog.
      */
     renderDialog() {
-        var _a, _b;
-        const modalTitle = (_a = (this.modalTitle && this.modalTitle.length > 0 && t(this.modalTitle))) !== null && _a !== void 0 ? _a : undefined;
-        const modalContent = (_b = (this.modalContent && this.modalContent.length > 0 && t(this.modalContent))) !== null && _b !== void 0 ? _b : undefined;
+        const modalTitle = (this.modalTitle && this.modalTitle.length > 0 && t(this.modalTitle)) ?? undefined;
+        const modalContent = (this.modalContent && this.modalContent.length > 0 && t(this.modalContent)) ?? undefined;
         const submitFn = () => {
-            var _a;
-            const redirectUrl = (_a = (this.communicationRedirectUrl && this.communicationRedirectUrl.length > 0 && t(this.communicationRedirectUrl))) !== null && _a !== void 0 ? _a : undefined;
+            const redirectUrl = (this.communicationRedirectUrl && this.communicationRedirectUrl.length > 0 && t(this.communicationRedirectUrl)) ?? undefined;
             this.modalDialogEl.close();
             this.communicationDialogResponse.emit({
                 choice: 'redirect-to-communication',

package/dist/collection/components/views/tet-price-view/tet-price-view.js

@@ -150,6 +150,8 @@ export class TetPriceView {
         this.footerTextType = 'regular';
         this.staticColors = true;
     }
+    /** Host element */
+    hostElement;
     render() {
         const mainClasses = {
             [this.theme]: true,
@@ -196,8 +198,8 @@ export class TetPriceView {
                 gap: COMPONENT_SIZES[this.size].gap,
             }
         };
-        const isCentsPrice = (this === null || this === void 0 ? void 0 : this.centsPrice) && (this === null || this === void 0 ? void 0 : this.centsPrice.length) > 0;
-        return (h(Host, { key: '8e05f557e9b657da2c397f03ea0ccce84f5b938c' }, h("div", { key: 'ecb7c516269d213504dd668140d982dde3e634c3', class: mainClasses, style: styles.container }, h("div", { key: '529f75a1ea9e0ddb8a1f3a920988a9b848d6dd6c', class: "price-view__body" }, (this === null || this === void 0 ? void 0 : this.headingText) && (h("h3", { key: '0c3595779d5150a791b95762911e87bd108e7f06', class: "price-view__heading", style: styles.heading }, this.headingText)), h("div", { key: 'be33a2b4025fbb8a7a5c8bc6c078e62ed098ec95', class: "price-view__price", style: { fontFamily: this.font, gap: styles.price.gap } }, h("span", { key: 'c3726df516671ef511e9be1641250495dd5885e1', class: "price-view__euro", style: styles.euro }, this.euroPrice, !isMonthly && !isCentsPrice ? '€' : ''), h("div", { key: '7e07be30ba9c735debb4eff37d26d1bfa683960e', class: "price-view__cents-container" }, h("span", { key: '21425123b6d56f0e947ba50b0b8e3397972a4c09', class: "price-view__cents", style: styles.cents }, this === null || this === void 0 ? void 0 : this.centsPrice), this.priceType && (h("span", { key: '614e5634e902c22b3ace04150b4e1a52db76547a', class: "price-view__type", style: styles.priceType }, isMonthly ? '€/mēn.' : '', !isMonthly && isCentsPrice ? 'EUR' : '')))), (this === null || this === void 0 ? void 0 : this.footerText) && (h("p", { key: '93e7551ef0ae1c7cb63c029e4ebfb37d63a87d60', class: "price-view__footer", style: styles.footer }, this.footerText))))));
+        const isCentsPrice = this?.centsPrice && this?.centsPrice.length > 0;
+        return (h(Host, { key: '8e05f557e9b657da2c397f03ea0ccce84f5b938c' }, h("div", { key: 'ecb7c516269d213504dd668140d982dde3e634c3', class: mainClasses, style: styles.container }, h("div", { key: '529f75a1ea9e0ddb8a1f3a920988a9b848d6dd6c', class: "price-view__body" }, this?.headingText && (h("h3", { key: '0c3595779d5150a791b95762911e87bd108e7f06', class: "price-view__heading", style: styles.heading }, this.headingText)), h("div", { key: 'be33a2b4025fbb8a7a5c8bc6c078e62ed098ec95', class: "price-view__price", style: { fontFamily: this.font, gap: styles.price.gap } }, h("span", { key: 'c3726df516671ef511e9be1641250495dd5885e1', class: "price-view__euro", style: styles.euro }, this.euroPrice, !isMonthly && !isCentsPrice ? '€' : ''), h("div", { key: '7e07be30ba9c735debb4eff37d26d1bfa683960e', class: "price-view__cents-container" }, h("span", { key: '21425123b6d56f0e947ba50b0b8e3397972a4c09', class: "price-view__cents", style: styles.cents }, this?.centsPrice), this.priceType && (h("span", { key: '614e5634e902c22b3ace04150b4e1a52db76547a', class: "price-view__type", style: styles.priceType }, isMonthly ? '€/mēn.' : '', !isMonthly && isCentsPrice ? 'EUR' : '')))), this?.footerText && (h("p", { key: '93e7551ef0ae1c7cb63c029e4ebfb37d63a87d60', class: "price-view__footer", style: styles.footer }, this.footerText))))));
     }
     static get is() { return "tet-price-view"; }
     static get encapsulation() { return "shadow"; }