@salla.sa/twilight-components 1.5.9 → 1.5.11

package/README.md

@@ -94,9 +94,14 @@ Twilight Web Components are maintained by a full-time core team and a large comm
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
+> #### Things to know:
+> It's worth noting that the [Tailwind CSS Framework](https://tailwindcss.com/) is the default foundation for the **Twilight web components**.There is a possibility that future plans may include other CSS frameworks.
+
 ## Installation
 
-Installing the JS Web Components can be done by running the following commands in the command line:
+To use the components, developers need to load a CSS file and some JavaScript. The CSS file includes the fonts and design tokens.
+
+You need Node.js and Tailwind CSS installed, then install the components by performing one of the following commands:
 
 
 ```npm title="NPM Installation Command"
@@ -107,39 +112,55 @@ npm install @salla.sa/twilight-components --save
 yarn add @salla.sa/twilight-components
 ```
 
-Then base in the usage the import of the components to the `scss/js` files
+And then in your javascript codebase you can import it as follows:
 
-```SCSS title="Import Command"
-@import "~@salla.sa/twilight-components/dist/twilight-components/twilight-components";
-```
 
 ```JS title="Import Command"
 import {
   applyPolyfills, 
-  defineCustomElements as SallaWebComponents
+  defineCustomElements as TwilightWebComponents
 } from '@salla.sa/twilight-components/loader';
 
 applyPolyfills().then(() => {
-    SallaWebComponents(window);
+    TwilightWebComponents(window);
 });
 ```
 
-Another common approach for loading Twilight Components is to use the version hosted on the CDN. The components can be loaded via `<script>` and `<link>` tags in the head of the HTML document
+Now you can adding twilight tainwind theme to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js"
+ ...
+ plugins: [
+      ...
+      require('@salla.sa/twilight-tailwind-theme'),
+      ...
+]
+ ...
+```
+
+<br />
+
+### JIT Enabled
 
+**Tailwind** added a [just-in-time compiler](https://v2.tailwindcss.com/docs/just-in-time-mode), which generates styles as the developer writes the theme rather than generating everything in advance at initial build time.
 
-```html title="Code Snippet"
-<script
-  type="module"
-  src="https://unpkg.com/@esri/calcite-components@1.0.0-beta.80/dist/calcite/calcite.esm.js"
-></script>
+Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the `content` option in your `tailwind.config.js` file with all of your template paths, otherwise your CSS will be empty
 
-<link
-  rel="stylesheet"
-  type="text/css"
-  href="https://unpkg.com/@esri/calcite-components@1.0.0-beta.80/dist/calcite/calcite.css"
-/>
+
+```js title="tailwind.config.js"
+...
+  content: [
+    // theme views
+    "views/**/*.twig",
+    // list of classes which required by twilight web components
+    "node_modules/@salla.sa/twilight-tailwind-theme/safe-list-css.txt"
+  ],
+...
 ```
 
