@tet/tet-components 1.3.146-testing → 1.3.147-production

package/dist/collection/components/advanced/forms/tet-b2b-check-out-form/tet-b2b-check-out-form.js

@@ -17,10 +17,13 @@ export class TetAvailabilityContactForm {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
     /** Method to open check out form */
-    /** Method to open check out form */
     async open() {
         await this.dialogElement.open();
     }
+    /** Method to close check out form */
+    async close() {
+        await this.dialogElement.close();
+    }
     /**
      * Lifecycle method.
      */
@@ -106,11 +109,11 @@ export class TetAvailabilityContactForm {
     }
     render() {
         const { theme } = this;
-        return (h("tet-dialog", { key: '625a2ce1c2fea9989928bd28152bc82361c51415', class: "modal-form-card", headerTitle: t('components-b2b-check-out-form-header'), isOpen: true, theme: theme, closeOnOverlayClick: false, footerDisplay: "right", ref: (el) => {
+        return (h("tet-dialog", { key: 'afc8685139afa64194e3d2cb25b18d84ff3ad67a', class: "modal-form-card", headerTitle: t('components-b2b-check-out-form-header'), theme: theme, closeOnOverlayClick: false, footerDisplay: "right", ref: (el) => {
                 this.dialogElement = el;
-            } }, h("div", { key: '7d2835b974036f7ccd96b9023b65ca5b24f52c36', class: { 'modal-form-card-content': true, [`${theme}`]: true } }, h("div", { key: '2a4108f8754926f29b8a95bbee90b3b932bfb765', class: "modal-form-card-content-header" }, h("div", { key: '550a049b61a1a73da0a95abffff491999ae0bf2c', class: "icon-wrapper" }, h("tet-icon", { key: 'ff6f639a24995a781ff69cca5f002c3b9e6769dc', class: "icon", name: "tc-company-1" })), h("span", { key: '7360e74b5031ebb57a38150436464bd2f173b552', class: "modal-form-card-content-header__title" }, t('components-b2b-check-out-form-title')), h("span", { key: '5533826b9de6c733e5e5db6e3b071991ea9836de', class: "modal-form-card-content-header__description" }, t('components-b2b-check-out-form-description'))), h("div", { key: 'ce30106966dab043ed0c413b598cd997847386c1', class: "modal-form-card-content-accordion-wrapper" }, h("slot", { key: '13f88a4745947b4d4080cb0200efce79097693f6', name: 'cart' })), h("form", { key: '31cab120f2affbeb55aa87d7096f2be77b2b2e72', id: "checkOutForm", class: "modal-form-card-form", ref: (ref) => (this.checkOutForm = ref) }, h("div", { key: '373f441cd918c771e5ed69d45d78bb6b0b7e93f4', class: "modal-form-card-input__row" }, this.renderInput('companyRegNr', t('components-b2b-check-out-form-company-registration-number-input-label'), '40000000001'), this.renderInput('companyName', t('components-b2b-check-out-form-company-name-input-label'))), this.renderInput('address', t('components-b2b-check-out-form-address-input-label'), t('components-b2b-check-out-form-address-input-placeholder')), this.renderInput('nameSurname', t('components-b2b-check-out-form-name-input-label')), h("div", { key: '009164222b176cd5dc1ef5979066d3b172a403c8', class: "modal-form-card-input__row" }, this.renderInput('email', t('components-b2b-check-out-form-email-input-label'), 'contact@company.com'), this.renderInput('phoneNr', t('components-b2b-check-out-form-phone-number-input-label'), '123456789', true)), h("tet-checkbox", { key: 'd2dd9e4dda4ef46b7e7fa781433e710c9fff0305', class: "modal-form-card-content-checkbox", label: t('components-check-out-form-privacy-policy'), theme: theme }))), h("div", { key: '6998bb68a9093aa5d651e3c188628b4b2049e2f9', slot: "footer", class: "modal-form-card-footer" }, h("tet-button", { key: '79e85571651f2b9638d61c7b55d6da22a8c0409c', type: "secondary", size: "medium", theme: theme, onClick: () => {
+            } }, h("div", { key: 'eff2cd2ed86e20aef326bc30d38895bb277bd5e6', class: { 'modal-form-card-content': true, [`${theme}`]: true } }, h("div", { key: 'f5c323d4ad25b2b69fa63397b01e774f73c5f7e3', class: "modal-form-card-content-header" }, h("div", { key: '70a9baeec70a1ec1412765678fe82973c6728616', class: "icon-wrapper" }, h("tet-icon", { key: 'ba3c5485e259fc0fe399e462cef72aae4ae4b3ea', class: "icon", name: "tc-company-1" })), h("span", { key: '1be3f61365e4619725aa3c2673a2ac724c69dff5', class: "modal-form-card-content-header__title" }, t('components-b2b-check-out-form-title')), h("span", { key: '689ad9e4124e6974f60f9502fca4f1976f54fa7d', class: "modal-form-card-content-header__description" }, t('components-b2b-check-out-form-description'))), h("div", { key: 'bc9acd6b8d3ed737e772c33f261f66b533cef3a0', class: "modal-form-card-content-accordion-wrapper" }, h("slot", { key: '2512b5fdc525049a96e1f8de62408248df261c9f', name: 'cart' })), h("form", { key: '42c51bb0f454b6510f1dba1e82aef3ea1535b4c2', id: "checkOutForm", class: "modal-form-card-form", ref: (ref) => (this.checkOutForm = ref) }, h("div", { key: '4cfcdf10b7e5eba5af9b753373c146f94418944b', class: "modal-form-card-input__row" }, this.renderInput('companyRegNr', t('components-b2b-check-out-form-company-registration-number-input-label'), '40000000001'), this.renderInput('companyName', t('components-b2b-check-out-form-company-name-input-label'))), this.renderInput('address', t('components-b2b-check-out-form-address-input-label'), t('components-b2b-check-out-form-address-input-placeholder')), this.renderInput('nameSurname', t('components-b2b-check-out-form-name-input-label')), h("div", { key: '60788e463001f8f8721b1e72e286808857a20ea8', class: "modal-form-card-input__row" }, this.renderInput('email', t('components-b2b-check-out-form-email-input-label'), 'contact@company.com'), this.renderInput('phoneNr', t('components-b2b-check-out-form-phone-number-input-label'), '123456789', true)), h("tet-checkbox", { key: 'c1d00090ed1e971e91b957467fd543678b3074d8', class: "modal-form-card-content-checkbox", label: t('components-check-out-form-privacy-policy'), theme: theme }))), h("div", { key: '42dce382d71a25e5588b5b0c3caab5d6f9087c03', slot: "footer", class: "modal-form-card-footer" }, h("tet-button", { key: '93f57658be0b1b0a034cb5fb7321954babe72fbb', type: "secondary", size: "medium", theme: theme, onClick: () => {
                 this.dialogElement.close();
-            } }, t('components-b2b-check-out-form-close-button-label')), h("tet-button", { key: '21446b2cb81d26ac6fcea843af2e4a232913e9d6', type: "primary", size: "medium", theme: theme, onClick: () => this.handleSubmit() }, t('components-b2b-check-out-form-submit-button-label')))));
+            } }, t('components-b2b-check-out-form-close-button-label')), h("tet-button", { key: '6a09fbae279bfcc1b5aa9417bd7497e16ff25358', type: "primary", size: "medium", theme: theme, onClick: () => this.handleSubmit() }, t('components-b2b-check-out-form-submit-button-label')))));
     }
     static get is() { return "tet-b2b-check-out-form"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +202,23 @@ export class TetAvailabilityContactForm {
                     "text": "Method to open check out form",
                     "tags": []
                 }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to close check out form",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css

@@ -7113,6 +7113,7 @@
   --tc-text-black-permanent-dark: var(--tc-grey-minus-10-dark);
   --tc-text-blue-grey-dark: var(--tc-grey-50-dark);
   --tc-text-link-dark: var(--tc-blue-40-dark);
+  --tc-text-inverse-primary-dark: var(--tc-grey-minus-10-dark);
   --tc-background-primary-dark: var(--tc-grey-00-dark);
   --tc-background-secondary-dark: var(--tc-grey-10-dark);
   --tc-background-tertiary-dark: var(--tc-grey-20-dark);

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

@@ -111,9 +111,9 @@
   display: flex;
   flex-direction: column;
   max-width: 20.5rem;
-  width: max-content;
+  width: 100%;
 }
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: 63.9375rem) {
   .business-navigation {
     flex-direction: row;
     gap: 0.5rem;
@@ -145,7 +145,7 @@
   --tet-business-navigation-item-hover-background-color: var(--tc-menu-item-hover-dark);
   --tet-business-navigation-item-active-background-color: var(--tc-menu-item-pressed-dark);
   --tet-business-navigation-item-selected-background-color: var(--tc-layer-inverse-primary-dark);
-  --tet-business-navigation-item-selected-item-color: var(--tc-text-inverse-primary-);
+  --tet-business-navigation-item-selected-item-color: var(--tc-text-inverse-primary-dark);
   --tet-business-navigation-item-selected-icon-color: var(--tc-layer-primary-dark);
   --tet-business-navigation-label-color: var(--tc-text-primary-dark);
 }
@@ -167,7 +167,17 @@
   background-color: var(--tet-business-navigation-item-background-color);
   cursor: pointer;
 }
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: 63.9375rem) {
+  .business-navigation-item:first-child {
+    margin-left: 1.5rem;
+  }
+}
+@media screen and (max-width: 63.9375rem) {
+  .business-navigation-item:last-child {
+    margin-right: 1.5rem;
+  }
+}
+@media screen and (max-width: 63.9375rem) {
   .business-navigation-item {
     display: inline-flex;
     padding: 0.375rem 0.75rem;
@@ -187,7 +197,7 @@
   --icon-size: 1.5rem;
   --icon-color: var(--tet-business-navigation-label-color);
 }
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: 63.9375rem) {
   .business-navigation-item__icon {
     --icon-size: 1.25rem;
   }

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.css

@@ -359,6 +359,8 @@
    * @prop --accordion-text-color: The color of the text.
    * @prop --accordion-border-bottom-width: The width of the bottom border of the accordion.
    * @prop --accordion-border-color: The color of the bottom border.
+   * @prop --accordion-header-font: Font of accordion header in tablet and larger resolutions
+   * @prop --accordion-header-mobile-font: Font of accordion header in mobile resolution
    */
   --accordion-animation-duration: 0.2s;
   --accordion-header-padding: 1.5rem 0;
@@ -371,6 +373,7 @@
   --accordion-break-point: 64rem;
   --accordion-outer-border: none;
   --accordion-header-font: 500 1.5rem/1.75rem Gilroy, Gilroy, Arial, sans-serif;
+  --accordion-header-mobile-font: 500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
   --accordion-header-display: flex;
 }
 
