@salla.sa/twilight-components 2.14.557 → 2.14.559

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.js

@@ -2184,7 +2184,7 @@ export class SallaBulletDelivery {
                     if (!disabled)
                         onClick();
                 }
-            } }, h("input", { type: "radio", name: "saved_address", class: "s-bullet-delivery-radio", checked: selected, disabled: disabled }), h("span", { class: "s-bullet-delivery-address-map-icon", innerHTML: MiniMap, "aria-hidden": "true" }), h("div", { class: "s-bullet-delivery-address-content" }, h("div", { class: "s-bullet-delivery-address-lines" }, h("span", { class: "s-bullet-delivery-address-line1" }, line1), h("span", { class: "s-bullet-delivery-address-line2" }, line2)))));
+            } }, h("input", { type: "radio", name: "saved_address", class: "s-bullet-delivery-radio", checked: selected, disabled: disabled }), h("span", { class: "s-bullet-delivery-address-map-icon", innerHTML: MiniMap, "aria-hidden": "true" }), h("div", { class: "s-bullet-delivery-address-content" }, h("div", { class: "s-bullet-delivery-address-lines" }, h("span", { class: "s-bullet-delivery-address-line1", style: { textAlign: this.isRTL ? 'right' : 'left' } }, line1), h("span", { class: "s-bullet-delivery-address-line2", style: { textAlign: this.isRTL ? 'right' : 'left' } }, line2)))));
     }
     renderMapSection() {
         const isSA = isSaudiArabia(this.selectedCountry?.code ?? '');
@@ -2252,6 +2252,23 @@ export class SallaBulletDelivery {
                 "s-bullet-delivery-location-btn--loading": this.loadingNearestBranch,
             }, onClick: () => this.handleFindNearestBranch(), disabled: this.loadingNearestBranch }, this.loadingNearestBranch ? (h("span", { class: "s-bullet-delivery-location-icon", "aria-hidden": "true" }, h("salla-skeleton", { height: "18px", width: "18px" }))) : (h("span", { class: "s-bullet-delivery-location-icon", innerHTML: GPS, "aria-hidden": "true" })), h("span", null, Salla.lang.get("pages.checkout.nearest_to_my_location")))), this.locationError && this.activeTab === "branch" && (h("span", { class: "s-bullet-delivery-error" }, this.locationError))));
     }
