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

package/dist/components/salla-modal2.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as Cancel } from './cancel.js';
+import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$1 } from './salla-loading2.js';
 
 const AlertEngineIcon = `<!-- Generated by IcoMoon.io -->
@@ -127,7 +128,7 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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) {
@@ -163,8 +164,8 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       : '', this.modalTitle || this.subTitle ?
       h("div", { class: "s-modal-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
         h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
-        : ''), 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 })))
-      : ""), h("slot", null), h("slot", { name: "footer" })))));
+        : ''), h("div", { class: "s-modal-header-content" }, 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" })))));
   }
   //move the modal as root dom, because we need the model to be outside the forms
   componentDidLoad() {

package/dist/components/salla-product-availability2.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$4 } from './salla-button2.js';
 import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
@@ -83,7 +84,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
   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/components/salla-product-size-guide.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$8 } from './salla-loading2.js';
 import { d as defineCustomElement$7 } from './salla-modal2.js';
 import { d as defineCustomElement$6 } from './salla-placeholder2.js';
@@ -10,6 +10,13 @@ import { d as defineCustomElement$4 } from './salla-tab-content2.js';
 import { d as defineCustomElement$3 } from './salla-tab-header2.js';
 import { d as defineCustomElement$2 } from './salla-tabs2.js';
 
+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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -54,9 +61,11 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
   }
   render() {
-    return (h(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" }, 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" }))));
+    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("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" })));
   }
   get host() { return this; }
   static get style() { return sallaProductSizeGuideCss; }

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

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
 
 const Add = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -17,19 +18,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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -49,7 +37,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     if (!this.didLoaded) {
       return;
     }
-    Helper$1.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));
+    Helper.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));
   }
   componentWillLoad() {
     this.quantity = parseInt(this.host.getAttribute('value')) || 1;

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

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { C as CheckCircle2, d as defineCustomElement$4 } from './salla-modal2.js';
+import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$6 } from './salla-button2.js';
 import { d as defineCustomElement$5 } from './salla-loading2.js';
 import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
@@ -79,12 +80,12 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   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.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.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.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;
@@ -94,7 +95,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    salla.helpers.app.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -105,7 +106,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       .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.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -130,7 +131,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       return;
     }
     type = type || rating['dataset'].type;
-    salla.helpers.app.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
+    Helper.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)', '');

package/dist/components/salla-rating-stars2.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { S as Star2 } from './star2.js';
+import { H as Helper } from './Helper.js';
 
 const sallaRatingStarsCss = "";
 
@@ -32,7 +33,7 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       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.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');

package/dist/components/salla-search.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { S as Search } from './search.js';
+import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 
@@ -80,7 +81,7 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   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)
@@ -91,7 +92,7 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   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.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') : '';

package/dist/components/salla-user-settings.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaUserSettings extends Components.SallaUserSettings, HTMLElement {}
+export const SallaUserSettings: {
+  prototype: SallaUserSettings;
+  new (): SallaUserSettings;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,118 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-list-tile2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    // 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 (h(Host, { class: "s-user-settings-wrapper" }, h("div", { class: "s-user-settings-section" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: Bullhorn })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { slot: 'action', class: "s-user-settings-section-action" }, h("label", { class: "s-toggle" }, h("input", { class: "s-toggle-input", checked: this.promotionsEnabled, onChange: (e) => this.toggleNotification(e), type: "checkbox" }), h("div", { class: "s-toggle-switcher" }))))), h("div", { class: "s-user-settings-section" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: UserOff })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { shape: "link", color: "danger", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { class: "s-user-settings-confirmation" }, h("div", { class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { class: "s-user-settings-confirmation-actions" }, h("salla-button", { width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+  }
+  static get style() { return sallaUserSettingsCss; }
+}, [0, "salla-user-settings", {
+    "promotionsEnabled": [516, "promotions-enabled"],
+    "deactivateAccount": [32],
+    "promotionalMsgs": [32],
+    "deactivateDesc": [32],
+    "promotionalMsgsDesc": [32],
+    "sorryForLeavingText": [32],
+    "warningText": [32],
+    "keepAccount": [32],
+    "buttonLoading": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-user-settings", "salla-button", "salla-list-tile", "salla-loading", "salla-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-user-settings":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaUserSettings$1);
+      }
+      break;
+    case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "salla-list-tile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaUserSettings = SallaUserSettings$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaUserSettings, defineCustomElement };

package/dist/components/salla-verify2.js

@@ -129,12 +129,14 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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`;

package/dist/esm/index-0ce70ad2.js

@@ -1881,10 +1881,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
       }
       switch(bundleId) {
         
-        case 'salla-button_27':
+        case 'salla-button_28':
           return import(
             /* webpackMode: "lazy" */
-            './salla-button_27.entry.js').then(processMod, consoleError);
+            './salla-button_28.entry.js').then(processMod, consoleError);
         case 'salla-add-product-button':
           return import(
             /* webpackMode: "lazy" */