@salla.sa/twilight-components 3.0.25 → 3.0.26

package/dist/collection/components/salla-cart-summary-card/salla-cart-summary-card.css

@@ -1,21 +1,97 @@
-/*!twlt*/:host {
+/*!twlt*/@charset "UTF-8";
+:host {
   display: block;
 }
-.sticky {
+
+.s-cart-summary-card-fee-tip-wrap {
+  display: inline-flex;
+  align-items: center;
+}
+
+.s-cart-summary-card-fee-tip {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  outline: none;
+}
+.s-cart-summary-card-fee-tip svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/*
+ * Fixed to the viewport from the tip icon rect — absolute tips are clipped by the sheet's
+ * overflow:hidden (and sit under the sticky bar on mobile).
+ */
+.s-cart-summary-card-fee-tip-bubble {
+  position: fixed;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 132px;
+  max-width: min(220px, 100vw - 24px);
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--color-primary);
+  color: var(--color-primary-reverse);
+  line-height: 1.35;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.s-cart-summary-card-fee-tip-bubble::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 6px solid transparent;
+  border-bottom-color: var(--color-primary);
+}
+
+.s-cart-summary-card-fee-tip-line {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--color-primary-reverse);
+}
+
+.s-cart-summary-card-fee-tip-line-label {
+  font-size: 11px;
+  font-weight: 400;
+  opacity: 0.72;
+}
+
+.s-cart-summary-card-fee-tip-line-value {
+  font-size: 13px;
+  font-weight: 700;
+}
+.fixed{
+  position: fixed;
+}
+.sticky{
   position: sticky;
 }
