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

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"
             }];
     }
 }