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

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

@@ -5,66 +5,6 @@ import { processTranslations, t } from "../../../../services/translations/index"
 const CUSTOM_BREAKPOINT = 422;
 export class TetB2bCompareCard {
     constructor() {
-        /** @private The suffix for the price displayed - "€/mēn."). */
-        this.priceSuffix = '€/mēn.';
-        /**
-         * @private Initializes localCount based on options.counterOptions.defaultValue or defaults to 1.
-         */
-        this.initCount = () => {
-            var _a, _b, _c;
-            this.localCount = (_c = (_a = this.count) !== null && _a !== void 0 ? _a : (_b = this.options.counterOptions) === null || _b === void 0 ? void 0 : _b.defaultValue) !== null && _c !== void 0 ? _c : 1;
-        };
-        /**
-         * @private Updates localCount and emits the countChange event.
-         * @param newCount - The new count value to be emitted.
-         */
-        this.updateCountAndEmit = (newCount) => {
-            if (typeof newCount === 'number') {
-                this.localCount = newCount;
-            }
-            this.countChange.emit({ cardId: this.options.id, count: newCount });
-        };
-        /**
-         * @private Handles the card click event, setting localIsSelected to true and emitting selectedChange.
-         */
-        this.handleSelect = (e) => {
-            const isLinkOrDescendant = e.target.closest('a');
-            if (isLinkOrDescendant) {
-                return;
-            }
-            if (!this.localIsSelected) {
-                this.localIsSelected = true;
-                this.selectedChange.emit(true);
-            }
-        };
-        /**
-         * @private Handles the value change event from the nested tet-stepper-input component.
-         * @param detail - The event containing the new quantity value.
-         */
-        this.handleCounterValueChange = ({ detail }) => {
-            if (this.added) {
-                this.updateCountAndEmit(detail);
-            }
-            else {
-                this.localCount = detail;
-            }
-        };
-        /**
-         * @private Handles the "Add to Basket" action, stops event propagation, and emits the new count.
-         * @param e - The DOM event.
-         */
-        this.handleAdd = (e) => {
-            e.stopPropagation();
-            this.updateCountAndEmit(this.localCount);
-        };
-        /**
-         * @private Handles the "Remove from Basket" action, stops event propagation, and emits a null count.
-         * @param e - The DOM event.
-         */
-        this.handleRemove = (e) => {
-            e.stopPropagation();
-            this.updateCountAndEmit(null);
-        };
         this.localCount = 0;
         this.localIsSelected = false;
         this.isTablet = false;
@@ -73,6 +13,12 @@ export class TetB2bCompareCard {
         this.count = undefined;
         this.isSelected = false;
     }
+    /** @private Tracks changes in the component's host element size to manage responsive state. */
+    resizeObserver;
+    /** @private The suffix for the price displayed - "€/mēn."). */
+    priceSuffix = '€/mēn.';
+    /** @private The reference to the host custom element. */
+    hostElement;
     /**
      * @private Signals whether the item is currently considered "added" to the cart.
      * Derived from the external 'count' prop being a defined number.
@@ -101,6 +47,16 @@ export class TetB2bCompareCard {
             this.localIsSelected = newSelected;
         }
     }
+    /**
+     * Emitted when the user changes the quantity counter value and submits; or on card close event.
+     * @event
+     */
+    countChange;
+    /**
+     * Emitted when the card is clicked to change its selected state
+     * @event
+     */
+    selectedChange;
     componentWillLoad() {
         this.initCount();
         processTranslations('tet-components', 'lv').then(() => forceUpdate(this));
@@ -119,15 +75,72 @@ export class TetB2bCompareCard {
             this.resizeObserver.disconnect();
         }
     }
+    /**
+     * @private Initializes localCount based on options.counterOptions.defaultValue or defaults to 1.
+     */
+    initCount = () => {
+        this.localCount = this.count ?? this.options.counterOptions?.defaultValue ?? 1;
+    };
+    /**
+     * @private Updates localCount and emits the countChange event.
+     * @param newCount - The new count value to be emitted.
+     */
+    updateCountAndEmit = (newCount) => {
+        if (typeof newCount === 'number') {
+            this.localCount = newCount;
+        }
+        this.countChange.emit({ cardId: this.options.id, count: newCount });
+    };
+    /**
+     * @private Handles the card click event, setting localIsSelected to true and emitting selectedChange.
+     */
+    handleSelect = (e) => {
+        const isLinkOrDescendant = e.target.closest('a');
+        if (isLinkOrDescendant) {
+            return;
+        }
+        if (!this.localIsSelected) {
+            this.localIsSelected = true;
+            this.selectedChange.emit(true);
+        }
+    };
+    /**
+     * @private Handles the value change event from the nested tet-stepper-input component.
+     * @param detail - The event containing the new quantity value.
+     */
+    handleCounterValueChange = ({ detail }) => {
+        if (this.added) {
+            this.updateCountAndEmit(detail);
+        }
+        else {
+            this.localCount = detail;
+        }
+    };
+    /**
+     * @private Handles the "Add to Basket" action, stops event propagation, and emits the new count.
+     * @param e - The DOM event.
+     */
+    handleAdd = (e) => {
+        e.stopPropagation();
+        this.updateCountAndEmit(this.localCount);
+    };
+    /**
+     * @private Handles the "Remove from Basket" action, stops event propagation, and emits a null count.
+     * @param e - The DOM event.
+     */
+    handleRemove = (e) => {
+        e.stopPropagation();
+        this.updateCountAndEmit(null);
+    };
     render() {
         const { localIsSelected, localCount, options, priceSuffix } = this;
         const { title, subtitle, isBestChoice, price, discountPrice, benefits, contract } = options;
-        const currentPrice = discountPrice !== null && discountPrice !== void 0 ? discountPrice : price;
+        const currentPrice = discountPrice ?? price;
         const currentTotal = (localCount * currentPrice).toFixed(2);
         const oldTotal = (localCount * price).toFixed(2);
         const detailsId = `details-${options.id}`;
         const titleId = `title-${options.id}`;
-        return (h(Host, { key: 'fb55819189417025a6ff7b17d927e82c0884bdab' }, h("div", { key: '01f724dcd984957286c3f4bbcd648c5a6cf5ac2d', class: { card__wrapper: isBestChoice } }, isBestChoice && (h("div", { key: 'bbfe753f9cda625a3722f92037dcfed2f71d69fd', class: { 'card__badge': true, 'card__badge--is-tablet': this.isTablet } }, t('components-b2b-configurator-best-choice'))), h("div", Object.assign({ key: 'aa3ccc968da6e0c1c4d02dc707fa1fbb812f900a', class: { 'card': true, [`${this.theme}`]: true, 'card--selected': !!this.count || localIsSelected }, onClick: this.handleSelect, onKeyDown: a11yBtnClick, tabindex: 0, role: "button", "aria-expanded": localIsSelected }, (localIsSelected ? { 'aria-controls': detailsId } : {}), { "aria-labelledby": titleId }), h("section", { key: '7476d69d4f4420e2e7b7cefcdcf6bebac2f25a4b', class: { 'offer': true, 'offer--is-tablet': this.isTablet } }, h("div", { key: '5f87e22fad55417f0e24146452ee8f32c97c0bc7', class: "offer__header" }, h("div", { key: 'e43787318e1614bc0e77e3a0ef2623a9cf719763', class: { 'offer__top-info': true, 'offer__top-info--is-tablet': this.isTablet } }, h("h3", { key: '4e2b8e30f85bc06d7a6d5b3e4daec545371b78d2', id: titleId, class: { 'offer__title': true, 'offer__title--is-tablet': this.isTablet } }, title), h("div", { key: 'ee30c90972ee615bed5305de0b2a00ac1f2f987c', class: { 'offer__price': true, 'offer__price--is-tablet': this.isTablet } }, currentPrice.toFixed(2), h("span", { key: '852bcb2b6c1481c60bb5cced1a7f4aff1ab76004', class: { 'offer__price-suffix': true, 'offer__price-suffix--is-tablet': this.isTablet } }, ' ', h("span", { key: 'c3f227c198a670cb44e44427d202c52d13b8f9e6' }, priceSuffix)))), h("p", { key: 'd0baae9f2c3b1296540e0284556ec41c86364817', class: { 'offer__subtitle': true, 'offer__subtitle--is-tablet': this.isTablet } }, subtitle)), h("hr", { key: '5046b8ca91442bdcfa0b06ec384bbb8d3daff0e4', class: "divider divider--slim" }), h("tet-text-list", { key: 'e60899203c82d30f8936fa0643a961aaeb27663f', class: "offer__benefits", withIcon: true, listIcon: "tc-check", theme: this.theme }, benefits.map((benefit) => (h("span", null, benefit)))), contract && (h("div", { key: '69442b31d59e499906cf4962b4f3fc50df8ddb4c', class: "offer__contract-link" }, h("a", { key: 'd82dba7210d1af5493e3ac0bfd4a6d12a2865edc', class: { 'tet-link': true, [`${this.theme}`]: true }, href: contract, target: "_blank", rel: "noopener noreferrer" }, t('components-b2b-configurator-contract-link-label'), h("span", { key: '974ef9b2a17ffe3335122d3ef0dd52c00f9d37ea', class: "sr-only" }, t('components-a11y-open-link-in-new-window')))))), localIsSelected && [
+        return (h(Host, { key: 'fb55819189417025a6ff7b17d927e82c0884bdab' }, h("div", { key: '01f724dcd984957286c3f4bbcd648c5a6cf5ac2d', class: { card__wrapper: isBestChoice } }, isBestChoice && (h("div", { key: 'bbfe753f9cda625a3722f92037dcfed2f71d69fd', class: { 'card__badge': true, 'card__badge--is-tablet': this.isTablet } }, t('components-b2b-configurator-best-choice'))), h("div", { key: 'aa3ccc968da6e0c1c4d02dc707fa1fbb812f900a', class: { 'card': true, [`${this.theme}`]: true, 'card--selected': !!this.count || localIsSelected }, onClick: this.handleSelect, onKeyDown: a11yBtnClick, tabindex: 0, role: "button", "aria-expanded": localIsSelected, ...(localIsSelected ? { 'aria-controls': detailsId } : {}), "aria-labelledby": titleId }, h("section", { key: '7476d69d4f4420e2e7b7cefcdcf6bebac2f25a4b', class: { 'offer': true, 'offer--is-tablet': this.isTablet } }, h("div", { key: '5f87e22fad55417f0e24146452ee8f32c97c0bc7', class: "offer__header" }, h("div", { key: 'e43787318e1614bc0e77e3a0ef2623a9cf719763', class: { 'offer__top-info': true, 'offer__top-info--is-tablet': this.isTablet } }, h("h3", { key: '4e2b8e30f85bc06d7a6d5b3e4daec545371b78d2', id: titleId, class: { 'offer__title': true, 'offer__title--is-tablet': this.isTablet } }, title), h("div", { key: 'ee30c90972ee615bed5305de0b2a00ac1f2f987c', class: { 'offer__price': true, 'offer__price--is-tablet': this.isTablet } }, currentPrice.toFixed(2), h("span", { key: '852bcb2b6c1481c60bb5cced1a7f4aff1ab76004', class: { 'offer__price-suffix': true, 'offer__price-suffix--is-tablet': this.isTablet } }, ' ', h("span", { key: 'c3f227c198a670cb44e44427d202c52d13b8f9e6' }, priceSuffix)))), h("p", { key: 'd0baae9f2c3b1296540e0284556ec41c86364817', class: { 'offer__subtitle': true, 'offer__subtitle--is-tablet': this.isTablet } }, subtitle)), h("hr", { key: '5046b8ca91442bdcfa0b06ec384bbb8d3daff0e4', class: "divider divider--slim" }), h("tet-text-list", { key: 'e60899203c82d30f8936fa0643a961aaeb27663f', class: "offer__benefits", withIcon: true, listIcon: "tc-check", theme: this.theme }, benefits.map((benefit) => (h("span", null, benefit)))), contract && (h("div", { key: '69442b31d59e499906cf4962b4f3fc50df8ddb4c', class: "offer__contract-link" }, h("a", { key: 'd82dba7210d1af5493e3ac0bfd4a6d12a2865edc', class: { 'tet-link': true, [`${this.theme}`]: true }, href: contract, target: "_blank", rel: "noopener noreferrer" }, t('components-b2b-configurator-contract-link-label'), h("span", { key: '974ef9b2a17ffe3335122d3ef0dd52c00f9d37ea', class: "sr-only" }, t('components-a11y-open-link-in-new-window')))))), localIsSelected && [
             h("hr", { key: '0c8262c7071b3d29b60c3b0585f4267995a6ebc9', class: "divider" }),
             h("section", { key: '1b769a5109c6f3fd630db105815df20d61549476', id: detailsId, role: "region", "aria-labelledby": titleId, class: { 'details': true, 'details--is-tablet': this.isTablet } }, h("div", { key: 'f1d0f98651555a8ea20df42a59748db9531592a6', class: { 'details__price-block': true, 'details__price-block--is-tablet': this.isTablet } }, h("span", { key: '49bf16ce3e1d17ea945c09c55bacdcbb0ba625ca' }, t('components-b2b-configurator-monthly-payment')), h("div", { key: '771f52eb3c4753ffe032d0a9987abc9d610acddd', class: "details__total", "aria-live": "polite" }, h("div", { key: '923e856154fb08a2d1fd2caae03e0dcc997296d4', class: "details__total--current" }, currentTotal, " ", priceSuffix), discountPrice != null && discountPrice < price && (h("div", { key: 'd09b58c1a939f5afb1c0534cd860fe016144e7e8', class: "details__total--original" }, oldTotal, " ", priceSuffix)))), h("hr", { key: '9287063fddec7add9799ca5aefd87af1ae67a145', class: "divider" }), h("div", { key: '2b62b079963f57098fff47e0974eb9a71e17c7c1', class: { 'details__actions': true, 'details__actions--is-tablet': this.isTablet } }, h("div", { key: 'c32ee4619ac0081ad2c26a5297a519ac2909e5a2', class: "details__quantity-control" }, options.counterOptions && [
                 h("span", { key: '4be740f29a8ae2549282bb1374ff66ee2e1d0be6', id: `qty-label-${options.id}`, class: "details__quantity-label" }, t(options.counterOptions.label)),

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

@@ -5,36 +5,6 @@ import { h } from "@stencil/core";
  */
 export class TetBusinessCard {
     constructor() {
-        /**
-         * @param entries
-         * @returns null
-         */
-        this.onResize = (entries) => {
-            const breakpointXsInRem = getComputedStyle(this.element).getPropertyValue('--tet-business-card-breakpoint-xs');
-            const breakpointLgInRem = getComputedStyle(this.element).getPropertyValue('--tet-business-card-breakpoint-lg');
-            const breakpointXs = getConvertedPixels(breakpointXsInRem);
-            const breakpointLg = getConvertedPixels(breakpointLgInRem);
-            if (!breakpointXs || !breakpointLg) {
-                return;
-            }
-            entries.forEach(entry => {
-                const firstOrDefault = () => true;
-                const rootElementSize = entry.borderBoxSize.find(firstOrDefault);
-                if (!rootElementSize) {
-                    return;
-                }
-                const rootElementWidth = rootElementSize.inlineSize;
-                if (rootElementWidth < breakpointXs) {
-                    this.size = 'xs';
-                }
-                if (breakpointXs < rootElementWidth && rootElementWidth < breakpointLg) {
-                    this.size = 'sm';
-                }
-                if (rootElementWidth >= breakpointLg) {
-                    this.size = 'lg';
-                }
-            });
-        };
         this.mainTitle = undefined;
         this.subTitle = undefined;
         this.infoText = undefined;
@@ -42,6 +12,16 @@ export class TetBusinessCard {
         this.theme = 'light';
         this.size = 'xs';
     }
+    /**
+     * The root HTML Element
+     */
+    rootRef;
+    /**
+     * The root HTML Element
+     */
+    element;
+    /** The resize observer watching element resizes. */
+    resizeObserver;
     /**
      * Attaches the `resizeObserver` to rootRef
      */
@@ -51,6 +31,36 @@ export class TetBusinessCard {
     componentWillLoad() {
         this.resizeObserver = new ResizeObserver(this.onResize);
     }
+    /**
+     * @param entries
+     * @returns null
+     */
+    onResize = (entries) => {
+        const breakpointXsInRem = getComputedStyle(this.element).getPropertyValue('--tet-business-card-breakpoint-xs');
+        const breakpointLgInRem = getComputedStyle(this.element).getPropertyValue('--tet-business-card-breakpoint-lg');
+        const breakpointXs = getConvertedPixels(breakpointXsInRem);
+        const breakpointLg = getConvertedPixels(breakpointLgInRem);
+        if (!breakpointXs || !breakpointLg) {
+            return;
+        }
+        entries.forEach(entry => {
+            const firstOrDefault = () => true;
+            const rootElementSize = entry.borderBoxSize.find(firstOrDefault);
+            if (!rootElementSize) {
+                return;
+            }
+            const rootElementWidth = rootElementSize.inlineSize;
+            if (rootElementWidth < breakpointXs) {
+                this.size = 'xs';
+            }
+            if (breakpointXs < rootElementWidth && rootElementWidth < breakpointLg) {
+                this.size = 'sm';
+            }
+            if (rootElementWidth >= breakpointLg) {
+                this.size = 'lg';
+            }
+        });
+    };
     render() {
         const { mainTitle, subTitle, infoText, type, size, theme } = this;
         return (h("div", { key: '623c7ce9661b60b708a1e999f81f3873e0806e1d', ref: divRef => {

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

@@ -9,15 +9,6 @@ import { h } from "@stencil/core";
  */
 export class TetBusinessCompareCard {
     constructor() {
-        /**
-         * Checks if any of footer slots has content to show
-         */
-        this.checkFooterSlotContent = () => {
-            var _a, _b;
-            const hasButtonSlot = !!((_a = this.buttonSlotRef.assignedElements()) === null || _a === void 0 ? void 0 : _a.length);
-            const hasLinkSlot = !!((_b = this.linkSlotRef.assignedElements()) === null || _b === void 0 ? void 0 : _b.length);
-            this.hasContentInFooter = hasButtonSlot || hasLinkSlot;
-        };
         this.mainTitle = undefined;
         this.bulletPoints = [];
         this.pricePrefix = undefined;
@@ -26,9 +17,25 @@ export class TetBusinessCompareCard {
         this.theme = 'light';
         this.hasContentInFooter = false;
     }
+    /**
+     * The slot element for button
+     */
+    buttonSlotRef;
+    /**
+     * The slot element for link
+     */
+    linkSlotRef;
+    /**
+     * Checks if any of footer slots has content to show
+     */
+    checkFooterSlotContent = () => {
+        const hasButtonSlot = !!this.buttonSlotRef.assignedElements()?.length;
+        const hasLinkSlot = !!this.linkSlotRef.assignedElements()?.length;
+        this.hasContentInFooter = hasButtonSlot || hasLinkSlot;
+    };
     render() {
         const { mainTitle, bulletPoints, theme, pricePrefix, price, currency } = this;
-        return (h("div", { key: '5e1d0b71f4b76cc04be038eeaa9cc2c6f10841a6', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: '0f744f6661b839014c01a350df8e5c40a5621c4c', class: "tet-business-compare-card__body" }, h("div", { key: '98a2955c54ea7c77081f8d568cfe589d467221cb', class: "tet-business-compare-card__title" }, h("slot", { key: '863863123521db2513d0d68b7936dc7ef07d1ab6', name: "title" }, h("h3", { key: '7e8038ae06e887648408fe22759d8078fcc811a8' }, mainTitle))), h("div", { key: 'af674237e132462560d6ca829962eb9cf85e6c98', class: "tet-business-compare-card__content" }, h("slot", { key: '142549e6c6dfc9bec69780600de756aaae972fb6', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '1196f1e77382a70e6312bcdfce39487cbb30b72f', class: "bullet-points", theme: this.theme === 'dark' ? 'dark' : 'light' }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: '63ff7800f5913ad00afc5282423f2ea227277542', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: '0c060ab46b15202e1b9def1434e798c27f27f309', class: "tet-business-compare-card__price" }, h("span", { key: '49adc5b056e2f598ef0b6ebc19f4db8ae3157dcd', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: 'b5cb30b15c5e3e9794de481d5e54da27ad81aa16', class: "tet-business-compare-card__price" }, price), h("div", { key: 'c3134011a3f08dc923bb24959100c343446af4bc', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: '5dd89161209222fea55a71663343ab9bfe98f87b', class: {
+        return (h("div", { key: '5e1d0b71f4b76cc04be038eeaa9cc2c6f10841a6', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: '0f744f6661b839014c01a350df8e5c40a5621c4c', class: "tet-business-compare-card__body" }, h("div", { key: '98a2955c54ea7c77081f8d568cfe589d467221cb', class: "tet-business-compare-card__title" }, h("slot", { key: '863863123521db2513d0d68b7936dc7ef07d1ab6', name: "title" }, h("h3", { key: '7e8038ae06e887648408fe22759d8078fcc811a8' }, mainTitle))), h("div", { key: 'af674237e132462560d6ca829962eb9cf85e6c98', class: "tet-business-compare-card__content" }, h("slot", { key: '142549e6c6dfc9bec69780600de756aaae972fb6', name: "content" }, !!bulletPoints?.length && (h("tet-text-list", { key: '1196f1e77382a70e6312bcdfce39487cbb30b72f', class: "bullet-points", theme: this.theme === 'dark' ? 'dark' : 'light' }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: '63ff7800f5913ad00afc5282423f2ea227277542', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: '0c060ab46b15202e1b9def1434e798c27f27f309', class: "tet-business-compare-card__price" }, h("span", { key: '49adc5b056e2f598ef0b6ebc19f4db8ae3157dcd', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: 'b5cb30b15c5e3e9794de481d5e54da27ad81aa16', class: "tet-business-compare-card__price" }, price), h("div", { key: 'c3134011a3f08dc923bb24959100c343446af4bc', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: '5dd89161209222fea55a71663343ab9bfe98f87b', class: {
                 'tet-business-compare-card__footer': true,
                 'tet-business-compare-card__footer--show': this.hasContentInFooter,
             } }, h("slot", { key: '96821535ea4bbeca437b165f7aceacc2f0265963', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: '69957318445326ab6703dc62ae685a40b273bfad', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));

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

@@ -3,38 +3,6 @@ import { processTranslations, t } from "../../../../services/translations/index"
 import { a11yBtnClick } from "../../../../services/utils/a11y";
 export class TetBusinessSummaryCardComponent {
     constructor() {
-        /** Function to render stepper label if provided */
-        this.renderLabel = (withValue) => {
-            const { stepperLabel, value } = this;
-            if (!stepperLabel) {
-                return;
-            }
-            if (withValue) {
-                return (h("span", { class: "contract-term" }, stepperLabel, ": ", value));
-            }
-            else {
-                return h("span", { class: "stepper-label" }, stepperLabel);
-            }
-        };
-        /** Render stepper if necessary */
-        this.renderStepper = () => {
-            const { withStepper, theme, value, minValue, maxValue } = this;
-            if (!withStepper) {
-                return;
-            }
-            return (h("div", { class: "stepper-wrapper" }, this.renderLabel(false), h("tet-stepper-input", { class: "business-summary-card__stepper", theme: theme, value: value, step: 1, min: minValue, max: maxValue, onInputValueChanged: (e) => {
-                    this.value = e.detail;
-                    this.amountChange.emit(e.detail);
-                } })));
-        };
-        /** Render Edit or Delete Icon Button */
-        this.renderIconButton = (type) => {
-            const buttonType = type === 'tc-edit-box' ? 'edit' : 'delete';
-            const buttonClickEvent = (e) => {
-                type === 'tc-edit-box' ? this.editButtonClick.emit(e) : this.deleteButtonClick.emit(e);
-            };
-            return (h("button", { class: "icon-button", onClick: (e) => buttonClickEvent(e), onKeyDown: a11yBtnClick }, h("tet-icon", { class: buttonType, name: type, focusable: false })));
-        };
         this.productName = undefined;
         this.price = undefined;
         this.productDescription = undefined;
@@ -50,9 +18,47 @@ export class TetBusinessSummaryCardComponent {
         this.context = 'edit';
         this.language = 'lv';
     }
+    /** Emit event when Edit button clicked */
+    editButtonClick;
+    /** Emit event when Delete button clicked */
+    deleteButtonClick;
+    /** Emit event when amount of products changed */
+    amountChange;
     async componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    /** Function to render stepper label if provided */
+    renderLabel = (withValue) => {
+        const { stepperLabel, value } = this;
+        if (!stepperLabel) {
+            return;
+        }
+        if (withValue) {
+            return (h("span", { class: "contract-term" }, stepperLabel, ": ", value));
+        }
+        else {
+            return h("span", { class: "stepper-label" }, stepperLabel);
+        }
+    };
+    /** Render stepper if necessary */
+    renderStepper = () => {
+        const { withStepper, theme, value, minValue, maxValue } = this;
+        if (!withStepper) {
+            return;
+        }
+        return (h("div", { class: "stepper-wrapper" }, this.renderLabel(false), h("tet-stepper-input", { class: "business-summary-card__stepper", theme: theme, value: value, step: 1, min: minValue, max: maxValue, onInputValueChanged: (e) => {
+                this.value = e.detail;
+                this.amountChange.emit(e.detail);
+            } })));
+    };
+    /** Render Edit or Delete Icon Button */
+    renderIconButton = (type) => {
+        const buttonType = type === 'tc-edit-box' ? 'edit' : 'delete';
+        const buttonClickEvent = (e) => {
+            type === 'tc-edit-box' ? this.editButtonClick.emit(e) : this.deleteButtonClick.emit(e);
+        };
+        return (h("button", { class: "icon-button", onClick: (e) => buttonClickEvent(e), onKeyDown: a11yBtnClick }, h("tet-icon", { class: buttonType, name: type, focusable: false })));
+    };
     /** Return functional Component */
     render() {
         const { productName, price, productDescription, discountPrice, currency, contractTerm, theme } = this;