+> Previously, as [mentioned](https://salla.stoplight.io/studio/twilight-themes-documentation?#config-files) that the file `tailwind.config.js` is already bundled with the **Twilight starter theme** files.
+
+<!-- type: tab-end -->
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 ## Usage

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d43334bf.js');
+const index = require('./index-0d0167d5.js');
 
 /*
  Stencil Client Patch Esm v2.17.4 | MIT Licensed | https://stenciljs.com

package/dist/cjs/salla-add-product-button.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d43334bf.js');
+const index = require('./index-0d0167d5.js');
 
 const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
 

package/dist/cjs/salla-button_24.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-d43334bf.js');
+const index$1 = require('./index-0d0167d5.js');
 const search = require('./search-b487cc49.js');
 
 const sallaButtonCss = "";
@@ -455,8 +455,9 @@ const SallaLoginModal = class {
     this.loginBySMS = async () => {
       const { phone, countryCode } = await this.loginTelInput.getValues();
       const isPhoneValid = await this.loginTelInput.isValid();
-      if (!isPhoneValid)
+      if (!isPhoneValid) {
         return;
+      }
       this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
     };
     this.loginByEmail = () => {
@@ -483,7 +484,10 @@ const SallaLoginModal = class {
       this.verifyTab.getCode()
         .then(code => salla.auth.api.register(Object.assign(Object.assign({}, data), { code })))
         .then(() => salla.auth.canRedirect && window.location.reload())
-        .catch(() => this.regBtn.stop() && this.regBtn.enable());
+        .catch((error) => {
+        salla.logger.error(error);
+        this.regBtn.stop() && this.regBtn.enable();
+      });
     };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
@@ -3248,6 +3252,7 @@ const SallaSocialShare = class {
       const script = document.createElement('script');
       script.src = 'https://static.addtoany.com/menu/page.js';
       script.setAttribute('id', 'a2a-script');
+      script.async = true;
       script.onload = function () {
         // ? this will not work if there is one share component in the page
         window.a2a_config = window.a2a_config || {};
@@ -3302,11 +3307,6 @@ const SallaSocialShare = class {
       }))));
     }))));
   }
-  componentDidLoad() {
-    var script = document.createElement('script');
-    script.setAttribute('src', 'https://static.addtoany.com/menu/page.js');
-    document.head.appendChild(script);
-  }
 };
 SallaSocialShare.style = sallaSocialShareCss;
 
@@ -9895,12 +9895,13 @@ const SallaTelInput = class {
       return true;
     if (!this.phoneInput.value.trim()) {
       this.phoneInput.classList.add("s-has-error");
-      this.errorMsg.innerText = this.mobileRequired || '';
+      this.errorMsg.innerText = this.mobileRequired || 'The mobile is required';
       return;
     }
     this.phoneInput.classList.add("s-has-error");
     let errorCode = this.iti.getValidationError();
     this.errorMsg.innerText = this.errorMap[errorCode] || '';
+    salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + errorCode);
     return false;
   }
   initTelInput() {
@@ -9982,6 +9983,7 @@ const SallaVerify = class {
       this.modal = { open: () => '', close: () => '', setTitle: () => '' };
       return;
     }
+    //salla.profile.event.verificationCodeSent({});
     salla.event.on('profile::verification', data => {
       var _a;
       this.isProfileVerify = true;
@@ -10047,11 +10049,11 @@ const SallaVerify = class {
     this.otpInputs.forEach(input => input.value && otp.push(input.value));
     this.code.value = otp.join('');
     if (otp.length === 4) {
-      this.btn.removeAttribute('disabled');
+      this.btn.disable();
       this.btn.click();
       return;
     }
-    this.btn.setAttribute('disabled', '');
+    this.btn.enable();
   }
   reset() {
     this.otpInputs.forEach((input) => input.value = '');
@@ -10091,14 +10093,17 @@ const SallaVerify = class {
       .then(() => this.btn.stop() && this.btn.disable())
       .then(() => this.modal.close())
       .then(() => this.autoReload && window.location.reload())
-      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
+      .catch((error) => {
+      salla.logger.error(error);
+      this.btn.stop() && this.btn.enable() && this.reset();
+    });
   }
   render() {
     return this.display == 'inline' ? index$1.h(index$1.Host, null, this.myBody()) :
       index$1.h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, index$1.h("span", { slot: 'icon', innerHTML: AndroidPhoneIcon }), this.myBody());
   }
   myBody() {
-    return (index$1.h("div", { class: "s-verify-body", ref: body => this.body = body }, index$1.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index$1.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index$1.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index$1.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), index$1.h("div", { slot: "footer", class: "s-verify-footer" }, index$1.h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index$1.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index$1.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index$1.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index$1.h("slot", { name: "after-footer" })));
+    return (index$1.h("div", { class: "s-verify-body", ref: body => this.body = body }, index$1.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index$1.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index$1.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index$1.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), index$1.h("div", { slot: "footer", class: "s-verify-footer" }, index$1.h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index$1.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index$1.h("b", { class: "s-verify-timer", ref: el => this.timer = el }), "          "), index$1.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index$1.h("slot", { name: "after-footer" })));
   }
   get host() { return index$1.getElement(this); }
 };

package/dist/cjs/salla-conditional-fields.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d43334bf.js');
+const index = require('./index-0d0167d5.js');
 
 const SallaConditionalFields = class {
   constructor(hostRef) {

package/dist/cjs/salla-installment.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d43334bf.js');
+const index = require('./index-0d0167d5.js');
 
 const sallaInstallmentCss = "#tabbyPromoWrapper{background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--color-text);font-size:var(--font-sm);line-height:1.25;padding:18px 20px 18px 100px !important;background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px;top:18px;margin:0 !important}.ltr .tamara-product-widget .tamara-logo{right:20px;left:auto}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}";
 
@@ -22,7 +22,7 @@ const SallaInstallment = class {
      * Currency code
      */
     this.currency = salla.config.get('user.currency_code');
-    salla.onReady(() => {
+    document.addEventListener('twilight::ready', () => {
       const installment = salla.config.get('store.settings.installments');
       if (installment) {
         this.tamaraIsActive = installment.indexOf('tamara_installment') != -1;

package/dist/cjs/salla-scopes.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d43334bf.js');
+const index = require('./index-0d0167d5.js');
 const search = require('./search-b487cc49.js');
 
 const StoreAlt = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/twilight-components.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-d43334bf.js');
+const index = require('./index-0d0167d5.js');
 
 /*
  Stencil Client Patch Browser v2.17.4 | MIT Licensed | https://stenciljs.com

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

@@ -14,7 +14,7 @@ export class SallaInstallment {
      * Currency code
      */
     this.currency = salla.config.get('user.currency_code');
-    salla.onReady(() => {
+    document.addEventListener('twilight::ready', () => {
       const installment = salla.config.get('store.settings.installments');
       if (installment) {
         this.tamaraIsActive = installment.indexOf('tamara_installment') != -1;

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

@@ -43,8 +43,9 @@ export class SallaLoginModal {
     this.loginBySMS = async () => {
       const { phone, countryCode } = await this.loginTelInput.getValues();
       const isPhoneValid = await this.loginTelInput.isValid();
-      if (!isPhoneValid)
+      if (!isPhoneValid) {
         return;
+      }
       this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
     };
     this.loginByEmail = () => {
@@ -71,7 +72,10 @@ export class SallaLoginModal {
       this.verifyTab.getCode()
         .then(code => salla.auth.api.register(Object.assign(Object.assign({}, data), { code })))
         .then(() => salla.auth.canRedirect && window.location.reload())
-        .catch(() => this.regBtn.stop() && this.regBtn.enable());
+        .catch((error) => {
+        salla.logger.error(error);
+        this.regBtn.stop() && this.regBtn.enable();
+      });
     };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');

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

@@ -35,6 +35,7 @@ export class SallaSocialShare {
       const script = document.createElement('script');
       script.src = 'https://static.addtoany.com/menu/page.js';
       script.setAttribute('id', 'a2a-script');
+      script.async = true;
       script.onload = function () {
         // ? this will not work if there is one share component in the page
         window.a2a_config = window.a2a_config || {};
@@ -94,11 +95,6 @@ export class SallaSocialShare {
           }))));
       }))));
   }
-  componentDidLoad() {
-    var script = document.createElement('script');
-    script.setAttribute('src', 'https://static.addtoany.com/menu/page.js');
-    document.head.appendChild(script);
-  }
   static get is() { return "salla-social-share"; }
   static get originalStyleUrls() { return {
     "$": ["salla-social-share.scss"]

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

@@ -53,12 +53,13 @@ export class SallaTelInput {
       return true;
     if (!this.phoneInput.value.trim()) {
       this.phoneInput.classList.add("s-has-error");
-      this.errorMsg.innerText = this.mobileRequired || '';
+      this.errorMsg.innerText = this.mobileRequired || 'The mobile is required';
       return;
     }
     this.phoneInput.classList.add("s-has-error");
     let errorCode = this.iti.getValidationError();
     this.errorMsg.innerText = this.errorMap[errorCode] || '';
+    salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + errorCode);
     return false;
   }
   initTelInput() {

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

@@ -39,6 +39,7 @@ export class SallaVerify {
       this.modal = { open: () => '', close: () => '', setTitle: () => '' };
       return;
     }
+    //salla.profile.event.verificationCodeSent({});
     salla.event.on('profile::verification', data => {
       var _a;
       this.isProfileVerify = true;
@@ -104,11 +105,11 @@ export class SallaVerify {
     this.otpInputs.forEach(input => input.value && otp.push(input.value));
     this.code.value = otp.join('');
     if (otp.length === 4) {
-      this.btn.removeAttribute('disabled');
+      this.btn.disable();
       this.btn.click();
       return;
     }
-    this.btn.setAttribute('disabled', '');
+    this.btn.enable();
   }
   reset() {
     this.otpInputs.forEach((input) => input.value = '');
@@ -148,7 +149,10 @@ export class SallaVerify {
       .then(() => this.btn.stop() && this.btn.disable())
       .then(() => this.modal.close())
       .then(() => this.autoReload && window.location.reload())
-      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
+      .catch((error) => {
+      salla.logger.error(error);
+      this.btn.stop() && this.btn.enable() && this.reset();
+    });
   }
   render() {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
@@ -165,7 +169,8 @@ export class SallaVerify {
         h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')),
         h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el },
           salla.lang.get('blocks.header.resend_after'),
-          h("b", { class: "s-verify-timer", ref: el => this.timer = el })),
+          h("b", { class: "s-verify-timer", ref: el => this.timer = el }),
+          "          "),
         h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
       h("slot", { name: "after-footer" })));
   }

package/dist/collection/global/app.js

@@ -1,7 +1,6 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import "../../assets/translations.js";
 import '@salla.sa/twilight/dist/cjs/index';
 export default function () {
   salla.init({
@@ -23,8 +22,12 @@ export default function () {
     },
   });
   // this is required to bypass cloudflare in stage
-  salla.api.defaults.headers.common['CF-Access-Client-Id'] = '2db165f2f48c6b43320719d5d17ef7cf.access';
-  salla.api.defaults.headers.common['CF-Access-Client-Secret'] = 'f01a3100d5d93a04bb6f052b73032cce167ca94b5ade49880ccff1f94d03dc9c';
-  salla.api.defaults.headers.common['Store-Identifier'] = '1632654914';
-  salla.api.defaults.headers.common['Authorization'] = `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3dlYi0yNmMzY2QzNWFkZDM0NjhmYzE4OWM3MTRiZDFhMTM0NS5zYWxsYS5ncm91cC9hcGkvdjEvYXV0aC9tb2JpbGUvdmVyaWZ5IiwiaWF0IjoxNjU4MDU4NzQxLCJleHAiOjE2NTg2NjM1NDEsIm5iZiI6MTY1ODA1ODc0MSwianRpIjoic1Zvd1FoMm9iZkx1UzJRRiIsInN1YiI6NTk5NDYsInBydiI6ImRmZWNiMzFmOTExZmYyNTQyNzU5MWI2ZjQ3YWQzOGE5NTE2OWM0ZWMifQ.HGd9aRqwGFi-24cDyYyVK7N6iNJ4hl98vz2LX7oKhfw`;
+  if (salla.api.axios) {
+    salla.api.axios.defaults.headers.common['CF-Access-Client-Id'] = '2db165f2f48c6b43320719d5d17ef7cf.access';
+    salla.api.axios.defaults.headers.common['CF-Access-Client-Secret'] = '';
+  }
+  else {
+    salla.api.defaults.headers.common['CF-Access-Client-Id'] = '2db165f2f48c6b43320719d5d17ef7cf.access';
+    salla.api.defaults.headers.common['CF-Access-Client-Secret'] = '';
+  }
 }

package/dist/components/salla-installment.js

@@ -19,7 +19,7 @@ const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
      * Currency code
      */
     this.currency = salla.config.get('user.currency_code');
-    salla.onReady(() => {
+    document.addEventListener('twilight::ready', () => {
       const installment = salla.config.get('store.settings.installments');
       if (installment) {
         this.tamaraIsActive = installment.indexOf('tamara_installment') != -1;

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

@@ -54,8 +54,9 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.loginBySMS = async () => {
       const { phone, countryCode } = await this.loginTelInput.getValues();
       const isPhoneValid = await this.loginTelInput.isValid();
-      if (!isPhoneValid)
+      if (!isPhoneValid) {
         return;
+      }
       this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
     };
     this.loginByEmail = () => {
@@ -82,7 +83,10 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this.verifyTab.getCode()
         .then(code => salla.auth.api.register(Object.assign(Object.assign({}, data), { code })))
         .then(() => salla.auth.canRedirect && window.location.reload())
-        .catch(() => this.regBtn.stop() && this.regBtn.enable());
+        .catch((error) => {
+        salla.logger.error(error);
+        this.regBtn.stop() && this.regBtn.enable();
+      });
     };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');

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

@@ -1386,6 +1386,7 @@ const SallaSocialShare$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       const script = document.createElement('script');
       script.src = 'https://static.addtoany.com/menu/page.js';
       script.setAttribute('id', 'a2a-script');
+      script.async = true;
       script.onload = function () {
         // ? this will not work if there is one share component in the page
         window.a2a_config = window.a2a_config || {};
@@ -1440,11 +1441,6 @@ const SallaSocialShare$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       }))));
     }))));
   }
-  componentDidLoad() {
-    var script = document.createElement('script');
-    script.setAttribute('src', 'https://static.addtoany.com/menu/page.js');
-    document.head.appendChild(script);
-  }
   static get style() { return sallaSocialShareCss; }
 }, [4, "salla-social-share", {
     "url": [513],

package/dist/components/salla-tel-input2.js

@@ -1431,12 +1431,13 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return true;
     if (!this.phoneInput.value.trim()) {
       this.phoneInput.classList.add("s-has-error");
-      this.errorMsg.innerText = this.mobileRequired || '';
+      this.errorMsg.innerText = this.mobileRequired || 'The mobile is required';
       return;
     }
     this.phoneInput.classList.add("s-has-error");
     let errorCode = this.iti.getValidationError();
     this.errorMsg.innerText = this.errorMap[errorCode] || '';
+    salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + errorCode);
     return false;
   }
   initTelInput() {

package/dist/components/salla-verify2.js

@@ -50,6 +50,7 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.modal = { open: () => '', close: () => '', setTitle: () => '' };
       return;
     }
