@salla.sa/twilight-components 1.5.12 → 1.5.14

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

@@ -26,6 +26,7 @@ const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-cont
 const SallaScopees = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.translationLoaded = false;
     this.mode = ModeType.DEFAULT;
     this.scopes = [];
     this.originalScopesList = [];
@@ -43,20 +44,14 @@ const SallaScopees = class {
       if (((_a = this.originalScopesList) === null || _a === void 0 ? void 0 : _a.length) < 2)
         return "";
       return this.mode === ModeType.DEFAULT ?
-        this.shoppingFromAnotherBranch :
-        this.searchForAvailabilityInOtherBranch;
+        salla.lang.get("blocks.scope.shopping_from_another_branch") :
+        salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
     };
     salla.event.on('scopes::open', ({ mode = null, product_id = null }) => {
       this.open(mode, product_id);
     });
     salla.lang.onLoaded(() => {
-      this.branchNotFound = salla.lang.get("blocks.scope.branch_looking_for_not_found");
-      this.ourServiceIsNotFound = salla.lang.get("blocks.scope.our_services_not_available_in_this_branch");
-      this.searchForAvailabilityInOtherBranch = salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
-      this.shoppingFromAnotherBranch = salla.lang.get("blocks.scope.shopping_from_another_branch");
-      this.nowBrowsingFrom = salla.lang.get('blocks.scope.you_are_browse_store_from');
-      this.confirmButton = salla.lang.get('common.elements.confirm');
-      this.scopeSearchPlaceholder = salla.lang.get('blocks.scope.searching_for_a_branch');
+      this.translationLoaded = true;
     });
   }
   /**
@@ -105,10 +100,10 @@ const SallaScopees = class {
         'type': this.current_scope.type,
         'id': this.current_scope.id
       });
-      if (window.location.search.includes("?")) {
-        window.location.search += "&";
-      }
-      window.location.search += "scope=" + this.current_scope.id;
+      var url = new URL(window.location.href);
+      url.searchParams.set('scope', this.current_scope.id);
+      window.location.href = url.toString();
+      window.location.replace(url.toString());
     }).catch(e => console.log(e))
       .finally(() => {
       this.changeBtn.stop();
@@ -139,7 +134,7 @@ const SallaScopees = class {
     this.current_scope = this.scopes.find(scope => scope.id == event.target.value);
   }
   placeholderContent() {
-    return index.h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, index.h("span", { slot: "title" }, this.branchNotFound), index.h("span", { slot: "description" }, this.ourServiceIsNotFound));
+    return index.h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, index.h("span", { slot: "title" }, salla.lang.get("blocks.scope.branch_looking_for_not_found")), index.h("span", { slot: "description" }, salla.lang.get("blocks.scope.our_services_not_available_in_this_branch")));
   }
   defaultContent() {
     return [index.h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => index.h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, index.h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), index.h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, index.h("span", null, scope.name))))), this.footerContent()];
@@ -151,11 +146,11 @@ const SallaScopees = class {
     }));
   }
   footerContent() {
-    return index.h("div", { class: "s-scopes-footer" }, index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, this.confirmButton)));
+    return index.h("div", { class: "s-scopes-footer" }, index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, salla.lang.get('common.elements.confirm'))));
   }
   render() {
-    return (index.h(index.Host, null, index.h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-scopes-skeleton" }, index.h("salla-list-tile", { class: "s-scopes-header" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon" }, index.h("salla-skeleton", { type: "circle" })), index.h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-scopes-skeleton-search" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '30px', width: '100%' })), index.h("div", { class: "s-scopes-skeleton-scopes" }, index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-scopes-skeleton-btn" }, index.h("salla-skeleton", { height: '40px', width: '100%' })))), index.h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index.h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && index.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
-      index.h("div", { class: "s-scopes-search-wrapper" }, index.h("div", { class: "s-scopes-search-icon", innerHTML: search.Search }), index.h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
+    return (index.h(index.Host, null, index.h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-scopes-skeleton" }, index.h("salla-list-tile", { class: "s-scopes-header" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon" }, index.h("salla-skeleton", { type: "circle" })), index.h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-scopes-skeleton-search" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '30px', width: '100%' })), index.h("div", { class: "s-scopes-skeleton-scopes" }, index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-scopes-skeleton-btn" }, index.h("salla-skeleton", { height: '40px', width: '100%' })))), index.h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index.h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && index.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
+      index.h("div", { class: "s-scopes-search-wrapper" }, index.h("div", { class: "s-scopes-search-icon", innerHTML: search.Search }), index.h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: salla.lang.get('blocks.scope.searching_for_a_branch') }))
       : "", this.scopes.length < 2 ?
       this.placeholderContent()
       : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));

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

@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[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],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"loading":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onTabSelected","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"centered":[4],"iconStyle":[1,"icon-style"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-scopes.cjs",[[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"branchNotFound":[32],"ourServiceIsNotFound":[32],"searchForAvailabilityInOtherBranch":[32],"shoppingFromAnotherBranch":[32],"nowBrowsingFrom":[32],"confirmButton":[32],"scopeSearchPlaceholder":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"translationLoaded":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"translationLoaded":[32],"title":[32],"emailErrorMsg":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"translationLoaded":[32],"languages":[32],"currencies":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"translationLoaded":[32],"open":[64],"close":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"translationLoaded":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"translationLoaded":[32],"results":[32],"loading":[32],"typing":[32],"debounce":[32],"search_term":[32]},[[0,"keydown","handleKeyDown"]]],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"translationLoaded":[32],"title_":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"translationLoaded":[32],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"tabSelected","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"translationLoaded":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"centered":[4],"iconStyle":[1,"icon-style"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-scopes.cjs",[[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"translationLoaded":[32],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]]], options);
 });

package/dist/collection/assets/svg/star3.svg

@@ -3,7 +3,7 @@
   <defs>
     <style>
       .a {
-        fill: none;
+        fill: none !important;
       }
 
       .b {

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

@@ -81,7 +81,13 @@ export class SallaAddProductButton {
   }
   componentDidRender() {
     //if label not passed, get label
-    this.hasLabel || salla.event.on('languages::translations.loaded', () => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
+    if (this.hasLabel) {
+      return;
+    }
+    this.btn.setText(this.getLabel() || 'اضافة للسلة');
+    salla.lang.onLoaded(() => {
+      this.btn.setText(this.getLabel() || 'اضافة للسلة');
+    });
   }
   static get is() { return "salla-add-product-button"; }
   static get originalStyleUrls() { return {

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

@@ -2,6 +2,10 @@
 * Salla Localization Component: Languages & Currencies popup modal
 * You can use these classes to target the elements in the component.
 */
