@salla.sa/twilight-components 2.14.272 → 2.14.274

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

@@ -120,9 +120,21 @@ export class SallaProductOptions {
     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;
@@ -298,6 +310,10 @@ export class SallaProductOptions {
         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);
         }
@@ -409,10 +425,47 @@ export class SallaProductOptions {
         }
         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) => {
@@ -472,7 +525,7 @@ export class SallaProductOptions {
             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'))));
     }
@@ -490,7 +543,7 @@ export class SallaProductOptions {
     // 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() {
@@ -498,36 +551,36 @@ export class SallaProductOptions {
     }
     //@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), onInput: 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), onInput: (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 =============
@@ -589,7 +642,8 @@ export class SallaProductOptions {
      * @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));
     }
     /**
@@ -598,7 +652,7 @@ export class SallaProductOptions {
      * @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).
@@ -639,14 +693,24 @@ export class SallaProductOptions {
                     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: CheckCircleIcon, 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: CheckCircleIcon, 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" }) : '',
@@ -658,13 +722,13 @@ export class SallaProductOptions {
     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));
         }));
     }
     static get is() { return "salla-product-options"; }
@@ -681,12 +745,12 @@ export class SallaProductOptions {
     static get properties() {
         return {
             "productId": {
-                "type": "number",
+                "type": "any",
                 "attribute": "product-id",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | string",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -757,6 +821,25 @@ export class SallaProductOptions {
                 "setter": false,
                 "reflect": false
             },
+            "bundleContext": {
+                "type": "string",
+                "attribute": "bundle-context",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | object",
+                    "resolved": "object | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bundle context information for bundle products.\nWhen provided, the component will use bundle naming convention for form inputs.\nExpected format: { sectionId: string|number, sectionIndex: number, productId: string|number }\nCan be passed as a string (JSON) or object"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "config": {
                 "type": "string",
                 "attribute": "config",

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: '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" })));
     }
     static get is() { return "salla-product-size-guide"; }
     static get originalStyleUrls() {

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

@@ -80,7 +80,7 @@ export class SallaQuantityInput {
         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" })))));
     }
     static get is() { return "salla-quantity-input"; }
     static get originalStyleUrls() {

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

@@ -184,7 +184,7 @@ export class SallaQuickBuy {
         });
     }
     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/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: '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()));
     }
     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: '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 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: '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/collection/components/salla-scopes/salla-scopes.js

@@ -146,7 +146,7 @@ export class SallaScopees {
         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/collection/components/salla-search/salla-search.js

@@ -121,12 +121,12 @@ export class SallaSearch {
         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/collection/components/salla-skeleton/salla-skeleton.js

@@ -22,7 +22,7 @@ export class SallaSkeleton {
             '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 is() { return "salla-skeleton"; }
     static get originalStyleUrls() {

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

@@ -507,7 +507,7 @@ export class SallaSlider {
         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 ?
@@ -515,7 +515,7 @@ export class SallaSlider {
                 : '', 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/collection/components/salla-social/salla-social.js

@@ -31,7 +31,7 @@ export class SallaSocial {
     }
     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/collection/components/salla-social-share/salla-social-share.js

@@ -119,7 +119,7 @@ export class SallaSocialShare {
         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/collection/components/salla-tabs/salla-tab-content.js

@@ -30,7 +30,7 @@ export class SallaTabContent {
             '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 is() { return "salla-tab-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-tabs/salla-tab-header.js

@@ -52,7 +52,7 @@ export class SallaTabHeader {
             '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 is() { return "salla-tab-header"; }

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

@@ -50,7 +50,7 @@ export class SallaTabs {
     }
     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" })))
         ];
     }
     static get is() { return "salla-tabs"; }

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

@@ -123,7 +123,7 @@ export class SallaTelInput {
         }
     }
     render() {
-        return (h(Host, { key: 'c8a5c0fd6702fe7968d26f04b3beb7c1a70fdcc9', class: "s-tel-input" }, h("input", { key: 'f6b7999ae89730a279b4633b2d58b0233c334529', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '2b11eea555721ef80f221e1cdb515a39f375e85d', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '34e00270110cc7d3119f3804ee1251204ebebf76', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '8dae2336c70ca8da12846544c99eff5150ee3197', class: "s-tel-input" }, h("input", { key: '6512ba297a7f1e85f3e6b1a6ba7634c16e57116c', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '92def9152e10e06c390e8333048095dcc7613867', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '0a77d8be70d5f9a1e8ac75e444537f0f45fa76d0', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initTelInput();

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

@@ -22,7 +22,7 @@ export class SallaTooltip {
         this.targetElement = document.getElementById(this.targetId);
     }
     render() {
-        return (h("div", { key: 'e2454dd8d3533e19b93b796ca427d825c6576ff0', class: "s-tooltip-container" }, h("slot", { key: '08ae103831491e760b47c848c161f909341c68ee' }), this.show && h("div", { key: 'bab2b3214ff45377b5d971f13f32c691ec090324', class: "s-tooltip-item" }, this.text)));
+        return (h("div", { key: '6ecf6b1fc6569ac532656d7222563527c40211fc', class: "s-tooltip-container" }, h("slot", { key: 'c15ba1a0feeca5c7aeb1ef96e1f132b39ef91196' }), this.show && h("div", { key: '49a4d1f4767234eb1ec35c653fc2b4ae6b1e9e8d', class: "s-tooltip-item" }, this.text)));
     }
     static get is() { return "salla-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-user-settings/salla-user-settings.js

@@ -56,7 +56,7 @@ export class SallaUserSettings {
         await salla.profile.delete().finally(() => this.confirmationModal.close());
     }
     render() {
-        return (h(Host, { key: 'e2a43eab43c09743d9a09150d7a64c482efd67db', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '45465d04e01b989d6f41b9685024049f11d2fd8a', class: "s-user-settings-section" }, h("salla-list-tile", { key: '2d83d6a6596ca9762e03a4dd2ca828f1da7f9cfe' }, h("div", { key: 'ca2d8bad47b2cf27db0dba50f634f87374e9c4d0', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '64287554ed3f04a33f4723559bd16e23356062b2', innerHTML: UserCancel })), h("div", { key: '27011d331cd1193ffc395f61cafacf7afe6cbb37', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'b2b2e1742fb28936f5d43ef2159fd53379979416', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'd507501fa28045aa1c7f1b45f1e8492ab11eac41', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '489444d6e9b8000786d652a653924d5487c70354', class: "s-toggle" }, h("input", { key: '6d975b0f59ef4bfce0387ab4bbeaac1d9199df2b', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '99565e81c6b0110b0285758ff965dadb1343141d', class: "s-toggle-switcher" }))))), h("div", { key: '95c0375df02bfcf7e06cd8c82d9726c183f3cef2', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'cdf765d2e4e5f435dc686ac41d3298f5f5d3f094' }, h("div", { key: '2c9350a1133f1ceb2e4798dc76a2600fc57b51a2', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'ac1a7244eebcf93b288cd8956c404e7e8206917a', innerHTML: Bullhorn })), h("div", { key: '033ad646a6c029932c9379e48aa03c11c4cc8ea7', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '6d6a1ae66fe36fd2e61b2b5710c1c1a5d785ed7a', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'bcf12b68bd7496987e49e84d1463a1f4989c36f4', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'ab49963ae12febd07aafbc5fa33c9cc60200401c', class: "s-toggle" }, h("input", { key: '609ab1d90393a3a6a373b839b04872fd19d9af13', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'fc1f9253bb35bd381cb679b61455f114082a66dc', class: "s-toggle-switcher" }))))), h("div", { key: '61874f78bca3a4f54b4ae800542d9ee8a1afb4df', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '9f3b044f7774f214352eca4785d45eb84a6ee925' }, h("div", { key: '07e1e08c91bad01e8bd1e5b3d8ed5bbf27a6e536', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '918cf7358bc7c0d557b2d2d122335c67c0e7184f', innerHTML: UserOff })), h("div", { key: '0bf7e274d07bec1362f2d1a7ed238d15a6df64da', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: 'c044d814f1eab0b9bfe6afd1d9da7e672ad174e9', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '3ba1645cd3cf24055ff300caaa028c03cdbbf014', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'e4af99b286ba09b9ad7a9e65109dd5ebc72cd5ec', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'bb3617bb5fffb7496e4b065ff7d9e3ecf081d39a', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '8c4a70b37dd3f98247a05a6fa2e12bbbda4208f5', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '58e944af7537c91682b17f8dfa6e698ed8b4d21b', class: "s-user-settings-confirmation" }, h("div", { key: 'f1cb7420866f3c38c6484313636d71f2207942d0', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '8e712ea0c6211cba24a6a32c4e9871b37ddfa30e', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '319bb44f97b4ad48a82a94973e470819624985cf', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'bc127d4956ab62b24b0c79e672375a2c2274f351', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+        return (h(Host, { key: '85b2fe2739f6ac3c55939d3cb9c87fc404413e7f', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: 'e46be8b9cb4898c9b676ee67f0750bb654bda953', class: "s-user-settings-section" }, h("salla-list-tile", { key: '48f81d5a9b511c2a8baabab2aab6ad3dcfb98370' }, h("div", { key: '9009c4d612aea7e7a6834b90f38d03d8c95bcc84', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '03f209e6e1e1adbdb130f9b80aed30f0618dd58c', innerHTML: UserCancel })), h("div", { key: 'fb02ca2387806135ac3f074f0a9f30ce4bb325ca', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '1ddbd1144a59745bf26f4650eb5d050a34d42e8f', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '0ff6163a407a53ff100c8d3235212c167dbb006a', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '03b817a0bea880c9a2e056d4d8f0fb737dc0e5da', class: "s-toggle" }, h("input", { key: 'fcb56427c6d1ae503abdc768358e9ecfa9139dac', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'ff312279ede50b86446d1305217053942d05a603', class: "s-toggle-switcher" }))))), h("div", { key: '08cf0045a6f96ae7046d9a7c640e53a5b2cec7dc', class: "s-user-settings-section" }, h("salla-list-tile", { key: '1ccbcd93cf4cef91693603b5b05dbc4f3b85dc65' }, h("div", { key: 'bf5270f2d2cae798463ab9516c11321e96c461ff', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '3bc3927296faa253a8b91710049eca3372fb24aa', innerHTML: Bullhorn })), h("div", { key: '60ddca373590545a7fd03498e4ff7306a23b05a9', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '874e81d5e4727160a85bb3381fdfadcd65e774c0', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '6d2aacf7a72c4d25163913eccbb0a3e94595ec75', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'cf58459624592b34083afe61a0afc29dea03864e', class: "s-toggle" }, h("input", { key: 'b854ce4ca8224c8200623aad0dea4c659d89dee1', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '785a5765e36056629a23ca53e48715f91c14ee1f', class: "s-toggle-switcher" }))))), h("div", { key: '9f58724a8d748809b39874efaa861643a78076eb', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '12a69027f2822b6fa1e8fb641278932fc2206335' }, h("div", { key: '679eec74598612167c77443e5f6977991b333fd7', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '0263f8f31ad3e4ca60f2bb4bae910c143f2d36a8', innerHTML: UserOff })), h("div", { key: '6c0c17dfbcbb48ae3882b07b58fb0d1245a28cdb', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '07389c3b86b3d8e821b8b9c33cf43de1ee6527db', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'e98736162d465c0717550eb8231b120acfafc4f6', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'd29c5023b3a35f95c94a06dc87f0e2504b3a6390', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '6f23ca61fe62de261e7d2f616a4d5bf13fba1577', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '89073dfc15d4a1349618180c776968012e843556', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: 'f464a56ab783c4ddd51cc40e4d4dbf2f4ae21be2', class: "s-user-settings-confirmation" }, h("div", { key: 'e9921faaf8718ba51937006360b11d409bde4e05', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '4a71df323e6fa2b86cb85e77af438a51e9c1c5a9', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '156249d17bdcc25b7c586af416001ec60e8b0f5b', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'acbe44c04f77f8ccdcaeb90bfb731de399f88fc7', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
     }
     static get is() { return "salla-user-settings"; }
     static get originalStyleUrls() {