@salla.sa/twilight-components 2.14.470 → 2.14.472

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

@@ -79,7 +79,7 @@ export class SallaProductCardEmbed {
             's-product-card-embed-card-align-right': this.align === 'right',
             's-product-card-embed-card-align-center': this.align === 'center',
         };
-        return (h(Host, { key: 'a742a11dc2926fb941f44d1b3fd5cc3b4a207822' }, this.hasError && h("span", { key: 'c554a3b1971fa0b646611d24b7000bed921114d8', class: "s-product-card-embed-fallback" }), h("div", { key: 'cb0551a374e4ed68496bfa436adf6424febbd681', class: cardClasses, ref: (el) => {
+        return (h(Host, { key: '61c3e673a103e5d13217bac208611bf4978d20a4' }, this.hasError && h("span", { key: '8f013953f9eed502307823825e573281f481fd19', class: "s-product-card-embed-fallback" }), h("div", { key: '150d4080de0dbf21a2abaa00eca4c8ffae604546', class: cardClasses, ref: (el) => {
                 this.cardContainer = el;
             } })));
     }

package/dist/collection/components/salla-product-options/availability-utils.js

@@ -0,0 +1,54 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * Builds a per-detail availability map from SKU-level data.
+ *
+ * Exported as a pure function so it can be unit-tested independently of the
+ * Stencil component (the @State availabilityMap backing-store is not accessible
+ * via page.rootInstance in the Stencil mock-doc test environment).
+ *
+ * Status values:
+ *   'available'    – at least one in-stock SKU for this detail + current selections
+ *   'out_of_stock' – all matching SKUs are out of stock
+ *   'impossible'   – no SKU intersection exists for this combination
+ *
+ * skus_availability is always the authoritative source when present; is_out is
+ * consulted only as a last resort when a detail has no SKU data at all.
+ */
+export function computeAvailabilityMap(optionsData, selectedOptions) {
+    const map = {};
+    if (!optionsData?.length)
+        return map;
+    const variantGroups = optionsData.filter(opt => opt.details?.some(d => d.skus_availability && Object.keys(d.skus_availability).length > 0));
+    const isSingleGroup = variantGroups.length <= 1;
+    for (const optionGroup of variantGroups) {
+        const otherSelected = selectedOptions.filter(s => s.option_id !== optionGroup.id);
+        for (const detail of optionGroup.details) {
+            const skusAvail = detail.skus_availability;
+            // No skus_availability data — fall back to is_out as last resort only.
+            if (!skusAvail || !Object.keys(skusAvail).length) {
+                map[detail.id] = detail.is_out ? 'out_of_stock' : 'available';
+                continue;
+            }
+            const detailSkus = Object.keys(skusAvail).map(Number);
+            // No cross-group context yet — evaluate this detail's own SKUs directly.
+            if (isSingleGroup || otherSelected.length === 0) {
+                map[detail.id] = detailSkus.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+                continue;
+            }
+            // Intersect this detail's SKUs with those of each other selected detail.
+            let candidates = detailSkus;
+            for (const other of otherSelected) {
+                const otherSkus = new Set(Object.keys(other.skus_availability || {}).map(Number));
+                candidates = candidates.filter(sku => otherSkus.has(sku));
+            }
+            if (!candidates.length) {
+                map[detail.id] = 'impossible';
+                continue;
+            }
+            map[detail.id] = candidates.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+        }
+    }
+    return map;
+}

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { DisplayType } from "./interfaces";
+import { computeAvailabilityMap } from "./availability-utils";
 import CheckCircleIcon from "../../assets/svg/check.svg";
 import CameraIcon from "../../assets/svg/camera.svg";
 import FileIcon from "../../assets/svg/file-upload.svg";
@@ -27,6 +28,7 @@ export class SallaProductOptions {
         this.availableDigitalCardValues = [];
         this.userInitiatedValidation = false;
         this.isCartMode = false;
+        this.availabilityMap = {};
         this.outSkus = [];
         /**
        * Avoid selection of previous default or selected card value option
@@ -37,6 +39,11 @@ export class SallaProductOptions {
          * The id of the product to which the options are going to be fetched for.
          */
         this.productId = salla.config.get('page.id');
+        /**
+         * Strip the wrapper's padding (keeps the background, rounded corners, margin).
+         * Used by callers that need the options to sit flush inside their own surface.
+         */
+        this.noPadding = false;
         this.handleDonationOptions = (event, detail, type, _option) => {
             // Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
             if (detail === 'custom' && type === 'input') {
@@ -117,12 +124,14 @@ export class SallaProductOptions {
      */
     async setOptionsData(optionsData) {
         this.optionsData = optionsData;
-        const that = this;
-        this.optionsData[0]?.details?.forEach(function (detail) {
+        this.outSkus = [];
+        this.optionsData[0]?.details?.forEach(detail => {
             Object.entries(detail.skus_availability || {})
-                .filter(sku => !sku[1])
-                .map(sku => that.outSkus.push(Number(sku[0])));
+                .filter(([, available]) => !available)
+                .forEach(([sku]) => this.outSkus.push(Number(sku)));
         });
+        this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Get the current options state, including selected values/details.
@@ -308,8 +317,9 @@ export class SallaProductOptions {
      */
     setSelectedSkus() {
         this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
-            .reduce((p, c) => p.filter(e => c.includes(e)), []) // Initialize accumulator as an empty array
+            .reduce((p, c) => p.filter(e => c.includes(e)), [])
             .map(sku => Number(sku));
+        this.computeAvailability();
     }
     handleRequiredMultipleOptions(option) {
         if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
@@ -513,7 +523,7 @@ export class SallaProductOptions {
         if (this.optionsData?.length === 0) {
             return;
         }
-        return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
+        return (h(Host, { class: { 's-product-options-wrapper': true, 's-product-options-no-padding': this.noPadding } }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
             this.splitterOption()
             : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: this.generateInputId(option.id), class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
     }
@@ -568,7 +578,9 @@ export class SallaProductOptions {
     }
     fillSelectedOptions() {
         this.selectedOptions = this.optionsData.reduce((acc, opt) => {
-            const selectedDetails = opt.details.filter(detail => detail.is_selected);
+            // `details` is optional on the Option interface — input-type options
+            // (text/number/date/file) carry no choice list, so guard before filtering.
+            const selectedDetails = (opt.details ?? []).filter(detail => detail.is_selected);
             const mappedDetails = selectedDetails.map(detail => ({
                 ...detail,
                 option_id: opt.id
@@ -576,6 +588,25 @@ export class SallaProductOptions {
             return acc.concat(mappedDetails);
         }, []);
     }
+    /**
+     * Seed `selectedOptions` from API defaults (`is_selected: true`).
+     * componentWillLoad does this only on the cart page; non-cart callers
+     * (e.g. order-options modal) call this after mount to avoid the first
+     * multi-select toggle wiping the pre-selected defaults.
+     * */
+    async seedSelectedOptions() {
+        this.fillSelectedOptions();
+        // A required multi-select renders every checkbox `required`; handleRequiredMultipleOptions
+        // clears that once one is checked, but it only fires on user `change`. After seeding a
+        // pre-selected default we run it for the initial DOM so a defaulted-but-untouched required
+        // multi-select doesn't fail validation and block checkout. Defer to rAF so the seeded
+        // `checked` state is painted before we count it (matches the change-handler pattern above).
+        requestAnimationFrame(() => {
+            this.optionsData
+                ?.filter(o => o.type === DisplayType.MULTIPLE_OPTIONS && o.required)
+                .forEach(o => this.handleRequiredMultipleOptions(o));
+        });
+    }
     async componentDidLoad() {
         if (!this.optionsData?.length) {
             return;
@@ -638,6 +669,7 @@ export class SallaProductOptions {
         this.disableCardValue = false;
         this.canDisabled = true;
         this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Enable user-initiated validation mode so invalid fields will scroll into view
@@ -748,22 +780,14 @@ export class SallaProductOptions {
         //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
         return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
     }
+    computeAvailability() {
+        this.availabilityMap = computeAvailabilityMap(this.optionsData || [], this.selectedOptions || []);
+    }
     isOptionDetailOut(detail) {
-        if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {
-            return detail.is_out;
-        }
-        const isDetailSelected = this.selectedOptions.filter(option => option.id === detail.id).length;
-        //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet
-        if (isDetailSelected && this.selectedOptions.length === 1) {
-            return false;
-        }
-        //if current details has sku in the possible outSkus it's out for sure
-        if (isDetailSelected) {
-            //here we will get the possible outSkus for current selected options
-            const outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
-            return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
-        }
-        return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
+        const status = this.availabilityMap[detail.id];
+        // !!detail.is_out guards against TypeScript optimising away `?? false`
+        // for the non-nullable `is_out: boolean` field when the value is actually undefined at runtime.
+        return status !== undefined ? status !== 'available' : !!detail.is_out;
     }
     /**
      * Renders a single input element (radio or checkbox) for an option detail.
@@ -776,10 +800,14 @@ export class SallaProductOptions {
      */
     renderInput(type, detail, option, isRequired, name, buttonStyle) {
         const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
-        const isDisabled = this.isOptionDetailOut(detail);
+        const isOutOfStock = this.isOptionDetailOut(detail);
         return (h("label", { class: {
-                "s-product-options-disabled": isDisabled,
-            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: isDisabled, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: { "s-product-options-grid-mode-span": buttonStyle, "s-product-options-disabled": isDisabled } }, this.getOptionDetailName(detail))));
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+                "s-product-options-option-stock-out": isOutOfStock,
+            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: this.canDisabled && isOutOfStock, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: {
+                "s-product-options-grid-mode-span": buttonStyle,
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+            } }, this.getOptionDetailName(detail))));
     }
     /**
      * Renders a collection of input elements for all details of an option.
@@ -852,15 +880,22 @@ export class SallaProductOptions {
     }
     //@ts-ignore
     colorOption(option) {
-        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return (h("div", { class: {
+                    "s-product-options-colors-item": true,
+                    "s-product-options-option-stock-out": isOutOfStock,
+                }, key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) }))));
+        })));
     }
     //@ts-ignore
     thumbnailOption(option) {
         return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-            return h("div", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("div", { key: detail.id, class: { "s-product-options-option-stock-out": isOutOfStock } }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), isOutOfStock ?
                 [
-                    h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
-                    this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
+                    h("small", { key: `badge-${detail.id}`, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+                    this.canDisabled ? h("div", { key: `overlay-${detail.id}`, class: "s-product-options-thumbnails-badge-overlay" }) : '',
                 ]
                 : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
         }));
@@ -875,7 +910,8 @@ export class SallaProductOptions {
     }
     countryOption(option) {
         return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
-            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: detail.is_out, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": isOutOfStock, "s-product-options-option-stock-out": isOutOfStock } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
                     e.currentTarget.onerror = null;
                     e.currentTarget.src =
                         salla.url.cdn('images/globe.svg');
@@ -1009,6 +1045,26 @@ export class SallaProductOptions {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "noPadding": {
+                "type": "boolean",
+                "attribute": "no-padding",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Strip the wrapper's padding (keeps the background, rounded corners, margin).\nUsed by callers that need the options to sit flush inside their own surface."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -1027,7 +1083,8 @@ export class SallaProductOptions {
             "disableCardValue": {},
             "availableDigitalCardValues": {},
             "userInitiatedValidation": {},
-            "isCartMode": {}
+            "isCartMode": {},
+            "availabilityMap": {}
         };
     }
     static get events() {
@@ -1211,6 +1268,23 @@ export class SallaProductOptions {
                     "tags": []
                 }
             },
+            "seedSelectedOptions": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Seed `selectedOptions` from API defaults (`is_selected: true`).\ncomponentWillLoad does this only on the cart page; non-cart callers\n(e.g. order-options modal) call this after mount to avoid the first\nmulti-select toggle wiping the pre-selected defaults.",
+                    "tags": []
+                }
+            },
             "enterCartMode": {
                 "complexType": {
                     "signature": "() => Promise<void>",

package/dist/collection/components/salla-product-size-guide/salla-product-size-guide.js

@@ -45,11 +45,11 @@ export class SallaProductSizeGuide {
         return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
     }
     render() {
-        return (h("salla-modal", { key: 'de368aff05a19d87eb4e99f4e1d7eee36155f435', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: 'c4ab31b3e6ef2751761ca2db27554f7f5bf057fc', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '17cfceb5ccb0546928f87f956267e9d0c11017ac', slot: "loading" }, h("div", { key: '4f4e20a62396d7825315203ffd22a72030e821b1', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'd9132b26634ae1997dad9f1229b248c2cd76fff0', height: '15px', width: '25%' }), h("div", { key: '1b6a236851eef6e7caf7b7a0e84e591824b4e4ef', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'bae06741881b57b4eb853f1256a22f9393d9cea4', height: '40px' }), h("salla-skeleton", { key: 'fdeb75a853f89df154b69dbd48fc8e233561af59', height: '40px' }), h("salla-skeleton", { key: 'd0be70bc141f04fd24adc86c56eec3a5e896f2d4', height: '40px' }), h("salla-skeleton", { key: 'c5146addbf2d5b9bda05170a9743cad0e08d8674', height: '40px' })), h("div", { key: '04dbbffe2de708c984c5d0966aa2b86c0051bd14', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '320fb33a2e5d9ee1f4b87c18b3f3dd13de180d4f', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f06aeac8e2f8ea86ec9b1c5c6f2b31172f23209f', height: '10px', width: '75%' }), h("salla-skeleton", { key: '1accf852a34edcac77a77151ebf67ba8e05cc729', height: '10px', width: '50%' }), h("salla-skeleton", { key: '42d4c3364779a6ee130339e37affe2e0c590e6a7', height: '10px', width: '75%' }), h("salla-skeleton", { key: '13064a231460414b4a0abd19dda41b01ac1ee04f', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'd5a50f96ca3bab125503f836cd883cfb98ca135d', height: '10px', width: '25%' }), h("salla-skeleton", { key: '11cd2ed36d9754c32173f14cd7d5ea99fc2b5577', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'a5b3a192d0e38dc13a025b8b8e0aba767f35611b', height: '10px', width: '45%' }), h("salla-skeleton", { key: 'dddcb26038e180fb5b686b29d286316d4314909f', height: '10px', width: '30%' })))), h("slot", { key: '43a08b9b6e64955b726b832f0849617ac31d4c25', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: '750cca54e5286fc1b77942cc4a9784970b8569ec', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '0aecc3b447a0ef8f92183c1c785c2a8bbf139c17', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '1720d30460d99d578365cae9d6a0e92790f834a2', slot: "loading" }, h("div", { key: '0bf85ba5de7db72b7e4f4d94e592dc951c1d3801', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '3635e6c238400762f5c70266bb8359cf3c1c0527', height: '15px', width: '25%' }), h("div", { key: '0adfa776efbf9e7d988d08a3dce69900d6d3d737', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '53799c8bd0f495ec723d0cf4be0ab0e978351c23', height: '40px' }), h("salla-skeleton", { key: 'a825da569d6453a5e3b6cac9cf5848f941af22ae', height: '40px' }), h("salla-skeleton", { key: 'd2091d09ca662aef1f2d6b3cddb4bf86ccc77c0f', height: '40px' }), h("salla-skeleton", { key: '5974a5b7227d03979ea5a65f2f1481f59ca6e0fe', height: '40px' })), h("div", { key: '6e12dc1b703488433f5e8047efe16d70ebaec8c3', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '9d54f957ba7e4c78fff9ed693179d5f7faa55a25', height: '15px', width: '25%' }), h("salla-skeleton", { key: '946eedae2371d7df9d1b9cf8cf1b0f7800554eed', height: '10px', width: '75%' }), h("salla-skeleton", { key: '35d38d23f73bb4bbd4dc5372b70cd34f09cec2ea', height: '10px', width: '50%' }), h("salla-skeleton", { key: '8f13518e172127af747f50773f7a7f0d64d2c0ba', height: '10px', width: '75%' }), h("salla-skeleton", { key: '759708410b562babb733f401cdf8ee310761b110', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'ad8d12dcefe5fbbd8dfa4060a028a3387186ffa1', height: '10px', width: '25%' }), h("salla-skeleton", { key: '63c5864943ec23a3a42761c90ca019acd7118f8c', height: '10px', width: '60%' }), h("salla-skeleton", { key: '490d6078c8d382740eb92c825a08e2aad203c4af', height: '10px', width: '45%' }), h("salla-skeleton", { key: '10b0d73e6a34990a2d23554faec6bce24dcc234e', height: '10px', width: '30%' })))), h("slot", { key: '3d0a3e42eba7cc521e8df1fbb2e7323962bff5a8', name: "header" }), !this.hasError && !!this.guides ?
             [
                 h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
             ]
-            : this.showPlaceholder(), h("slot", { key: '5ae0956ca1f9313b5ef3d01dbdcab32f2e975e05', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: 'd1fc7cdbbd52a1c3c2b08f45a647e7ea1586cc9d', name: "footer" })));
     }
     static get is() { return "salla-product-size-guide"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-quantity-input/salla-quantity-input.js

@@ -91,7 +91,7 @@ export class SallaQuantityInput {
         if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
             inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
         }
-        return (h(Host, { key: '4829904a6c2ed7710214caf1b2888e2a58b38eed', class: "s-quantity-input" }, h("div", { key: '8dd2592d3aed1dda990a9c818b78514540612a60', class: "s-quantity-input-container" }, h("button", { key: 'ea93501ee59066cbfb11ea8bf239073b33fa9eff', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: '61c70812d9cdb7c8c66b70d5c3a1f0522fccb542', name: "increment-button" })), h("input", { key: '02793b5365470afd59481ff987fe8d3da658bd48', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), inputMode: "numeric", pattern: "[0-9]*", min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '920f9020926a7d4cf77b2b971e35eb1586132c72', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: '105487e60b1b5e7d0cf092f3b17fd085f61a8f1d', name: "decrement-button" })))));
+        return (h(Host, { key: 'ada66e864b927a5a1ec496c528b0f35121cb0e3e', class: "s-quantity-input" }, h("div", { key: '55601a364982154960a0513b507bfd7e349eea3f', class: "s-quantity-input-container" }, h("button", { key: 'e4f652ee5aa01e9be701f375c1d6c67821624b1d', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: '811f80ce4faa3ae783070ee18df09024dc157016', name: "increment-button" })), h("input", { key: '6f5db2fb1f02a7f3a80d9ac769608c0956942df1', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), inputMode: "numeric", pattern: "[0-9]*", min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '835ad4fc21b7926de520972fb0c550009b143c26', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: 'c03fec4e1736df09bd555a04ded8941a50244eb2', name: "decrement-button" })))));
     }
     static get is() { return "salla-quantity-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-quick-buy/salla-quick-buy.js

@@ -3,6 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import "@salla.sa/applepay/src/index";
+import { resolveApplePayOrderOptions, appendOrderOptionsToPayload, reportProductOptionsValiditySync, } from "../salla-order-options-modal/apple-pay-order-options";
 export class SallaQuickBuy {
     constructor() {
         /**
@@ -25,32 +26,82 @@ export class SallaQuickBuy {
          * @default {}
          */
         this.options = {};
+        /** Modal selections, merged into the quick-purchase payload. */
+        this.collectedOrderOptions = [];
+        /** Flips true after the first onStartedSession so the second dispatch begins. */
+        this.optionsResolved = false;
+        /** PDP price + selected order-option prices (from the modal). */
+        this.applePayAmount = 0;
+        /** Session from the initial gesture; begun later when there are no order options. */
+        this.pendingApplePaySession = null;
         this.quickBuy = salla.lang.get('pages.products.buy_now');
+        /** Apple Pay onStartedSession: first call defers begin() to run the OO check; second (resolved) begins. */
+        this.handleApplePaySessionStarted = (session) => {
+            // Order options disabled → let Apple Pay begin normally, as if the feature didn't exist.
+            if (!salla.config.get('store.settings.order_options.mandatory', false))
+                return false;
+            if (this.optionsResolved)
+                return false;
+            this.optionsResolved = true;
+            this.pendingApplePaySession = session;
+            resolveApplePayOrderOptions({
+                productId: this.productId,
+                amount: Number(this.amount),
+                quantity: this.getSelectedQuantity(),
+                beginPendingSession: () => {
+                    this.pendingApplePaySession?.begin();
+                    this.pendingApplePaySession = null;
+                },
+                discardPendingSession: () => { this.pendingApplePaySession = null; },
+                onSubmit: (selections, total) => {
+                    this.collectedOrderOptions = selections;
+                    this.applePayAmount = total;
+                    this.settlePayment();
+                },
+            });
+            return true;
+        };
         salla.lang.onLoaded(() => {
             this.quickBuy = salla.lang.get('pages.products.buy_now');
         });
     }
-    async quickBuyHandler() {
-        // user guest and guest-checkout not enabled
+    quickBuyHandler() {
         if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });
-            // todo (low) :: find a way to re-fire the method after success
-            let afterLoginEvent = "salla-quick-buy::user.logged-in";
-            salla.event.on(afterLoginEvent, () => this.settlePayment());
-            salla.api.auth.setAfterLoginEvent(afterLoginEvent);
-            return salla.auth.event.dispatch('login::open', { withoutReload: true });
+            salla.api.auth.requireLoginThen('salla-quick-buy::user.logged-in', () => this.quickBuyHandler());
+            return;
         }
-        await this.settlePayment();
+        // Sync validate — AP needs the gesture preserved for new ApplePaySession().
+        if (!this.validatePdpOptionsSync())
+            return;
+        this.optionsResolved = false;
+        this.collectedOrderOptions = [];
+        this.applePayAmount = 0;
+        this.settlePayment();
     }
-    async settlePayment() {
-        let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-        //make sure all the required options are selected
-        if (optionsElement && !await optionsElement.reportValidity()) {
-            this.validationFailed.emit({ productId: this.productId });
-            return salla.error(salla.lang.get('common.messages.required_fields'));
+    /** Sync PDP-option validity (preserves the AP gesture); emits + notifies on failure. */
+    validatePdpOptionsSync() {
+        if (reportProductOptionsValiditySync(this.productId))
+            return true;
+        this.validationFailed.emit({ productId: this.productId });
+        salla.error(salla.lang.get('common.messages.required_fields'));
+        return false;
+    }
+    /** Read the live PDP quantity from the form so order-options match the real cart line. */
+    getSelectedQuantity() {
+        try {
+            const data = this.host.getElementSallaData?.();
+            const qty = Number(data instanceof FormData ? data.get('quantity') : data?.quantity);
+            return Number.isFinite(qty) && qty > 0 ? qty : 1;
+        }
+        catch {
+            return 1;
         }
+    }
+    async settlePayment() {
         //use this way to get quantity too
         let data = this.host.getElementSallaData();
+        appendOrderOptionsToPayload(data, this.collectedOrderOptions);
         // if the store doesn't have Apple Pay , just create a cart and then redirect to check out page
         if (!this.isApplePayActive) {
             // return salla.product.buyNow(this.productId, data);
@@ -68,13 +119,16 @@ export class SallaQuickBuy {
         }
         // noinspection TypeScriptValidateJSTypes
         salla.event.dispatch('payments::apple-pay.start-transaction', {
-            amount: this.amount, // 1000
+            // Prefer the modal's collected total (PDP price + selected OO additional_prices).
+            // Falls back to PDP live amount when no OO modal ran.
+            amount: this.applePayAmount > 0 ? this.applePayAmount : this.amount,
             currency: this.currency || 'SAR', // SAR
             requiredShippingContactFields: this.getRequiredShippingContactFields(),
             shippingMethods: this.isRequireShipping ? [] : undefined,
             supportedNetworks: salla.config.get('store.settings.buy_now.networks'),
             supportedCountries: salla.config.get('store.settings.buy_now.countries'),
             countryCode: salla.config.get('store.store_country') || 'SA',
+            onStartedSession: this.handleApplePaySessionStarted,
             validateMerchant: {
                 url: this.validateHost ? `${this.validateHost}/checkout/applepay/validate` : salla.url.get('checkout/applepay/validate'),
                 onSuccess: (response) => {
@@ -205,7 +259,7 @@ export class SallaQuickBuy {
         });
     }
     render() {
-        return h(Host, { key: '078fa17510403612cf8204899fee395f057b88bd' }, this.quickBuyButton());
+        return h(Host, { key: 'fb1bdf862d9b9cea58df14862f7ec9c4be388585' }, this.quickBuyButton());
     }
     quickBuyButton() {
         return h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });

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

@@ -158,7 +158,7 @@ export class SallaReviewCard {
         return (h("a", { href: this.review?.product?.url, class: "s-review-card-product-container" }, h("img", { alt: product.image?.alt || "Product", src: product.image?.url, class: "s-review-card-product-image", width: 60, height: 60, loading: "lazy", decoding: "async", draggable: false }), h("div", { class: "s-review-card-product-details" }, h("p", { class: "s-review-card-product-details-name" }, product.name), this.showPurchaseCount ? h("p", { class: "s-review-card-product-details-purchase-count" }, h("span", { innerHTML: IconFire2 }), this.purchasedCount) : null)));
     }
     render() {
-        return h("div", { key: '7e833e08405a9153759b958e9c6979fd83c5aec1', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '85e33a2160a62e2fb3e376f6e20d223d53ced8fe', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '8b21485de56e57dceb9facb044bd6bad1ad866f3', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
+        return h("div", { key: '0772f783fe893c4d03a6d698909a09ecedb69fa6', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '5780bb57a79c04cef6cede906ce086f6811dad3c', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '7889fe4dfaf52d2e54adb667f21fc2fced195dd6', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
     }
     static get is() { return "salla-review-card"; }
     static get originalStyleUrls() {

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

@@ -85,7 +85,7 @@ export class SallaReviews {
         });
     }
     render() {
-        return (h("div", { key: 'ab076b54664048719052cff15877bc5325c36393', class: "s-reviews-container" }, h("div", { key: 'da56343050cd2e9fe7ac7cf08b348b1d6c6af5c2', class: "s-reviews-header-wrapper" }, h("h1", { key: '64e0fb721d9c6e4763de4e116d43f3d4206452dc', class: "s-reviews-header" }, this.testimonialText), !!this.displayAllLink ? (h("a", { href: this.displayAllURL, class: "s-reviews-display-all" }, this.displayAllLinkText, h("span", { class: "s-reviews-display-all-icon", innerHTML: IconArrowLeft }))) : null), h("salla-slider", { key: 'c1ccfde9f4a4a617a0a6f12f841469f953114c4a', centered: true, "slides-per-view": 1, type: "testimonials", class: "s-reviews-testimonials-slider", "controls-outer": true, "auto-play": true, id: `testimonials-${this.source}-slider` }, h("div", { key: 'c3c7ca7d611b20618d336e16e57b20e479bbbbee', slot: "items" }, this.reviews.map((item, index) => (h("div", { key: index, class: "s-reviews-swiper-slide" }, h("div", { class: "s-reviews-testimonial" }, h("div", { class: "s-reviews-testimonial__inner" }, h("div", { class: "s-reviews-testimonial__avatar" }, h("img", { src: 'images/s-empty.png', "data-src": item.avatar, alt: item.name ? item.name : 'testimonial-' + index, class: "lazy" })), h("div", { class: "s-reviews-testimonial__text" }, h("p", { innerHTML: item.content }), h("div", { class: "s-reviews-testimonial__name_wrapper" }, h("div", { class: "s-reviews-testimonial__info" }, item.name && h("h2", null, `${item.name}`)), h("div", { class: "s-reviews-testimonial__rating" }, h("salla-rating-stars", { size: "small", value: item.stars })))), h("span", { class: "s-reviews-testimonial__icon", innerHTML: IconQuoteOpen }))))))))));
+        return (h("div", { key: '24e50ca2634208ad3ffcb9ca503aa7e18331b3a1', class: "s-reviews-container" }, h("div", { key: 'a1632306fc1a92051d030707aab075c825537e01', class: "s-reviews-header-wrapper" }, h("h1", { key: 'e2a4df75011da111e89c1b732e7741ddf452b9d5', class: "s-reviews-header" }, this.testimonialText), !!this.displayAllLink ? (h("a", { href: this.displayAllURL, class: "s-reviews-display-all" }, this.displayAllLinkText, h("span", { class: "s-reviews-display-all-icon", innerHTML: IconArrowLeft }))) : null), h("salla-slider", { key: '89009e55e3a5121c241295efd510405b623f45c3', centered: true, "slides-per-view": 1, type: "testimonials", class: "s-reviews-testimonials-slider", "controls-outer": true, "auto-play": true, id: `testimonials-${this.source}-slider` }, h("div", { key: '8b6b8df42043c8ecdb05dbbc30ecacde297f0dda', slot: "items" }, this.reviews.map((item, index) => (h("div", { key: index, class: "s-reviews-swiper-slide" }, h("div", { class: "s-reviews-testimonial" }, h("div", { class: "s-reviews-testimonial__inner" }, h("div", { class: "s-reviews-testimonial__avatar" }, h("img", { src: 'images/s-empty.png', "data-src": item.avatar, alt: item.name ? item.name : 'testimonial-' + index, class: "lazy" })), h("div", { class: "s-reviews-testimonial__text" }, h("p", { innerHTML: item.content }), h("div", { class: "s-reviews-testimonial__name_wrapper" }, h("div", { class: "s-reviews-testimonial__info" }, item.name && h("h2", null, `${item.name}`)), h("div", { class: "s-reviews-testimonial__rating" }, h("salla-rating-stars", { size: "small", value: item.stars })))), h("span", { class: "s-reviews-testimonial__icon", innerHTML: IconQuoteOpen }))))))))));
     }
     static get is() { return "salla-reviews"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-reviews-page/salla-reviews-page.js

@@ -142,7 +142,7 @@ export class SallaReviewsPage {
         return options.map(option => (h("option", { key: option.value, value: option.value, selected: option.value === this.sort }, option.label)));
     }
     render() {
-        return (h("host", { key: '1ca6e12aafb0b83953a887286003dce5f47c9374' }, h("div", { key: '9a353471f58a1fe67800f9d0ac38b3f94095b107', class: "s-reviews-page-header-wrapper" }, h("h2", { key: '0fc9c963af765108e42f341ac7d70c8758e4677a', class: "s-reviews-page-title" }, this.langTitlesReviews, h("span", { key: '13f2b001680a39440d3e5557bcfee46a92592ea4', class: "s-reviews-page-count" }, "(", this.langRatingReviews, ")")), h("div", { key: 'fcb5e88a598d342d4cdeff4cfba0a85ea94b911e', class: "s-reviews-page-filter-wrapper" }, h("label", { key: 'e2c23398b1024647c1cfdc283392b94e3ce0e44c', class: "s-reviews-page-filter-label", htmlFor: "testimonials-filter" }, this.langSorting), h("select", { key: '67f5f7748db13b7c6bdf3bbbb104d9f4b001df69', onChange: (e) => this.handleSorting(e), disabled: !this.reviews.length, class: "s-reviews-page-filter" }, this.renderSortingOptions()))), this.reviews.length ? h("main", { class: "s-reviews-page-grid", ref: el => {
+        return (h("host", { key: 'b82b491ae189f825367881b7b4f03ad64e471aae' }, h("div", { key: 'd124f10806cfabd1c1f85044786541011edff3ff', class: "s-reviews-page-header-wrapper" }, h("h2", { key: '30c58bb14bea27da968e874a0c1454a35e8db207', class: "s-reviews-page-title" }, this.langTitlesReviews, h("span", { key: '8850771469ae20d1b07efcb45be58738de377e6d', class: "s-reviews-page-count" }, "(", this.langRatingReviews, ")")), h("div", { key: '5a0060c5bdbfe4d37003b04d4c6368460be8cd38', class: "s-reviews-page-filter-wrapper" }, h("label", { key: '637d1aeec005ae662c6019c423ef3f1c3a6ff264', class: "s-reviews-page-filter-label", htmlFor: "testimonials-filter" }, this.langSorting), h("select", { key: '5b68b9441d4647f12583c71da61958c30c0dcda6', onChange: (e) => this.handleSorting(e), disabled: !this.reviews.length, class: "s-reviews-page-filter" }, this.renderSortingOptions()))), this.reviews.length ? h("main", { class: "s-reviews-page-grid", ref: el => {
                 this.wrapper = el;
             } }, this.reviews.map(review => (h("salla-review-card", { key: review.id, review: review }))))
             : h("div", { class: "s-products-list-placeholder" }, h("span", { innerHTML: ShoppingBag }), h("p", null, this.placeholderText)), this.pagination?.links?.next && this.reviews.length ? (h("div", { class: "s-reviews-page-load-more-container" }, h("salla-button", { class: "s-reviews-page-load-more-btn", loading: this.isLoading, onClick: () => this.infiniteScroll?.loadNextPage(), onKeyUp: () => this.infiniteScroll?.loadNextPage() }, this.langLoadMore))) : null));

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

@@ -146,7 +146,7 @@ export class SallaScopees {
         return salla.onReady();
     }
     render() {
-        return (h(Host, { key: 'bbf0b48e47cf334cc844cedc59ef5d430ce9cebe' }, h("salla-modal", { key: '20f8f0edb267c2a1e7cc23e930d06060916d5c64', ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: this.loading, "has-skeleton": true }, this.loading ?
+        return (h(Host, { key: 'a7571c852749d4449b42e2c12d5597f6aded1f7f' }, h("salla-modal", { key: '48846fbac890e05c0deabe74138ad929a14796fb', ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: this.loading, "has-skeleton": true }, this.loading ?
             h("div", { slot: "loading" }, h("div", { class: "s-scopes-skeleton" }, h("salla-list-tile", { class: "s-scopes-header" }, h("div", { slot: "icon", class: "s-scopes-header-icon" }, h("salla-skeleton", { type: "circle" })), h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-scopes-skeleton-search" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '30px', width: '100%' })), h("div", { class: "s-scopes-skeleton-scopes" }, h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-scopes-skeleton-btn" }, h("salla-skeleton", { height: '40px', width: '100%' }))))
             :
                 [h("salla-list-tile", { class: this.originalScopesList?.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList?.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList?.length > this.searchDisplayLimit ?

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

@@ -127,10 +127,10 @@ export class SallaSearch {
         this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
     }
     render() {
-        const searchContent = (h("div", { key: '25c930505262a83f8a8385aa0ca665ecad2cacd1', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '09d705b9da70c128584891672ba84d660f3c6d6a', class: "s-search-input-wrapper" }, h("span", { key: '5749d0cf3ad58bf845ef116e4ee377c577a770e8', class: "s-search-icon-wrap" }, h("span", { key: 'b1acaab31a15f447fb3de27e34a0a0833620456e', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '14bbab4ab1e8be11f25e229fb8ea0e9c982f2df7', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
+        const searchContent = (h("div", { key: 'd7668846b013b4e8c9617193cd7457a585733960', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '7850ee638ab8dbe416be4fa7bd5601d821802776', class: "s-search-input-wrapper" }, h("span", { key: '09bfde1658f27487458076cb91954e530f91c8be', class: "s-search-icon-wrap" }, h("span", { key: '547eb4e1efba4bc1e46ce9a28816f4d39b26f638', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '2be7d24d980cbb37ee50c389ab03e8fa67eb3973', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
                 height: this.height + 'px',
                 borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }), this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null), h("div", { key: '9f3fe2a8b952ad3db8775eb3645cf837ad50acb2', class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
+            } }), this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null), h("div", { key: 'fb09f6adaf9c4d9b798a6c10e45c446c306f0d37', class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
                 's-search-product': true,
                 's-search-product-not-available': !product.is_available,
             }, innerHTML: this.productSlot
@@ -139,9 +139,9 @@ export class SallaSearch {
                 .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price
                 ? salla.money(product.regular_price)
                 : '')
-                .replace(/\{image\}/g, product.image.url) }))), h("p", { key: '641e4165e6538523792f33694118c618818b91c9', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
-        const modalContent = (h("salla-modal", { key: '043edf7878b91643b3590bb9789a44df0a558af9', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
-        const placeholderContent = (h("div", { key: 'f5a08dc2ced47954b5a3bb87d4bc66a59e5f2660', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: '94c66a1a7016718348a50e8b5bf07659f4dd97c7', class: "s-search-input-wrapper" }, h("span", { key: '9f7bd3e92af9abaf6a852437883d6485885273e8', class: "s-search-icon-wrap" }, h("span", { key: 'd907342a757eb19ef404c4dfccc273bc1341bac8', class: "s-search-icon", innerHTML: Search })), h("button", { key: 'dcc3fb071542009d706de08a23138ab46683aa6a', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                .replace(/\{image\}/g, product.image.url) }))), h("p", { key: '7f81403f86aeddca49b39ca84750a7f148416e51', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
+        const modalContent = (h("salla-modal", { key: '75909547a855ed368527746c0d342309b6b1b656', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
+        const placeholderContent = (h("div", { key: '480110779039e31eb43a5cfb321ca3a53d36d986', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: 'ef5e5f05279cb5324f9981e6a73a926f36a28317', class: "s-search-input-wrapper" }, h("span", { key: 'def894edb583c66b66abde7b54602da821fe10ee', class: "s-search-icon-wrap" }, h("span", { key: '6d38ace3c0cc4bc98d9a87b0b558187ba82f57e3', class: "s-search-icon", innerHTML: Search })), h("button", { key: 'ff4ebaeb0eb6315121cd5927784783f34ee174fc', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
                 height: this.height + 'px',
                 borderRadius: this.oval ? this.height / 2 + 'px' : '',
             } }, salla.lang.get('blocks.header.search_placeholder'))), modalContent));