+.s-localization-modal-select {
+  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+}
+
 .iti__flag {
   width: 20px;
 }

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

@@ -12,6 +12,7 @@ import Helper from "../../Helpers/Helper";
 export class SallaLocalizationModal {
   constructor() {
     var _a, _b;
+    this.translationLoaded = false;
     this.languages = [];
     this.currencies = [];
     this.isLoading = true;
@@ -26,10 +27,7 @@ export class SallaLocalizationModal {
     Helper.setHost(this.host);
     salla.event.on('localization::open', () => this.open());
     salla.lang.onLoaded(() => {
-      var _a;
-      this.languagesTitle = salla.lang.get('common.titles.language');
-      this.currenciesTitle = salla.lang.get('common.titles.currency');
-      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok'));
+      this.translationLoaded = true;
     });
     /**
      * letting developer to insert his own slot like:
@@ -115,7 +113,7 @@ export class SallaLocalizationModal {
         h("div", { class: "s-localization-modal-inner" },
           this.languages.length > 1 ?
             h("div", { class: "s-localization-modal-section" },
-              h("label", { class: "s-localization-modal-title" }, this.languagesTitle),
+              h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.language')),
               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 }),
@@ -127,7 +125,7 @@ export class SallaLocalizationModal {
             : '',
           this.currencies.length > 1 ?
             h("div", { class: "s-localization-modal-section" },
-              h("label", { class: "s-localization-modal-title" }, this.currenciesTitle),
+              h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.currency')),
               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 }),
@@ -193,10 +191,9 @@ export class SallaLocalizationModal {
     }
   }; }
   static get states() { return {
+    "translationLoaded": {},
     "languages": {},
     "currencies": {},
-    "languagesTitle": {},
-    "currenciesTitle": {},
     "isLoading": {}
   }; }
   static get methods() { return {

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

@@ -34,6 +34,7 @@ export class SallaLoginModal {
      */
     this.isEmailRequired = false;
     this.regType = 'phone';
+    this.translationLoaded = false;
     this.typing = (e, submitMethod) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
@@ -79,28 +80,13 @@ export class SallaLoginModal {
     };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
+    this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
+    this.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.first_name') });
+    this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.last_name') });
     salla.lang.onLoaded(() => {
-      var _a, _b, _c, _d;
+      this.translationLoaded = true;
       this.title = salla.lang.get('blocks.header.login');
-      this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
-      this.loginText = salla.lang.get('blocks.header.login');
-      this.smsLabel = salla.lang.get('blocks.header.sms');
-      this.mobileLabel = salla.lang.get('common.elements.mobile');
-      this.emailLabel = salla.lang.get('common.elements.email');
-      this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
-      this.byEmailText = salla.lang.get('blocks.header.login_by_email');
-      this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
-      this.firstNameLabel = salla.lang.get('blocks.header.your_name');
-      this.lastNameLabel = salla.lang.get('pages.profile.last_name');
-      this.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.firstNameLabel });
-      this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.lastNameLabel });
-      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
-      (_b = this.smsBtn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('blocks.header.enter'));
-      (_c = this.emailBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('blocks.header.enter'));
-      (_d = this.regBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('blocks.header.register'));
-    });
-    salla.auth.event.onVerificationFailed(() => {
-      //
+      this.updateTranslations();
     });
     salla.event.on('login::open', (event) => this.open(event));
     salla.event.on('twilight::initiated', () => {
@@ -133,6 +119,13 @@ export class SallaLoginModal {
     }
     window.location.reload();
   }
+  updateTranslations() {
+    var _a;
+    this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
+    this.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.first_name') });
+    this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.last_name') });
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+  }
   /**
    * Open login component
    */
@@ -206,36 +199,36 @@ export class SallaLoginModal {
       h("div", { class: "s-login-modal-wrapper" },
         this.isEmailAllowed && this.isMobileAllowed ?
           h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab },
-            h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle),
+            h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')),
             h("slot", { name: "before-login-type" }),
             h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) },
               h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }),