+    //salla.profile.event.verificationCodeSent({});
     salla.event.on('profile::verification', data => {
       var _a;
       this.isProfileVerify = true;
@@ -115,11 +116,11 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.otpInputs.forEach(input => input.value && otp.push(input.value));
     this.code.value = otp.join('');
     if (otp.length === 4) {
-      this.btn.removeAttribute('disabled');
+      this.btn.disable();
       this.btn.click();
       return;
     }
-    this.btn.setAttribute('disabled', '');
+    this.btn.enable();
   }
   reset() {
     this.otpInputs.forEach((input) => input.value = '');
@@ -159,14 +160,17 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       .then(() => this.btn.stop() && this.btn.disable())
       .then(() => this.modal.close())
       .then(() => this.autoReload && window.location.reload())
-      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
+      .catch((error) => {
+      salla.logger.error(error);
+      this.btn.stop() && this.btn.enable() && this.reset();
+    });
   }
   render() {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
       h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', innerHTML: AndroidPhoneIcon }), this.myBody());
   }
   myBody() {
-    return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
+    return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el }), "          "), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
   }
   get host() { return this; }
   static get style() { return sallaVerifyCss; }

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { p as promiseResolve, b as bootstrapLazy } from './index-c78562f8.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-4e30ffd0.js';
 
 /*
  Stencil Client Patch Esm v2.17.4 | MIT Licensed | https://stenciljs.com

package/dist/esm/salla-add-product-button.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c78562f8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4e30ffd0.js';
 
 const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";