@salla.sa/twilight-components 2.14.271 → 2.14.273

package/dist/{esm/salla-product-options.entry.js → components/salla-product-options2.js}

@@ -1,9 +1,19 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-DXrQDmAN.js';
-import { I as IconVerified } from './check-uTyAzPSy.js';
-import { C as CameraIcon } from './camera-C6jIkM-X.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { I as IconVerified } from './check.js';
+import { C as CameraIcon } from './camera.js';
+import { d as defineCustomElement$a } from './salla-booking-field2.js';
+import { d as defineCustomElement$9 } from './salla-button2.js';
+import { d as defineCustomElement$8 } from './salla-color-picker2.js';
+import { d as defineCustomElement$7 } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$6 } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$5 } from './salla-file-upload2.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-map2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
+import { d as defineCustomElement$1 } from './salla-progress-bar2.js';
 
 var DisplayType;
 (function (DisplayType) {
@@ -43,10 +53,11 @@ var FileIcon = `<!-- Generated by IcoMoon.io -->
 
 const sallaProductOptionsCss = "";
 
-const SallaProductOptions = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.changed = createEvent(this, "changed");
+const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductOptions extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.changed = createEvent(this, "changed", 7);
         this.fileTypes = {
             pdf: 'application/pdf',
             png: 'image/png',
@@ -159,9 +170,21 @@ const SallaProductOptions = class {
     async getSelectedOptionsData() {
         const selectedOptions = {};
         const formData = this.host.getElementSallaData();
+        // Check if bundleContext is defined as a prop on the component before accessing it
+        const contextData = (typeof this.bundleContext !== 'undefined') ? this.bundleContext : null;
         formData.forEach((value, key) => {
-            if (key.startsWith('options[')) {
-                (selectedOptions[key.replace('options[', '').replace(']', '')] = value);
+            if (contextData) {
+                // Handle bundle naming convention: bundle[sectionId][index][options][optionId]
+                if (key.startsWith('bundle[') && key.includes('[options][')) {
+                    const optionId = key.split('[options][')[1].replace(']', '');
+                    selectedOptions[optionId] = value;
+                }
+            }
+            else {
+                // Handle standard naming convention: options[optionId]
+                if (key.startsWith('options[')) {
+                    selectedOptions[key.replace('options[', '').replace(']', '')] = value;
+                }
             }
         });
         return selectedOptions;
@@ -337,6 +360,10 @@ const SallaProductOptions = class {
         if (option.type === DisplayType.SINGLE_OPTION) {
             return this.singleOption(option);
         }
+        // Handle radio type as single option for bundle products
+        if (option.type === DisplayType.RADIO) {
+            return this.radioOption(option);
+        }
         if (option.type === DisplayType.DIGITAL_CARD_VALUE) {
             return this.digitalCardValuesOption(option);
         }
@@ -448,10 +475,47 @@ const SallaProductOptions = class {
         }
         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' ?
             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: `options[${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))))))));