-              h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel),
+              h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('blocks.header.sms')),
               h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })),
             h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) },
               h("span", { class: "s-login-modal-main-btn-icon", innerHTML: EmailIcon }),
-              h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel),
+              h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('common.elements.email')),
               h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })),
             h("slot", { name: "after-login-type" }))
           : '',
         this.isMobileAllowed ?
           h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab },
             h("slot", { name: "before-login-mobile" }),
-            h("label", { class: "s-login-modal-label" }, this.mobileLabel),
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')),
             h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
             h("salla-button", { "loader-position": 'center', width: "wide", 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-modal-link" }, this.byEmailText) : '',
+              h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_email')) : '',
             h("slot", { name: "after-login-mobile" })) : '',
         this.isEmailAllowed ?
           h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab },
             h("slot", { name: "before-login-email" }),
-            h("label", { class: "s-login-modal-label" }, this.emailLabel),
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
             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', width: "wide", 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-modal-link" }, this.bySMSText)
+              h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_sms'))
               : '',
             h("slot", { name: "after-login-email" })) : '',
         h("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false },
@@ -243,18 +236,18 @@ export class SallaLoginModal {
         h("div", { ref: tab => this.registrationTab = tab },
           h("slot", { name: "before-registration" }),
           h("div", null,
-            h("label", { class: "s-login-modal-label" }, this.firstNameLabel),
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')),
             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("div", null,
-            h("label", { class: "s-login-modal-label" }, this.lastNameLabel),
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')),
             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-modal-label" }, this.mobileLabel),
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')),
             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-modal-label" }, this.emailLabel),
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
             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', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')),
@@ -324,18 +317,9 @@ export class SallaLoginModal {
     }
   }; }
   static get states() { return {
+    "translationLoaded": {},
     "title": {},
-    "loginTypeTitle": {},
-    "loginText": {},
-    "smsLabel": {},
-    "mobileLabel": {},
-    "emailLabel": {},
-    "enterText": {},
-    "bySMSText": {},
-    "byEmailText": {},
     "emailErrorMsg": {},
-    "firstNameLabel": {},
-    "lastNameLabel": {},
     "firstNameErrorMsg": {},
     "lastNameErrorMsg": {}
   }; }

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

@@ -42,18 +42,7 @@ export class SallaLoyalty {
       this.is_loggedin = true;
     });
     salla.lang.onLoaded(() => {
-      this.points = salla.lang.get('pages.loyalty_program.point');
-      this.exchange_points = salla.lang.get('pages.loyalty_program.exchange_points');
-      this.are_you_sure_to_exchange = salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange');
-      this.for = salla.lang.get('pages.loyalty_program.for');
-      this.confirm = salla.lang.get('pages.loyalty_program.confirm');
-      this.cancel = salla.lang.get('pages.loyalty_program.cancellation');
-      this.cart_total_point_summary = salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints });
-      this.cart_point_exchange_now = salla.lang.get('pages.loyalty_program.cart_point_exchange_now');
-      this.login_button = salla.lang.get('blocks.header.login');
-      if (!this.guestMessage) {
-        this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');
-      }
+      this.translationLoaded = true;
     });
   }
   setSelectedPrizeItem(item) {
@@ -82,7 +71,7 @@ export class SallaLoyalty {
       h("div", { class: "s-loyalty-prize-item-points" },
         item.cost_points,
         " ",
-        this.points,
+        salla.lang.get('pages.loyalty_program.point'),
         h("div", { class: "s-loyalty-prize-item-check" },
           h("div", null))));
   }
