@salla.sa/twilight-components 2.14.373 → 2.14.375

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

@@ -33,6 +33,7 @@ export class SallaGifting {
         this.selectedText = undefined;
         this.hasError = false;
         this.timeZone = null;
+        this.receiverCountryCode = salla.config.get('store.scope.countries')?.[0] || salla.config.get('store.store_country') || 'SA';
         this.hostId = `salla-gifting-${Math.random().toString(36).slice(2, 10)}`;
         /**
          * The form selector to be used to get the form data
@@ -284,18 +285,28 @@ export class SallaGifting {
         this.selectedText = event.target.value;
         this.customTextArea.classList.remove('s-form-has-error');
     }
+    clearError(key) {
+        if (this.errors?.[key]) {
+            const { [key]: _, ...rest } = this.errors;
+            this.errors = rest;
+        }
+    }
     handleSenderName(event) {
         this.senderName = event.target.value;
+        this.clearError('sender_name');
     }
     handleReceiverName(event) {
         this.receiverName = event.target.value;
+        this.clearError('receiver.name');
     }
     handleReceiverCity(event) {
         this.receiverCity = event.target.value;
+        this.clearError('receiver.city_id');
     }
     async handleCountryChange(event) {
         const countryId = event.target.value;
         this.selectedCountryId = countryId;
+        this.clearError('receiver.country');
         // Find the selected country and store its country_code
         const selectedCountry = this.gift?.countries?.find(country => country.id == countryId);
         this.selectedCountryCode = selectedCountry?.country_code;
@@ -340,6 +351,7 @@ export class SallaGifting {
         let phone = event.detail;
         this.receiverMobile = phone.number;
         this.receiverCountryCode = phone.country_code;
+        this.clearError('receiver.mobile');
     }
     handleDateTimePicker(event) {
         this.deliveryDate = event.detail;
@@ -366,12 +378,24 @@ export class SallaGifting {
             this.calendarFormGroup.classList.add('s-form-has-error');
             return;
         }
-        // Validate country selection for physical products
-        if (this.physicalProducts && !this.selectedCountryId) {
-            if (!this.errors) {
-                this.errors = {};
+        // Validate required fields
+        const requiredFields = [
+            { key: 'sender_name', value: this.senderName, label: this.senderNameLabel },
+            { key: 'receiver.name', value: this.receiverName, label: this.receiverNameFieldLabel },
+            { key: 'receiver.mobile', value: this.receiverMobile, label: this.receiverMobileFieldLabel },
+            ...(this.physicalProducts ? [
+                { key: 'receiver.country', value: this.selectedCountryId, label: this.receiverCountryFieldLabel },
+                { key: 'receiver.city_id', value: this.receiverCity, label: this.receiverCityFieldLabel },
+            ] : []),
+        ];
+        const validationErrors = {};
+        requiredFields.forEach(({ key, value, label }) => {
+            if (!value) {
+                validationErrors[key] = salla.lang.get('common.errors.field_required', { attribute: label });
             }
-            this.errors['receiver.country'] = salla.lang.get('common.messages.required_field');
+        });
+        if (Object.keys(validationErrors).length) {
+            this.errors = validationErrors;
             this.setWrapperHeight(2, 150, 0);
             return;
         }
@@ -384,8 +408,9 @@ export class SallaGifting {
             donation_amount: donatingAmount ? donatingAmount : null,
             receiver: {
                 name: this.receiverName,
-                country_code: this.selectedCountryCode && this.physicalProducts ? this.selectedCountryCode : this.receiverCountryCode,
+                mobile_country_code: this.receiverCountryCode,
                 mobile: this.receiverMobile,
+                ...(this.physicalProducts && this.selectedCountryCode ? { country_code: this.selectedCountryCode } : {}),
                 ...(this.receiverCity && this.physicalProducts ? { city_id: this.receiverCity } : {})
             },
             has_apple_pay: salla.helpers.hasApplePay(),
@@ -443,7 +468,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '9574380f66316cf6334d4256e410e39f3817eb59' }, h("salla-list-tile", { key: '651a29e6178f9a1fe47722fe76f4f703ca141c30', class: this.generateClass() }, h("div", { key: '82827e1d3a102ef23256e2eb157149b22f5a998a', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '15e0b153ed7fe76a6ee55f1bde19c8421ceded59' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'f1de0351fd585fb1cfc80692575c1ba8ab6ce54b', slot: "subtitle" }, h("div", { key: 'e2bab5f3573295b4196bc5fa8bb93621d4b0b10c' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '2c51262f9d0915199654cbe47b402933b2088709', slot: "action" }, h("salla-button", { key: 'eb98eb7a087f992db8cabb3d73540b97691c8a8a', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'fad4f36f0dac45b19216790fb895b37d1cc5559e', name: "widget-btn-content" }, h("div", { key: '5a450e7c43a871ebb774a993b2aa8c5995263f85', class: "s-gifting-widget-action-content" }, h("span", { key: '3ab35c8fbcdf0297e9955b3272a7253a6c4268eb', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'be874da9ec1226a0ef72797bb57202e0dd1760cd' }, this.sectionBtnText)))))), h("salla-modal", { key: '857ff6f56962093dc896fd2dc7172be29522a96e', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '03a8f004c81a6a2a89b6de2c47f3353aae11e5e8', slot: "loading" }, h("div", { key: '38ea94f80df85e8d4d5275f0e732343097bd21a6', class: "s-gifting-skeleton" }, h("div", { key: '33af109db7645e322a3208756ae2a5293d4d1456', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '2246cec7f9e041ffdb7d7fd649e81a0675801150', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '83f5633bc7141e2c42c485db361771820c4c0650', class: "s-gifting-modal-title" }, h("div", { key: '200855ddf40a5f04f44dd654d86811d524920b2e', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '968cf1ae36607c0a5d3b1ce09710cbba42655bc5', height: '15px', width: '150px' })))), h("div", { key: '4a345dee6aac2dc9bad6ef95801e18c58d90f2f8', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '11239cd329c61e72fd7ae33a987917ed7a036c9b', height: '10px', width: '150px' }), h("salla-skeleton", { key: '62e22fe7f980e2e9ff0b36897cc14b04810c1b77', height: '230px' }), h("salla-skeleton", { key: '497135a7babcedf738553b10eb8b45eeb4ce029c', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'a5661d473a1ef369115c5087bc3ee48a10e37ebf', height: '30px' }), h("salla-skeleton", { key: '08c21713c79c518dcf955ebc677de46382e7bb6f', height: '40px' })))), h("slot", { key: 'b6b3ac52af5dac166b3965ee903c5db14c63250f', name: "header" }), !!this.hasError ?
+            h("div", { key: 'ba5575020df2e6e1d72eadc5c15ffa2629a7e0f0' }, h("salla-list-tile", { key: '2be6a003eb1881b35001d184fe4e7d8b3a48bcc2', class: this.generateClass() }, h("div", { key: 'c1c9762462177aac3571c72608921fb3a71e0c1e', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '6d25fe0684792b2b18c48b23c3a78fe1f428d371' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '8943aeec88dd610d159b3ee09e7cf784bfb85057', slot: "subtitle" }, h("div", { key: '7e93b7590c04431344d940965f851e6c21565921' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '0b4c0390853b20e1cc1dcd63215d639f6da28d5b', slot: "action" }, h("salla-button", { key: '8597cbcfecfe87c4057a0712e78cf5c3ccea9b89', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '48ee9b4c7fd63ae5d49acf137fb429292ade8fd7', name: "widget-btn-content" }, h("div", { key: '05681d9d1f8f99b0c8ac722fc4c49a0b7c9dfb7d', class: "s-gifting-widget-action-content" }, h("span", { key: '4c22063c0d47096166363bbf458ec2b57615bc6c', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '2688bf6e45d28f6696e8581d745626ac749b30c6' }, this.sectionBtnText)))))), h("salla-modal", { key: '338ce16bd3c615b5a97d8bf09d1bd1fa6388194e', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '33662376e8979c321fce3d2c01060881439bb652', slot: "loading" }, h("div", { key: 'ae3173d44990f7c2f41206f9ecd63dc1b30c2a1e', class: "s-gifting-skeleton" }, h("div", { key: 'dcab87f7a921763c0a52d122c2eb5b87aca41792', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'c41d6ced2a82554aeb7e36986111832bef6f1f0f', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'cbf4e6c3eccc896f4b2675f5877df055d5b884be', class: "s-gifting-modal-title" }, h("div", { key: '544134f67bdac37775af422cac9688c7975b0c4b', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '62d175f4b42d24ded6f87f3af700af35febe108f', height: '15px', width: '150px' })))), h("div", { key: '7dc39034234bfb0e57cbbc2c395a639cd383a77b', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '5d73d76103a98cd477f4604c3408b6071434c2f5', height: '10px', width: '150px' }), h("salla-skeleton", { key: '477ee6bf604e799336e7c45f119cfcdbc23cb0ed', height: '230px' }), h("salla-skeleton", { key: 'b8c51be1f614081b900465e1445d726be5bb3d48', height: '10px', width: '150px' }), h("salla-skeleton", { key: '6dae16f42decbd267fa03b7a71103a32fe30e2b1', height: '30px' }), h("salla-skeleton", { key: '1b077b2a03c438446a0a9c115e2b61377fcbd542', height: '40px' })))), h("slot", { key: 'fb0253f4ca6c6e4cafd0c8496e94d0e6da37d748', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -454,12 +479,12 @@ export class SallaGifting {
                             : ""), h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
                             this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el }, h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
-                            h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.selectedCountryCode || this.receiverCountryCode, key: `tel-input-${this.selectedCountryCode || this.receiverCountryCode || 'default'}`, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
+                            h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.physicalProducts &&
                             h("div", null, h("div", { class: this.errors && this.errors['receiver.country'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), h("div", { class: this.errors && this.errors['receiver.city_id'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), h("div", { class: "s-gifting-info anime-item opacity-0" }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo))), !this.physicalProducts && h("div", { class: "anime-item opacity-0" }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '04b96695999357ab1b4b0cf16f853c0f5dc2d402', name: "footer" })))
+                    ], h("slot", { key: '8b69297ac7f9a527c12325a64a267825ea5ee48b', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }

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

@@ -46,6 +46,19 @@ export class SallaProductCard {
         }
         this.wishlistBtn?.classList.toggle('s-product-card-wishlist-added', isAdded);
     }
+    isInWishlist() {
+        return salla.storage.get('salla::wishlist', []).includes(this.productData?.id);
+    }
+    async handleWishlistClick() {
+        const wasInWishlist = this.isInWishlist();
+        this.toggleFavoriteIcon(!wasInWishlist);
+        try {
+            await salla.wishlist.toggle(this.productData.id);
+        }
+        catch {
+            this.toggleFavoriteIcon(wasInWishlist);
+        }
+    }
     formatDate(date) {
         let d = new Date(date);
         return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
@@ -92,14 +105,14 @@ export class SallaProductCard {
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: '9a3e099826d51b49a1ac85f71cd1bd8bc36ef3a5', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '54a68f86817e919f63ba989a2b451072f4ce410c', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: 'b8454d7fe8d9df0f802cd4bcb854097c2058450b', ...hrefProp }, h("img", { key: '3f0f22a74468c5a4e95936a2bcb5196191d6e115', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: 'af7d81ee7f9d8d56c5a8dd6092a57dc0e12cd6f4', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '31491a836d402261afee6c8d28b1600cc5b0b06d', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '18594836114d10d13a26b307b4dd30a399c2657f', ...hrefProp }, h("img", { key: '06ccf31c089968eec9cb87fbc8a308e178459577', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'a087db8f8b46c9be4c08a13b6707780ab3037cbc', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id) }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'cf33a8c9a0dc1f2fe228516982cbab8f0cfdd2f2', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'a03cd8723f1511ab0c80b46a121f201d4b600670', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'b918024efb5f4e650c16130045d4ac76f688c66b', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: '784383a2af047842c44ed684d9112fce7661280e', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '5719757a642d9d288a9e9cf6dbf35aca0468d3d7', class: "s-product-card-content-title" }, h("a", { key: 'fd7f90537667a073c08af3970f9f577ea5e79c0f', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: '41b3d71085017bce419692aa01dce166b1fe31ab', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '0d1eaecd339554a1fcd1af6fd55f0edc94474d55', class: "s-product-card-content-title" }, h("a", { key: '203bf0b7fb32629982cbcce236095b8c3663b317', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -108,13 +121,13 @@ export class SallaProductCard {
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: 'ca35502d49adf1b7c7cdd0ccb719d9c41a7dfd58', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            : '', h("div", { key: 'f15e29713c258337540bc7cbb3e16339a6e319ab', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))
             : ''), this.isSpecial && this.productData.discount_ends
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
             : '', !this.hideAddBtn && !this.compact ?
             h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)), this.horizontal || this.fullImage ?
-                h("salla-button", { shape: "icon", fill: "none", color: "light", ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
+                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick(), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
                 : '')
             : ''), !this.hideAddBtn && this.compact ?
             h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)))

package/dist/collection/components/salla-products-list/salla-products-list.js

@@ -553,7 +553,11 @@ export class SallaProductsList {
     }
     getInitialData() {
         this.loading();
-        return salla.product.api.fetch({ source: Helper.getApiSource(this.getSource()), source_value: this.getSourceValue(), limit: this.limit }).then(async (response) => {
+        return salla.api.withoutNotifier(() => salla.product.api.fetch({
+            source: Helper.getApiSource(this.getSource()),
+            source_value: this.getSourceValue(),
+            limit: this.limit
+        }).then(async (response) => {
             if (!response.data.length) {
                 this.showPlaceholder = true;
                 this.placeholderLoader && this.placeholderLoader.remove();
@@ -569,7 +573,7 @@ export class SallaProductsList {
                 return;
             }
             this.handleResponse(response).forEach(card => this.wrapper.append(card));
-        });
+        }));
     }
     async loadMore() {
         this.infiniteScroll?.loadNextPage();

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

@@ -42,7 +42,11 @@ export class SallaProductsSlider {
                 this.isReady = false;
                 return;
             }
-            return salla.product.api.fetch({ source: Helper.getApiSource(this.getSource()), source_value: this.getSourceValue(), limit: this.limit })
+            return salla.api.withoutNotifier(() => salla.product.api.fetch({
+                source: Helper.getApiSource(this.getSource()),
+                source_value: this.getSourceValue(),
+                limit: this.limit
+            }))
                 .then(response => Helper.injectExtraFieldsToResponse(response))
                 .then(response => {
                 this.productsData = response.data;

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

@@ -1,4 +1,16 @@
 /*
 * Salla Search Component: Site search modal.
 * You can use these classes to target the elements in the component.
-*/
+*/
+.s-search-placeholder-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.s-search-input-wrapper {
+  position: relative;
+}
+.s-search-placeholder-trigger {
+  cursor: pointer;
+  appearance: none;
+  text-align: start;
+}

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

@@ -14,6 +14,10 @@ export class SallaSearch {
         this.loading = false;
         this.typing = false;
         this.debounce = setTimeout(() => '', 1000);
+        /**
+         * Set the component to display as a placeholder (button) that will open the modal. Defaults to `false`
+         */
+        this.placeholder = false;
         /**
          * Set the component display without modal window. Defaults to `false`
          */
@@ -34,7 +38,8 @@ export class SallaSearch {
          * Show submit action buttons at the end.
          */
         this.showAction = false;
-        this.productSlot = this.host.querySelector('[slot="product"]')?.innerHTML || this.getDefaultProductSlot();
+        this.productSlot =
+            this.host.querySelector('[slot="product"]')?.innerHTML || this.getDefaultProductSlot();
         salla.event.on('search::open', () => this.open());
         salla.lang.onLoaded(() => {
             this.translationLoaded = true;
@@ -58,12 +63,12 @@ export class SallaSearch {
         }
     }
     getDefaultProductSlot() {
-        return '<div class="s-search-product-image-container">' +
+        return ('<div class="s-search-product-image-container">' +
             '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
             '</div>' +
             '<div class="s-search-product-details">' +
             '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
-            '</div>';
+            '</div>');
     }
     debounceSearch(event) {
         this.typing = true;
@@ -105,12 +110,13 @@ export class SallaSearch {
         this.noResults.style.display = 'none';
         //run loading spinner or stop it
         this.loading = true;
-        salla.product.fetch({ source: "search", source_value: val })
+        salla.product
+            .fetch({ source: 'search', source_value: val })
             .then(response => {
             this.results = response;
             salla.event.emit('Products Searched', val);
         })
-            .catch(err => err !== 'Query is same as previous one!' ? this.results = undefined : null)
+            .catch(err => (err !== 'Query is same as previous one!' ? (this.results = undefined) : null))
             .finally(() => this.afterSearching(/*isEmpty*/ false));
     }
     afterSearching(isEmpty = true) {
@@ -121,16 +127,25 @@ export class SallaSearch {
         this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
     }
     render() {
-        const searchContent = h("div", { key: 'a3b8d4bba0d1d1e0f83ed3aca5affdf79d370314', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("div", { key: 'e2735ea0f797785ae5faeece14796328652a8121', class: "s-search-input-wrapper" }, h("span", { key: '895be2b1840e83e5fcddd98913839f6f6a0d12ad', class: "s-search-icon-wrap" }, h("span", { key: 'eef7146543d6af08c4fb377cd7ddca09f44a55a2', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: 'd6ab13ba24b5b99de99706516b8a89ad4d8c9838', 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: 'd823389b62124c47d0134f3c704af2de090be586', 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: '25857ea8c54c56875ed665e9163db0b0dfc23d48', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '2d75789cec346377f1ad6e27605868a747f57ec0', class: "s-search-input-wrapper" }, h("span", { key: '68f3d318d8a1a54aff7da564f571bb7e1521d600', class: "s-search-icon-wrap" }, h("span", { key: '479b33adc20e2e6c34eff5fda4e303bfae16e445', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '4577ea9dbec8175e52603a0934a2d6f22aa26a02', 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: '0607676854eefa6966ec38c0d2e6dd5a3c6423bb', 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: '8e841ed7aa34e86436be84dc6ad3f2ed35c69ff4', 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)
-            :
-                h("salla-modal", { position: "top", class: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
+                .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: '7136791cf4dc3d523cdba41367bd7691fd4ad9ba', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
+        const modalContent = (h("salla-modal", { key: 'ec8705a09e4993459d92569a5b71836cb0acefd8', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
+        const placeholderContent = (h("div", { key: '19b7e1c22e3a40c780eff0c74a23413f089ec96b', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: 'd87fc19fce928f230edb427e952903262a9ba32c', class: "s-search-input-wrapper" }, h("span", { key: '6475d41b267a2b35027016b5de474463cc7e6055', class: "s-search-icon-wrap" }, h("span", { key: 'e6ebac28c76a8a9824188da7ad2c290db610094f', class: "s-search-icon", innerHTML: Search })), h("button", { key: '3d7db311a4c348d4baaf1cb50eb5a0ed7953b28e', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                height: this.height + 'px',
+                borderRadius: this.oval ? this.height / 2 + 'px' : '',
+            } }, salla.lang.get('blocks.header.search_placeholder'))), modalContent));
+        return this.placeholder ? (placeholderContent) : this.inline ? (h("div", { class: "s-search-modal" }, searchContent)) : (modalContent);
     }
     /**
      * Run it one time after load
@@ -152,6 +167,26 @@ export class SallaSearch {
     }
     static get properties() {
         return {
+            "placeholder": {
+                "type": "boolean",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the component to display as a placeholder (button) that will open the modal. Defaults to `false`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "inline": {
                 "type": "boolean",
                 "attribute": "inline",

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: '8259fd2123035de2b369160563422a30bfdd9805', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '86c89dd45ae03d755fea6fb402bf782b39223b6b', class: classes }, "\u00A0")));
+        return (h(Host, { key: '0d85a5f753c250b1acacb0dea809879a549d8d12', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '80c3b2555be6c0fef7794bb184c919d4be2bdf24', class: classes }, "\u00A0")));
     }
     static get is() { return "salla-skeleton"; }
     static get originalStyleUrls() {

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: '8fb321cff071698640111ac5fccfb1fc8e130298' }, h("ul", { key: 'f00ef1d6ff429614000aba2af50514ea6f27a2f1', 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: '63d306c569080a2719d6e2731dc5fe0d6b8f77f4' }, h("ul", { key: '12c71e69359695da6c2ab3f607973b314c639e1e', 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

@@ -122,7 +122,7 @@ export class SallaSocialShare {
         window.a2a?.init('page');
     }
     render() {
-        return (h("div", { key: '72aa0f5552b60954b99a8f87d078345685247118', class: "s-social-share-wrapper" }, h("slot", { key: 'cfc15423d1b8896b8b192b287f1810d2f0c50374', name: 'widget' }, h("salla-button", { key: 'cff3dd991e0ebe457df09e0495f7e7365d9c9660', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: 'ae98979b475163009e998c0341aa23d53a7d940c', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'a395a0b71a2ab08c290d6923adb5713ec128e1e6', 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: 'ce2897e4cac7940407f6466a0eb4b2ff9fab3236', class: "s-social-share-wrapper" }, h("slot", { key: 'a0d4beebb29febd203d619845223c4e62b6b9c21', name: 'widget' }, h("salla-button", { key: '8615149ec0475bafc2f94d4b0bacfd49048d112f', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '187e9aa3194eedafd1355fc3e79db1118e21050f', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: '7a1192bbf8e39d7fa101deae229949cc730aff0b', 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: '9e1a20d0877a9c3ca6b376fe22bfb52e93c8f873', class: classes }, h("slot", { key: 'f5b0593c4c9b8d808901ca79e3c6fd28c2a64f36' })));
+        return (h("div", { key: '6272014593c424e20e4fc9cc2c59dc5c4bd1abc1', class: classes }, h("slot", { key: 'd7a3c32021cc14da0d895b5830c0cf3c8a047529' })));
     }
     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: '7e9e75c995226ca1b23a9a185c8be46206362b61', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '6ed7bf434cf6b1af235e2251f6d3f385cbbbcf0b' })),
+            h("div", { key: '5ac0d60331466d359ff0ba59d7702b177c96d95b', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: 'dc8ed7ec638ba1c24b355eedc831c67ab15ded62' })),
         ];
     }
     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: 'a82184132426d8d221c31160f48f129b0cb43a0f', class: "s-tabs" }, h("div", { key: '199285e8eef1f8e825b174af3b6df06ffe1ffc6e', class: "s-tabs-header" }, h("slot", { key: '80f789aa0dec2dc44c15f269bb554a63e325c7be', name: "header" })), h("div", { key: '1c4fec4e20bab0302fd04a29ebfb2f2bb93380d0', class: "s-tabs-content-wrapper" }, h("slot", { key: '491f2f5149acac667b3036fba9b92cf1fa027fc8', name: "content" })))
+            h("div", { key: '32051cc4308a49527f424d2bd0ce42a1ae25b8d4', class: "s-tabs" }, h("div", { key: '5d99d5835d8f3686f38a51f2eb049887d9f7229b', class: "s-tabs-header" }, h("slot", { key: '5b78f92eb7ffe9ad56c235415ae4ea93b0ed3c1d', name: "header" })), h("div", { key: '8979a8c600d60ed79ae8ebb6894754ab3ab7be97', class: "s-tabs-content-wrapper" }, h("slot", { key: '629a4e9b7934a0074a6e7579645e08e0b37c7e61', 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: 'f16ad5846d12d5ecef7b30e3409cd57be9bb9763', class: "s-tel-input" }, h("input", { key: '08a876233bba3f7878bb9dc9668f60fd16d04903', 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: 'f02fa5d196bb959f6a281fa0dc9ff2c352b97e88', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: 'fd0f6dcf6aba98356f7be85422918ff745dc2078', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: 'd48f549012efc0bc465bd7da8bd5693506514d25', class: "s-tel-input" }, h("input", { key: '04fa4306973163688b74effbbbd8838b39deb6ad', 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: '9ae2ddda777dfc2672756f8a6ada215169c1b486', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '83961dde155948b5bfe9030575a084470d707442', 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

@@ -27,7 +27,7 @@ export class SallaTooltip {
     }
     render() {
         const validTheme = ['default', 'dark'].includes(this.theme) ? this.theme : 'default';
-        return (h("div", { key: 'e05b915e8e5c20c481a2d7a0b048f8ba0159cb44', class: "s-tooltip-container" }, h("div", { key: '7151a21a5d7076d1427cf68b2ad8d4994aece40b', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
+        return (h("div", { key: '52b272aea520c20cdd3a46847a003c5acd099ba7', class: "s-tooltip-container" }, h("div", { key: 'b7b5663370e9c5976ffeac9325e7c871156244d1', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
     }
     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: '68be49213ef4d527bd26187e3b71277eeba6db28', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '2246aaea83d3e4283e9e2d649a561ff147d5c0b8', class: "s-user-settings-section" }, h("salla-list-tile", { key: '44cb25b6e9b654c619854d6abbb10267fc6f1774' }, h("div", { key: '50f1ed3d4568c441887855bfb146e58884ef7e2f', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '138c297b7656d1f7038a6f4a7b9ba4bfcf4b57f9', innerHTML: UserCancel })), h("div", { key: 'e9098b04a4479a502427f0dec6f58ad4981f3181', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'e786fb378a2039f4b7fbfed9728affb62b942d39', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '036c1784a9d8e019e3ede9c52db4fd18dc37d813', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'f35590de9cab9ae7727fa1606f30a81d79fd1564', class: "s-toggle" }, h("input", { key: 'dbc0d2542ecdf85158258d988b63a71be35527cd', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'ee49d4abdcf0e446fb2f2f78bb273cee247a5419', class: "s-toggle-switcher" }))))), h("div", { key: '90a68510727d72928afc9c7ed396d22624727e6b', class: "s-user-settings-section" }, h("salla-list-tile", { key: '668dc8e06fe0e8a1097e3b8d5628b8a85c02d465' }, h("div", { key: 'c641250b03f30672f7343191ad09d469dc6306ba', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'd327ce75f3d6520d5b5368cbe3b13502b8577a7e', innerHTML: Bullhorn })), h("div", { key: '222c5a7805285d36fc0b93a293d3019fff865e39', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '2fcc2117f7b3c01afe0ad00b4cce5248db368549', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'ed87e25872a8b3445be34a1be3d7b27f5c81957c', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '1c6df61cdeb658d51059b6547a202842145fd542', class: "s-toggle" }, h("input", { key: '5bf9c88418b8171e5c9e3ca0ab8dceb185234501', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'f51059655515505fbf91d96e9117c0002367f071', class: "s-toggle-switcher" }))))), h("div", { key: '06f000f6411666b5991e8425823362ae71b583f4', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'd63adfcbf6ade546ee1d0b048bfaed60d86c1e7c' }, h("div", { key: '38f077dfab92c0efd8b2503eb645ca382d3c02a3', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '582bcc04af8cb72575f1d1345c0a6cb6c66e9970', innerHTML: UserOff })), h("div", { key: 'e4fabb8f20a2ecb09c6c1baae356266eb00c56e5', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '077f3eed1d119eced712b5f3238acc56a89e9969', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'af3a9f72dadc0ae8c94c9ff1a37132309c4fb9d9', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'c978692370ac2849aaffc9ebf0f1079fd1451ef8', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'd07391061939719653650fadc46e37a14fe8df84', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '37a506df13c868d45f153a01ba5984d4e47e9bee', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '16f703d93d7424d8de2ecb607c92d28ea1e3fc44', class: "s-user-settings-confirmation" }, h("div", { key: '4ab2a5858becb7d604f19e843b4cc3357a3df4f5', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '470f3581171bc20e566ac3e813668c15aa7d03b6', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '174a9edc356c7b4fca5997617d3d6c37e05a91cd', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '188dffa8391e8b9c0f9d48611a165315f8d75895', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+        return (h(Host, { key: '7ebde1b251239daf505e3ed7460d8bd21eefcb1c', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: 'ba44ce4314ef6df6a85227e5f7db5428f63c0dde', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'ae83ddc78aa668dc44ae9c32001d401b051c6503' }, h("div", { key: 'da59b1543b7d0352505db2146579183abc57d4ac', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '95999a4a02fe57158473d64847d2ad861b79384c', innerHTML: UserCancel })), h("div", { key: '416e8c839f0ee9c89ca725829594c75c7baa7b49', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '798935472d17bc427990eb0d4cb1f3172ef7c244', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'bd455f1375fa73e4dde76075f4e18dd55a7ae859', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '9148274bf7a0faccbe282531107882c072e4e918', class: "s-toggle" }, h("input", { key: 'ed079fe4e696edb5ca1e3ef2ff594a787a2030c4', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '1ab8d7680e75a743ab7c92bc533dd3466e00d6bc', class: "s-toggle-switcher" }))))), h("div", { key: 'e2beb47cd5983c0d499b44d24e2abdfd7d3bc932', class: "s-user-settings-section" }, h("salla-list-tile", { key: '15dc8a7e21faeaedb6a8b12093959d0dca89cc6a' }, h("div", { key: '2e2633ced498512feaf9af090eb2554190a6601c', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'c25d328af60bdb56af88a5783ebed45a9ab662d5', innerHTML: Bullhorn })), h("div", { key: '26a2262d700f6326acfd23455c36ccb0bbc30c90', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '5a86ab74e912a2eb8ef618c8c2a0fce9635e21ab', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'fce21eb942724cd3e662d1fa28998dd569800807', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '2d5c5fe21af1b7b4618d568aac807477377456b9', class: "s-toggle" }, h("input", { key: '6141b9aee3d7f08c1614e18622734c985f00698d', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'bb1d05fa73a6a2683fd13bbfcfda9c6da33eec5c', class: "s-toggle-switcher" }))))), h("div", { key: '725a865983025acca1fc7e38aa8ca242977e0cec', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'f78022f0df1fa056218cc04f634020c91e13a1de' }, h("div", { key: '0e64bb2523b466f01c73392104f433ede50d5511', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '96a246978ddc161debca6a33ca9b33c76a28c671', innerHTML: UserOff })), h("div", { key: '1b9e41414830b0d08524517959a316c410b0263e', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '23baf125e4c2f93185ce23c0e75b1cdf8218bddf', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'c8d12d145ebc670fd43843682983c3a7ee9fd2c2', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: '94eede53889d66f641dd24492c38d2350b0901c8', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '6e6132d1d2fef544b5c504c66bc8dd84aba2a3a4', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '914742e0cb4b2b089e56c7139f2cbd4c677da85c', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '1980c63604f16ea75fafa9f3889ca29441a02e42', class: "s-user-settings-confirmation" }, h("div", { key: '82deb3934516d6132dcc006b7fde1937838b201b', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '7219b0aec0f4e3c6a269f476623929d1d993a754', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '6e5421e168e6c2b1fd04842b98e57e9bfd13c018', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'b44fa27e4afee3cadb52c39286f6130d1f6eb2a8', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
     }
     static get is() { return "salla-user-settings"; }
     static get originalStyleUrls() {