@salla.sa/twilight-components 1.0.44 → 1.0.46

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaSearch = require('./salla-search-ccb22487.js');
+const sallaSearch = require('./salla-search-a6577399.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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",{"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",{"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",{"error":[4],"success":[4],"primary":[4],"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],"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_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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":[1540],"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",{"error":[4],"success":[4],"primary":[4],"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],"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);
   });
 };
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
 
-const sallaBranchesCss = ":host{display:block}";
+const sallaBranchesCss = "";
 
 const SallaBranches = class {
   constructor(hostRef) {

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
-const sallaSearch = require('./salla-search-ccb22487.js');
+const sallaSearch = require('./salla-search-a6577399.js');
 
-const sallaButtonCss = ":host{display:block}";
+const sallaButtonCss = "";
 
 const SallaButton = class {
   constructor(hostRef) {
@@ -26,7 +26,7 @@ const SallaButton = class {
     /**
      * If there is need to change loader position, pass the position
      */
-    this.loaderPosition = 'before';
+    this.loaderPosition = 'after';
     /**
      * Is the button wide
      */
@@ -39,8 +39,8 @@ const SallaButton = class {
     this.hostAttributes.class += ' s-button-btn btn--has-loading'
       + ' s-button-' + this.btnStyle
       + (this.wide ? ' s-button-wide ' : '')
-      + ' loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
-      + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
+      + ' s-button-btn-loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
+      + (this.loaderPosition == 'after' ? ' s-button-loader-after' : '');
     delete this.hostAttributes['btn-style'];
     delete this.hostAttributes['id'];
     delete this.hostAttributes['data-on-click'];
@@ -98,7 +98,7 @@ const SallaButton = class {
   render() {
     return (
     //TODO:: use HOST then fake button behaviours
-    index.h(index.Host, { class: "s-button-host-tag" }, index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: {
+    index.h(index.Host, { class: "s-button-wrap" }, index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: { 's-button-text': true, 's-button-hide': this.loaderPosition == 'center' && this.loading }, ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: {
         //todo::use united styles
         's-button-loader': true,
         's-button-loader-start': this.loaderPosition === 'start',
@@ -114,15 +114,17 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+const sallaLocalizationCss = "";
+
 const SallaLocalization = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     var _a, _b;
-    this.language = salla.config.get('user.language_code');
-    this.currency = salla.config.get('user.currency_code');
     this.languages = [];
     this.currencies = [];
     this.isLoading = true;
+    this.language = salla.config.get('user.language_code');
+    this.currency = salla.config.get('user.currency_code');
     Helper.Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
     salla.event.on('languages::translations.loaded', () => {
@@ -159,9 +161,11 @@ const SallaLocalization = class {
     return this.modal.hide();
   }
   async getLanguages() {
+    this.language = this.language || salla.config.get('user.language_code');
     return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
   }
   async getCurrencies() {
+    this.currency = this.currency || salla.config.get('user.currency_code');
     return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = data);
   }
   onChangeCurrency(event) {
@@ -207,6 +211,7 @@ const SallaLocalization = class {
   }
   get host() { return index.getElement(this); }
 };
+SallaLocalization.style = sallaLocalizationCss;
 
 const sallaModalCss = "";
 
@@ -336,7 +341,7 @@ const SallaModal = class {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (index.h(index.Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
+    return (index.h(index.Host, { class: 'salla-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
       index.h("div", { class: "s-modal-loader-wrap" }, index.h("span", { class: "s-modal-loader" }))
       :
         [
@@ -1731,6 +1736,8 @@ var intlTelInput$1 = createCommonjsModule(function (module) {
  */
 var intlTelInput = intlTelInput$1;
 
+const sallaTelInputCss = "";
+
 const SallaTelInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1819,15 +1826,18 @@ const SallaTelInput = class {
   }
   ;
   render() {
-    return (index.h(index.Host, null, index.h("input", { type: "tel", name: "mobile", value: this.mobile, ref: el => this.phoneInput = el, class: "s-tel-input-control  tel-input s-ltr" }), index.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), index.h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+    return (index.h(index.Host, { id: "s-tel-input" }, index.h("input", { type: "tel", name: "mobile", value: this.mobile, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), index.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), index.h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
   }
   componentDidLoad() {
     this.initTelInput();
   }
   get host() { return index.getElement(this); }
 };
+SallaTelInput.style = sallaTelInputCss;
+
+const sallaVerifyModalCss = "salla-verify-modal{display:block}";
 
-const SallaVerify = class {
+const SallaVerifyModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.verified = index.createEvent(this, "verified", 7);
@@ -1871,10 +1881,10 @@ const SallaVerify = class {
     var _a;
     this.data = data;
     this.resendTimer();
-    this.otpInputs = this.host.querySelectorAll('.s-verify-input');
+    this.otpInputs = this.host.querySelectorAll('.s-verify-modal-input');
     if (!this.initiated) {
-      Helper.Helper.on('input', '.s-verify-input', e => salla.helpers.digitsOnly(e.target));
-      Helper.Helper.onKeyUp('.s-verify-input', event => {
+      Helper.Helper.on('input', '.s-verify-modal-input', e => salla.helpers.digitsOnly(e.target));
+      Helper.Helper.onKeyUp('.s-verify-modal-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
         if (event.target.value) {
@@ -1887,7 +1897,7 @@ const SallaVerify = class {
         }
         this.toggleOTPSubmit();
       });
-      Helper.Helper.on('paste', '.s-verify-input', event => {
+      Helper.Helper.on('paste', '.s-verify-modal-input', event => {
         let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
         this.otpInputs.forEach((input, i) => input.value = text[i] || '');
         this.toggleOTPSubmit();
@@ -1956,19 +1966,14 @@ const SallaVerify = class {
   }
   render() {
     return this.withoutModal ? this.myBody() :
-      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify", ref: modal => this.modal = modal, title: this.title }, this.myBody());
+      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify-modal", ref: modal => this.modal = modal, title: this.title }, this.myBody());
   }
   myBody() {
-    return [
-      index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
-      index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
-      index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
-      index.h("div", { slot: "footer", class: "s-verify-footer" }, index.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.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
-      index.h("slot", { name: "after-footer" })
-    ];
+    return (index.h(index.Host, { id: "s-verify-modal" }, index.h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-modal-footer" }, index.h("salla-button", { class: "s-verify-modal-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
   }
   get host() { return index.getElement(this); }
 };
+SallaVerifyModal.style = sallaVerifyModalCss;
 
 exports.salla_login = sallaSearch.SallaLogin;
 exports.salla_search = sallaSearch.SallaSearch;
@@ -1976,4 +1981,4 @@ exports.salla_button = SallaButton;
 exports.salla_localization = SallaLocalization;
 exports.salla_modal = SallaModal;
 exports.salla_tel_input = SallaTelInput;
-exports.salla_verify = SallaVerify;
+exports.salla_verify_modal = SallaVerifyModal;

package/dist/cjs/salla-infinite-scroll.cjs.entry.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
+const sallaInfiniteScrollCss = "";
+
 const SallaInfiniteScroll = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -31,9 +33,9 @@ const SallaInfiniteScroll = class {
         <p class="s-infinite-scroll-last infinite-scroll-last"></p>
         <p class="s-infinite-scroll-error infinite-scroll-error"></p>
       </div>
-      <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
-        <span class="s-button-text">${salla.lang.get('common.elements.load_more')}</span>
-        <span class="s-button-loader s-button-loader-center" style="display: none"></span>
+      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn btn--has-loading s-button-primary">
+        <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
+        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
     salla.event.on('languages::translations.loaded', () => {
@@ -86,5 +88,6 @@ const SallaInfiniteScroll = class {
   }
   get host() { return index.getElement(this); }
 };
+SallaInfiniteScroll.style = sallaInfiniteScrollCss;
 
 exports.salla_infinite_scroll = SallaInfiniteScroll;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaOfferCss = ".s-offer-body{-webkit-overflow-scrolling:touch}.s-offer-body::-webkit-scrollbar{display:none}.s-offer-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}.s-offer-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
+const sallaOfferCss = "#salla-offer-modal .s-offer-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-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{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
 
 const SallaOffer = class {
   constructor(hostRef) {
@@ -68,7 +68,7 @@ const SallaOffer = class {
   }
   render() {
     var _a, _b;
-    return index.h("salla-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
+    return index.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
       ? [index.h("div", { class: "s-offer-scrolled-slider-wrap" }, index.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 => index.h("a", { href: category.urls.customer, class: "s-offer-badge s-offer-slider-item", innerHTML: this.categorySlot
               .replace(/\{name\}/g, category.name)

package/dist/cjs/salla-product-availability.cjs.entry.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
+const sallaProductAvailabilityCss = "";
+
 const SallaProductAvailability = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -89,7 +91,7 @@ const SallaProductAvailability = class {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (index.h(index.Host, null, this.isSubscribed || this.isVisitorSubscribed
+    return (index.h(index.Host, { id: "s-product-availability" }, this.isSubscribed || this.isVisitorSubscribed
       ? index.h("div", { class: "s-product-availability-subscribed" }, index.h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
       : index.h("slot", null, index.h("salla-button", { onClick: () => this.isUser ? this.submit() : this.modal.show(), wide: true, ref: btn => this.inlineBtn = btn }, salla.lang.get('pages.products.notify_availability'))), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
   }
@@ -108,5 +110,6 @@ const SallaProductAvailability = class {
     "channels": ["channelsWatcher"]
   }; }
 };
+SallaProductAvailability.style = sallaProductAvailabilityCss;
 
 exports.salla_product_availability = SallaProductAvailability;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
+const sallaRatingCss = "#s-rating .unicode{unicode-bidi:plaintext}";
 
 const SallaRating = class {
   constructor(hostRef) {
@@ -202,7 +202,7 @@ const SallaRating = class {
   }
   // render
   render() {
-    return (index.h(index.Host, null, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+    return (index.h(index.Host, { id: "s-rating" }, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
       ? [index.h("div", { class: "s-rating-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
           index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "store" }, index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, this.rate_the_store), index.h("div", { class: "s-rating-stars-company" }, " ", this.renderRatingStars('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: this.write_store_rate }), index.h("small", { class: "s-rating-validation-msg" }))
           : '', this.order.products_enabled

package/dist/cjs/{salla-search-ccb22487.js → salla-search-a6577399.js}

@@ -3,7 +3,7 @@
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaLoginCss = "salla-verify{display:block}";
+const sallaLoginCss = "";
 
 const SallaLogin = class {
   constructor(hostRef) {
@@ -181,13 +181,13 @@ const SallaLogin = class {
       index.h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
       index.h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-label" }, this.emailLabel), index.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" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-label" }, this.firstNameLabel), index.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') }), index.h("span", { class: "s-login-error-message" }), index.h("label", { class: "s-login-label" }, this.lastNameLabel), index.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') }), index.h("span", { class: "s-login-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.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" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-label" }, this.firstNameLabel), index.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') }), index.h("span", { class: "s-login-error-message" }), index.h("label", { class: "s-login-label" }, this.lastNameLabel), index.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') }), index.h("span", { class: "s-login-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.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" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
 };
 SallaLogin.style = sallaLoginCss;
 
-const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:1rem}";
+const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
 
 const SallaSearch = class {
   constructor(hostRef) {

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":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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",{"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",{"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",{"error":[4],"success":[4],"primary":[4],"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],"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_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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":[1540],"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",{"error":[4],"success":[4],"primary":[4],"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],"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);
 });

package/dist/collection/collection-manifest.json

@@ -11,7 +11,7 @@
     "./components/salla-product-availability/salla-product-availability.js",
     "./components/salla-rating/salla-rating.js",
     "./components/salla-tel-input/salla-tel-input.js",
-    "./components/salla-verify/salla-verify.js"
+    "./components/salla-verify-modal/salla-verify-modal.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -7,6 +7,7 @@
 /**
  * Delivered variables
  */
-:host {
-  display: block;
-}
+/*
+* Salla Branches Component: Store branches & warehouses popup modal
+* You can use these classes to target the elements in the component.
+*/

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

@@ -1,3 +1,13 @@
-:host {
-  display: block;
-}
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Button Component: has many sizes, styles and loading state.
+* You can use these classes to target the elements in the component.
+*/

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

@@ -17,7 +17,7 @@ export class SallaButton {
     /**
      * If there is need to change loader position, pass the position
      */
-    this.loaderPosition = 'before';
+    this.loaderPosition = 'after';
     /**
      * Is the button wide
      */
@@ -30,8 +30,8 @@ export class SallaButton {
     this.hostAttributes.class += ' s-button-btn btn--has-loading'
       + ' s-button-' + this.btnStyle
       + (this.wide ? ' s-button-wide ' : '')
-      + ' loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
-      + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
+      + ' s-button-btn-loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
+      + (this.loaderPosition == 'after' ? ' s-button-loader-after' : '');
     delete this.hostAttributes['btn-style'];
     delete this.hostAttributes['id'];
     delete this.hostAttributes['data-on-click'];
@@ -89,9 +89,9 @@ export class SallaButton {
   render() {
     return (
     //TODO:: use HOST then fake button behaviours
-    h(Host, { class: "s-button-host-tag" },
+    h(Host, { class: "s-button-wrap" },
       h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes),
-        h("span", { class: "s-button-text", ref: el => this.text = el },
+        h("span", { class: { 's-button-text': true, 's-button-hide': this.loaderPosition == 'center' && this.loading }, ref: el => this.text = el },
           h("slot", null)),
         this.loading ? h("span", { class: {
             //todo::use united styles
@@ -103,7 +103,7 @@ export class SallaButton {
   }
   static get is() { return "salla-button"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-button.css"]
+    "$": ["salla-button.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["salla-button.css"]
@@ -167,8 +167,8 @@ export class SallaButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'start' | 'end' | 'center' | 'before'",
-        "resolved": "\"before\" | \"center\" | \"end\" | \"start\"",
+        "original": "'start' | 'end' | 'center' | 'after'",
+        "resolved": "\"after\" | \"center\" | \"end\" | \"start\"",
         "references": {}
       },
       "required": false,
@@ -179,7 +179,7 @@ export class SallaButton {
       },
       "attribute": "loader-position",
       "reflect": false,
-      "defaultValue": "'before'"
+      "defaultValue": "'after'"
     },
     "wide": {
       "type": "boolean",

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

@@ -0,0 +1,13 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Infinite Scroll Component: used in latest-products page, comments, brands, orders and so on..
+* You can use these classes to target the elements in the component.
+*/

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

@@ -27,9 +27,9 @@ export class SallaInfiniteScroll {
         <p class="s-infinite-scroll-last infinite-scroll-last"></p>
         <p class="s-infinite-scroll-error infinite-scroll-error"></p>
       </div>
-      <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
-        <span class="s-button-text">${salla.lang.get('common.elements.load_more')}</span>
-        <span class="s-button-loader s-button-loader-center" style="display: none"></span>
+      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn btn--has-loading s-button-primary">
+        <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
+        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
     salla.event.on('languages::translations.loaded', () => {
@@ -82,6 +82,12 @@ export class SallaInfiniteScroll {
       .on('error', () => this.loading(false));
   }
   static get is() { return "salla-infinite-scroll"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-infinite-scroll.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-infinite-scroll.css"]
+  }; }
   static get properties() { return {
     "nextPage": {
       "type": "string",

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

@@ -0,0 +1,13 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Localization Component: Languages & Currencies popup modal
+* You can use these classes to target the elements in the component.
+*/

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Method, State } from '@stencil/core';
+import { Component, Element, h, Method, Prop, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 /**
  * @slot header - The top of the modal.
@@ -9,11 +9,11 @@ import Helper from "../../Helpers/Helper";
 export class SallaLocalization {
   constructor() {
     var _a, _b;
-    this.language = salla.config.get('user.language_code');
-    this.currency = salla.config.get('user.currency_code');
     this.languages = [];
     this.currencies = [];
     this.isLoading = true;
+    this.language = salla.config.get('user.language_code');
+    this.currency = salla.config.get('user.currency_code');
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
     salla.event.on('languages::translations.loaded', () => {
@@ -50,9 +50,11 @@ export class SallaLocalization {
     return this.modal.hide();
   }
   async getLanguages() {
+    this.language = this.language || salla.config.get('user.language_code');
     return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
   }
   async getCurrencies() {
+    this.currency = this.currency || salla.config.get('user.currency_code');
     return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = data);
   }
   onChangeCurrency(event) {
@@ -108,6 +110,50 @@ export class SallaLocalization {
     this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
   }
   static get is() { return "salla-localization"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-localization.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-localization.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "salla.config.get('user.language_code')"
+    },
+    "currency": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currency",
+      "reflect": true,
+      "defaultValue": "salla.config.get('user.currency_code')"
+    }
+  }; }
   static get states() { return {
     "languages": {},
     "currencies": {},

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

@@ -7,6 +7,7 @@
 /**
  * Delivered variables
  */
-salla-verify {
-  display: block;
-}
+/*
+* Salla Login Component: login popup modal
+* You can use these classes to target the elements in the component.
+*/