@@ -90,19 +79,19 @@ export class SallaLoyalty {
     var _a, _b;
     return [
       h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" },
-        h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, this.exchange_points),
+        h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, salla.lang.get('pages.loyalty_program.exchange_points')),
         h("div", { slot: "description" },
-          this.are_you_sure_to_exchange,
+          salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange'),
           " ( ",
           h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points),
           " ) ",
-          this.for,
+          salla.lang.get('pages.loyalty_program.for'),
           " ( ",
           h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name),
           " )")),
       h("div", { class: "s-loyalty-confirmation-actions" },
-        h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, this.cancel),
-        h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, this.confirm))
+        h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, salla.lang.get('pages.loyalty_program.cancellation')),
+        h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, salla.lang.get('pages.loyalty_program.confirm')))
     ];
   }
   getAfterExchangeUI() {
@@ -193,10 +182,10 @@ export class SallaLoyalty {
         h("salla-list-tile", { class: 's-loyalty-widget' },
           h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star2 }),
           h("div", { slot: "subtitle" },
-            this.is_loggedin ? this.cart_total_point_summary : this.guestMessage,
-            h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? this.cart_point_exchange_now : this.login_button))) :
+            this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints }) : (this.guestMessage || salla.lang.get('pages.loyalty_program.guest_message')),
+            h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')))) :
         ''),