@@ -403,11 +406,10 @@
   padding-bottom: var(--accordion-border-bottom-width);
 }
 .tet-accordion__header {
-  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  font: var(--accordion-header-mobile-font);
   padding: var(--accordion-header-mobile-padding);
   cursor: pointer;
   display: var(--accordion-header-display);
-  line-height: 1.5rem;
   width: 100%;
   border-radius: 0.125rem;
 }

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.js

@@ -31,6 +31,7 @@ export class TetAccordion {
         this.header = '';
         this.headerImageSrc = '';
         this.headerImageAlt = '';
+        this.indicatorDirection = 'down';
         this.withBorder = false;
         this.withAutoScroll = false;
         this.breakpoint = 'tablet';
@@ -108,21 +109,21 @@ export class TetAccordion {
         }
     }
     render() {
-        return (h(Host, { key: '93af25b751c375647eb3673e7aab363b1bd7c972' }, h("div", { key: '782024544ebac81f5bd31eb6a500e53de1cafffa', class: {
+        return (h(Host, { key: 'ae49c29cf618a2c6fb2f639120ba55265e8777b3' }, h("div", { key: '1cbb0732250f9c0c66d43470092e43544ab021d3', class: {
                 'tet-accordion': true,
                 'tet-accordion--border': this.withBorder,
                 [`${this.theme}-theme`]: true,
                 [`tet-accordion--breakpoint-${this.breakpoint}`]: true,
                 'transparent-bg': this.transparentBackground,
-            } }, h("div", { key: '0451dbea3ef15894ac95bec86d96f013fd54a05c', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, h("slot", { key: '6771b3db92f1530c2f781a938c7fff1bc171bdd5', name: "header" }, this.headerImageSrc && this.headerImageSrc !== '' && (h("img", { key: '305cbdcfa5d367be95940d3573e0a8613fe39d98', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" })), this.renderHeading(), h("tet-icon", { key: '52fdf914f99ac4975585063b18089de9bd55ca43', name: "chevron-down", class: {
+            } }, h("div", { key: '26c3058f903024a807a81c28ccd19c5ec20b6417', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, h("slot", { key: 'f2a50389bbdde83c7a35222ac2354ac4d83c2371', name: "header" }, this.headerImageSrc && this.headerImageSrc !== '' && (h("img", { key: 'e91c42af9b23dc4d274a1748a1289ec3658f551b', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" })), this.renderHeading(), h("tet-icon", { key: 'ab1041abee91e902f3c878b9b26330d49adf30cb', name: `chevron-${this.indicatorDirection}`, class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } }))), h("div", { key: '3c51960b4c4eadda218eb02eb0deb09edd5f97c9', ref: (element) => (this.contentWrapperElement = element), class: {
+            } }))), h("div", { key: '3add22727ab604975ef74d9b6277357664c651ad', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: 'dca02521e71fc5769b14c48e76758f2359121917', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: 'fd54ea034bd15207b58d7f67f07c58bc30b1bcbe', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: '9d400fbffaaea4a08b8d6da791267bf600542fa0' }))))));
+            } }, h("slot", { key: 'a8d9afde6505201a8f223c09fbbfdadb233d36ed' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -228,6 +229,27 @@ export class TetAccordion {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "indicatorDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'up' | 'down'",
+                    "resolved": "\"down\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'down'"
+                        }],
+                    "text": "The direction of indicator icon"
+                },
+                "attribute": "indicator-direction",
+                "reflect": false,
+                "defaultValue": "'down'"
+            },
             "withBorder": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/views/tet-b2b-configurator/b2b-configurator.store.js

@@ -0,0 +1,47 @@
+import { createStore } from "@stencil/store";
+const { state, set, get } = createStore({
+    data: [],
+    cart: new Map(),
+    productDetails: new Map()
+});
+const initData = (data) => {
+    set('data', data);
+    const productDetails = new Map();
+    for (const category of data) {
+        for (const product of category.products) {
+            const { type: categoryType, name: categoryName, id: categoryId } = category;
+            const { name: { lv: name }, description: { lv: description }, amount, b2bConfiguratorProduct } = product;
+            productDetails.set(product.productCode, {
+                name,
+                description,
+                amount,
+                discountAmount: b2bConfiguratorProduct.discountAmount,
+                categoryType,
+                categoryName,
+                categoryId,
+                b2bConfiguratorProduct
+            });
+        }
+    }
+    set('productDetails', productDetails);
+};
+const addToCart = (product, count) => {
+    if (count < 0) {
+        return;
+    }
+    const newCart = new Map(state.cart);
+    newCart.set(product, count);
+    set('cart', newCart);
+};
+const removeFromCart = (product) => {
+    const newCart = new Map(state.cart);
+    newCart.delete(product);
+    set('cart', newCart);
+};
+const resetCart = () => {
+    set('cart', new Map());
+};
+const getCart = () => {
+    return Object.fromEntries(get('cart'));
+};
+export { state as b2bState, initData, addToCart, removeFromCart, resetCart, getCart };

package/dist/collection/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/test/tet-b2b-configurator-cart.spec.js

@@ -1,6 +1,15 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { TetB2bConfiguratorCart } from "../tet-b2b-configurator-cart";
 describe('tet-b2b-configurator-cart', () => {
+    beforeEach(() => {
+        const mockIntersectionObserver = jest.fn();
+        mockIntersectionObserver.mockReturnValue({
+            observe: () => null,
+            unobserve: () => null,
+            disconnect: () => null
+        });
+        global.IntersectionObserver = mockIntersectionObserver;
+    });
     it('renders', async () => {
         const page = await newSpecPage({
             components: [TetB2bConfiguratorCart],
@@ -16,7 +25,7 @@ describe('tet-b2b-configurator-cart', () => {
               isopen="" 
               theme="light" 
               transparentbackground="" 
-              withborder=""
+              indicatordirection="down" 
             >
               <div class="cart__title--edit">
                 components-b2b-cart-title

package/dist/collection/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/tet-b2b-configurator-cart.css

@@ -117,11 +117,13 @@
   --b2b-cart-block-details-color: var(--tc-layer-tertiary);
   --b2b-cart-summary-accent-color: var(--tc-yellow-20);
   --elevation-six-layer-1-color: rgba(12, 12, 14, 0.06);
+  --b2b-cart-sticky-box-shadow: 0 0 4px 0 rgba(12, 12, 14, 0.04), 0 -10px 15px 0 rgba(12, 12, 14, 0.12);
 }
 .light.checkout {
   --b2b-cart-background-color: var(--tc-layer-secondary);
   --b2b-cart-block-color: var(--tc-layer-tertiary);
   --b2b-cart-block-details-color: var(--tc-layer-quaternary);
+  --b2b-cart-box-shadow: none;
 }
 
 .dark {
@@ -134,11 +136,13 @@
   --b2b-cart-block-details-color: var(--tc-layer-tertiary-dark);
   --b2b-cart-summary-accent-color: var(--tc-grey-20-dark);
   --elevation-six-layer-1-color: rgba(12, 12, 14, 0.20);
+  --b2b-cart-sticky-box-shadow: 0 0 4px 0 rgba(12, 12, 14, 0.2), 0 -10px 15px 0 rgba(12, 12, 14, 0.33);
 }
 .dark.checkout {
   --b2b-cart-background-color: var(--tc-layer-secondary-dark);
   --b2b-cart-block-color: var(--tc-layer-tertiary-dark);
   --b2b-cart-block-details-color: var(--tc-layer-quaternary-dark);
+  --b2b-cart-box-shadow: none;
 }
 
 .cart {
@@ -151,17 +155,39 @@
   background: var(--b2b-cart-background-color);
   box-shadow: var(--b2b-cart-box-shadow);
 }
+.cart--sticky {
+  --b2b-cart-box-shadow: var(--b2b-cart-sticky-box-shadow);
+  border-radius: 1rem 1rem 0 0;
+}
 .cart__accordion {
   --accordion-border-radius: 1rem 1rem 0 0;
-  --accordion-header-padding: 1rem;
+  --accordion-header-padding: 1rem 1.5rem;
   --accordion-header-mobile-padding: 1rem;
   --accordion-header-font: 600 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
 }
-@media all and (min-width: 90rem) {
+@media screen and (min-width: 48rem) {
+  .cart__accordion--closed {
+    --accordion-header-padding: 1rem 1.5rem 0.5rem 1.5rem;
+  }
+}
+@media screen and (min-width: 64rem) {
   .cart__accordion--edit {
     --accordion-header-display: none;
   }
 }
+.cart__accordion--checkout {
+  --accordion-header-padding: 1rem;
+}
+@media screen and (min-width: 48rem) {
+  .cart__accordion--checkout {
+    --accordion-header-padding: 1rem 1.5rem;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .cart__accordion--checkout {
+    --accordion-header-padding: 1.5rem;
+  }
+}
 .cart__accordion--rounded {
   --accordion-border-radius: 1rem;
 }
@@ -171,7 +197,7 @@
 .cart__title--edit {
   display: none;
 }
-@media all and (min-width: 90rem) {
+@media screen and (min-width: 64rem) {
   .cart__title--edit {
     display: block;
     padding: 1.5rem 1.5rem 1rem 1.5rem;
@@ -205,7 +231,7 @@
   border: 0.0625rem solid var(--b2b-cart-border-color);
   background-color: var(--b2b-cart-block-color);
 }
-@media all and (min-width: 48rem) {
+@media screen and (min-width: 48rem) {
   .block {
     --accordion-header-padding: 1rem;
     --accordion-header-mobile-padding: 1rem;
@@ -232,15 +258,19 @@
   border-radius: 1.375rem;
 }
 .block__header-indicator {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
-@media all and (min-width: 48rem) {
+@media screen and (min-width: 48rem) {
   .block__header-indicator {
     font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
   }
 }
 .block__header-icon {
   --icon-size: 1.25rem;
+  --icon-container-display: flex;
 }
 
 .empty-cart {
@@ -254,6 +284,7 @@
 }
 .empty-cart__title {
   font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  text-align: center;
 }
 .empty-cart__description {
   color: var(--b2b-cart-text-color-secondary);
@@ -267,13 +298,24 @@
   border-color: var(--b2b-cart-border-color);
   border-top-style: solid;
   border-top-width: 0.0625rem;
-  box-shadow: 0 -6px 12px 0 var(--elevation-six-layer-1-color);
 }
-@media all and (min-width: 48rem) {
+@media screen and (min-width: 48rem) {
   .summary {
     padding: 1rem 1.5rem 1.5rem;
   }
 }
+@media screen and (min-width: 64rem) {
+  .summary {
+    box-shadow: 0 -6px 12px 0 var(--elevation-six-layer-1-color);
+  }
+}
+@media screen and (min-width: 48rem) {
+  .summary--closed {
+    padding: 0 1.5rem 1rem 1.5rem;
+    border: none;
+    box-shadow: none;
+  }
+}
 .summary__notification {
   margin-bottom: 1rem;
 }
@@ -297,17 +339,20 @@
   gap: 0.5rem;
   font: 500 1.125rem/1.75rem "Inter", "Gilroy, Arial, sans-serif";
 }
-@media all and (min-width: 48rem) {
+@media screen and (min-width: 48rem) {
   .summary__monthly-payment {
     margin-bottom: 1.5rem;
   }
 }
-@media all and (min-width: 90rem) {
+@media screen and (min-width: 64rem) {
   .summary__monthly-payment {
     margin-bottom: 1rem;
     font: 500 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
   }
 }
+.summary__monthly-payment:last-child {
+  margin-bottom: 0;
+}
 .summary__monthly-price {
   display: flex;
   flex-direction: column;

package/dist/collection/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/tet-b2b-configurator-cart.js

@@ -4,6 +4,21 @@ export class TetB2bConfiguratorCart {
     constructor() {
         /** @private The suffix for the price displayed - "€/mēn."). */
         this.priceSuffix = '€/mēn.';
+        this.addStickyClassConditionally = () => {
+            if (this.context === 'checkout') {
+                return;
+            }
+            const rect = this.hostElement.getBoundingClientRect();
+            const { bottom, top } = rect;
+            const isTopVisible = top < window.innerHeight && top;
+            const isBottomVisible = bottom < window.innerHeight && bottom;
+            if (isTopVisible && !isBottomVisible && !this.isDesktopResolution) {
+                this.cartEl.classList.add('cart--sticky');
+            }
+            else {
+                this.cartEl.classList.remove('cart--sticky');
+            }
+        };
         /**
          * Updates `primarySlotFilled` or `secondarySlotFilled` based on assigned slot elements.
          * @param e The slotchange event.
@@ -66,48 +81,87 @@ export class TetB2bConfiguratorCart {
                         this.secondaryBlockEl = el;
                     }
                 };
-                return (h("div", { hidden: !slotFilled, class: "block__wrapper" }, h("tet-accordion", { ref: refCallback, key: block.type, class: "block", isOpen: isPrimary ? this.isPrimaryBlockOpen : this.isSecondaryBlockOpen, header: block.name, theme: this.theme, transparentBackground: true }, h("div", { slot: "header", class: "block__header" }, h("div", { class: "block__header-row" }, block.name, " ", h("span", { class: "block__header-amount" }, `${amount} ${this.priceSuffix}`)), h("div", { class: "block__header-row" }, h("div", { class: "block__header-details" }, `${count} ${countValue}`), h("div", { class: "block__header-indicator" }, blockOpen ? t('components-b2b-cart-accordion-less') : t('components-b2b-cart-accordion-more'), h("tet-icon", { class: "block__header-icon", name: `chevron-${blockOpen ? 'up' : 'down'}`, theme: this.theme })))), h("slot", { onSlotchange: this.handleSlotChanged, name: block.type }))));
+                return (h("div", { hidden: !slotFilled, class: "block__wrapper" }, h("tet-accordion", { ref: refCallback, key: block.type, class: "block", isOpen: blockOpen, header: block.name, theme: this.theme, transparentBackground: true }, h("div", { slot: "header", class: "block__header" }, h("div", { class: "block__header-row" }, block.name, " ", h("span", { class: "block__header-amount" }, `${amount} ${this.priceSuffix}`)), h("div", { class: "block__header-row" }, h("div", { class: "block__header-details" }, `${count} ${countValue}`), h("div", { class: "block__header-indicator" }, blockOpen ? t('components-b2b-cart-accordion-less') : t('components-b2b-cart-accordion-more'), h("tet-icon", { class: "block__header-icon", name: `chevron-${blockOpen ? 'up' : 'down'}`, theme: this.theme })))), h("slot", { onSlotchange: this.handleSlotChanged, name: block.type }))));
             });
             return content;
         };
         /** Renders the cart summary, including notifications and financial details. */
         this.renderSummary = () => {
             const { summarySavings, summaryAmount, hasPrimaryNotification, hasSecondaryNotification } = this.data;
-            return (h("div", { class: "summary" }, hasPrimaryNotification && (h("tet-notification", { class: "summary__notification", type: "warning", headerTitle: t('components-b2b-cart-primary-notification-title'), content: t('components-b2b-cart-primary-notification-description'), allowClose: false, theme: this.theme, icon: null })), hasSecondaryNotification && (h("tet-notification", { class: "summary__notification", type: "neutral", headerTitle: t('components-b2b-cart-secondary-notification-title'), content: t('components-b2b-cart-secondary-notification-description'), allowClose: false, theme: this.theme })), this.isAccordionOpen && (h("div", { class: "summary__savings" }, t('components-b2b-cart-savings-title'), h("span", { class: "summary__savings-amount" }, " ", `${summarySavings} ${this.priceSuffix}`))), h("div", { class: "summary__monthly-payment" }, t('components-b2b-cart-monthly-payment-title'), h("div", { class: "summary__monthly-price" }, `${summaryAmount} ${this.priceSuffix}`, h("span", { class: "summary__monthly-price-disclosure" }, ' ', t('components-b2b-cart-monthly-payment-disclosure'), ' '))), h("slot", { name: "cta" })));
+            return (h("div", { class: { 'summary': true, 'summary--closed': !this.isAccordionOpen } }, hasPrimaryNotification && (h("tet-notification", { class: "summary__notification", type: "warning", headerTitle: t('components-b2b-cart-primary-notification-title'), content: t('components-b2b-cart-primary-notification-description'), allowClose: false, theme: this.theme, icon: null })), hasSecondaryNotification && (h("tet-notification", { class: "summary__notification", type: "neutral", headerTitle: t('components-b2b-cart-secondary-notification-title'), content: t('components-b2b-cart-secondary-notification-description'), allowClose: false, theme: this.theme })), this.isAccordionOpen && (h("div", { class: "summary__savings" }, t('components-b2b-cart-savings-title'), h("span", { class: "summary__savings-amount" }, " ", `${summarySavings} ${this.priceSuffix}`))), h("div", { class: "summary__monthly-payment" }, t('components-b2b-cart-monthly-payment-title'), h("div", { class: "summary__monthly-price" }, `${summaryAmount} ${this.priceSuffix}`, h("span", { class: "summary__monthly-price-disclosure" }, ' ', t('components-b2b-cart-monthly-payment-disclosure'), ' '))), this.isAccordionOpen && h("slot", { name: "cta" })));
         };
         this.theme = 'light';
         this.data = undefined;
         this.isCartEmpty = true;
         this.context = 'edit';
         this.isDesktopResolution = true;
-        this.isAccordionOpen = this.context === 'edit';
-        this.isPrimaryBlockOpen = true;
-        this.isSecondaryBlockOpen = true;
+        this.isAccordionOpen = this.isDesktopResolution && this.context === 'edit';
+        this.isPrimaryBlockOpen = this.isDesktopResolution;
+        this.isSecondaryBlockOpen = this.isDesktopResolution;
         this.primarySlotFilled = false;
         this.secondarySlotFilled = false;
     }
     /**
      * Imperatively opens the main accordion when transitioning to desktop in 'edit' context.
+     * Adds/removes sticky class on `isDesktopResolution` prop change
      * @param isDesktop The new resolution state.
      */
     openAccordionOnResolutionChange(isDesktop) {
         if (isDesktop && this.accordionEl && this.context === 'edit') {
             this.accordionEl.open();
         }
+        this.addStickyClassConditionally();
+    }
+    /**
+     * Adds/removes sticky class on `isCartEmpty` prop change
+     */
+    checkStickyClassOnCartEmptyChange() {
+        this.addStickyClassConditionally();
     }
     componentWillLoad() {
         processTranslations('tet-components', 'lv').then(() => forceUpdate(this));
     }
+    /**
+     * Initiates observer to check when cart sticks to bottom
+     */
+    async componentDidLoad() {
+        this.cartObserver = new IntersectionObserver(this.addStickyClassConditionally, {
+            rootMargin: `0px 0px 0px 0px`,
+            root: document,
+            threshold: 1
+        });
+        this.cartObserver.observe(this.hostElement);
+    }
+    /** Clean up listeners/observers */
+    disconnectedCallback() {
+        if (this.cartObserver) {
+            this.cartObserver.disconnect();
+        }
+    }
+    /**
+     * Changes block accordion state to open|close
+     * @param category
+     * @param state
+     */
+    async changeBlockState(category, state) {
+        if (category === 'primary' && this.primaryBlockEl) {
+            state == 'open' ? this.primaryBlockEl.open() : this.primaryBlockEl.close();
+        }
+        else if (category === 'secondary' && this.secondaryBlockEl) {
+            state == 'open' ? this.secondaryBlockEl.open() : this.secondaryBlockEl.close();
+        }
+    }
     render() {
         const cartTitle = t('components-b2b-cart-title');
         const isEditMode = this.context === 'edit';
         const isCheckoutMode = this.context === 'checkout';
         const showSummary = !this.isCartEmpty && (isEditMode || (isCheckoutMode && this.isAccordionOpen));
-        return (h(Host, { key: '93e2d13d305c2d6ddfec3105ed0775ae3c057d92' }, h("div", { key: '563e968522292ef43b859361647545bbc375e30a', class: { cart: true, [`${this.theme}`]: true, [`${this.context}`]: true } }, h("tet-accordion", { key: 'dabb165e6dcffcbc3258929c559010ad9c8ac1d9', ref: (el) => (this.accordionEl = el), class: {
+        return (h(Host, { key: 'a333bbd252bd1a19b305719b1a3492e8784f9dfa' }, h("div", { key: '590c1d0f2cb7b087157d9c2b6062ad8b6cfec802', ref: (el) => (this.cartEl = el), class: { cart: true, [`${this.theme}`]: true, [`${this.context}`]: true } }, h("tet-accordion", { key: 'b05385da27e63518ace873ebcfb33b30ca2a68d4', ref: (el) => (this.accordionEl = el), class: {
                 'cart__accordion': true,
                 [`cart__accordion--${this.context}`]: true,
-                'cart__accordion--rounded': this.isCartEmpty || (isCheckoutMode && !this.isAccordionOpen)
-            }, isOpen: this.isAccordionOpen, onOpenChanged: this.handleAccordionChanged, header: cartTitle, withBorder: true, theme: this.theme, transparentBackground: true }, h("div", { key: '10fd1d316bea9ae9e1251f8605e18759cdf77c4f', class: `cart__title--${this.context}` }, cartTitle), h("div", { key: '1df2c1b5dc98399bd194f4782ad0ec22074eb2a4', class: "cart__content" }, this.isCartEmpty ? this.renderEmptyContent() : [this.renderContent()])), showSummary && this.renderSummary())));
+                'cart__accordion--rounded': this.isCartEmpty || (isCheckoutMode && !this.isAccordionOpen),
+                'cart__accordion--closed': !this.isAccordionOpen
+            }, isOpen: this.isAccordionOpen, onOpenChanged: this.handleAccordionChanged, header: cartTitle, theme: this.theme, transparentBackground: true, indicatorDirection: this.isDesktopResolution || isCheckoutMode ? 'down' : 'up' }, h("div", { key: 'a11c1ad7cd5b45f66af099d63378a50015733861', class: `cart__title--${this.context}` }, cartTitle), h("div", { key: '1155f8d5386e55e82e1c46e4179266c6f7e28c3e', class: "cart__content" }, this.isCartEmpty ? this.renderEmptyContent() : [this.renderContent()])), showSummary && this.renderSummary())));
     }
     static get is() { return "tet-b2b-configurator-cart"; }
     static get encapsulation() { return "shadow"; }
@@ -230,10 +284,54 @@ export class TetB2bConfiguratorCart {
             "secondarySlotFilled": {}
         };
     }
+    static get methods() {
+        return {
+            "changeBlockState": {
+                "complexType": {
+                    "signature": "(category: CategoryType, state: 'open' | 'close') => Promise<void>",
+                    "parameters": [{
+                            "name": "category",
+                            "type": "\"primary\" | \"secondary\"",
+                            "docs": ""
+                        }, {
+                            "name": "state",
+                            "type": "\"open\" | \"close\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CategoryType": {
+                            "location": "import",
+                            "path": "@services/api/services/b2b-configurator/b2b-configurator",
+                            "id": "src/services/api/services/b2b-configurator/b2b-configurator.ts::CategoryType"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Changes block accordion state to open|close",
+                    "tags": [{
+                            "name": "param",
+                            "text": "category"
+                        }, {
+                            "name": "param",
+                            "text": "state"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
                 "propName": "isDesktopResolution",
                 "methodName": "openAccordionOnResolutionChange"
+            }, {
+                "propName": "isCartEmpty",
+                "methodName": "checkStickyClassOnCartEmptyChange"
             }];
     }
 }