+    /** Renders a branch's `preparation_time_range` as a localized "from - to <unit>" label. */
+    getPreparationTimeLabel(range) {
+        if (!range)
+            return null;
+        const unitKeys = {
+            hour: 'pages.checkout.preparation_time_hours',
+            minute: 'pages.checkout.preparation_time_minutes',
+            day: 'pages.checkout.preparation_time_days',
+        };
+        const key = unitKeys[range.from.unit];
+        if (!key)
+            return null;
+        return Salla.lang
+            .getWithDefault(key, 'من {from} إلى {to} دقائق')
+            ?.replace('{from}', String(range.from.value))
+            ?.replace('{to}', String(range.to.value));
+    }
     renderBranchList() {
         if (this.loadingBranches) {
             return (h("div", { class: "s-bullet-delivery-branches-wrap" }, h("div", { class: "s-bullet-delivery-branches-loading" }, [1, 2, 3, 4].map((v) => (h("div", { key: v, class: "s-bullet-delivery-branch-skeleton" }, h("salla-skeleton", { class: "s-bullet-delivery-branch-skeleton-radio", type: "circle", height: "16px", width: "16px" }), h("div", { class: "s-bullet-delivery-branch-skeleton-icon" }, h("salla-skeleton", { height: "34px", width: "34px" })), h("div", { class: "s-bullet-delivery-branch-skeleton-content" }, h("salla-skeleton", { class: "s-bullet-delivery-branch-skeleton-title", height: "12px", width: "124px" })), h("salla-skeleton", { class: "s-bullet-delivery-branch-skeleton-time", height: "12px", width: "88px" }), h("div", { class: "s-bullet-delivery-branch-skeleton-map" }, h("salla-skeleton", { height: "32px", width: "32px" }))))))));
@@ -2262,6 +2279,10 @@ export class SallaBulletDelivery {
         return (h("div", { class: "s-bullet-delivery-branches-wrap" }, h("ul", { class: "s-bullet-delivery-branches-list s-scrollbar" }, this.filteredBranches.map(branch => {
             const selectable = isBranchSelectable(branch);
             const readiness = branch?.pickup_readiness;
+            const locationText = [branch.country?.name, branch.city?.name, branch.district?.name]
+                .filter(Boolean)
+                .join(', ');
+            const preparationTimeLabel = this.getPreparationTimeLabel(branch.preparation_time_range);
             return (h("li", { key: branch.id, class: {
                     's-bullet-delivery-branch-item': true,
                     's-bullet-delivery-branch-item--selected': this.selectedBranch?.id === branch.id,
@@ -2272,7 +2293,7 @@ export class SallaBulletDelivery {
                         if (selectable)
                             this.handleBranchSelect(branch);
                     }
-                } }, h("input", { type: "radio", name: "branch", class: "s-bullet-delivery-radio", checked: this.selectedBranch?.id === branch.id, disabled: !selectable }), h("span", { class: "s-bullet-delivery-branch-icon", "aria-hidden": "true" }, h("span", { innerHTML: Store })), h("div", { class: "flex flex-col gap-[2px]" }, h("div", { class: "flex items-center gap-1" }, h("p", { class: "s-bullet-delivery-branch-name text-start" }, branch.name), readiness?.label && (h("p", { class: `branch-status-badge${readiness.color ? ` ${readiness.color}` : ''}` }, readiness.label))), branch.preparation_time ? (h("span", { class: "s-bullet-delivery-branch-prep text-start" }, h("i", { class: "sicon-clock" }), "\u00A0", h("span", { class: "first-letter-cap" }, branch.preparation_time))) : null, readiness?.detail_line && (h("span", { class: "s-bullet-delivery-branch-time text-start" }, h("i", { class: "sicon-store" }), "\u00A0", readiness.detail_line))), h("div", { style: {
+                } }, h("input", { type: "radio", name: "branch", class: "s-bullet-delivery-radio", checked: this.selectedBranch?.id === branch.id, disabled: !selectable }), h("span", { class: "s-bullet-delivery-branch-icon", "aria-hidden": "true" }, h("span", { innerHTML: Store })), h("div", { class: "flex flex-col" }, h("div", { class: "flex items-center gap-1 mb-1" }, h("p", { class: "s-bullet-delivery-branch-name text-start" }, branch.name), readiness?.label && (h("p", { class: `branch-status-badge${readiness.color ? ` ${readiness.color}` : ''}` }, readiness.label))), locationText ? (h("span", { class: "s-bullet-delivery-branch-prep", style: { fontSize: '0.8rem', lineHeight: '1.1rem', textAlign: this.isRTL ? 'right' : 'left' } }, h("i", { class: "sicon-location" }), "\u00A0", h("span", { class: "first-letter-cap" }, locationText))) : null, preparationTimeLabel ? (h("span", { class: "s-bullet-delivery-branch-prep", style: { fontSize: '0.8rem', lineHeight: '1.1rem', textAlign: this.isRTL ? 'right' : 'left' } }, h("i", { class: "sicon-clock" }), "\u00A0", h("span", { class: "first-letter-cap" }, Salla.lang.get('pages.checkout.pickup_duration'), ": ", preparationTimeLabel))) : null, readiness?.detail_line && (h("span", { class: "s-bullet-delivery-branch-prep", style: { fontSize: '0.8rem', lineHeight: '1.1rem', textAlign: this.isRTL ? 'right' : 'left' } }, h("i", { class: "sicon-store" }), "\u00A0", readiness.detail_line))), h("div", { style: {
                     width: 'full',
                     maxWidth: '50px',
                     marginInlineStart: 'auto',

package/dist/collection/components/salla-fulfillment-methods/salla-fulfillment-methods.css

@@ -73,6 +73,9 @@
   color: var(--color-text-secondary, #6b7280);
   line-height: 1;
 }
+.hidden {
+  display: none;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

package/dist/collection/components/salla-fulfillment-methods/salla-fulfillment-methods.js

@@ -4,42 +4,63 @@
 import { h, Host } from "@stencil/core";
 /**
  * @name SallaFulfillmentMethods
- * @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards
+ * @description Displays product fulfillment options (pickup and delivery) as side-by-side cards.
+ * Renders only the card(s) the product actually supports, per `supports_pickup` / `supports_delivery`
+ * on the product-details response. Login Cycle, branch capabilities, and product-type eligibility are
+ * all decided server-side (see `ProductFulfillmentMethods` composer) — this component is render-only
+ * and must not re-check any of those rules on the front end.
  * @tag salla-fulfillment-methods
  */
 export class SallaFulfillmentMethods {
     constructor() {
         this.methods = [];
         this.shouldRender = false;
+        this.productId = null;
     }
-    async componentDidLoad() {
-        await Salla.onReady();
-        await Salla.lang.onLoaded();
-        if (!Salla.config.get('store.shipping.support_pickup'))
-            return;
-        this.shouldRender = true;
-        this.setLabels();
+    async componentWillLoad() {
+        try {
+            // page.id is server-injected, resolve it the same way salla-cashback-banner does
+            // for this same hook slot (product:single.*).
+            this.productId = this.host.dataset.productId || Salla.config.get('page.id');
+            await Salla.onReady();
+            await Salla.lang.onLoaded();
+            if (!this.productId)
+                return;
+            const response = await Salla.product.getDetails(this.productId, []).catch(() => null);
+            this.setLabels(response?.data ?? {});
+        }
+        catch (e) {
+            Salla?.logger?.warn?.('salla-fulfillment-methods: init failed', e);
+        }
     }
-    setLabels() {
-        this.methods = [
-            {
+    setLabels(flags) {
+        console.log('flags', flags);
+        const methods = [];
+        // Missing/undefined flags (BE not yet deployed, request failed) resolve to falsy → hidden.
+        // Never fall back to showing both cards.
+        if (flags?.supports_delivery) {
+            methods.push({
                 id: 'delivery',
                 title: Salla.lang.getWithDefault('pages.products.promise_delivery_title', 'متاح للتوصيل'),
                 subtitle: Salla.lang.getWithDefault('pages.products.promise_delivery_subtitle', 'طلبك يوصلك لباب البيت بسهولة.'),
                 iconClass: 'sicon-location',
-            },
-            {
+            });
+        }
+        if (flags?.supports_pickup) {
+            methods.push({
                 id: 'pickup',
                 title: Salla.lang.getWithDefault('pages.products.promise_pickup_title', 'متاح للاستلام'),
                 subtitle: Salla.lang.getWithDefault('pages.products.promise_pickup_subtitle', 'استلام فوري من أقرب فرع.'),
                 iconClass: 'sicon-store',
-            },
-        ];
+            });
+        }
+        this.methods = methods;
+        this.shouldRender = methods.length > 0;
     }
     render() {
         if (!this.shouldRender)
             return null;
-        return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map((method) => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
+        return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map(method => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
     }
     static get is() { return "salla-fulfillment-methods"; }
     static get originalStyleUrls() {
@@ -58,4 +79,5 @@ export class SallaFulfillmentMethods {
             "shouldRender": {}
         };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/salla-modal/salla-modal.css

@@ -564,24 +564,42 @@ salla-modal.s-order-cancel-modal .s-modal-title {
 .s-scopes-modal .s-modal-header {
   display: block !important;
 }
-.s-search-modal .s-modal-wrapper {
-  align-items: flex-start;
-  padding: 0;
-}
-.s-search-modal .s-modal-spacer {
-  display: inline;
-}
-.s-search-modal .s-modal-body {
-  padding: 0;
-  width: 700px;
-  max-width: 90%;
-  margin-top: 3.2rem;
-  border-radius: 0.5rem;
-  background: transparent;
-  overflow: visible;
-  position: relative !important;
+@media (min-width: 640px) {
+  .s-search-modal .s-modal-wrapper {
+    align-items: flex-start;
+    padding: 0;
+  }
+  .s-search-modal .s-modal-spacer {
+    display: inline;
+  }
+}
+@media (max-width: 639px) {
+  .s-search-modal .s-modal-body {
+    height: 100dvh;
+    max-height: 100dvh !important;
+  }
+}
+@media (min-width: 640px) {
+  .s-search-modal .s-modal-body {
+    padding: 0;
+    width: 700px;
+    max-width: 90%;
+    margin-top: 3.2rem;
+    border-radius: 0.5rem;
+    background: transparent;
+    overflow: visible;
+    position: relative !important;
+  }
 }
 .s-search-modal .s-modal-close {
   top: 50%;
   transform: translateY(-50%);
 }
+@media (min-width: 640px) {
+  .s-search-modal.s-search-modal-new .s-modal-body {
+    background: white;
+    overflow: hidden;
+    width: 1100px;
+    max-width: 95%;
+  }
+}

package/dist/collection/components/salla-modal/salla-modal.js

@@ -65,6 +65,11 @@ export class SallaModal {
          * Show a back button in the header corner. Defaults to `false`
          */
         this.showBack = false;
+        /**
+         * Hide the close (X) button in the modal header, without affecting `isClosable`
+         * (backdrop click / programmatic close still work). Defaults to `false`
+         */
+        this.hideCloseButton = false;
         salla.event.on('modal::open', target => target == this.host.id && this.open());
         salla.event.on('modal::close', target => target == this.host.id && this.close());
         this.modalTitle = this.host.getAttribute('modal-title');
@@ -80,7 +85,7 @@ export class SallaModal {
         setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
     }
     handleKeyUp(ev) {
-        if (ev.key === "KeyUp") {
+        if (ev.key === "Escape") {
             this.closeModal();
         }
     }
@@ -175,7 +180,7 @@ export class SallaModal {
         }
         return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding'), style: this.getCustomWidthStyle() }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.showBack ?
             h("salla-button", { class: "s-modal-back", shape: "icon", color: "light", size: "medium", "aria-label": "Back", onClick: () => this.handleBack() }, h("span", { innerHTML: this.getBackIcon() }))
-            : '', this.isClosable ?
+            : '', this.isClosable && !this.hideCloseButton ?
             h("button", { class: "s-modal-close", onClick: () => this.closeModal("closeButtonClick"), type: "button" }, h("span", { innerHTML: CancelIcon }))
             : '', this.modalTitle || this.subTitle ?
             h("div", { class: "s-modal-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
@@ -459,6 +464,26 @@ export class SallaModal {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "hideCloseButton": {
+                "type": "boolean",
+                "attribute": "hide-close-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the close (X) button in the modal header, without affecting `isClosable`\n(backdrop click / programmatic close still work). Defaults to `false`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/salla-payments/salla-payments.js

@@ -42,12 +42,12 @@ export class SallaPayments {
     render() {
         const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
         const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
-        return (h(Host, { key: 'da9ffad7606b7a1f885df4843612c4221a835c15', class: "s-payments-list-wrap" }, h("ul", { key: '9a15cd4328a65261e1137d65600867fd89893892', class: "s-payments-list" }, madeInKSA && h("li", { key: '17964fbe6a411738ad026cd116e1a67676ae0ab6', class: "s-payments-list-item" }, h("img", { key: '36baae3d522f41f1ab07d75328318ee9f9ae3a19', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
+        return (h(Host, { key: 'aaa2a9297d16666d9cf686aea17319026145ed1d', class: "s-payments-list-wrap" }, h("ul", { key: '0c9a19d7ba93555e897fdb5068572d90f64a87e5', class: "s-payments-list" }, madeInKSA && h("li", { key: '1da474ca870831495e7bee34e8e8ba538927c716', class: "s-payments-list-item" }, h("img", { key: '66b42b93ef788b7091e8343338182ffc93cae74f', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
             h("div", { id: "cod-slot", innerHTML: this.codSlot
                     .replace(/\{image\}/g, this.paymentLogo(`cod`)) }) :
             h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                     .replace(/\{image\}/g, this.paymentLogo(payment))
-                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '9f6c64efa03905a8584f8732bc7032ae686bef29', id: "sbc-slot", innerHTML: this.sbcSlot
+                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: 'fd9c5984a1c6890dc9690f6e3969a76fed2f1501', id: "sbc-slot", innerHTML: this.sbcSlot
                 .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                 .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
     }
@@ -170,5 +170,5 @@ export class SallaPayments {
     static get elementRef() { return "host"; }
 }
 /** Slugs whose mini logo lives on the new assets CDN; add one when its logo is re-uploaded there. */
-SallaPayments.NEW_CDN_LOGOS = ['tabby_installment', 'emkan_installment'];
+SallaPayments.NEW_CDN_LOGOS = ['tabby_installment', 'emkan_installment', 'benefit', 'qpay'];
 SallaPayments.audited = false;

package/dist/collection/components/salla-product-card/salla-product-card.css

@@ -366,6 +366,7 @@
 }
 .s-product-card-content-title a {
   display: block;
+  text-align: start;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
@@ -382,6 +383,13 @@
   align-items: center;
   justify-content: space-between;
 }
+.s-product-card-out-of-stock-label {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
 .s-product-card-rating {
   display: flex;
   align-items: center;
@@ -622,6 +630,12 @@
 .s-product-card-compact .s-product-card-content-footer {
   margin-top: 0px;
   flex-shrink: 0;
+  gap: 0.5rem;
+}
+.s-product-card-add-to-cart-icon svg {
+  height: 1rem;
+  width: 1rem;
+  fill: currentColor;
 }
 .s-product-card-compact .s-add-product-button-compact salla-button .s-button-btn {
   height: 2rem;
@@ -658,7 +672,7 @@
 .s-product-card-compact .s-product-card-content-title {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.25;
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
@@ -668,7 +682,7 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  display: block;
+  font-weight: 500;
 }
 .s-product-card-compact .s-product-card-content-subtitle {
   margin-top: 0.25rem;
@@ -710,3 +724,9 @@
 .s-product-card-compact .s-product-card-promotion-title {
   display: none;
 }
+.s-search-grid-item .s-product-card-out-badge {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}

package/dist/collection/components/salla-product-card/salla-product-card.js

@@ -4,11 +4,30 @@
 import { Host, h } from "@stencil/core";
 import Heart from "../../assets/svg/heart.svg";
 import Star from "../../assets/svg/star2.svg";
+import Cart from "../../assets/svg/cart.svg";
 /**
  * @slot add-to-cart-label - Add to cart label.
  */
 export class SallaProductCard {
     constructor() {
+        /**
+         *  Force-show the wishlist button even in layouts (e.g. horizontal + compact)
+         *  that otherwise wouldn't render one. Defaults to `false`.
+         */
+        this.forceShowWishlistButton = false;
+        /**
+         *  Show only the cart icon instead of the text label on the add-to-cart button.
+         *  Defaults to `false`.
+         */
+        this.compactAddToCart = false;
+        /**
+         *  Show the out-of-stock label beside the price instead of as the image badge
+         *  rendered by `getProductBadge()`. Defaults to `false`.
+         */
+        this.showOutOfStockBesidePrice = false;
+        // CSS line-clamp alone isn't reliable enough here (cross-browser + RTL edge cases), so
+        // compact titles are also hard-truncated in JS to guarantee at most ~2 lines.
+        this.COMPACT_TITLE_MAX_LENGTH = 60;
         // Store configs
         salla.onReady(() => {
             this.fitImageHeight = salla.config.get('store.settings.product.fit_type');
@@ -63,18 +82,30 @@ export class SallaProductCard {
         let d = new Date(date);
         return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
     }
+    getDisplayTitle() {
+        const name = this.productData?.name || '';
+        if (!this.compact || name.length <= this.COMPACT_TITLE_MAX_LENGTH) {
+            return name;
+        }
+        return name.slice(0, this.COMPACT_TITLE_MAX_LENGTH).trimEnd() + '…';
+    }
     getProductBadge() {
-        if (this.productData.promotion_title) {
-            return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
+        if (this.productData?.is_out_of_stock && !this.showOutOfStockBesidePrice) {
+            return h("div", { class: "s-product-card-out-badge" }, this.outOfStock);
         }
         if (this.showQuantity && this.productData?.quantity) {
             return h("div", { class: "s-product-card-quantity" }, this.remained, " ", salla.helpers.number(this.productData?.quantity));
         }
-        if (this.showQuantity && this.productData?.is_out_of_stock) {
-            return h("div", { class: "s-product-card-out-badge" }, this.outOfStock);
+        if (this.productData.promotion_title) {
+            return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
         }
         return '';
     }
+    renderAddToCartLabel() {
+        return (h("slot", { name: "add-to-cart-label" }, this.compactAddToCart
+            ? h("span", { class: "s-product-card-add-to-cart-icon", innerHTML: Cart })
+            : this.productData.add_to_cart_label));
+    }
     getPriceFormat(price) {
         if (!price || price == 0) {
             return salla.config.get('store.settings.product.show_price_as_dash') ? '-' : '';
@@ -105,14 +136,14 @@ export class SallaProductCard {
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: 'c5a6d2bc2fcf23da1a41ab8b19b2e981fb111e30', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: 'e8d5105e4dbe367c612d62ef1dd6c95d04f440b0', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '8714997fcb48ef0eaabdf0a52cb775514e53db56', ...hrefProp }, h("img", { key: 'eebd3c1dde0894037a7723c46e2f07f6a5aef939', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: 'e0748a44b8e851c7aff3ee741a17dcb19dabfdaf', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '10cc1deb8384ad2bbe83263f82b257d5042cff8e', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: 'd976cc14bb10c2d5fe6c55253ea051b8a57d7721', ...hrefProp }, h("img", { key: '9007014be0cb7adc56541e0b1e823fb4d6f92b84', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '72e240315320e976dcad8d3f027711b9c1d7bcf1', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '2f0186ffc102488824cd7c346f4e07439474fc26', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'c101c02eeb4e0245fbcd713b0e83c81148e594c1', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'f02eaeabefd56d7b560dcd268e2b941cf843cc95', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: 'd50ea0726d25bf3b551050e906fc615bc682e694', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'e4f39676d661a01d1aa6352cac7be6e764fa8687', class: "s-product-card-content-title" }, h("a", { key: '0aacc2e00a0db730d1e803da34336085082df75d', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: '9776564de24468852192dce1ff0db35cd6c533c3', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'd78ea05cba95053f99495c5e8aeb59a9b66557c8', class: "s-product-card-content-title" }, h("a", { key: 'a8ba81e8ba7a4e59cf4c6bcb4370ea0965b82087', ...hrefProp }, this.getDisplayTitle())), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -121,16 +152,20 @@ export class SallaProductCard {
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: '445a1e16fee6ebb6ab5012aca324d3845991d13e', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            : '', h("div", { key: '290e93db790c81a11e8d2edf3d215cec03edc965', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.showOutOfStockBesidePrice && this.productData?.is_out_of_stock ?
+            h("span", { class: "s-product-card-out-of-stock-label" }, this.outOfStock)
+            : '', this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))
             : ''), this.isSpecial && this.productData.discount_ends
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
             : '', !this.hideAddBtn && !this.compact ?
-            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)), this.horizontal || this.fullImage ?
+            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, this.renderAddToCartLabel()), this.horizontal || this.fullImage ?
                 h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick(), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
                 : '')
             : ''), !this.hideAddBtn && this.compact ?
-            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)))
+            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, this.renderAddToCartLabel()), this.forceShowWishlistButton ?
+                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart }))
+                : '')
             : ''));
     }
     componentDidLoad() {
@@ -326,6 +361,66 @@ export class SallaProductCard {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "forceShowWishlistButton": {
+                "type": "boolean",
+                "attribute": "force-show-wishlist-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force-show the wishlist button even in layouts (e.g. horizontal + compact)\nthat otherwise wouldn't render one. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "compactAddToCart": {
+                "type": "boolean",
+                "attribute": "compact-add-to-cart",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show only the cart icon instead of the text label on the add-to-cart button.\nDefaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showOutOfStockBesidePrice": {
+                "type": "boolean",
+                "attribute": "show-out-of-stock-beside-price",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the out-of-stock label beside the price instead of as the image badge\nrendered by `getProductBadge()`. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/salla-search/interfaces.js

@@ -0,0 +1 @@
+export {};