-      h("salla-modal", { noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
+      h("salla-modal", { noPadding: true, width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
       h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal },
         h("div", { slot: "loading" },
           h("div", { class: "s-loyalty-skeleton" },
@@ -230,7 +219,7 @@ export class SallaLoyalty {
                 h("span", null, prize.title))),
               this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title },
                 h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
-            h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points),
+            h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
           ]
           : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
     ];
@@ -378,15 +367,7 @@ export class SallaLoyalty {
     "selectedItem": {},
     "askConfirmation": {},
     "is_loggedin": {},
-    "points": {},
-    "exchange_points": {},
-    "are_you_sure_to_exchange": {},
-    "for": {},
-    "cancel": {},
-    "confirm": {},
-    "cart_total_point_summary": {},
-    "cart_point_exchange_now": {},
-    "login_button": {}
+    "translationLoaded": {}
   }; }
   static get methods() { return {
     "open": {

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

@@ -16,16 +16,10 @@ export class SallaOfferModal {
   constructor() {
     var _a, _b;
     this.offer = null;
-    this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
-    this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
-    this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
-    this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
+    this.translationLoaded = false;
     Helper.setHost(this.host);
     salla.lang.onLoaded(() => {
-      this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
-      this.remember_my_choice = salla.lang.get('common.elements.remember_my_choice');
-      this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
-      this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
+      this.translationLoaded = true;
     });
     this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><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();
@@ -94,7 +88,7 @@ export class SallaOfferModal {
                   ? 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", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))),
+                  h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')))))),
             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", innerHTML: KeyboardArrowLeftIcon })),
@@ -102,14 +96,14 @@ export class SallaOfferModal {
                 h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowRightIcon })))), h("div", { class: "s-offer-modal-footer", slot: "footer" },
             this.offer.formatted_date ?
               h("p", { class: "s-offer-modal-expiry" },
-                this.offer_expires_in,
+                salla.lang.get('pages.products.offer_expires_in'),
                 " ",
                 this.offer.formatted_date)
               : '',
             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)),
+              salla.lang.get('common.elements.remember_my_choice'))),
         ] : '');
   }
   componentDidRender() {
@@ -168,10 +162,7 @@ export class SallaOfferModal {
     "offer": {},
     "offer_name": {},
     "offer_message": {},
-    "offer_expires_in": {},
-    "remember_my_choice": {},
-    "add_to_cart": {},
-    "out_of_stock": {}
+    "translationLoaded": {}
   }; }
   static get methods() { return {
     "open": {

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

@@ -5,6 +5,7 @@ import { Component, Prop, State, h, Host } from '@stencil/core';
 import Inbox from '../../assets/svg/inbox.svg';
 export class SallaPlaceholder {
   constructor() {
+    this.translationLoaded = false;
     /**
      * Custom icon to display, defaults to [`sicon-inbox`]
      */
@@ -18,8 +19,7 @@ export class SallaPlaceholder {
       */
     this.iconSize = 'md';
     salla.lang.onLoaded(() => {
-      this.default_title = salla.lang.get('common.elements.no_options');
-      this.default_description = salla.lang.get('common.errors.empty_results');
+      this.translationLoaded = true;
     });
   }
   alignmentClass() {
@@ -35,10 +35,10 @@ export class SallaPlaceholder {
       h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }),
       h("div", { class: "s-placeholder-title" },
         h("slot", { name: 'title' },
-          h("span", null, this.default_title))),
+          h("span", null, salla.lang.get('common.elements.no_options')))),
       h("div", { class: "s-placeholder-description" },
         h("slot", { name: 'description' },
-          h("span", null, this.default_description)))));
+          h("span", null, salla.lang.get('common.errors.empty_results'))))));
   }
   static get is() { return "salla-placeholder"; }
   static get originalStyleUrls() { return {
@@ -104,7 +104,6 @@ export class SallaPlaceholder {
     }
   }; }
   static get states() { return {
-    "default_title": {},
-    "default_description": {}
+    "translationLoaded": {}
   }; }
 }