@salla.sa/twilight-components 1.6.15-alpha.6 → 1.6.15-alpha.7

package/dist/cjs/{salla-button_27.cjs.entry.js → salla-button_28.cjs.entry.js}

@@ -19145,6 +19145,35 @@ const SallaGifting = class {
 };
 SallaGifting.style = sallaGiftingCss;
 
+//TODO::check why there are too much listeners for languages::translations.loaded
+salla.event.setMaxListeners(20);
+class Helper {
+  toggleElementClassIf(element, classes1, classes2, callback) {
+    classes1 = Array.isArray(classes1) ? classes1 : classes1.split(' ');
+    classes2 = Array.isArray(classes2) ? classes2 : classes2.split(' ');
+    let isClasses1 = callback(element);
+    element === null || element === void 0 ? void 0 : element.classList.remove(...(isClasses1 ? classes2 : classes1));
+    element === null || element === void 0 ? void 0 : element.classList.add(...(isClasses1 ? classes1 : classes2));
+    return this;
+  }
+  toggleClassIf(selector, classes1, classes2, callback) {
+    document.querySelectorAll(selector).forEach(element => this.toggleElementClassIf(element, classes1, classes2, callback));
+    return this;
+  }
+  isValidEmail(email) {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
+  }
+  debounce(fn, ...data) {
+    if (!this.debounce_) {
+      this.debounce_ = Salla.helpers.debounce((callback, ...innerData) => callback(...innerData), 500);
+    }
+    //@ts-ignore
+    return this.debounce_(fn, ...data);
+  }
+}
+const Helper$1 = new Helper;
+
 const sallaInfiniteScrollCss = "";
 
 const SallaInfiniteScroll = class {
@@ -19185,7 +19214,7 @@ const SallaInfiniteScroll = class {
   }
   loading(isLoading = true) {
     let btnText = this.status.querySelector('.s-button-text');
-    salla.helpers.app.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    Helper$1.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
     this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
   }
   render() {
@@ -19471,7 +19500,7 @@ const SallaLoginModal = class {
     };
     this.loginByEmail = (event = null) => {
       event === null || event === void 0 ? void 0 : event.preventDefault();
-      if (!salla.helpers.app.isValidEmail(this.loginEmail.value)) {
+      if (!Helper$1.isValidEmail(this.loginEmail.value)) {
         this.validateField(this.loginEmail, this.emailErrorMsg);
         return;
       }
@@ -19605,7 +19634,7 @@ const SallaLoginModal = class {
       .finally(() => btn.stop() && btn.enable());
   }
   async newUserValidation() {
-    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = salla.helpers.app.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
+    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper$1.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
     if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
       return;
     !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);
@@ -20003,7 +20032,7 @@ const SallaModal = class {
   }
   toggleModal(isOpen) {
     const body = this.host.querySelector('.s-modal-body');
-    salla.helpers.app.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    Helper$1.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
@@ -20039,8 +20068,8 @@ const SallaModal = class {
       : '', this.modalTitle || this.subTitle ?
       index$1.h("div", { class: "s-modal-header-inner" }, index$1.h("slot", { name: 'icon' }, !!this.iconStyle ?
         index$1.h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
-        : ''), index$1.h("div", { class: "s-modal-header-content" }, index$1.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }), index$1.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
-      : ""), index$1.h("slot", null), index$1.h("slot", { name: "footer" })))));
+        : ''), index$1.h("div", { class: "s-modal-header-content" }, this.modalTitle ? index$1.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }) : '', this.subTitle ? index$1.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }) : ''))
+      : ''), index$1.h("slot", null), index$1.h("slot", { name: "footer" })))));
   }
   //move the modal as root dom, because we need the model to be outside the forms
   componentDidLoad() {
@@ -20334,7 +20363,7 @@ const SallaProductAvailability = class {
   async validateform() {
     try {
       if (this.channels_.includes('email')) {
-        const isEmailValid = salla.helpers.app.isValidEmail(this.email.value);
+        const isEmailValid = Helper$1.isValidEmail(this.email.value);
         if (isEmailValid)
           return;
         !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
@@ -20376,6 +20405,13 @@ const SallaProductAvailability = class {
 };
 SallaProductAvailability.style = sallaProductAvailabilityCss;
 
+const PencilRuler = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>pencil-ruler</title>
+<path d="M3.057 11.609c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l6.667-6.667c0.521-0.521 0.521-1.364 0-1.885l-1.285-1.285c-1.143-1.143-2.661-1.772-4.276-1.772-1.616 0-3.135 0.629-4.276 1.772-1.143 1.141-1.772 2.66-1.772 4.276 0 1.615 0.629 3.135 1.772 4.276zM3.657 3.657c1.277-1.277 3.504-1.277 4.781 0l0.343 0.343-4.781 4.781-0.343-0.343c-0.639-0.639-0.991-1.488-0.991-2.391s0.352-1.752 0.991-2.391zM29.317 20.972c-0.2-0.707-0.932-1.119-1.645-0.921-0.709 0.2-1.121 0.937-0.921 1.645l1.987 7.041-7.041-1.987c-0.707-0.195-1.444 0.213-1.645 0.921-0.2 0.708 0.212 1.445 0.921 1.645l9.333 2.633c0.119 0.032 0.24 0.049 0.361 0.049 0.349 0 0.689-0.137 0.943-0.391 0.341-0.341 0.472-0.84 0.34-1.305zM31.609 8.772l-8.381-8.381c-0.5-0.5-1.385-0.5-1.885 0l-8.171 8.171s-0.001 0-0.001 0.001 0 0.001-0.001 0.001l-4.607 4.607s0 0-0.001 0 0 0 0 0.001l-8.171 8.171c-0.251 0.249-0.391 0.588-0.391 0.943 0 0.353 0.14 0.693 0.391 0.943l8.381 8.381c0.249 0.251 0.589 0.391 0.943 0.391s0.693-0.14 0.943-0.391l20.952-20.952c0.521-0.521 0.521-1.365 0-1.885zM9.715 28.781l-6.495-6.496 1.676-1.676 1.851 1.851c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885l-3.008-3.008 2.724-2.724 1.851 1.851c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.52 0.521-1.364 0-1.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.365 0-1.885l-3.008-3.008 1.677-1.677 6.496 6.496z"></path>
+</svg>
+`;
+
 const sallaProductSizeGuideCss = "";
 
 const SallaProductSizeGuide = class {
@@ -20419,9 +20455,11 @@ const SallaProductSizeGuide = class {
     return index$1.h("salla-placeholder", { alignment: "center", iconSize: "xl" }, index$1.h("div", { slot: "title" }, this.placeholder_title), index$1.h("div", { slot: "description" }, this.placeholder_description));
   }
   render() {
-    return (index$1.h(index$1.Host, { class: "s-product-size-guide-block" }, index$1.h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, index$1.h("div", { slot: "loading" }, index$1.h("div", { class: "s-product-size-guide-skeleton" }, index$1.h("salla-skeleton", { height: '15px', width: '25%' }), index$1.h("div", { class: "s-product-size-guide-skeleton-header" }, index$1.h("salla-skeleton", { height: '40px' }), index$1.h("salla-skeleton", { height: '40px' }), index$1.h("salla-skeleton", { height: '40px' }), index$1.h("salla-skeleton", { height: '40px' })), index$1.h("div", { class: "s-product-size-guide-skeleton-content" }, index$1.h("salla-skeleton", { height: '15px', width: '25%' }), index$1.h("salla-skeleton", { height: '10px', width: '75%' }), index$1.h("salla-skeleton", { height: '10px', width: '50%' }), index$1.h("salla-skeleton", { height: '10px', width: '75%' }), index$1.h("salla-skeleton", { height: '10px', width: '100%' }), index$1.h("salla-skeleton", { height: '10px', width: '25%' }), index$1.h("salla-skeleton", { height: '10px', width: '60%' }), index$1.h("salla-skeleton", { height: '10px', width: '45%' }), index$1.h("salla-skeleton", { height: '10px', width: '30%' })))), index$1.h("slot", { name: "header" }), !this.hasError && !!this.guides ?
-      [index$1.h("div", { class: "container px-8" }, index$1.h("salla-tabs", null, this.guides.map((guide) => index$1.h("salla-tab-header", { slot: "header", name: guide.name }, index$1.h("span", null, guide.name))), this.guides.map((guide) => index$1.h("salla-tab-content", { slot: "content", name: guide.name }, index$1.h("div", { innerHTML: guide.description })))))]
-      : this.showPlaceholder(), index$1.h("slot", { name: "footer" }))));
+    return (index$1.h("salla-modal", { class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, index$1.h("span", { slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), index$1.h("div", { slot: "loading" }, index$1.h("div", { class: "s-product-size-guide-skeleton" }, index$1.h("salla-skeleton", { height: '15px', width: '25%' }), index$1.h("div", { class: "s-product-size-guide-skeleton-header" }, index$1.h("salla-skeleton", { height: '40px' }), index$1.h("salla-skeleton", { height: '40px' }), index$1.h("salla-skeleton", { height: '40px' }), index$1.h("salla-skeleton", { height: '40px' })), index$1.h("div", { class: "s-product-size-guide-skeleton-content" }, index$1.h("salla-skeleton", { height: '15px', width: '25%' }), index$1.h("salla-skeleton", { height: '10px', width: '75%' }), index$1.h("salla-skeleton", { height: '10px', width: '50%' }), index$1.h("salla-skeleton", { height: '10px', width: '75%' }), index$1.h("salla-skeleton", { height: '10px', width: '100%' }), index$1.h("salla-skeleton", { height: '10px', width: '25%' }), index$1.h("salla-skeleton", { height: '10px', width: '60%' }), index$1.h("salla-skeleton", { height: '10px', width: '45%' }), index$1.h("salla-skeleton", { height: '10px', width: '30%' })))), index$1.h("slot", { name: "header" }), !this.hasError && !!this.guides ?
+      [
+        index$1.h("salla-tabs", null, this.guides.map((guide) => index$1.h("salla-tab-header", { slot: "header", name: guide.name }, index$1.h("span", null, guide.name))), this.guides.map((guide) => index$1.h("salla-tab-content", { slot: "content", name: guide.name }, index$1.h("div", { innerHTML: guide.description }))))
+      ]
+      : this.showPlaceholder(), index$1.h("slot", { name: "footer" })));
   }
   get host() { return index$1.getElement(this); }
 };
@@ -20441,19 +20479,6 @@ const Minus = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-//TODO::check why there are too much listeners for languages::translations.loaded
-salla.event.setMaxListeners(20);
-class Helper {
-  debounce(fn, ...data) {
-    if (!this.debounce_) {
-      this.debounce_ = Salla.helpers.debounce((callback, ...innerData) => callback(...innerData), 500);
-    }
-    //@ts-ignore
-    return this.debounce_(fn, ...data);
-  }
-}
-const Helper$1 = new Helper;
-
 const sallaQuantityInputCss = "";
 
 const SallaQuantityInput = class {
@@ -20600,12 +20625,12 @@ const SallaRatingModal = class {
   showActiveStep(current = null) {
     var _a, _b;
     this.currentTab = current || this.steps[this.currentIndex];
-    salla.helpers.app.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+    Helper$1.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
       .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
     if (this.currentIndex != 0) {
       // the animation
-      salla.helpers.app.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
-      setTimeout(() => salla.helpers.app.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
+      Helper$1.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper$1.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
@@ -20615,7 +20640,7 @@ const SallaRatingModal = class {
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    salla.helpers.app.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper$1.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -20626,7 +20651,7 @@ const SallaRatingModal = class {
       .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
       .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
       .then(() => this.showActiveStep())
-      .then(() => salla.helpers.app.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
+      .then(() => Helper$1.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -20651,7 +20676,7 @@ const SallaRatingModal = class {
       return;
     }
     type = type || rating['dataset'].type;
-    salla.helpers.app.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
+    Helper$1.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
     throw validationMessage.innerHTML = stars
       ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
       : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
@@ -20733,7 +20758,7 @@ const SallaRatingStars = class {
       this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
       // Loop through each star, and add or remove the `.selected` class to toggle highlighting
       this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
-        .forEach((star, index) => salla.helpers.app.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
+        .forEach((star, index) => Helper$1.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
       // update aria-pressed attr status
       this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
       selected.setAttribute('aria-pressed', 'true');
@@ -20850,7 +20875,7 @@ const SallaSearch = class {
     }
   }
   search(val) {
-    salla.helpers.app.hideElement(this.noResults);
+    this.noResults.style.display = 'none';
     //run loading spinner or stop it
     this.loading = true;
     salla.product.search(val)
@@ -20861,7 +20886,7 @@ const SallaSearch = class {
   afterSearching(isEmpty = true) {
     var _a;
     this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
-    salla.helpers.app.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; });
+    Helper$1.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; });
     this.loading = false;
     salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
     this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
@@ -27664,6 +27689,66 @@ const SallaTelInput = class {
 };
 SallaTelInput.style = sallaTelInputCss;
 
+const Bullhorn = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bullhorn</title>
+<path d="M30.129 0.264c-0.339-0.252-0.776-0.328-1.179-0.208l-24.951 7.485v-0.216c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v14.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-0.112l3.448 1.207-0.595 1.704c-0.321 1.019-0.227 2.103 0.267 3.051s1.327 1.647 2.345 1.968l6.359 2.004c0.399 0.127 0.804 0.187 1.201 0.187 1.699 0 3.277-1.091 3.812-2.785l0.423-1.295 7.633 2.672c0.143 0.049 0.292 0.075 0.44 0.075 0.273 0 0.543-0.084 0.772-0.247 0.352-0.249 0.561-0.655 0.561-1.087v-28c0-0.421-0.199-0.819-0.537-1.069zM18.297 28.4c-0.221 0.701-0.973 1.089-1.673 0.871l-6.357-2.004c-0.34-0.108-0.617-0.34-0.781-0.656s-0.196-0.676-0.101-0.977l0.581-1.665 8.777 3.072zM28 27.453l-24-8.4v-8.728l24-7.2z"></path>
+</svg>
+`;
+
+const UserOff = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-off</title>
+<path d="M10.837 19.309c-4.963 1.284-8.171 4.303-8.171 7.691v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-2.101 2.48-4.155 6.172-5.109 0.713-0.184 1.141-0.912 0.957-1.625-0.184-0.711-0.908-1.137-1.625-0.956zM12.859 3.715c0.933-0.685 2.020-1.048 3.141-1.048 2.941 0 5.333 2.392 5.333 5.333 0 1.121-0.363 2.208-1.048 3.141-0.436 0.593-0.308 1.428 0.284 1.864 0.239 0.175 0.515 0.259 0.788 0.259 0.411 0 0.815-0.188 1.076-0.544 1.025-1.393 1.567-3.025 1.567-4.72 0-4.412-3.588-8-8-8-1.695 0-3.327 0.541-4.721 1.567-0.592 0.435-0.72 1.269-0.284 1.864 0.436 0.593 1.269 0.721 1.864 0.284zM31.609 29.724l-29.333-29.333c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l29.333 29.333c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>
+</svg>
+`;
+
+const sallaUserSettingsCss = "";
+
+const SallaUserSettings = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    // Texts
+    this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
+    this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
+    this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
+    this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
+    this.sorryForLeavingText = salla.lang.get('pages.profile.warning_for_deactivate');
+    this.warningText = salla.lang.get('pages.profile.sorry_for_leaving');
+    this.keepAccount = salla.lang.get('pages.profile.keep_account');
+    this.buttonLoading = false;
+    this.promotionsEnabled = true;
+    salla.lang.onLoaded(() => {
+      this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
+      this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
+      this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
+      this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
+      this.warningText = salla.lang.get('pages.profile.warning_for_deactivate');
+      this.sorryForLeavingText = salla.lang.get('pages.profile.sorry_for_leaving');
+      this.keepAccount = salla.lang.get('pages.profile.keep_account');
+    });
+  }
+  toggleNotification(event) {
+    salla.profile.updateSettings({ promotions_enabled: event.target.checked });
+  }
+  capitalizeText(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+  openDeactivateModal() {
+    this.confirmationModal.setTitle(this.capitalizeText(this.deactivateAccount));
+    this.confirmationModal.open();
+  }
+  async deleteAccount() {
+    await salla.profile.delete()
+      .then(() => window.location.reload())
+      .finally(() => this.confirmationModal.close());
+  }
+  render() {
+    return (index$1.h(index$1.Host, { class: "s-user-settings-wrapper" }, index$1.h("div", { class: "s-user-settings-section" }, index$1.h("salla-list-tile", null, index$1.h("div", { slot: "icon", class: "s-user-settings-section-icon" }, index$1.h("span", { innerHTML: Bullhorn })), index$1.h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), index$1.h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), index$1.h("div", { slot: 'action', class: "s-user-settings-section-action" }, index$1.h("label", { class: "s-toggle" }, index$1.h("input", { class: "s-toggle-input", checked: this.promotionsEnabled, onChange: (e) => this.toggleNotification(e), type: "checkbox" }), index$1.h("div", { class: "s-toggle-switcher" }))))), index$1.h("div", { class: "s-user-settings-section" }, index$1.h("salla-list-tile", null, index$1.h("div", { slot: "icon", class: "s-user-settings-section-icon" }, index$1.h("span", { innerHTML: UserOff })), index$1.h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), index$1.h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), index$1.h("div", { slot: 'action', class: "s-user-settings-section-action" }, index$1.h("salla-button", { shape: "link", color: "danger", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), index$1.h("salla-modal", { width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, index$1.h("span", { slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), index$1.h("div", { class: "s-user-settings-confirmation" }, index$1.h("div", { class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), index$1.h("div", { class: "s-user-settings-confirmation-actions" }, index$1.h("salla-button", { width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), index$1.h("salla-button", { fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+  }
+};
+SallaUserSettings.style = sallaUserSettingsCss;
+
 const AndroidPhoneIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>android-phone</title>
@@ -27786,12 +27871,14 @@ const SallaVerify = class {
     this.otpInputs[0].focus();
   }
   resendTimer() {
-    salla.helpers.app.showElement(this.resendMessage).hideElement(this.resend);
+    this.resendMessage.style.display = 'block';
+    this.resend.style.display = 'none';
     this.resendAfter = 30;
     let timerId = setInterval(() => {
       if (this.resendAfter <= 0) {
         clearInterval(timerId);
-        salla.helpers.app.hideElement(this.resendMessage).showElement(this.resend);
+        this.resend.style.display = 'block';
+        this.resendMessage.style.display = 'none';
       }
       else {
         this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;
@@ -27860,4 +27947,5 @@ exports.salla_tab_content = SallaTabContent;
 exports.salla_tab_header = SallaTabHeader;
 exports.salla_tabs = SallaTabs;
 exports.salla_tel_input = SallaTelInput;
+exports.salla_user_settings = SallaUserSettings;
 exports.salla_verify = SallaVerify;

package/dist/cjs/twilight.cjs.js

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-cac2fd59.js');
-require('./index-69a7a6c7.js');
+require('./index-5caf5b06.js');
 require('./_commonjsHelpers-691dd63b.js');
 
 /*
@@ -77,5 +77,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"salla-button_27.cjs\",[[4,\"salla-gifting\",{\"productId\":[2,\"product-id\"],\"sectionTitle\":[32],\"sectionSubtitle\":[32],\"sectionBtnText\":[32],\"giftDetails\":[32],\"selectImageForYourGift\":[32],\"selectImageOrUpload\":[32],\"selectGiftMessage\":[32],\"giftCustomText\":[32],\"textId\":[32],\"incorrectGiftText\":[32],\"nextStep\":[32],\"senderNameLabel\":[32],\"receiverNameFieldLabel\":[32],\"receiverMobileFieldLabel\":[32],\"receiverEmailFieldLabel\":[32],\"emailPlaceholder\":[32],\"sendLater\":[32],\"selectSendDateAndTime\":[32],\"canNotEditOrderAfterSelectDate\":[32],\"sendGift\":[32],\"donationRequired\":[32],\"step1Elems\":[32],\"step2Elems\":[32],\"stepsWrapper\":[32],\"textArea\":[32],\"imageCover\":[32],\"textSelect\":[32],\"customTextArea\":[32],\"calendarFormGroup\":[32],\"currentStep\":[32],\"showCalendar\":[32],\"showGiftText\":[32],\"currentLang\":[32],\"parentClass\":[32],\"errors\":[32],\"gift\":[32],\"selectedGiftTextOption\":[32],\"showTextArea\":[32],\"selectedImage\":[32],\"uploadedImage\":[32],\"selectedText\":[32],\"senderName\":[32],\"errorMessage\":[32],\"hasError\":[32],\"quantity\":[32],\"deliveryDate\":[32],\"timeZone\":[32],\"receiverName\":[32],\"receiverMobile\":[32],\"receiverCountryCode\":[32],\"receiverEmail\":[32],\"open\":[64],\"close\":[64],\"goToStep2\":[64]}],[4,\"salla-loyalty\",{\"prizePoints\":[8,\"prize-points\"],\"customerPoints\":[2,\"customer-points\"],\"prizeTitle\":[1,\"prize-title\"],\"allowEmail\":[4,\"allow-email\"],\"allowMobile\":[4,\"allow-mobile\"],\"requireEmail\":[4,\"require-email\"],\"guestMessage\":[1,\"guest-message\"],\"loyaltyProgram\":[32],\"buttonLoading\":[32],\"selectedItem\":[32],\"askConfirmation\":[32],\"is_loggedin\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64],\"resetExchange\":[64],\"exchangeLoyaltyPoint\":[64]}],[4,\"salla-product-size-guide\",{\"guides\":[32],\"productId\":[32],\"placeholder_title\":[32],\"placeholder_description\":[32],\"modal_title\":[32],\"hasError\":[32],\"open\":[64],\"close\":[64]}],[0,\"salla-localization-modal\",{\"language\":[1537],\"currency\":[1537],\"translationLoaded\":[32],\"languages\":[32],\"currencies\":[32],\"hasError\":[32],\"errorMessage\":[32],\"open\":[64],\"close\":[64],\"submit\":[64]}],[4,\"salla-login-modal\",{\"isEmailAllowed\":[1028,\"is-email-allowed\"],\"isMobileAllowed\":[1028,\"is-mobile-allowed\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"supportWebAuth\":[516,\"support-web-auth\"],\"currentTabName\":[32],\"regType\":[32],\"translationLoaded\":[32],\"title\":[32],\"emailErrorMsg\":[32],\"firstNameErrorMsg\":[32],\"lastNameErrorMsg\":[32],\"open\":[64]},[[8,\"verified\",\"onVerified\"]]],[0,\"salla-offer-modal\",{\"offer\":[32],\"offer_name\":[32],\"offer_message\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"showOffer\":[64]}],[0,\"salla-rating-modal\",{\"orderId\":[2,\"order-id\"],\"order\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64]}],[0,\"salla-search\",{\"inline\":[4],\"oval\":[4],\"height\":[2],\"translationLoaded\":[32],\"results\":[32],\"loading\":[32],\"typing\":[32],\"debounce\":[32],\"search_term\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[4,\"salla-social-share\",{\"url\":[513],\"urlName\":[513,\"url-name\"],\"platforms\":[16],\"opened\":[32],\"allPlatforms\":[32],\"platformIcons\":[32],\"open\":[64]}],[4,\"salla-infinite-scroll\",{\"nextPage\":[1,\"next-page\"],\"autoload\":[1028],\"container\":[1],\"item\":[1],\"loadMore\":[32],\"noMore\":[32],\"failedToLoad\":[32]}],[4,\"salla-quantity-input\",{\"quantity\":[32],\"decrease\":[64],\"increase\":[64],\"setValue\":[64]}],[0,\"salla-product-availability\",{\"channels\":[1],\"productId\":[2,\"product-id\"],\"isSubscribed\":[1028,\"is-subscribed\"],\"translationLoaded\":[32],\"title_\":[32],\"isVisitorSubscribed\":[32]}],[4,\"salla-verify\",{\"display\":[1],\"type\":[1025],\"autoReload\":[4,\"auto-reload\"],\"supportWebAuth\":[4,\"support-web-auth\"],\"translationLoaded\":[32],\"title\":[32],\"resendAfter\":[32],\"isProfileVerify\":[32],\"getCode\":[64],\"open\":[64]}],[0,\"salla-datetime-picker\",{\"value\":[1025],\"placeholder\":[1],\"allowInput\":[4,\"allow-input\"],\"allowInvalidPreload\":[4,\"allow-invalid-preload\"],\"altFormat\":[1,\"alt-format\"],\"altInput\":[4,\"alt-input\"],\"altInputClass\":[1,\"alt-input-class\"],\"appendTo\":[16],\"ariaDateFormat\":[1,\"aria-date-format\"],\"autoFillDefaultTime\":[4,\"auto-fill-default-time\"],\"clickOpens\":[4,\"click-opens\"],\"closeOnSelect\":[4,\"close-on-select\"],\"conjunction\":[1],\"dateFormat\":[1,\"date-format\"],\"defaultDate\":[8,\"default-date\"],\"defaultHour\":[2,\"default-hour\"],\"defaultMinute\":[2,\"default-minute\"],\"defaultSeconds\":[2,\"default-seconds\"],\"disable\":[16],\"disableMobile\":[4,\"disable-mobile\"],\"enable\":[16],\"enableSeconds\":[4,\"enable-seconds\"],\"enableTime\":[4,\"enable-time\"],\"formatDate\":[16],\"hourIncrement\":[2,\"hour-increment\"],\"inline\":[4],\"locale\":[1],\"maxDate\":[8,\"max-date\"],\"maxTime\":[8,\"max-time\"],\"minDate\":[8,\"min-date\"],\"minTime\":[8,\"min-time\"],\"minuteIncrement\":[2,\"minute-increment\"],\"mode\":[1],\"monthSelectorType\":[1,\"month-selector-type\"],\"nextArrow\":[1,\"next-arrow\"],\"noCalendar\":[4,\"no-calendar\"],\"onChange\":[16],\"onClose\":[16],\"onDayCreate\":[16],\"onDestroy\":[16],\"onKeyDown\":[16],\"onMonthChange\":[16],\"onOpen\":[16],\"onParseConfig\":[16],\"onReady\":[16],\"onValueUpdate\":[16],\"onYearChange\":[16],\"dateParser\":[16],\"position\":[1],\"positionElement\":[16],\"prevArrow\":[1,\"prev-arrow\"],\"shorthandCurrentMonth\":[4,\"shorthand-current-month\"],\"static\":[4],\"showMonths\":[2,\"show-months\"],\"time_24hr\":[4,\"time_-2-4hr\"],\"weekNumbers\":[4,\"week-numbers\"],\"wrap\":[4]}],[0,\"salla-file-upload\",{\"required\":[4],\"disabled\":[4],\"allowDrop\":[4,\"allow-drop\"],\"allowBrowse\":[4,\"allow-browse\"],\"allowPaste\":[4,\"allow-paste\"],\"allowMultiple\":[4,\"allow-multiple\"],\"allowReplace\":[4,\"allow-replace\"],\"allowRevert\":[4,\"allow-revert\"],\"allowRemove\":[4,\"allow-remove\"],\"allowProcess\":[4,\"allow-process\"],\"allowReorder\":[4,\"allow-reorder\"],\"storeAsFile\":[4,\"store-as-file\"],\"forceRevert\":[4,\"force-revert\"],\"maxFilesCount\":[2,\"max-files-count\"],\"maxParallelUploads\":[2,\"max-parallel-uploads\"],\"checkValidity\":[4,\"check-validity\"],\"itemInsertLocation\":[1,\"item-insert-location\"],\"itemInsertInterval\":[2,\"item-insert-interval\"],\"credits\":[4],\"dropOnPage\":[4,\"drop-on-page\"],\"dropOnElement\":[4,\"drop-on-element\"],\"dropValidation\":[4,\"drop-validation\"],\"ignoredFiles\":[16],\"serverConfig\":[1,\"server-config\"],\"instantUpload\":[4,\"instant-upload\"],\"chunkUploads\":[4,\"chunk-uploads\"],\"chunkForce\":[4,\"chunk-force\"],\"chunkSize\":[2,\"chunk-size\"],\"chunkRetryDelays\":[16],\"labelDecimalSeparator\":[1,\"label-decimal-separator\"],\"labelThousandsSeparator\":[1,\"label-thousands-separator\"],\"labelIdle\":[1,\"label-idle\"],\"labelInvalidField\":[1,\"label-invalid-field\"],\"labelFileWaitingForSize\":[1,\"label-file-waiting-for-size\"],\"labelFileSizeNotAvailable\":[1,\"label-file-size-not-available\"],\"labelFileLoading\":[1,\"label-file-loading\"],\"labelFileLoadError\":[1,\"label-file-load-error\"],\"labelFileProcessing\":[1,\"label-file-processing\"],\"labelFileProcessingComplete\":[1,\"label-file-processing-complete\"],\"labelFileProcessingAborted\":[1,\"label-file-processing-aborted\"],\"labelFileProcessingError\":[1,\"label-file-processing-error\"],\"labelFileProcessingRevertError\":[1,\"label-file-processing-revert-error\"],\"labelFileRemoveError\":[1,\"label-file-remove-error\"],\"labelTapToCancel\":[1,\"label-tap-to-cancel\"],\"labelTapToRetry\":[1,\"label-tap-to-retry\"],\"labelTapToUndo\":[1,\"label-tap-to-undo\"],\"labelButtonRemoveItem\":[1,\"label-button-remove-item\"],\"labelButtonAbortItemLoad\":[1,\"label-button-abort-item-load\"],\"labelButtonRetryItemLoad\":[1,\"label-button-retry-item-load\"],\"labelButtonAbortItemProcessing\":[1,\"label-button-abort-item-processing\"],\"labelButtonUndoItemProcessing\":[1,\"label-button-undo-item-processing\"],\"labelButtonRetryItemProcessing\":[1,\"label-button-retry-item-processing\"],\"labelButtonProcessItem\":[1,\"label-button-process-item\"],\"iconRemove\":[1,\"icon-remove\"],\"iconProcess\":[1,\"icon-process\"],\"iconRetry\":[1,\"icon-retry\"],\"iconUndo\":[1,\"icon-undo\"],\"pond\":[32],\"files\":[32],\"appendFile\":[64]}],[0,\"salla-rating-stars\",{\"name\":[1],\"size\":[1],\"value\":[2]}],[4,\"salla-swiper\",{\"loop\":[4],\"speed\":[2],\"itemPerView\":[8,\"item-per-view\"],\"spaceBetweenItems\":[2,\"space-between-items\"],\"currentIndex\":[32],\"isLastSlideItem\":[32],\"isFirstSlideItem\":[32]}],[4,\"salla-tab-content\",{\"name\":[1],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tab-header\",{\"name\":[1],\"activeClass\":[1,\"active-class\"],\"height\":[8],\"centered\":[4],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tabs\",{\"backgroundColor\":[1,\"background-color\"],\"vertical\":[4]},[[0,\"tabSelected\",\"onSelectedTab\"]]],[4,\"salla-list-tile\",{\"href\":[1],\"target\":[1]}],[0,\"salla-tel-input\",{\"phone\":[1025],\"name\":[1],\"countryCode\":[1025,\"country-code\"],\"mobileRequired\":[32],\"countryCodeLabel\":[32],\"mobileLabel\":[32],\"tooShort\":[32],\"tooLong\":[32],\"invalidCountryCode\":[32],\"invalidNumber\":[32],\"errorMap\":[32],\"getValues\":[64],\"isValid\":[64]}],[4,\"salla-placeholder\",{\"icon\":[1],\"alignment\":[1],\"iconSize\":[1,\"icon-size\"],\"translationLoaded\":[32]}],[0,\"salla-skeleton\",{\"type\":[1],\"width\":[1],\"height\":[1]}],[4,\"salla-modal\",{\"isClosable\":[1028,\"is-closable\"],\"width\":[513],\"position\":[513],\"visible\":[516],\"hasSkeleton\":[516,\"has-skeleton\"],\"isLoading\":[1540,\"is-loading\"],\"subTitleFirst\":[4,\"sub-title-first\"],\"noPadding\":[4,\"no-padding\"],\"subTitle\":[1,\"sub-title\"],\"centered\":[4],\"iconStyle\":[1,\"icon-style\"],\"modalTitle\":[32],\"open\":[64],\"close\":[64],\"setTitle\":[64],\"loading\":[64],\"stopLoading\":[64]},[[0,\"keyup\",\"handleKeyUp\"]]],[4,\"salla-button\",{\"shape\":[513],\"color\":[513],\"fill\":[513],\"size\":[513],\"width\":[513],\"loading\":[516],\"disabled\":[516],\"loaderPosition\":[1,\"loader-position\"],\"href\":[1],\"load\":[64],\"stop\":[64],\"setText\":[64],\"disable\":[64],\"enable\":[64]}],[0,\"salla-loading\",{\"size\":[8],\"width\":[8],\"color\":[1],\"bgColor\":[1,\"bg-color\"]}]]],[\"salla-scopes.cjs\",[[4,\"salla-scopes\",{\"selection\":[1],\"searchDisplayLimit\":[2,\"search-display-limit\"],\"translationLoaded\":[32],\"mode\":[32],\"current_scope\":[32],\"scopes\":[32],\"originalScopesList\":[32],\"selected_scope\":[32],\"isOpenedBefore\":[32],\"hasError\":[32],\"close\":[64],\"open\":[64],\"handleSubmit\":[64]}]]],[\"salla-add-product-button.cjs\",[[4,\"salla-add-product-button\",{\"channels\":[513],\"quantity\":[514],\"donatingAmount\":[514,\"donating-amount\"],\"productId\":[520,\"product-id\"],\"productStatus\":[513,\"product-status\"],\"productType\":[513,\"product-type\"]}]]],[\"salla-conditional-fields.cjs\",[[4,\"salla-conditional-fields\",null,[[0,\"change\",\"changeHandler\"]]]]],[\"salla-installment.cjs\",[[0,\"salla-installment\",{\"price\":[1],\"language\":[1],\"currency\":[1],\"tamaraIsActive\":[32],\"tabbyIsActive\":[32],\"spotiiIsActive\":[32]}]]],[\"salla-loyalty-prize-item.cjs\",[[0,\"salla-loyalty-prize-item\",{\"item\":[16]}]]],[\"salla-select.cjs\",[[0,\"salla-select\",{\"label\":[1],\"items\":[16],\"itemText\":[1,\"item-text\"],\"itemValue\":[1,\"item-value\"],\"itemDisabled\":[1,\"item-disabled\"],\"size\":[1],\"value\":[1032],\"autofocus\":[4],\"clearable\":[4],\"clearIcon\":[1,\"clear-icon\"],\"color\":[1],\"flat\":[4],\"disabled\":[4],\"loading\":[4],\"loadingColor\":[1,\"loading-color\"],\"hint\":[1],\"persistHint\":[4,\"persist-hint\"],\"placeholder\":[1],\"multiple\":[4],\"autocomplete\":[4],\"required\":[4],\"chips\":[4],\"shape\":[1],\"returnObject\":[4,\"return-object\"],\"hideDetail\":[4,\"hide-detail\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"salla-button_28.cjs\",[[4,\"salla-gifting\",{\"productId\":[2,\"product-id\"],\"sectionTitle\":[32],\"sectionSubtitle\":[32],\"sectionBtnText\":[32],\"giftDetails\":[32],\"selectImageForYourGift\":[32],\"selectImageOrUpload\":[32],\"selectGiftMessage\":[32],\"giftCustomText\":[32],\"textId\":[32],\"incorrectGiftText\":[32],\"nextStep\":[32],\"senderNameLabel\":[32],\"receiverNameFieldLabel\":[32],\"receiverMobileFieldLabel\":[32],\"receiverEmailFieldLabel\":[32],\"emailPlaceholder\":[32],\"sendLater\":[32],\"selectSendDateAndTime\":[32],\"canNotEditOrderAfterSelectDate\":[32],\"sendGift\":[32],\"donationRequired\":[32],\"step1Elems\":[32],\"step2Elems\":[32],\"stepsWrapper\":[32],\"textArea\":[32],\"imageCover\":[32],\"textSelect\":[32],\"customTextArea\":[32],\"calendarFormGroup\":[32],\"currentStep\":[32],\"showCalendar\":[32],\"showGiftText\":[32],\"currentLang\":[32],\"parentClass\":[32],\"errors\":[32],\"gift\":[32],\"selectedGiftTextOption\":[32],\"showTextArea\":[32],\"selectedImage\":[32],\"uploadedImage\":[32],\"selectedText\":[32],\"senderName\":[32],\"errorMessage\":[32],\"hasError\":[32],\"quantity\":[32],\"deliveryDate\":[32],\"timeZone\":[32],\"receiverName\":[32],\"receiverMobile\":[32],\"receiverCountryCode\":[32],\"receiverEmail\":[32],\"open\":[64],\"close\":[64],\"goToStep2\":[64]}],[4,\"salla-loyalty\",{\"prizePoints\":[8,\"prize-points\"],\"customerPoints\":[2,\"customer-points\"],\"prizeTitle\":[1,\"prize-title\"],\"allowEmail\":[4,\"allow-email\"],\"allowMobile\":[4,\"allow-mobile\"],\"requireEmail\":[4,\"require-email\"],\"guestMessage\":[1,\"guest-message\"],\"loyaltyProgram\":[32],\"buttonLoading\":[32],\"selectedItem\":[32],\"askConfirmation\":[32],\"is_loggedin\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64],\"resetExchange\":[64],\"exchangeLoyaltyPoint\":[64]}],[4,\"salla-product-size-guide\",{\"guides\":[32],\"productId\":[32],\"placeholder_title\":[32],\"placeholder_description\":[32],\"modal_title\":[32],\"hasError\":[32],\"open\":[64],\"close\":[64]}],[0,\"salla-localization-modal\",{\"language\":[1537],\"currency\":[1537],\"translationLoaded\":[32],\"languages\":[32],\"currencies\":[32],\"hasError\":[32],\"errorMessage\":[32],\"open\":[64],\"close\":[64],\"submit\":[64]}],[4,\"salla-login-modal\",{\"isEmailAllowed\":[1028,\"is-email-allowed\"],\"isMobileAllowed\":[1028,\"is-mobile-allowed\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"supportWebAuth\":[516,\"support-web-auth\"],\"currentTabName\":[32],\"regType\":[32],\"translationLoaded\":[32],\"title\":[32],\"emailErrorMsg\":[32],\"firstNameErrorMsg\":[32],\"lastNameErrorMsg\":[32],\"open\":[64]},[[8,\"verified\",\"onVerified\"]]],[0,\"salla-offer-modal\",{\"offer\":[32],\"offer_name\":[32],\"offer_message\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"showOffer\":[64]}],[0,\"salla-rating-modal\",{\"orderId\":[2,\"order-id\"],\"order\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64]}],[0,\"salla-user-settings\",{\"promotionsEnabled\":[516,\"promotions-enabled\"],\"deactivateAccount\":[32],\"promotionalMsgs\":[32],\"deactivateDesc\":[32],\"promotionalMsgsDesc\":[32],\"sorryForLeavingText\":[32],\"warningText\":[32],\"keepAccount\":[32],\"buttonLoading\":[32]}],[0,\"salla-search\",{\"inline\":[4],\"oval\":[4],\"height\":[2],\"translationLoaded\":[32],\"results\":[32],\"loading\":[32],\"typing\":[32],\"debounce\":[32],\"search_term\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[4,\"salla-social-share\",{\"url\":[513],\"urlName\":[513,\"url-name\"],\"platforms\":[16],\"opened\":[32],\"allPlatforms\":[32],\"platformIcons\":[32],\"open\":[64]}],[4,\"salla-infinite-scroll\",{\"nextPage\":[1,\"next-page\"],\"autoload\":[1028],\"container\":[1],\"item\":[1],\"loadMore\":[32],\"noMore\":[32],\"failedToLoad\":[32]}],[4,\"salla-quantity-input\",{\"quantity\":[32],\"decrease\":[64],\"increase\":[64],\"setValue\":[64]}],[0,\"salla-product-availability\",{\"channels\":[1],\"productId\":[2,\"product-id\"],\"isSubscribed\":[1028,\"is-subscribed\"],\"translationLoaded\":[32],\"title_\":[32],\"isVisitorSubscribed\":[32]}],[4,\"salla-verify\",{\"display\":[1],\"type\":[1025],\"autoReload\":[4,\"auto-reload\"],\"supportWebAuth\":[4,\"support-web-auth\"],\"translationLoaded\":[32],\"title\":[32],\"resendAfter\":[32],\"isProfileVerify\":[32],\"getCode\":[64],\"open\":[64]}],[0,\"salla-datetime-picker\",{\"value\":[1025],\"placeholder\":[1],\"allowInput\":[4,\"allow-input\"],\"allowInvalidPreload\":[4,\"allow-invalid-preload\"],\"altFormat\":[1,\"alt-format\"],\"altInput\":[4,\"alt-input\"],\"altInputClass\":[1,\"alt-input-class\"],\"appendTo\":[16],\"ariaDateFormat\":[1,\"aria-date-format\"],\"autoFillDefaultTime\":[4,\"auto-fill-default-time\"],\"clickOpens\":[4,\"click-opens\"],\"closeOnSelect\":[4,\"close-on-select\"],\"conjunction\":[1],\"dateFormat\":[1,\"date-format\"],\"defaultDate\":[8,\"default-date\"],\"defaultHour\":[2,\"default-hour\"],\"defaultMinute\":[2,\"default-minute\"],\"defaultSeconds\":[2,\"default-seconds\"],\"disable\":[16],\"disableMobile\":[4,\"disable-mobile\"],\"enable\":[16],\"enableSeconds\":[4,\"enable-seconds\"],\"enableTime\":[4,\"enable-time\"],\"formatDate\":[16],\"hourIncrement\":[2,\"hour-increment\"],\"inline\":[4],\"locale\":[1],\"maxDate\":[8,\"max-date\"],\"maxTime\":[8,\"max-time\"],\"minDate\":[8,\"min-date\"],\"minTime\":[8,\"min-time\"],\"minuteIncrement\":[2,\"minute-increment\"],\"mode\":[1],\"monthSelectorType\":[1,\"month-selector-type\"],\"nextArrow\":[1,\"next-arrow\"],\"noCalendar\":[4,\"no-calendar\"],\"onChange\":[16],\"onClose\":[16],\"onDayCreate\":[16],\"onDestroy\":[16],\"onKeyDown\":[16],\"onMonthChange\":[16],\"onOpen\":[16],\"onParseConfig\":[16],\"onReady\":[16],\"onValueUpdate\":[16],\"onYearChange\":[16],\"dateParser\":[16],\"position\":[1],\"positionElement\":[16],\"prevArrow\":[1,\"prev-arrow\"],\"shorthandCurrentMonth\":[4,\"shorthand-current-month\"],\"static\":[4],\"showMonths\":[2,\"show-months\"],\"time_24hr\":[4,\"time_-2-4hr\"],\"weekNumbers\":[4,\"week-numbers\"],\"wrap\":[4]}],[0,\"salla-file-upload\",{\"required\":[4],\"disabled\":[4],\"allowDrop\":[4,\"allow-drop\"],\"allowBrowse\":[4,\"allow-browse\"],\"allowPaste\":[4,\"allow-paste\"],\"allowMultiple\":[4,\"allow-multiple\"],\"allowReplace\":[4,\"allow-replace\"],\"allowRevert\":[4,\"allow-revert\"],\"allowRemove\":[4,\"allow-remove\"],\"allowProcess\":[4,\"allow-process\"],\"allowReorder\":[4,\"allow-reorder\"],\"storeAsFile\":[4,\"store-as-file\"],\"forceRevert\":[4,\"force-revert\"],\"maxFilesCount\":[2,\"max-files-count\"],\"maxParallelUploads\":[2,\"max-parallel-uploads\"],\"checkValidity\":[4,\"check-validity\"],\"itemInsertLocation\":[1,\"item-insert-location\"],\"itemInsertInterval\":[2,\"item-insert-interval\"],\"credits\":[4],\"dropOnPage\":[4,\"drop-on-page\"],\"dropOnElement\":[4,\"drop-on-element\"],\"dropValidation\":[4,\"drop-validation\"],\"ignoredFiles\":[16],\"serverConfig\":[1,\"server-config\"],\"instantUpload\":[4,\"instant-upload\"],\"chunkUploads\":[4,\"chunk-uploads\"],\"chunkForce\":[4,\"chunk-force\"],\"chunkSize\":[2,\"chunk-size\"],\"chunkRetryDelays\":[16],\"labelDecimalSeparator\":[1,\"label-decimal-separator\"],\"labelThousandsSeparator\":[1,\"label-thousands-separator\"],\"labelIdle\":[1,\"label-idle\"],\"labelInvalidField\":[1,\"label-invalid-field\"],\"labelFileWaitingForSize\":[1,\"label-file-waiting-for-size\"],\"labelFileSizeNotAvailable\":[1,\"label-file-size-not-available\"],\"labelFileLoading\":[1,\"label-file-loading\"],\"labelFileLoadError\":[1,\"label-file-load-error\"],\"labelFileProcessing\":[1,\"label-file-processing\"],\"labelFileProcessingComplete\":[1,\"label-file-processing-complete\"],\"labelFileProcessingAborted\":[1,\"label-file-processing-aborted\"],\"labelFileProcessingError\":[1,\"label-file-processing-error\"],\"labelFileProcessingRevertError\":[1,\"label-file-processing-revert-error\"],\"labelFileRemoveError\":[1,\"label-file-remove-error\"],\"labelTapToCancel\":[1,\"label-tap-to-cancel\"],\"labelTapToRetry\":[1,\"label-tap-to-retry\"],\"labelTapToUndo\":[1,\"label-tap-to-undo\"],\"labelButtonRemoveItem\":[1,\"label-button-remove-item\"],\"labelButtonAbortItemLoad\":[1,\"label-button-abort-item-load\"],\"labelButtonRetryItemLoad\":[1,\"label-button-retry-item-load\"],\"labelButtonAbortItemProcessing\":[1,\"label-button-abort-item-processing\"],\"labelButtonUndoItemProcessing\":[1,\"label-button-undo-item-processing\"],\"labelButtonRetryItemProcessing\":[1,\"label-button-retry-item-processing\"],\"labelButtonProcessItem\":[1,\"label-button-process-item\"],\"iconRemove\":[1,\"icon-remove\"],\"iconProcess\":[1,\"icon-process\"],\"iconRetry\":[1,\"icon-retry\"],\"iconUndo\":[1,\"icon-undo\"],\"pond\":[32],\"files\":[32],\"appendFile\":[64]}],[0,\"salla-rating-stars\",{\"name\":[1],\"size\":[1],\"value\":[2]}],[4,\"salla-swiper\",{\"loop\":[4],\"speed\":[2],\"itemPerView\":[8,\"item-per-view\"],\"spaceBetweenItems\":[2,\"space-between-items\"],\"currentIndex\":[32],\"isLastSlideItem\":[32],\"isFirstSlideItem\":[32]}],[4,\"salla-tab-content\",{\"name\":[1],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tab-header\",{\"name\":[1],\"activeClass\":[1,\"active-class\"],\"height\":[8],\"centered\":[4],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tabs\",{\"backgroundColor\":[1,\"background-color\"],\"vertical\":[4]},[[0,\"tabSelected\",\"onSelectedTab\"]]],[4,\"salla-list-tile\",{\"href\":[1],\"target\":[1]}],[0,\"salla-tel-input\",{\"phone\":[1025],\"name\":[1],\"countryCode\":[1025,\"country-code\"],\"mobileRequired\":[32],\"countryCodeLabel\":[32],\"mobileLabel\":[32],\"tooShort\":[32],\"tooLong\":[32],\"invalidCountryCode\":[32],\"invalidNumber\":[32],\"errorMap\":[32],\"getValues\":[64],\"isValid\":[64]}],[4,\"salla-placeholder\",{\"icon\":[1],\"alignment\":[1],\"iconSize\":[1,\"icon-size\"],\"translationLoaded\":[32]}],[0,\"salla-skeleton\",{\"type\":[1],\"width\":[1],\"height\":[1]}],[4,\"salla-modal\",{\"isClosable\":[1028,\"is-closable\"],\"width\":[513],\"position\":[513],\"visible\":[516],\"hasSkeleton\":[516,\"has-skeleton\"],\"isLoading\":[1540,\"is-loading\"],\"subTitleFirst\":[4,\"sub-title-first\"],\"noPadding\":[4,\"no-padding\"],\"subTitle\":[1,\"sub-title\"],\"centered\":[4],\"iconStyle\":[1,\"icon-style\"],\"modalTitle\":[32],\"open\":[64],\"close\":[64],\"setTitle\":[64],\"loading\":[64],\"stopLoading\":[64]},[[0,\"keyup\",\"handleKeyUp\"]]],[4,\"salla-button\",{\"shape\":[513],\"color\":[513],\"fill\":[513],\"size\":[513],\"width\":[513],\"loading\":[516],\"disabled\":[516],\"loaderPosition\":[1,\"loader-position\"],\"href\":[1],\"load\":[64],\"stop\":[64],\"setText\":[64],\"disable\":[64],\"enable\":[64]}],[0,\"salla-loading\",{\"size\":[8],\"width\":[8],\"color\":[1],\"bgColor\":[1,\"bg-color\"]}]]],[\"salla-scopes.cjs\",[[4,\"salla-scopes\",{\"selection\":[1],\"searchDisplayLimit\":[2,\"search-display-limit\"],\"translationLoaded\":[32],\"mode\":[32],\"current_scope\":[32],\"scopes\":[32],\"originalScopesList\":[32],\"selected_scope\":[32],\"isOpenedBefore\":[32],\"hasError\":[32],\"close\":[64],\"open\":[64],\"handleSubmit\":[64]}]]],[\"salla-add-product-button.cjs\",[[4,\"salla-add-product-button\",{\"channels\":[513],\"quantity\":[514],\"donatingAmount\":[514,\"donating-amount\"],\"productId\":[520,\"product-id\"],\"productStatus\":[513,\"product-status\"],\"productType\":[513,\"product-type\"]}]]],[\"salla-conditional-fields.cjs\",[[4,\"salla-conditional-fields\",null,[[0,\"change\",\"changeHandler\"]]]]],[\"salla-installment.cjs\",[[0,\"salla-installment\",{\"price\":[1],\"language\":[1],\"currency\":[1],\"tamaraIsActive\":[32],\"tabbyIsActive\":[32],\"spotiiIsActive\":[32]}]]],[\"salla-loyalty-prize-item.cjs\",[[0,\"salla-loyalty-prize-item\",{\"item\":[16]}]]],[\"salla-select.cjs\",[[0,\"salla-select\",{\"label\":[1],\"items\":[16],\"itemText\":[1,\"item-text\"],\"itemValue\":[1,\"item-value\"],\"itemDisabled\":[1,\"item-disabled\"],\"size\":[1],\"value\":[1032],\"autofocus\":[4],\"clearable\":[4],\"clearIcon\":[1,\"clear-icon\"],\"color\":[1],\"flat\":[4],\"disabled\":[4],\"loading\":[4],\"loadingColor\":[1,\"loading-color\"],\"hint\":[1],\"persistHint\":[4,\"persist-hint\"],\"placeholder\":[1],\"multiple\":[4],\"autocomplete\":[4],\"required\":[4],\"chips\":[4],\"shape\":[1],\"returnObject\":[4,\"return-object\"],\"hideDetail\":[4,\"hide-detail\"]}]]]]"), options);
 });

package/dist/collection/Helpers/Helper.js

@@ -4,6 +4,22 @@
 //TODO::check why there are too much listeners for languages::translations.loaded
 salla.event.setMaxListeners(20);
 class Helper {
+  toggleElementClassIf(element, classes1, classes2, callback) {
+    classes1 = Array.isArray(classes1) ? classes1 : classes1.split(' ');
+    classes2 = Array.isArray(classes2) ? classes2 : classes2.split(' ');
+    let isClasses1 = callback(element);
+    element === null || element === void 0 ? void 0 : element.classList.remove(...(isClasses1 ? classes2 : classes1));
+    element === null || element === void 0 ? void 0 : element.classList.add(...(isClasses1 ? classes1 : classes2));
+    return this;
+  }
+  toggleClassIf(selector, classes1, classes2, callback) {
+    document.querySelectorAll(selector).forEach(element => this.toggleElementClassIf(element, classes1, classes2, callback));
+    return this;
+  }
+  isValidEmail(email) {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
+  }
   debounce(fn, ...data) {
     if (!this.debounce_) {
       this.debounce_ = Salla.helpers.debounce((callback, ...innerData) => callback(...innerData), 500);

package/dist/collection/collection-manifest.json

@@ -32,6 +32,7 @@
     "./components/salla-tabs/salla-tab-header.js",
     "./components/salla-tabs/salla-tabs.js",
     "./components/salla-tel-input/salla-tel-input.js",
+    "./components/salla-user-settings/salla-user-settings.js",
     "./components/salla-verify/salla-verify.js"
   ],
   "compiler": {

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import Helper from '../../Helpers/Helper';
 /**
  */
 export class SallaInfiniteScroll {
@@ -41,7 +42,7 @@ export class SallaInfiniteScroll {
   }
   loading(isLoading = true) {
     let btnText = this.status.querySelector('.s-button-text');
-    salla.helpers.app.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
     this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
   }
   render() {

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

@@ -7,6 +7,7 @@ import PhoneIcon from "../../assets/svg/phone.svg";
 import EmailIcon from "../../assets/svg/mail.svg";
 import KeyboardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
 import ArrowRightIcon from "../../assets/svg/arrow-right.svg";
+import Helper from '../../Helpers/Helper';
 /**
  * @slot footer - The footer of modal
  * @slot before-login-type - placeholder position
@@ -57,7 +58,7 @@ export class SallaLoginModal {
     };
     this.loginByEmail = (event = null) => {
       event === null || event === void 0 ? void 0 : event.preventDefault();
-      if (!salla.helpers.app.isValidEmail(this.loginEmail.value)) {
+      if (!Helper.isValidEmail(this.loginEmail.value)) {
         this.validateField(this.loginEmail, this.emailErrorMsg);
         return;
       }
@@ -191,7 +192,7 @@ export class SallaLoginModal {
       .finally(() => btn.stop() && btn.enable());
   }
   async newUserValidation() {
-    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = salla.helpers.app.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
+    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
     if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
       return;
     !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);

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

@@ -5,6 +5,7 @@ import { Component, Element, h, Host, Method, Prop, State, Watch, Event, Listen
 import CancelIcon from '../../assets/svg/cancel.svg';
 import AlertEngineIcon from '../../assets/svg/alert-engine.svg';
 import CheckCircleIcon from '../../assets/svg/check-circle2.svg';
+import Helper from '../../Helpers/Helper';
 /**
  * @slot footer - The footer of modal
  */
@@ -111,7 +112,7 @@ export class SallaModal {
   }
   toggleModal(isOpen) {
     const body = this.host.querySelector('.s-modal-body');
-    salla.helpers.app.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
@@ -166,9 +167,9 @@ export class SallaModal {
                   h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircleIcon })
                   : ''),
                 h("div", { class: "s-modal-header-content" },
-                  h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }),
-                  h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
-              : ""),
+                  this.modalTitle ? h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }) : '',
+                  this.subTitle ? h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }) : ''))
+              : ''),
           h("slot", null),
           h("slot", { name: "footer" })))));
   }

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

@@ -3,6 +3,7 @@
  */
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import BellRingIcon from '../../assets/svg/bell-ring.svg';
+import Helper from '../../Helpers/Helper';
 export class SallaProductAvailability {
   constructor() {
     this.isUser = salla.config.isUser();
@@ -68,7 +69,7 @@ export class SallaProductAvailability {
   async validateform() {
     try {
       if (this.channels_.includes('email')) {
-        const isEmailValid = salla.helpers.app.isValidEmail(this.email.value);
+        const isEmailValid = Helper.isValidEmail(this.email.value);
         if (isEmailValid)
           return;
         !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));

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

@@ -1,7 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Host, State, Method, Element, h } from '@stencil/core';
+import { Component, State, Method, Element, h } from '@stencil/core';
+import PencilRuler from "../../assets/svg/pencil-ruler.svg";
 export class SallaProductSizeGuide {
   constructor() {
     this.hasError = false;
@@ -44,36 +45,37 @@ export class SallaProductSizeGuide {
       h("div", { slot: "description" }, this.placeholder_description));
   }
   render() {
-    return (h(Host, { class: "s-product-size-guide-block" },
-      h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal },
-        h("div", { slot: "loading" },
-          h("div", { class: "s-product-size-guide-skeleton" },
+    return (h("salla-modal", { 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", { slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }),
+      h("div", { slot: "loading" },
+        h("div", { class: "s-product-size-guide-skeleton" },
+          h("salla-skeleton", { height: '15px', width: '25%' }),
+          h("div", { class: "s-product-size-guide-skeleton-header" },
+            h("salla-skeleton", { height: '40px' }),
+            h("salla-skeleton", { height: '40px' }),
+            h("salla-skeleton", { height: '40px' }),
+            h("salla-skeleton", { height: '40px' })),
+          h("div", { class: "s-product-size-guide-skeleton-content" },
             h("salla-skeleton", { height: '15px', width: '25%' }),
-            h("div", { class: "s-product-size-guide-skeleton-header" },
-              h("salla-skeleton", { height: '40px' }),
-              h("salla-skeleton", { height: '40px' }),
-              h("salla-skeleton", { height: '40px' }),
-              h("salla-skeleton", { height: '40px' })),
-            h("div", { class: "s-product-size-guide-skeleton-content" },
-              h("salla-skeleton", { height: '15px', width: '25%' }),
-              h("salla-skeleton", { height: '10px', width: '75%' }),
-              h("salla-skeleton", { height: '10px', width: '50%' }),
-              h("salla-skeleton", { height: '10px', width: '75%' }),
-              h("salla-skeleton", { height: '10px', width: '100%' }),
-              h("salla-skeleton", { height: '10px', width: '25%' }),
-              h("salla-skeleton", { height: '10px', width: '60%' }),
-              h("salla-skeleton", { height: '10px', width: '45%' }),
-              h("salla-skeleton", { height: '10px', width: '30%' })))),
-        h("slot", { name: "header" }),
-        !this.hasError && !!this.guides ?
-          [h("div", { class: "container px-8" },
-              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", { name: "footer" }))));
+            h("salla-skeleton", { height: '10px', width: '75%' }),
+            h("salla-skeleton", { height: '10px', width: '50%' }),
+            h("salla-skeleton", { height: '10px', width: '75%' }),
+            h("salla-skeleton", { height: '10px', width: '100%' }),
+            h("salla-skeleton", { height: '10px', width: '25%' }),
+            h("salla-skeleton", { height: '10px', width: '60%' }),
+            h("salla-skeleton", { height: '10px', width: '45%' }),
+            h("salla-skeleton", { height: '10px', width: '30%' })))),
+      h("slot", { 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", { name: "footer" })));
   }
   static get is() { return "salla-product-size-guide"; }
   static get originalStyleUrls() { return {