-.block {
+.block{
   display: block;
 }
-.transform {
+.transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.transition {
+.resize{
+  resize: both;
+}
+.transition{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.\!btn {
+.\!btn{
   display: inline-flex;
   flex: 1 1 0%;
   align-items: center;
@@ -33,10 +109,10 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
 }
-.\!btn:hover {
+.\!btn:hover{
   opacity: 0.8;
 }
-.btn {
+.btn{
   display: inline-flex;
   flex: 1 1 0%;
   align-items: center;
@@ -54,10 +130,10 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
 }
-.btn:hover {
+.btn:hover{
   opacity: 0.8;
 }
-.s-cart-summary-card-sheet-title {
+.s-cart-summary-card-sheet-title{
   margin-bottom: 0.5rem;
   flex: 1 1 0%;
   font-size: 0.875rem;
@@ -66,7 +142,7 @@
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-line {
+.s-cart-summary-card-line{
   margin-bottom: 0.5rem;
   display: flex;
   align-items: center;
@@ -74,36 +150,53 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.s-cart-summary-card-line span {
+.s-cart-summary-card-line > span{
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-line b {
+.s-cart-summary-card-line b{
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgb(51 51 51 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-line--discount b {
+.s-cart-summary-card-line--discount b{
   --tw-text-opacity: 1 !important;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
 }
-.s-cart-summary-card-line--discount b * {
+.s-cart-summary-card-line--discount b *{
   --tw-text-opacity: 1 !important;
   color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
 }
-.s-cart-summary-card-bar-label {
+.s-cart-summary-card-fee-label{
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-cart-summary-card-fee-tip{
+  display: inline-flex;
+  height: 0.875rem;
+  width: 0.875rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-cart-summary-card-bar-label{
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
 }
-.s-cart-summary-card-bar-label-main {
+.s-cart-summary-card-bar-label-main{
   display: flex;
   align-items: baseline;
   gap: 0.375rem;
 }
-.s-cart-summary-card-bar-label-text {
+.s-cart-summary-card-bar-label-text{
   white-space: nowrap;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -111,44 +204,44 @@
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-bar-count {
+.s-cart-summary-card-bar-count{
   white-space: nowrap;
   font-size: 0.75rem;
   line-height: 1rem;
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-bar-label-sub {
+.s-cart-summary-card-bar-label-sub{
   font-size: 11px;
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-bar-totals {
+.s-cart-summary-card-bar-totals{
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 0.375rem;
 }
-.s-cart-summary-card-bar-totals-row {
+.s-cart-summary-card-bar-totals-row{
   display: flex;
   align-items: center;
   gap: 0.375rem;
 }
-.s-cart-summary-card-bar-total {
+.s-cart-summary-card-bar-total{
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-bar-original {
+.s-cart-summary-card-bar-original{
   font-size: 1rem;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
   text-decoration-line: line-through;
 }
-.s-cart-summary-card-bar-savings-badge {
+.s-cart-summary-card-bar-savings-badge{
   display: inline-flex;
   width: max-content;
   align-items: center;
@@ -165,7 +258,7 @@
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity, 1));
 }
-.s-cart-summary-card-chevron {
+.s-cart-summary-card-chevron{
   display: inline-flex;
   height: 1.5rem;
   width: 1.5rem;
@@ -179,19 +272,19 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.s-cart-summary-card-chevron-icon {
+.s-cart-summary-card-chevron-icon{
   display: inline-flex;
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
 }
-.s-cart-summary-card {
+.s-cart-summary-card{
   display: block;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card {
+@media (max-width: 1023px){
+  .s-cart-summary-card{
     position: fixed;
     inset-inline: 0;
     bottom: 0;
@@ -202,8 +295,8 @@
     padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
   }
 }
-@media (min-width: 1024px) {
-  .s-cart-summary-card {
+@media (min-width: 1024px){
+  .s-cart-summary-card{
     position: relative;
     border-radius: 0.5rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
@@ -211,19 +304,19 @@
     margin-bottom: 1.25rem;
   }
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card--open {
+@media (max-width: 1023px){
+  .s-cart-summary-card--open{
     border-radius: 0;
     box-shadow: none;
   }
 }
-.s-cart-summary-card-sheet-wrap {
+.s-cart-summary-card-sheet-wrap{
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s ease;
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card-sheet-wrap {
+@media (max-width: 1023px){
+  .s-cart-summary-card-sheet-wrap{
     position: absolute;
     inset-inline: 0;
     bottom: calc(100% - 1px);
@@ -233,41 +326,41 @@
     box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, 0);
   }
 }
-@media (min-width: 1024px) {
-  .s-cart-summary-card-sheet-wrap {
+@media (min-width: 1024px){
+  .s-cart-summary-card-sheet-wrap{
     grid-template-rows: 1fr;
   }
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card-sheet-wrap--open {
+@media (max-width: 1023px){
+  .s-cart-summary-card-sheet-wrap--open{
     grid-template-rows: 1fr;
     box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, 0.12);
   }
 }
-.s-cart-summary-card-sheet {
+.s-cart-summary-card-sheet{
   min-height: 0;
   overflow: hidden;
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card-sheet-wrap--open .s-cart-summary-card-sheet {
+@media (max-width: 1023px){
+  .s-cart-summary-card-sheet-wrap--open .s-cart-summary-card-sheet{
     overflow-y: auto;
     max-height: 70vh;
     -webkit-overflow-scrolling: touch;
     padding: 0.75rem 1rem 0;
   }
 }
-.s-cart-summary-card-sheet-header {
+.s-cart-summary-card-sheet-header{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card-sheet-header {
+@media (max-width: 1023px){
+  .s-cart-summary-card-sheet-header{
     padding-bottom: 0.5rem;
   }
 }
-.s-cart-summary-card-bar {
+.s-cart-summary-card-bar{
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -275,34 +368,34 @@
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-@media (min-width: 1024px) {
-  .s-cart-summary-card-bar {
+@media (min-width: 1024px){
+  .s-cart-summary-card-bar{
     margin-top: 1rem;
   }
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card-bar {
+@media (max-width: 1023px){
+  .s-cart-summary-card-bar{
     padding: 0.875rem 1rem 0.5rem;
     border-radius: 24px 24px 0 0;
   }
-  .s-cart-summary-card--open .s-cart-summary-card-bar {
+  .s-cart-summary-card--open .s-cart-summary-card-bar{
     padding-top: 0;
     border-radius: 0;
   }
 }
-@media (min-width: 1024px) {
-  .s-cart-summary-card-action {
+@media (min-width: 1024px){
+  .s-cart-summary-card-action{
     padding-top: 1rem;
   }
 }
-@media (max-width: 1023px) {
-  .s-cart-summary-card-action {
+@media (max-width: 1023px){
+  .s-cart-summary-card-action{
     padding: 0 1rem 0.75rem;
   }
 }
-.s-cart-summary-card--open .s-cart-summary-card-chevron-icon {
+.s-cart-summary-card--open .s-cart-summary-card-chevron-icon{
   transform: rotate(180deg);
 }
-.s-cart-summary-card-action *:focus {
+.s-cart-summary-card-action *:focus{
   outline: none;
 }

package/dist/collection/components/salla-cart-summary-card/salla-cart-summary-card.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host } from "@stencil/core";
+import InfoIcon from "../../assets/svg/info.svg";
 const SKELETON_ROWS = [
     { label: '100px', value: '56px' },
     { label: '72px', value: '64px' },
@@ -21,6 +22,8 @@ export class SallaCartSummaryCard {
         this.cartCashbackAmount = 0;
         this.cartSubTotal = 0;
         this.cartOptionsTotal = 0;
+        /* From cart.service_fees[] — charged amount plus optional min/max for the tip. */
+        this.cartServiceFees = [];
         this.cartShippingCost = 0;
         this.cartTaxAmount = 0;
         this.cartHasShipping = false;
@@ -28,6 +31,24 @@ export class SallaCartSummaryCard {
         this.isDesktop = false;
         /** True until the first cart payload (API response or cart event) arrives. */
         this.isLoading = true;
+        /* Viewport coords — fixed tip escapes the sheet's overflow:hidden. */
+        this.feeTip = null;
+        this.showFeeTip = (key, event) => {
+            const wrap = event.currentTarget;
+            if (!wrap)
+                return;
+            const rect = wrap.getBoundingClientRect();
+            this.feeTip = {
+                key,
+                top: Math.round(rect.bottom + 8),
+                left: this.clampFeeTipLeft(rect.left + rect.width / 2),
+            };
+            this.bindFeeTipDismiss();
+        };
+        this.hideFeeTip = () => {
+            this.feeTip = null;
+            this.unbindFeeTipDismiss();
+        };
         // Original DOM location — needed to restore the host on the mobile→desktop flip.
         this.originalParent = null;
         this.originalNextSibling = null;
@@ -35,6 +56,7 @@ export class SallaCartSummaryCard {
         this.mediaQueryList = null;
         this.submitObserver = null;
         this.isSubmitting = false;
+        this.feeTipDismissBound = false;
         // Stable handler refs — anonymous functions can't be unbound from listeners.
         this.mqlChangeHandler = (e) => {
             this.isDesktop = e.matches;
@@ -60,8 +82,11 @@ export class SallaCartSummaryCard {
             this.host.querySelector('#s-cart-summary-card-submit')?.removeAttribute?.('loading');
         };
         this.toggleSheet = () => {
-            if (!this.isDesktop)
-                this.isOpen = !this.isOpen;
+            if (this.isDesktop)
+                return;
+            this.isOpen = !this.isOpen;
+            if (!this.isOpen)
+                this.hideFeeTip();
         };
         this.handleSubmit = async (event) => {
             // Re-entrancy guard, set before the async validation so a second tap during
@@ -136,6 +161,8 @@ export class SallaCartSummaryCard {
         this.completeOrderLabel = salla.lang.get('pages.cart.complete_order');
         this.openSummaryLabel = salla.lang.get('pages.cart.open_summary');
         this.closeSummaryLabel = salla.lang.get('pages.cart.close_summary');
+        this.minimumLabel = salla.lang.get('pages.cart.minimum');
+        this.maximumLabel = salla.lang.get('pages.cart.up_to');
         this.itemsCountTemplate = salla.lang.get('pages.cart.items_with_count');
     }
     /** Coerces PHP cart values: numbers, strings, and Money/MoneyTaxable objects. */
@@ -156,6 +183,86 @@ export class SallaCartSummaryCard {
         }
         return 0;
     }
+    /* BE uses null for “no bound”; treat 0 the same so the tip never shows a useless zero. */
+    optionalBound(value) {
+        if (value === null || value === undefined || value === '')
+            return null;
+        const amount = this.num(value);
+        return Number.isFinite(amount) && amount > 0 ? amount : null;
+    }
+    mapServiceFees(fees) {
+        return fees.flatMap((fee, index) => {
+            const title = String(fee?.title ?? '').trim();
+            const amount = this.num(fee?.amount);
+            if (!title || amount <= 0)
+                return [];
+            return [
+                {
+                    key: String(index),
+                    title,
+                    amount,
+                    minAmount: this.optionalBound(fee?.min_amount ?? fee?.min_service_amount),
+                    maxAmount: this.optionalBound(fee?.max_amount ?? fee?.max_service_amount),
+                },
+            ];
+        });
+    }
+    /* Strip HTML for tip text; keep SAR when the theme renders it as <i class="sicon-sar">. */
+    plainMoney(value) {
+        return this.money(value)
+            .replace(/<i[^>]*sicon-sar[^>]*>.*?<\/i>/gi, ' SAR')
+            .replace(/<[^>]+>/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+    }
+    serviceFeeBoundLines(fee) {
+        const lines = [];
+        if (fee.minAmount !== null)
+            lines.push({ label: this.minimumLabel, amount: fee.minAmount });
+        if (fee.maxAmount !== null)
+            lines.push({ label: this.maximumLabel, amount: fee.maxAmount });
+        return lines;
+    }
+    /* Bubble is centered with translateX(-50%); keep that center inside the viewport. */
+    clampFeeTipLeft(centerX) {
+        const margin = 12;
+        const tipWidth = Math.min(220, Math.max(132, window.innerWidth - margin * 2));
+        const half = tipWidth / 2;
+        const min = margin + half;
+        const max = window.innerWidth - margin - half;
+        if (max <= min)
+            return Math.round(window.innerWidth / 2);
+        return Math.round(Math.min(Math.max(centerX, min), max));
+    }
+    bindFeeTipDismiss() {
+        if (this.feeTipDismissBound)
+            return;
+        window.addEventListener('scroll', this.hideFeeTip, true);
+        window.addEventListener('resize', this.hideFeeTip);
+        this.feeTipDismissBound = true;
+    }
+    unbindFeeTipDismiss() {
+        if (!this.feeTipDismissBound)
+            return;
+        window.removeEventListener('scroll', this.hideFeeTip, true);
+        window.removeEventListener('resize', this.hideFeeTip);
+        this.feeTipDismissBound = false;
+    }
+    renderServiceFeeBoundsTip(fee) {
+        const lines = this.serviceFeeBoundLines(fee);
+        if (!lines.length)
+            return null;
+        return (h("span", { class: "s-cart-summary-card-fee-tip-wrap", onMouseEnter: event => this.showFeeTip(fee.key, event), onMouseLeave: this.hideFeeTip }, h("button", { type: "button", class: "s-cart-summary-card-fee-tip", "aria-label": lines.map(line => `${line.label}: ${this.plainMoney(line.amount)}`).join(', '), innerHTML: InfoIcon, onFocus: event => this.showFeeTip(fee.key, event), onBlur: this.hideFeeTip })));
+    }
+    renderFixedFeeTipBubble() {
+        if (!this.feeTip)
+            return null;
+        const fee = this.cartServiceFees.find(item => item.key === this.feeTip.key);
+        const lines = fee ? this.serviceFeeBoundLines(fee) : [];
+        if (!lines.length)
+            return null;
+        return (h("span", { class: "s-cart-summary-card-fee-tip-bubble", role: "tooltip", style: { top: `${this.feeTip.top}px`, left: `${this.feeTip.left}px` } }, lines.map(line => (h("span", { class: "s-cart-summary-card-fee-tip-line", key: line.label }, h("span", { class: "s-cart-summary-card-fee-tip-line-label" }, line.label), h("span", { class: "s-cart-summary-card-fee-tip-line-value" }, this.plainMoney(line.amount)))))));
+    }
     // Desktop cutoff — must match the SCSS media queries so JS and CSS never diverge.
     breakpointPx() {
         return 1024;
@@ -235,6 +342,7 @@ export class SallaCartSummaryCard {
                 this.mediaQueryList?.removeListener(this.mqlChangeHandler);
             }
             this.mediaQueryList = null;
+            this.unbindFeeTipDismiss();
             this.cartEventNames.forEach(name => salla.event.off(name, this.cartEventHandler));
             salla.event.off('cart::submit.failed', this.releaseSubmitLoading);
         });
@@ -310,6 +418,13 @@ export class SallaCartSummaryCard {
             this.cartOptionsTotal = this.num(data.options_total);
         if (data.tax_amount !== undefined)
             this.cartTaxAmount = this.num(data.tax_amount);
+        /* Same retractability as cashback — cached/metadata payloads must not wipe live fees. */
+        if (Array.isArray(data.service_fees)) {
+            this.cartServiceFees = this.mapServiceFees(data.service_fees);
+        }
+        else if (recomputedTotals) {
+            this.cartServiceFees = [];
+        }
         // Shipping cost (free-shipping aware): prefer `shipping_cost`, else `real_shipping_cost`.
         const hasFreeShipping = !!data.free_shipping_bar?.has_free_shipping;
         if (data.shipping_cost !== undefined)
@@ -389,7 +504,7 @@ export class SallaCartSummaryCard {
             } }, h("div", { class: {
                 's-cart-summary-card-sheet-wrap': true,
                 's-cart-summary-card-sheet-wrap--open': this.isOpen,
-            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.roundToCurrency(this.cartTotal + this.cartTotalDiscount)))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), (showSavings || showCashback) && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, showSavings && (h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) }))), showSavings && showCashback && ' + ', showCashback && (h("span", null, h("span", { innerHTML: this.money(this.cartCashbackAmount) }), " ", this.cashbackLabel))))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel))));
+            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartServiceFees.map(fee => (h("div", { class: "s-cart-summary-card-line", key: fee.key }, h("span", { class: "s-cart-summary-card-fee-label" }, h("span", null, fee.title), this.renderServiceFeeBoundsTip(fee)), h("b", { innerHTML: this.money(fee.amount) })))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.roundToCurrency(this.cartTotal + this.cartTotalDiscount)))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), (showSavings || showCashback) && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, showSavings && (h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) }))), showSavings && showCashback && ' + ', showCashback && (h("span", null, h("span", { innerHTML: this.money(this.cartCashbackAmount) }), " ", this.cashbackLabel))))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel)), this.renderFixedFeeTipBubble()));
     }
     static get is() { return "salla-cart-summary-card"; }
     static get originalStyleUrls() {
@@ -434,6 +549,7 @@ export class SallaCartSummaryCard {
             "cartCashbackAmount": {},
             "cartSubTotal": {},
             "cartOptionsTotal": {},
+            "cartServiceFees": {},
             "cartShippingCost": {},
             "cartTaxAmount": {},
             "cartHasShipping": {},
@@ -454,7 +570,10 @@ export class SallaCartSummaryCard {
             "completeOrderLabel": {},
             "openSummaryLabel": {},
             "closeSummaryLabel": {},
-            "itemsCountTemplate": {}
+            "minimumLabel": {},
+            "maximumLabel": {},
+            "itemsCountTemplate": {},
+            "feeTip": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/salla-order-totals-card/salla-order-totals-card.css

@@ -1,6 +1,9 @@
 /*!twlt*/:host {
   display: block;
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .s-order-totals-card-wrapper {
   display: block;
 }