@salla.sa/twilight-components 1.0.49 → 1.0.51

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"salla-login",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]],[0,"salla-localization",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button.cjs",[[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-modal_2.cjs",[[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -1,15 +1,15 @@
 {
   "entries": [
-    "./components/salla-login/salla-login.js",
+    "./components/salla-login-modal/salla-login-modal.js",
     "./components/salla-search/salla-search.js",
     "./components/salla-branches/salla-branches.js",
     "./components/salla-button/salla-button.js",
     "./components/salla-infinite-scroll/salla-infinite-scroll.js",
-    "./components/salla-localization/salla-localization.js",
+    "./components/salla-localization-modal/salla-localization-modal.js",
     "./components/salla-modal/salla-modal.js",
-    "./components/salla-offer/salla-offer.js",
+    "./components/salla-offer-modal/salla-offer-modal.js",
     "./components/salla-product-availability/salla-product-availability.js",
-    "./components/salla-rating/salla-rating.js",
+    "./components/salla-rating-modal/salla-rating-modal.js",
     "./components/salla-tel-input/salla-tel-input.js",
     "./components/salla-verify-modal/salla-verify-modal.js"
   ],

package/dist/collection/components/{salla-localization/salla-localization.js → salla-localization-modal/salla-localization-modal.js}

@@ -6,7 +6,7 @@ import Helper from "../../Helpers/Helper";
  * @slot language - Replaces language label, has replaceable props `{name}`, `{code}`, `{country_code}`.
  * @slot currency - Replaces currency label, has replaceable props `{name}`, `{code}`, `{country_code}`.
  */
-export class SallaLocalization {
+export class SallaLocalizationModal {
   constructor() {
     var _a, _b;
     this.languages = [];
@@ -31,8 +31,8 @@ export class SallaLocalization {
      * Because scoped templates not supported in stencil );
      * we made a workaround to pass language & currency attributes, then replace names in rendering
      */
-    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
-    this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
+    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span><div class="s-localization-modal-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
   }
   /**
    * Show the component
@@ -84,30 +84,30 @@ export class SallaLocalization {
   }
   render() {
     return (h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
-      h("div", { class: "s-localization-inner" },
+      h("div", { class: "s-localization-modal-inner" },
         this.languages.length > 1 ?
-          h("div", { class: "s-localization-section" },
-            h("label", { class: "s-localization-title" }, this.languagesTitle),
-            h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
-              this.languages.map(lang => h("div", { class: "s-localization-item" },
-                h("input", { class: "s-localization-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }),
+          h("div", { class: "s-localization-modal-section" },
+            h("label", { class: "s-localization-modal-title" }, this.languagesTitle),
+            h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
+              this.languages.map(lang => h("div", { class: "s-localization-modal-item" },
+                h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }),
                 h("div", { id: "language-slot", innerHTML: this.languageSlot
                     .replace(/\{name\}/g, lang.name)
                     .replace(/\{code\}/g, lang.code)
                     .replace(/\{country_code\}/g, lang.country_code) }))) :
-              h("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+              h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
           : '',
         this.currencies.length > 1 ?
-          h("div", { class: "s-localization-section" },
-            h("label", { class: "s-localization-title" }, this.currenciesTitle),
-            h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
-              this.currencies.map(currency => h("div", { class: "s-localization-item" },
-                h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }),
+          h("div", { class: "s-localization-modal-section" },
+            h("label", { class: "s-localization-modal-title" }, this.currenciesTitle),
+            h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
+              this.currencies.map(currency => h("div", { class: "s-localization-modal-item" },
+                h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }),
                 h("div", { id: "currency-slot", innerHTML: this.currencySlot
                     .replace(/\{name\}/g, currency.name)
                     .replace(/\{code\}/g, currency.code)
                     .replace(/\{country_code\}/g, currency.country_code) }))) :
-              h("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+              h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
           : '',
         h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
       : ''));
@@ -119,12 +119,12 @@ export class SallaLocalization {
     this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
     this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
   }
-  static get is() { return "salla-localization"; }
+  static get is() { return "salla-localization-modal"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-localization.scss"]
+    "$": ["salla-localization-modal.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["salla-localization.css"]
+    "$": ["salla-localization-modal.css"]
   }; }
   static get properties() { return {
     "language": {

package/dist/collection/components/{salla-login/salla-login.js → salla-login-modal/salla-login-modal.js}

@@ -11,7 +11,7 @@ import Helper from "../../Helpers/Helper";
  * @slot before-registration - placeholder position
  * @slot after-registration - placeholder position
  */
-export class SallaLogin {
+export class SallaLoginModal {
   constructor() {
     /**
      * Does the merchant allow to login using email
@@ -44,7 +44,7 @@ export class SallaLogin {
     this.typing = (e, submitMethod) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
-      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-error-message')) && (error.innerText = '');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-modal-error-message')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
     this.loginBySMS = async () => {
@@ -165,8 +165,8 @@ export class SallaLogin {
     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
     let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
     tabs.map(el => Helper.toggleElement(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)), 200);
-    setTimeout(() => this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'));
+    setTimeout(() => tabs.map(el => Helper.toggleElement(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    setTimeout(() => this.host.querySelector('.s-login-modal-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'));
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
@@ -195,66 +195,66 @@ export class SallaLogin {
   }
   render() {
     return (h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" },
-      h("div", { class: "s-login-wrapper" },
+      h("div", { class: "s-login-modal-wrapper" },
         this.isEmailAllowed && this.isMobileAllowed ?
-          h("div", { class: "s-login-tab", ref: tab => this.homeTab = tab },
-            h("p", { class: "s-login-sub-title" }, this.loginTypeTitle),
+          h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab },
+            h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle),
             h("slot", { name: "before-login-type" }),
-            h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) },
-              h("i", { class: "s-login-main-btn-icon sicon-phone" }),
-              h("span", { class: "s-login-main-btn-text" }, this.smsLabel),
+            h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) },
+              h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }),
+              h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel),
               h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })),
-            h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) },
-              h("i", { class: "s-login-main-btn-icon sicon-mail" }),
-              h("span", { class: "s-login-main-btn-text" }, this.emailLabel),
+            h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) },
+              h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }),
+              h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel),
               h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })),
             h("slot", { name: "after-login-type" }))
           : '',
         this.isMobileAllowed ?
-          h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab },
+          h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab },
             h("slot", { name: "before-login-mobile" }),
-            h("label", { class: "s-login-label" }, this.mobileLabel),
+            h("label", { class: "s-login-modal-label" }, this.mobileLabel),
             h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
             h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')),
             this.isEmailAllowed ?
-              h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '',
+              h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '',
             h("slot", { name: "after-login-mobile" })) : '',
         this.isEmailAllowed ?
-          h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab },
+          h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab },
             h("slot", { name: "before-login-email" }),
-            h("label", { class: "s-login-label" }, this.emailLabel),
-            h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }),
-            h("span", { class: "s-login-error-message" }),
+            h("label", { class: "s-login-modal-label" }, this.emailLabel),
+            h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }),
+            h("span", { class: "s-login-modal-error-message" }),
             h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')),
             this.isMobileAllowed ?
-              h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '',
+              h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '',
             h("slot", { name: "after-login-email" })) : '',
         h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false },
           h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })),
         h("div", { ref: tab => this.registrationTab = tab },
           h("slot", { name: "before-registration" }),
-          h("label", { class: "s-login-label" }, this.firstNameLabel),
-          h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }),
-          h("span", { class: "s-login-error-message" }),
-          h("label", { class: "s-login-label" }, this.lastNameLabel),
-          h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }),
-          h("span", { class: "s-login-error-message" }),
+          h("label", { class: "s-login-modal-label" }, this.firstNameLabel),
+          h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }),
+          h("span", { class: "s-login-modal-error-message" }),
+          h("label", { class: "s-login-modal-label" }, this.lastNameLabel),
+          h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }),
+          h("span", { class: "s-login-modal-error-message" }),
           h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" },
-            h("label", { class: "s-login-label" }, this.mobileLabel),
+            h("label", { class: "s-login-modal-label" }, this.mobileLabel),
             h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })),
           h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" },
-            h("label", { class: "s-login-label" }, this.emailLabel),
-            h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }),
-            h("span", { class: "s-login-error-message" })),
+            h("label", { class: "s-login-modal-label" }, this.emailLabel),
+            h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }),
+            h("span", { class: "s-login-modal-error-message" })),
           h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')),
           h("slot", { name: "after-registration" })))));
   }
-  static get is() { return "salla-login"; }
+  static get is() { return "salla-login-modal"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-login.scss"]
+    "$": ["salla-login-modal.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["salla-login.css"]
+    "$": ["salla-login-modal.css"]
   }; }
   static get properties() { return {
     "isEmailAllowed": {

package/dist/collection/components/{salla-offer/salla-offer.css → salla-offer-modal/salla-offer-modal.css}

@@ -11,15 +11,15 @@
 * Salla Offer Modal Component: popup modal to display the offers
 * You can use these classes to target the elements in the component.
 */
-#salla-offer-modal .s-offer-body {
+#salla-offer-modal .s-offer-modal-body {
   -webkit-overflow-scrolling: touch;
 }
-#salla-offer-modal .s-offer-body::-webkit-scrollbar {
+#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar {
   display: none;
 }
-#salla-offer-modal .s-offer-next-btn {
+#salla-offer-modal .s-offer-modal-next-btn {
   background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
 }
-#salla-offer-modal .s-offer-prev-btn {
+#salla-offer-modal .s-offer-modal-prev-btn {
   background: linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
 }

package/dist/collection/components/{salla-offer/salla-offer.js → salla-offer-modal/salla-offer-modal.js}

@@ -5,7 +5,7 @@ import Helper from "../../Helpers/Helper";
  * @slot product - Replaces product card, has replaceable props `{name}`, `{url}`, `{image}`, `{price}`.
  * @slot category - Replaces Category badge, has replaceable props `{name}`, `{url}`.
  */
-export class SallaOffer {
+export class SallaOfferModal {
   constructor() {
     var _a, _b;
     this.offer = null;
@@ -16,7 +16,7 @@ export class SallaOffer {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.remember_my_choice');
     });
-    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
+    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
     this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
     salla.offer.event.onExisted(data => {
       //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
@@ -57,43 +57,43 @@ export class SallaOffer {
       .finally(() => this['stop']());
   }
   defaultProductSlot() {
-    return '<a href={url} class="s-offer-product-image-wrap"><img class="s-offer-product-image" src="{image}" /></a>' +
-      '<div class="s-offer-product-info">' +
-      '   <a href={url} class="s-offer-product-name">{name}</a>' +
-      '   <div class="s-offer-product-price">{price}</div>' +
+    return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
+      '<div class="s-offer-modal-product-info">' +
+      '   <a href={url} class="s-offer-modal-product-name">{name}</a>' +
+      '   <div class="s-offer-modal-product-price">{price}</div>' +
       '</div>';
   }
   render() {
     var _a, _b;
     return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
-      ? [h("div", { class: "s-offer-scrolled-slider-wrap" },
-          h("div", { class: "s-offer-body s-offer-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
-            ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-badge s-offer-slider-item", innerHTML: this.categorySlot
+      ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" },
+          h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
+            ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
                 .replace(/\{name\}/g, category.name)
                 .replace(/\{url\}/g, category.urls.customer) }))
-            : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-product s-offer-slider-item", id: 'product_' + product.id, innerHTML: this.productSlot
+            : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-modal-product s-offer-modal-slider-item", id: 'product_' + product.id, innerHTML: this.productSlot
                 .replace(/\{name\}/g, product.name)
                 .replace(/\{url\}/g, product.url)
                 .replace(/\{image\}/g, product.thumbnail)
                 .replace(/\{price\}/g, product.has_special_price
-                ? salla.money(product.price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
-                : salla.money({ amount: product.price, currency: salla.config.get('user').currency_code })) },
-              h("div", { class: "s-offer-btn-wrap" },
+                ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
+                : salla.money(product.price)) },
+              h("div", { class: "s-offer-modal-btn-wrap" },
                 h("salla-button", { wide: true, "btn-style": 'outline-primary', "data-id": product.id, "loader-position": "center", onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart')))))),
-          h("div", { class: "s-offer-slider-nav" },
-            h("button", { class: "s-offer-nav-btn s-offer-prev-btn" },
-              h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_right" })),
-            h("button", { class: "s-offer-nav-btn s-offer-next-btn" },
-              h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_left" })))),
-        h("div", { class: "s-offer-footer", slot: "footer" },
+          h("div", { class: "s-offer-modal-slider-nav" },
+            h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" },
+              h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })),
+            h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" },
+              h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })))),
+        h("div", { class: "s-offer-modal-footer", slot: "footer" },
           this.offer.expiry_date ?
-            h("p", { class: "s-offer-expiry" },
+            h("p", { class: "s-offer-modal-expiry" },
               this.offer_expires_in,
               " ",
               this.offer.expiry_date)
             : '',
-          h("label", { class: "s-offer-remember-label" },
-            h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }),
+          h("label", { class: "s-offer-modal-remember-label" },
+            h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }),
             "\u00A0 ",
             this.remember_my_choice)),
       ] : '');
@@ -104,11 +104,11 @@ export class SallaOffer {
     this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
-      let sliderWrap = this.host.querySelector('.s-offer-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-nav-btn'), nexBtn = this.host.querySelector('.s-offer-next-btn'), prevBtn = this.host.querySelector('.s-offer-prev-btn'), items = this.host.querySelectorAll('.s-offer-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      let sliderWrap = this.host.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.host.querySelector('.s-offer-modal-next-btn'), prevBtn = this.host.querySelector('.s-offer-modal-prev-btn'), items = this.host.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
       current = 0, // current slide
       slidesToScroll = 3, itemsLength = items.length, itemSize = items[0].offsetWidth, sliderSize = itemsLength * itemSize, sliderWrapperSize = sliderWrap.offsetWidth, sliderInvisibleSize = sliderSize - sliderWrapperSize, isRTL = document.body.classList.contains('rtl') ? true : false;
       if (sliderInvisibleSize > sliderNavMargin)
-        nexBtn.classList.add('s-offer-btn-is-active');
+        nexBtn.classList.add('s-offer-modal-btn-is-active');
       window.onresize = function () {
         sliderWrapperSize = sliderWrap.offsetWidth;
         sliderInvisibleSize = sliderSize - sliderWrapperSize;
@@ -118,23 +118,23 @@ export class SallaOffer {
         let sliderEndOffset = sliderInvisibleSize - sliderNavMargin;
         // show & hide the navigation btns depending on scroll position
         if (sliderPosition <= sliderNavMargin) {
-          nexBtn.classList.add('s-offer-btn-is-active');
-          prevBtn.classList.remove('s-offer-btn-is-active');
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.remove('s-offer-modal-btn-is-active');
         }
         else if (sliderPosition < sliderEndOffset) {
           // show both btns in the middle
-          nexBtn.classList.add('s-offer-btn-is-active');
-          prevBtn.classList.add('s-offer-btn-is-active');
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
         }
         else if (sliderPosition >= sliderEndOffset) {
-          nexBtn.classList.remove('s-offer-btn-is-active');
-          prevBtn.classList.add('s-offer-btn-is-active');
+          nexBtn.classList.remove('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
         }
       });
       // Navigation
       navButtons.forEach(btn => {
         btn.addEventListener('click', function () {
-          btn.classList.contains('s-offer-next-btn') ? current++ : current--;
+          btn.classList.contains('s-offer-modal-next-btn') ? current++ : current--;
           slider.scrollTo({
             top: 0,
             left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
@@ -144,12 +144,12 @@ export class SallaOffer {
       });
     }
   }
-  static get is() { return "salla-offer"; }
+  static get is() { return "salla-offer-modal"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-offer.scss"]
+    "$": ["salla-offer-modal.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["salla-offer.css"]
+    "$": ["salla-offer-modal.css"]
   }; }
   static get states() { return {
     "offer": {},

package/dist/collection/components/{salla-rating/salla-rating.css → salla-rating-modal/salla-rating-modal.css}

@@ -11,6 +11,6 @@
 * Salla Rating Component: Order rating modal, used in the order single page
 * You can use these classes to target the elements in the component.
 */
-#s-rating .unicode {
+#s-rating-modal .unicode {
   unicode-bidi: plaintext;
 }