+            : 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.generateInputName(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))))))));
     }
     generateUniqueKey(defaultValue) {
-        return this.uniqueKey ? `${defaultValue}-${this.uniqueKey}` : defaultValue;
+        const contextData = this.bundleContext;
+        let baseKey = this.uniqueKey ? `${defaultValue}-${this.uniqueKey}` : defaultValue;
+        if (contextData) {
+            try {
+                // Handle both string and object types
+                const context = typeof contextData === 'string'
+                    ? JSON.parse(contextData)
+                    : contextData;
+                const { sectionId, productId } = context;
+                baseKey = `${baseKey}-bundle-${sectionId}-${productId}`;
+            }
+            catch (e) {
+                // If parsing fails, just use the base key
+            }
+        }
+        return baseKey;
+    }
+    /**
+     * Generate the correct input name based on bundle context
+     * @param optionId - The option ID
+     * @returns The formatted input name
+     */
+    generateInputName(optionId) {
+        const contextData = this.bundleContext;
+        if (contextData) {
+            try {
+                // Handle both string and object types
+                const context = typeof contextData === 'string'
+                    ? JSON.parse(contextData)
+                    : contextData;
+                const { sectionId, productId } = context;
+                return `bundle[${sectionId}][${productId}][options][${optionId}]`;
+            }
+            catch (e) {
+                return `options[${optionId}]`;
+            }
+        }
+        return `options[${optionId}]`;
     }
     fillSelectedOptions() {
         this.selectedOptions = this.optionsData.reduce((acc, opt) => {
@@ -511,7 +575,7 @@ const SallaProductOptions = class {
             this.getExpireDonationMessage(option));
     }
     fileUploader(option, additions = null) {
-        return h("salla-file-upload", { ...(additions || {}), "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, required: !option.visibility_condition && option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }, h("div", { class: "s-product-options-filepond-placeholder" }, h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept?.split(',').every(type => type.includes('image'))
+        return h("salla-file-upload", { ...(additions || {}), "payload-name": "file", value: option.value, "instant-upload": true, name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }, h("div", { class: "s-product-options-filepond-placeholder" }, h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept?.split(',').every(type => type.includes('image'))
                 ? CameraIcon
                 : FileIcon }), h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')), h("span", { class: "filepond--label-action" }, salla.lang.get('common.uploader.browse'))));
     }
@@ -529,7 +593,7 @@ const SallaProductOptions = class {
     // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption
     //@ts-ignore
     numberOption(option) {
-        return h("input", { type: "text", value: option.value, class: "s-form-control", required: !option.visibility_condition && option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
+        return h("input", { type: "text", value: option.value, class: "s-form-control", required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), placeholder: option.placeholder, onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
     }
     //@ts-ignore
     splitterOption() {
@@ -537,36 +601,36 @@ const SallaProductOptions = class {
     }
     //@ts-ignore
     textOption(option) {
-        return h("div", { class: "s-product-options-text" }, h("input", { type: "text", value: option.value, maxLength: option?.length, class: 's-form-control', required: !option.visibility_condition && option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }));
+        return h("div", { class: "s-product-options-text" }, h("input", { type: "text", value: option.value, maxLength: option?.length, class: 's-form-control', required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }));
     }
     //@ts-ignore
     textareaOption(option) {
         //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great
-        return h("div", { class: "s-product-options-textarea" }, h("div", { class: "mt-1" }, h("textarea", { rows: 4, value: option.value, maxLength: option?.length, class: "s-form-control", required: !option.visibility_condition && option.required, id: `options[${option.id}]`, name: `options[${option.id}]`, placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) })));
+        return h("div", { class: "s-product-options-textarea" }, h("div", { class: "mt-1" }, h("textarea", { rows: 4, value: option.value, maxLength: option?.length, class: "s-form-control", required: !option.visibility_condition && option.required, id: this.generateUniqueKey(option.id.toString()), name: this.generateInputName(option.id), placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) })));
     }
     //@ts-ignore
     mapOption(option) {
-        return h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: `options[${option.id}]`, searchable: true, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
+        return h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: this.generateInputName(option.id), searchable: true, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
     }
     colorPickerOption(option) {
-        return h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: `options[${option.id}]`, required: !option.visibility_condition && option.required, onInvalidInput: (e) => this.invalidHandler(e, option), color: option.value });
+        return h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, onInvalidInput: (e) => this.invalidHandler(e, option), color: option.value });
     }
     /**
      * ============= Date Time options =============
      */
     //@ts-ignore
     timeOption(option) {
-        return h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, name: `options[${option.id}]`, class: "s-product-options-time-element", onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) });
+        return h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), class: "s-product-options-time-element", onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) });
     }
     //@ts-ignore
     dateOption(option) {
         //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
-        return h("div", { class: "s-product-options-date-element" }, h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, minDate: new Date(), name: `options[${option.id}]`, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+        return h("div", { class: "s-product-options-date-element" }, h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, minDate: new Date(), name: this.generateInputName(option.id), onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
     }
     //@ts-ignore
     datetimeOption(option) {
         //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
-        return h("div", { class: "s-product-options-datetime-element" }, h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: !option.visibility_condition && option.required, name: `options[${option.id}]`, maxDate: option.to_date_time, minDate: option.from_date_time, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+        return h("div", { class: "s-product-options-datetime-element" }, h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), maxDate: option.to_date_time, minDate: option.from_date_time, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
     }
     /**
      * ============= Advanced options =============
@@ -628,7 +692,8 @@ const SallaProductOptions = class {
      * @returns HTMLElement[] - An array of labeled input elements.
      */
     renderOptionDetails(type, option, isRequired, buttonStyle = false) {
-        const name = type === 'radio' ? `options[${option.id}]` : `options[${option.id}][]`;
+        const baseName = this.generateInputName(option.id);
+        const name = type === 'radio' ? baseName : `${baseName}[]`;
         return option?.details.map((detail) => this.renderInput(type, detail, option, isRequired, name, buttonStyle));
     }
     /**
@@ -637,7 +702,7 @@ const SallaProductOptions = class {
      * @returns HTMLElement - A select dropdown element with all option details.
      */
     renderSelect(option) {
-        return (h("div", null, h("select", { name: `options[${option.id}]`, required: !option.visibility_condition && option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }, h("option", { value: "" }, option.placeholder), option?.details.map((detail) => (h("option", { key: detail.id, value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail)))))));
+        return (h("div", null, h("select", { name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }, h("option", { value: "" }, option.placeholder), option?.details.map((detail) => (h("option", { key: detail.id, value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail)))))));
     }
     /**
      * Renders a grid-based layout for option inputs (radio or checkbox).
@@ -678,14 +743,24 @@ const SallaProductOptions = class {
                     required: option.required,
                 } }, this.renderOptionDetails('checkbox', option, isRequired)));
     }
+    /**
+     * Renders a radio option selection (used for bundle products).
+     * This is essentially the same as single option but with explicit radio handling.
+     * @param option - The parent option object.
+     * @returns HTMLElement - The rendered radio option element.
+     */
+    radioOption(option) {
+        // Radio options behave the same as single options
+        return this.singleOption(option);
+    }
     //@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: `options[${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) }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`) }, 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) => (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) }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`) }, 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: `options[${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: IconVerified, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(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: IconVerified, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
                 [
                     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" }) : '',
@@ -697,17 +772,109 @@ const SallaProductOptions = class {
     digitalCardValuesOption(option) {
         return h("div", { class: "s-product-options-digital-card-wrapper" }, this.availableDigitalCardValues.length > 0 ? this.availableDigitalCardValues.map((detail) => {
             const id = String(detail.id);
-            return h("label", { htmlFor: this.generateUniqueKey(id.toString()), key: id, class: "s-product-options-digital-card-option" }, h("input", { type: "radio", "data-code-value": true, class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: `options[${option.id}]`, id: this.generateUniqueKey(id.toString()), required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), ...(!this.ignoreDefaultCardValue ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("span", null, detail.name, " ", salla.config?.currency()?.symbol));
+            return h("label", { htmlFor: this.generateUniqueKey(id.toString()), key: id, class: "s-product-options-digital-card-option" }, h("input", { type: "radio", "data-code-value": true, class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), id: this.generateUniqueKey(id.toString()), required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), ...(!this.ignoreDefaultCardValue ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("span", null, detail.name, " ", salla.config?.currency()?.symbol));
         })
             : h("div", { class: "s-product-options-digital-card-out-of-stock" }));
     }
     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: `options[${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` }), h("span", null, detail.name));
+            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` }), h("span", null, detail.name));
         }));
     }
-    get host() { return getElement(this); }
-};
-SallaProductOptions.style = sallaProductOptionsCss;
+    get host() { return this; }
+    static get style() { return sallaProductOptionsCss; }
+}, [0, "salla-product-options", {
+        "productId": [8, "product-id"],
+        "options": [1],
+        "hideOutLabel": [1, "hide-out-label"],
+        "uniqueKey": [1, "unique-key"],
+        "bundleContext": [1, "bundle-context"],
+        "config": [1],
+        "optionsData": [32],
+        "outOfStockText": [32],
+        "donationAmount": [32],
+        "selectDonationAmount": [32],
+        "selectAmount": [32],
+        "isCustomDonation": [32],
+        "selectedOptions": [32],
+        "canDisabled": [32],
+        "selectedSkus": [32],
+        "selectedOutSkus": [32],
+        "disableCardValue": [32],
+        "availableDigitalCardValues": [32],
+        "userInitiatedValidation": [32],
+        "setOptionsData": [64],
+        "getSelectedOptionsData": [64],
+        "reportValidity": [64],
+        "hasOutOfStockOption": [64],
+        "getSelectedOptions": [64],
+        "getOption": [64],
+        "enableUserInitiatedValidation": [64],
+        "validateAndScroll": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-product-options", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaProductOptions);
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { SallaProductOptions as salla_product_options };
+export { SallaProductOptions as S, defineCustomElement as d };

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

@@ -59,11 +59,11 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
         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: 'e92e648a22d686acde12a13c08335ed3a601e5d0', 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: '6131b840918392e03dc9011b7c23e81cb4b9ff36', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '7d7a998886ae6db08057825eae7b2835f73a8ae4', slot: "loading" }, h("div", { key: '518a9e510085c13c9361f656eb26dcec8ae8455d', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '65a92119d1b5f9462dd826a838ee6042075d406a', height: '15px', width: '25%' }), h("div", { key: '3cb1034e05756d34d0e9e41a2d4e8f4bd6d925bd', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'c66e517e8186c83c5bc847a4df87fab31c7f7dbb', height: '40px' }), h("salla-skeleton", { key: '263ae7fde377e75a56d8aa37e814882ac0e9e772', height: '40px' }), h("salla-skeleton", { key: '9f226f26ab6eb1b36cde6cbaedb669d4c034f0a9', height: '40px' }), h("salla-skeleton", { key: 'b5ade5bbaa60f330944c2e868bb9032ef3697bed', height: '40px' })), h("div", { key: 'c0f1d73376efcce4b32fc268c297755c2fc4124e', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: 'd3bc5ffef7ca7b2b46b3a320706fa9f82caf9eed', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f4a9872abfd909796239032757ee0f24f17fb079', height: '10px', width: '75%' }), h("salla-skeleton", { key: '92f22b9609c9a828c88035edf4b5e765fb5040de', height: '10px', width: '50%' }), h("salla-skeleton", { key: '58c7dc5c2f70ed6454b0f41c21bdf245fe412be3', height: '10px', width: '75%' }), h("salla-skeleton", { key: 'b6a6d2585848f125533614c7bbd741bf30121cc3', height: '10px', width: '100%' }), h("salla-skeleton", { key: '271c7052e3b23d4876c65fa5427ace8b47fd26d9', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'b0618e943218f639eb0be368098f8903fecd939f', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'b4e86e51443897ba56a594be2e92c2dbb53f9a9b', height: '10px', width: '45%' }), h("salla-skeleton", { key: '79e8eb1ed011e9fa22b569eda7be7e50135bef7e', height: '10px', width: '30%' })))), h("slot", { key: '62425e2436d2fee89c66e4b3ea66752bbc407616', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: 'f80606d8b6e1e950c87209ca4e195c92f70dc341', 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: '245688c24b70279566b0f7c51c7bf924ca5196c0', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '9dc9b4aa8dea0599dbc78f5821e36bc4c600c6aa', slot: "loading" }, h("div", { key: 'fca84d9c2c5fa20ac446270c1c68c4ccda16dd77', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '0f036371c9b42314beb4e2c1f308a99e2b068ab8', height: '15px', width: '25%' }), h("div", { key: 'a9059b864fddf26b6e15869cab013e793966907e', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '34e188b1ff7e0b5e24df84d1b14df2b2255fc9eb', height: '40px' }), h("salla-skeleton", { key: '38653491fd73cf4d66cb87658b8121f88130e52e', height: '40px' }), h("salla-skeleton", { key: 'a8c3b3cc039fbbb8796c611f4485d889c94e632a', height: '40px' }), h("salla-skeleton", { key: '2de2d63a1a56a58f7f1bef92c46843683528ee1a', height: '40px' })), h("div", { key: 'cf0b08cb85830fcec4dd82140c89b6d009e1bc74', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '402ed4292bb79e839316440ed985b1caed102602', height: '15px', width: '25%' }), h("salla-skeleton", { key: '88f0019d79ea72ef7748a5c04b7a8364c1160b92', height: '10px', width: '75%' }), h("salla-skeleton", { key: '10d7879c306d7185092c9e9aa0d407d2bb57519e', height: '10px', width: '50%' }), h("salla-skeleton", { key: '7b2d00c4c8000083b79d93466ed07828d61b6fbd', height: '10px', width: '75%' }), h("salla-skeleton", { key: '5d33b9848d9bccf34bb5f4a93ad99889fe1ee69f', height: '10px', width: '100%' }), h("salla-skeleton", { key: '6e49c074a8611a819814d17829466b983a419196', height: '10px', width: '25%' }), h("salla-skeleton", { key: '0fb70ed844efeda0d3c2ba348e14d1469a7b279b', height: '10px', width: '60%' }), h("salla-skeleton", { key: '5e55cb90aba76662377efccfef4a84fe0f64c341', height: '10px', width: '45%' }), h("salla-skeleton", { key: '058b96e3db12454ddfced543d6ecbdf0c38ac3dd', height: '10px', width: '30%' })))), h("slot", { key: 'e9eef25bce60cbb1dd48b3d8bc1ebda2305acda0', 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: '6c939d70100e2353436e962d9bd5a9c5f59788e5', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: '6b8bebc72d4a7baea765b1e5a6d4a81862206f94', name: "footer" })));
     }
     get host() { return this; }
     static get style() { return sallaProductSizeGuideCss; }

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

@@ -84,7 +84,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuantit
         return this.host;
     }
     render() {
-        return (h(Host, { key: '3d641a0813512c3ff22e32275dfd709df934e1f1', class: "s-quantity-input" }, h("div", { key: '2682491a551bcff31f07904566f3a2331d3c0240', class: "s-quantity-input-container" }, h("button", { key: '3b5b2551624628dfb98a41a4a1984749290b9c3c', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: 'a1263ebcd7fa9fdb5b347e6eef3fe339bae6581a', name: "increment-button" })), h("input", { key: '7e91e2e4d26ee97bca0435351d68f4f456245429', class: "s-quantity-input-input", ...this.getInputAttributes(), ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity }), h("button", { key: '247d8b99d613ef6117f40685f5f0b899cde19102', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: 'f59b44ec67c071f36a4885728d5095a2a8e01d85', name: "decrement-button" })))));
+        return (h(Host, { key: '5627ef48310739dc0a112c9c214f78bae9b71bca', class: "s-quantity-input" }, h("div", { key: '50040d9cd5bbf38d06d6a13f17a1b4d756f5285d', class: "s-quantity-input-container" }, h("button", { key: '334c465e2ac46c3b88e3f89ae3b0754dc3741f69', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: '9f41e975e7c47f4cbc3e97dd3f8591b633d9da29', name: "increment-button" })), h("input", { key: '6f5bfdeb1804cf98a13f12b966e5fa6582e39557', class: "s-quantity-input-input", ...this.getInputAttributes(), ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity }), h("button", { key: '583f5edb96bc5a368851eadb5940d79b7afed3be', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: '8726d4d616dd6f4fd1348312d3a9c24bf9268146', name: "decrement-button" })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/salla-quick-buy2.js

@@ -896,7 +896,7 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
         });
     }
     render() {
-        return h(Host, { key: 'd414f6376a893152dd956ab05e8d6149dfa02923' }, this.quickBuyButton());
+        return h(Host, { key: '46c3a8b699f4390166d027a0eb2d34451a1dd6f1' }, this.quickBuyButton());
     }
     quickBuyButton() {
         return h("apple-pay-button", { locale: salla.config.get('user.language_code'), onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });

package/dist/components/salla-review-card2.js

@@ -172,7 +172,7 @@ const SallaReviewCard = /*@__PURE__*/ proxyCustomElement(class SallaReviewCard e
         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: '22c0b4997b5eaa3eee23c642aa8fc778cff7fd22', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: 'db1391a8d4ddad808f54551b39d9bfeb55466225', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '4c6e9af60e480f5c9f840e7ba95f7c59ba12e172', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
+        return h("div", { key: 'ff1711d73446e0b98e8e0888d1491687f942ff68', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '490953d92b6e4437f3d4ffbbabc45babf2289224', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '8960b58c5eab8a89834d5d73f6d941d03898224a', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
     }
     get el() { return this; }
     static get style() { return sallaReviewCardCss; }

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

@@ -685,7 +685,7 @@ const SallaReviewsPage$1 = /*@__PURE__*/ proxyCustomElement(class SallaReviewsPa
         return options.map(option => (h("option", { key: option.value, value: option.value, selected: option.value === this.sort }, option.label)));
     }
     render() {
-        return (h("host", { key: 'f3b06307322a56ad320374a50e13161be4e7cc8a' }, h("div", { key: '3dcabdae4ee87de5c62873f327657991a56bc0e1', class: "s-reviews-page-header-wrapper" }, h("h2", { key: '61bca34f24c52440fd8f736f9a6ab2b37be65c34', class: "s-reviews-page-title" }, this.langTitlesReviews, h("span", { key: 'c29228eaa51e9c202c6031e5f69b95905aa5485a', class: "s-reviews-page-count" }, "(", this.langRatingReviews, ")")), h("div", { key: '81f964be39231e21cd7c994e7e241e755af54c86', class: "s-reviews-page-filter-wrapper" }, h("label", { key: 'd408952ef5ffba3bedd5e01b5c6edec1aeb34f28', class: "s-reviews-page-filter-label", htmlFor: "testimonials-filter" }, this.langSorting), h("select", { key: '5138fdf478aed6fea544dd1adf4d32f715f89532', 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: '31750df2834dcfce2f87fe3f18e10e7337aa512d' }, h("div", { key: '5757fa951f0ea25b9bc42f67d06b59f8175a73d8', class: "s-reviews-page-header-wrapper" }, h("h2", { key: 'd8db2aaae4061163e8f719512ae7dd76330dfcf7', class: "s-reviews-page-title" }, this.langTitlesReviews, h("span", { key: '057ffec21309286aca0e5a4bba4e41a9322f775f', class: "s-reviews-page-count" }, "(", this.langRatingReviews, ")")), h("div", { key: 'a85ed89e04fe8004d86927689df954d995e4ad84', class: "s-reviews-page-filter-wrapper" }, h("label", { key: '7eff22ea70a463ea95655c8accf7113cf1a35fad', class: "s-reviews-page-filter-label", htmlFor: "testimonials-filter" }, this.langSorting), h("select", { key: '8895a03ea1c404895386b6d73c21fe35fc4dc811', 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/components/salla-reviews.js

@@ -98,7 +98,7 @@ const SallaReviews$1 = /*@__PURE__*/ proxyCustomElement(class SallaReviews exten
         });
     }
     render() {
-        return (h("div", { key: 'deed3cdbac9556908c110d96935d6478996caf99', class: "s-reviews-container" }, h("div", { key: '3646aa3266c29d1f371cf3acedaedc726f7e6bac', class: "s-reviews-header-wrapper" }, h("h1", { key: '0a47642eea4e162173374f0a1340fd3068165d30', 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: '71b0e1f246172b5ea042f7a4dcdc351190a3de3c', 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: '50b9ac94feca79ed29d85bfcf4808b0849e4f933', 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: '636e5db1fe5a6441a3a779c26e383fec4cba4908', class: "s-reviews-container" }, h("div", { key: '5b2a8c72c8544cf152f811c67c23ed8e07a9af58', class: "s-reviews-header-wrapper" }, h("h1", { key: '786e8cfb33ae5b602de1f889d40307abe3dce582', 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: 'f950c968c0b076b365b450a13ffabad4e3e9a4da', 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: 'ca057f133699b406673b2e3dc476c14dc0dd9f79', 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 style() { return sallaReviewsCss; }
 }, [0, "salla-reviews", {

package/dist/components/salla-scopes.js

@@ -165,7 +165,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class SallaScopees extends
         return salla.onReady();
     }
     render() {
-        return (h(Host, { key: '23748ef5243efc8a5ff9070043ddc507fe817fad' }, h("salla-modal", { key: '3ccb5b554df266e49d4f774e26dd7306dce9b249', 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: '42ac0a93262d5a6bdd602b97fa636b70c2269635' }, h("salla-modal", { key: '632eca8b8faa74fd990bc5c024befa11d461568f', 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/components/salla-search.js

@@ -126,12 +126,12 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
         this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
     }
     render() {
-        const searchContent = h("div", { key: 'ed22d66e43268e8024639db4b3bdfdc78663c162', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("div", { key: '3e6ed06c2a056d6fa6e5f18d03225a2a6eb3bd91', class: "s-search-input-wrapper" }, h("span", { key: '50fe2fd917b7f53d97c4178de03a9b460de53e50', class: "s-search-icon-wrap" }, h("span", { key: 'df7ed0c94180ee796f1634608f0e6984ccbac15c', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '73f564326eec5d12631b7855d853dd229fa00797', 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: 'c8cdfa1f5d102392144389f81639d6c92f8caea5', 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
+        const searchContent = h("div", { key: 'fe1ad73a7d7cdc9bfacb43e5c8f1b2d2c5983f9e', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("div", { key: 'df9c5af32950d9fc1ec30f46054630244fd2e2c1', class: "s-search-input-wrapper" }, h("span", { key: 'f4c1788bcd50992364e52388e425cc19c0906ec5', class: "s-search-icon-wrap" }, h("span", { key: 'a46da8c6f02e4970c903dc73d3d4a4e107a543f4', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: 'af5fff2641e6416f06c51c01e19e007c6ff43e32', 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: 'e742cf41fdf23b37a46324df3bac24abc2c9bf03', 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
                 .replace(/\{name\}/g, product.name)
                 .replace(/\{price\}/g, product.price ? salla.money(product.price) : '')
                 .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: '7daf87c934b2fce3555755b1d326e3486e6a2bc2', ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options'))));
+                .replace(/\{image\}/g, product.image.url) })), h("p", { key: 'bea643f12fa014f6df1dee41a1a8ee8c41022458', ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options'))));
         return (this.inline ?
             h("div", { class: "s-search-modal" }, searchContent)
             :

package/dist/components/salla-skeleton2.js

@@ -27,7 +27,7 @@ const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class SallaSkeleton exten
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (h(Host, { key: 'f57ae59c20db39c4c9c47f777d229768071e2553', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '0214a933f54acfd816f3cf1c510374c918469c5e', class: classes }, "\u00A0")));
+        return (h(Host, { key: 'df1344797b9cbe42331625a2a1f432e07d6bd9ef', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: 'b56611551bb2b2bcb02b46240e30f88e2ea7aea5', class: classes }, "\u00A0")));
     }
     static get style() { return sallaSkeletonCss; }
 }, [0, "salla-skeleton", {

package/dist/components/salla-slider2.js

@@ -523,7 +523,7 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
         classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
         classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
         classes += this.gridThumbs ? ' s-slider-with-grid-thumbs ' : '';
-        return (h(Host, { key: '4a67b5352343cab0fbb561dcca27099788f77a84', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+        return (h(Host, { key: '85e91dde02b7f32655d0ac10e5abb7f9e49d7157', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
             h("div", { class: "s-slider-block__title" }, this.blockTitle ?
                 h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
                 : '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
@@ -531,7 +531,7 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
                 : '', this.showControls ?
                 h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
                 : ''))
-            : '', h("div", { key: '11b3fa33b29dea07b0247e5b7766456cbf117d05', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: 'c68c8acdbe1d303646ccc073d5b91e462d74e26c' }), h("div", { key: '54af02e80b0bfc4a79b0ab73ae8a9958c7b86aad', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '1accf846e01f53d5e75de3c826439694ada42654', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
+            : '', h("div", { key: '8842ac56011138fd8456257bff568919c9ce8867', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '17fb40e69031d4c329df9d00fb75443d0ff9ba0c' }), h("div", { key: 'b8f42b180a271b4a873d99024251705e9d76adde', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '82ef4871810000d0b65a24518c6613a6484a2ee9', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
             h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
             : null))
             : null));

package/dist/components/salla-social-share.js

@@ -147,7 +147,7 @@ const SallaSocialShare$1 = /*@__PURE__*/ proxyCustomElement(class SallaSocialSha
         window.a2a?.init('page');
     }
     render() {
-        return (h("div", { key: 'f703a0c531e8f32ebe62eeb256e02aec9786af47', class: "s-social-share-wrapper" }, h("slot", { key: '436168a40db719e5420b4b8bf031b41e1e91cebd', name: 'widget' }, h("salla-button", { key: '989e61a4921dc71c5d53a67bad18dc97861033cb', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '43b7e5a81fba6d333cc2eed13c3b33b43c368ede', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'cfc2002270e46848897820493e8968296b4d5c73', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
+        return (h("div", { key: 'e104cbf1051f36e7d1055a96b8d42e0f38b70f21', class: "s-social-share-wrapper" }, h("slot", { key: '8519676943448a6b87b1b3df8dd74b78de72aeb9', name: 'widget' }, h("salla-button", { key: '0be8b0bf52f046f6818b530430ce1e636fcd36c2', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: 'e637247fec7fd1a0235a410ca3e28fb4e7eff7f3', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: '8a378bac1865b26744ad31e6bf7218174b24bdd6', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
             return (h("li", null, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
                 if (icon.name === platform) {
                     return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });

package/dist/components/salla-social.js

@@ -56,7 +56,7 @@ const SallaSocial$1 = /*@__PURE__*/ proxyCustomElement(class SallaSocial extends
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: '499e2f4c68034191143f53bb4d4581e85e4066b0' }, h("ul", { key: '17053219a16087c96e1d9e5c15d1478729f43954', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (h(Host, { key: '385311677990c9c48c682c399a742c5544dcaf43' }, h("ul", { key: '0aa7264032d08d165fa8e701324f4928539596dd', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));

package/dist/components/salla-tab-content2.js

@@ -32,7 +32,7 @@ const SallaTabContent = /*@__PURE__*/ proxyCustomElement(class SallaTabContent e
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: '3ee7e5310346f97ec784201a91b361e5a3e4859e', class: classes }, h("slot", { key: '17cc2a1a57a1f810a0e79f20b54219794261531d' })));
+        return (h("div", { key: '571a30d15d890516a1382ed25239df46de519a12', class: classes }, h("slot", { key: '4ceb77d0d6fb15f28e1bb51ec842b7a658ccc160' })));
     }
     static get style() { return sallaTabContentCss; }
 }, [4, "salla-tab-content", {

package/dist/components/salla-tab-header2.js

@@ -58,7 +58,7 @@ const SallaTabHeader = /*@__PURE__*/ proxyCustomElement(class SallaTabHeader ext
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: 'bbb66a75e32a9c74faadc608312e71dc6a4cf883', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '1ad07528ca5cfe1d884f6d66b998f03d604b58be' })),
+            h("div", { key: '01eec3d799fd24f75ee29e65447e166057aed846', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '200d5e89d7bf9cf232c997fa14c0384be65001c1' })),
         ];
     }
     static get style() { return sallaTabHeaderCss; }

package/dist/components/salla-tabs2.js

@@ -51,7 +51,7 @@ const SallaTabs = /*@__PURE__*/ proxyCustomElement(class SallaTabs extends HTMLE
     }
     render() {
         return [
-            h("div", { key: '8dc8b3cb7504674924893dee116762971c7d5067', class: "s-tabs" }, h("div", { key: 'd0fd3fcb154190f5312a0c9bad2c35ac29a43e68', class: "s-tabs-header" }, h("slot", { key: '3dc2441bfa5e6e28aa75aeafd2adf8715e1a365b', name: "header" })), h("div", { key: '4ca8ed7f4a79067ca93ca007c7a186af81895df4', class: "s-tabs-content-wrapper" }, h("slot", { key: '4420b1d34b518aec52081d7548f0f08a771723ae', name: "content" })))
+            h("div", { key: '11dca6efd64c797274f2b71aa10426fbdf08d351', class: "s-tabs" }, h("div", { key: '9afd9c6a09728218cddc084c77f417d0249bdfd9', class: "s-tabs-header" }, h("slot", { key: 'eef1f2faed6b440c592e51f6d1205e140584b070', name: "header" })), h("div", { key: 'adb5bd9c1af2ba78c173eb3fbd5c73c0513ccca5', class: "s-tabs-content-wrapper" }, h("slot", { key: 'db9eaa79d095ef71fb1df1ab96ddbb925ec59b40', name: "content" })))
         ];
     }
     get host() { return this; }