@salla.sa/twilight-components 1.0.49 → 1.0.51

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

@@ -1,6 +1,6 @@
 import { Component, h, Method, Element, Host, State, Prop } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
-export class SallaRating {
+export class SallaRatingModal {
   constructor() {
     this.stepsCount = 0;
     this.currentIndex = 0;
@@ -52,11 +52,11 @@ export class SallaRating {
   initiateRating() {
     this.handleWizard();
     this.highlightSelectedStars();
-    salla.document.event.onSubmit('.s-rating-stars-element', function (event) {
+    salla.document.event.onSubmit('.s-rating-modal-stars-element', function (event) {
       // Prevent form from submitting
       event.preventDefault();
       // Get the selected star - activeElement is not supported in safari
-      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.s-rating-hovered');
+      let activeStars = event.target.querySelectorAll('.s-rating-modal-btn-star.s-rating-modal-hovered');
       let selected = activeStars[activeStars.length - 1];
       if (!selected)
         return;
@@ -65,29 +65,29 @@ export class SallaRating {
       // Get all stars in this form (only search in the form, not the whole document)
       // Loop through each star, and add or remove the `.selected` class to toggle highlighting
       event.target
-        .querySelectorAll('.s-rating-btn-star')
-        .forEach((star, index) => Helper.toggleElement(star, 's-rating-selected', 's-rating-un-selected', () => index < selectedIndex));
+        .querySelectorAll('.s-rating-modal-btn-star')
+        .forEach((star, index) => Helper.toggleElement(star, 's-rating-modal-selected', 's-rating-modal-un-selected', () => index < selectedIndex));
       // Remove aria-pressed from any previously selected star
-      event.target.querySelectorAll('.s-rating-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
+      event.target.querySelectorAll('.s-rating-modal-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
       // Add aria-pressed role to the selected button
       selected.setAttribute('aria-pressed', '');
     });
   }
   // handle wizard
   handleWizard() {
-    this.steps = this.host.querySelectorAll(".s-rating-step");
-    this.dots = this.host.querySelectorAll(".s-rating-step-dot");
+    this.steps = this.host.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.host.querySelectorAll(".s-rating-modal-step-dot");
     this.showActiveStep();
   }
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex])
-      .toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab);
+    Helper.toggle('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggle('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
     if (this.currentIndex != 0) {
       // the animation
-      Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
-      setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+      Helper.toggleElement(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
@@ -96,9 +96,9 @@ export class SallaRating {
     setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
   }
   highlightSelectedStars() {
-    let hover = ['s-rating-hovered'];
-    Helper.all('.s-rating-stars-element', el => {
-      let starElements = el.querySelectorAll('.s-rating-btn-star');
+    let hover = ['s-rating-modal-hovered'];
+    Helper.all('.s-rating-modal-stars-element', el => {
+      let starElements = el.querySelectorAll('.s-rating-modal-btn-star');
       // remove hovered state from stars ---
       el.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
       starElements.forEach((starElement, index) => {
@@ -119,7 +119,7 @@ export class SallaRating {
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    Helper.toggleElement(this.backBtn, 's-rating-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper.toggleElement(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -127,10 +127,10 @@ export class SallaRating {
     salla.config.canLeave = false;
     this.nextBtn.load()
       .then(() => this.submittedBefore() || this.sendFeedback())
-      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-btn-star').forEach(el => el.setAttribute('disabled', '')))
+      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
       .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
       .then(() => this.showActiveStep())
-      .then(() => Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true))
+      .then(() => Helper.toggle('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -147,8 +147,8 @@ export class SallaRating {
     }
     rating = rating || this.currentTab;
     let stars = rating.querySelector('.rating_hidden_input').value;
-    let comment = rating.querySelector('.s-rating-comment');
-    let validationMessage = rating.querySelector('.s-rating-validation-msg');
+    let comment = rating.querySelector('.s-rating-modal-comment');
+    let validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
     if (stars && comment.value && comment.value.length > 3) {
       comment.classList.remove('s-has-error');
       validationMessage.innerHTML = '';
@@ -186,67 +186,67 @@ export class SallaRating {
       this.thanksTime.remove();
       this.hide().then(() => window.location.reload());
     }, 1000);
-    this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+    this.host.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
     this.showActiveStep(this.thanksTab);
   }
   renderRatingStars(size, name = 'rating') {
-    return (h("form", { class: "s-rating-stars-element" },
+    return (h("form", { class: "s-rating-modal-stars-element" },
       h("input", { type: "hidden", class: "rating_hidden_input", name: name, value: "" }),
-      [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star },
+      [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-modal-btn-star s-rating-modal-btn-star-` + size, "data-star": star },
         h("i", { class: "sicon-star2" })))));
   }
   // render
   render() {
     return (h(Host, { id: "s-rating" },
       h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
-        ? [h("div", { class: "s-rating-wrapper", ref: el => this.body = el },
+        ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el },
             this.order.testimonials_enabled ?
-              h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "store" },
-                h("div", { class: "s-rating-rounded-icon" },
-                  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" })),
-                h("h2", { class: "s-rating-title" }, this.rate_the_store),
-                h("div", { class: "s-rating-stars-company" },
+              h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" },
+                h("div", { class: "s-rating-modal-rounded-icon" },
+                  h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })),
+                h("h2", { class: "s-rating-modal-title" }, this.rate_the_store),
+                h("div", { class: "s-rating-modal-stars-company" },
                   " ",
                   this.renderRatingStars('large')),
-                h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: this.write_store_rate }),
-                h("small", { class: "s-rating-validation-msg" }))
+                h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }),
+                h("small", { class: "s-rating-modal-validation-msg" }))
               : '',
             this.order.products_enabled
-              ? h("section", { class: "s-rating-step s-rating-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": this.rate_product_stars },
-                h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }),
-                h("div", { class: "s-rating-product-details" },
-                  h("h3", { class: "s-rating-product-title" },
+              ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": this.rate_product_stars },
+                h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" }),
+                h("div", { class: "s-rating-modal-product-details" },
+                  h("h3", { class: "s-rating-modal-product-title" },
                     " ",
                     item.product.name),
-                  h("div", { class: "s-rating-stars-product" },
+                  h("div", { class: "s-rating-modal-stars-product" },
                     " ",
                     this.renderRatingStars('small', `products[${index}][rating]`)),
                   h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }),
-                  h("textarea", { placeholder: this.write_product_rate, name: `products[${index}][comment]`, class: "s-rating-comment" }),
-                  h("small", { class: "s-rating-validation-msg" })))))
+                  h("textarea", { placeholder: this.write_product_rate, name: `products[${index}][comment]`, class: "s-rating-modal-comment" }),
+                  h("small", { class: "s-rating-modal-validation-msg" })))))
               : '',
             this.order.shipping_enabled
-              ? h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "shipping" },
+              ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" },
                 h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }),
                 this.order.shipping.company.logo
-                  ? h("div", { class: "s-rating-rounded-icon" },
-                    h("img", { src: this.order.shipping.company.logo, class: "s-rating-shipping-logo", alt: this.order.shipping.company.name }))
-                  : h("span", { class: "s-rating-icon sicon-shipping-fast" }),
-                h("div", { class: "s-rating-title" },
+                  ? h("div", { class: "s-rating-modal-rounded-icon" },
+                    h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
+                  : h("span", { class: "s-rating-modal-icon sicon-shipping-fast" }),
+                h("div", { class: "s-rating-modal-title" },
                   " ",
                   this.rate_shipping + ' ' + this.order.shipping.company.name),
-                h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')),
-                h("textarea", { name: "comment", class: "s-rating-comment", placeholder: this.write_shipping_rate }),
-                h("small", { class: "s-rating-validation-msg" }))
+                h("div", { class: "s-rating-modal-stars-company" }, this.renderRatingStars('large')),
+                h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_shipping_rate }),
+                h("small", { class: "s-rating-modal-validation-msg" }))
               : '',
-            h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el },
-              h("span", { class: "s-rating-icon sicon-check-circle2" }),
-              h("h3", { class: "s-rating-thanks-title" }, this.thanks),
-              h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }),
-              h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
-          h("div", { class: "s-rating-footer" },
-            h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, this.back),
-            this.stepsCount > 1 ? h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '',
+            h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el },
+              h("span", { class: "s-rating-modal-icon sicon-check-circle2" }),
+              h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks),
+              h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }),
+              h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))),
+          h("div", { class: "s-rating-modal-footer" },
+            h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, this.back),
+            this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '',
             h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
         : '')));
   }
@@ -257,12 +257,12 @@ export class SallaRating {
   componentDidLoad() {
     salla.event.dispatch('rating::ready', this);
   }
-  static get is() { return "salla-rating"; }
+  static get is() { return "salla-rating-modal"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-rating.scss"]
+    "$": ["salla-rating-modal.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["salla-rating.css"]
+    "$": ["salla-rating-modal.css"]
   }; }
   static get properties() { return {
     "orderId": {

package/dist/collection/index.js

@@ -1,2 +1,2 @@
-export * from './components/salla-login/salla-login';
+export * from './components/salla-login-modal/salla-login-modal';
 export * from './components/salla-search/salla-search';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
-export { S as SallaLogin, a as SallaSearch } from './salla-search-813732a1.js';
+export { S as SallaLoginModal } from './salla-login-modal-187c1f98.js';
+export { S as SallaSearch } from './salla-search-2e3e60cb.js';
 import './index-8b97d225.js';
 import './Helper-7162a06c.js';

package/dist/esm/loader.js

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

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

@@ -0,0 +1,112 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8b97d225.js';
+import { H as Helper } from './Helper-7162a06c.js';
+
+const sallaButtonCss = "";
+
+const SallaButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Button Style
+     */
+    this.btnStyle = 'primary';
+    /**
+     * Is the button currently loading
+     */
+    this.loading = false;
+    /**
+     * Is the button currently disabled
+     */
+    this.disabled = false;
+    /**
+     * If there is need to change loader position, pass the position
+     */
+    this.loaderPosition = 'after';
+    /**
+     * Is the button wide
+     */
+    this.wide = false;
+    this.hostAttributes = {};
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+    }
+    this.hostAttributes.type = this.hostAttributes.type || 'button';
+    this.hostAttributes.class += ' s-button-btn btn--has-loading'
+      + ' s-button-' + this.btnStyle
+      + (this.wide ? ' s-button-wide ' : '')
+      + ' 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'];
+    if (this.wide) {
+      this.host.classList.add('s-button-wide');
+    }
+  }
+  /**
+   * Run loading animation
+   */
+  async load() {
+    if (this.loaderPosition == 'center')
+      this.text.classList.add('s-button-hide');
+    this.host.setAttribute('loading', '');
+    return this.host;
+  }
+  /**
+   * Stop loading animation
+   */
+  async stop() {
+    this.host.removeAttribute('loading');
+    if (this.loaderPosition == 'center')
+      this.text.classList.remove('s-button-hide');
+    return this.host;
+  }
+  /**
+   * Changing the body of the button
+   * @param html
+   */
+  async setText(html) {
+    this.text.innerHTML = html;
+    return this.host;
+  }
+  /**
+   * Add `disabled` attribute
+   */
+  async disable() {
+    this.host.setAttribute('disabled', '');
+  }
+  /**
+   * Remove `disabled` attribute
+   */
+  async enable() {
+    this.host.removeAttribute('disabled');
+  }
+  handleVisible(newKind, oldKind) {
+    //todo::use united styles
+    this.btn.classList.remove('btn-' + oldKind);
+    this.btn.classList.add('btn-' + newKind);
+  }
+  handleLoading(newVal) {
+    //todo::use united styles
+    Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
+  }
+  render() {
+    return (
+    //TODO:: use HOST then fake button behaviours
+    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': 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
+        's-button-loader': true,
+        's-button-loader-start': this.loaderPosition === 'start',
+        's-button-loader-end': this.loaderPosition === 'end',
+        's-button-loader-center': this.loaderPosition === 'center',
+      } }) : '')));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "btnStyle": ["handleVisible"],
+    "loading": ["handleLoading"]
+  }; }
+};
+SallaButton.style = sallaButtonCss;
+
+export { SallaButton as salla_button };

package/dist/esm/salla-localization-modal.entry.js

@@ -0,0 +1,113 @@
+import { r as registerInstance, h, g as getElement } from './index-8b97d225.js';
+import { H as Helper } from './Helper-7162a06c.js';
+
+const sallaLocalizationModalCss = "";
+
+const SallaLocalizationModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    var _a, _b;
+    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', () => {
+      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'));
+    });
+    /**
+     * letting developer to insert his own slot like:
+     * <salla-localization>
+     *   <div slot="language">...{name}....</div>
+     *   <div slot="currency">...{name}....</div>
+     * </salla-localization>
+     * Because scoped templates not supported in stencil );
+     * we made a workaround to pass language & currency attributes, then replace names in rendering
+     */
+    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span><div class="s-localization-modal-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
+  }
+  /**
+   * Show the component
+   */
+  async show() {
+    return this.modal.show()
+      .then(() => this.getLanguages())
+      .then(() => this.getCurrencies())
+      .then(() => this.isLoading = false);
+  }
+  /**
+   * Hide the component
+   */
+  async hide() {
+    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) {
+    this.currency = event.target.value;
+  }
+  onChangeLanguage(event) {
+    this.language = event.target.value;
+  }
+  async submit() {
+    let url;
+    this.btn.load()
+      .then(() => {
+      if (!this.currency) {
+        salla.log('There is no currency!');
+        return;
+      }
+      if (this.currency === salla.config.get('user.currency_code', 'SAR')) {
+        return;
+      }
+      url = window.location.href;
+      return salla.currency.api.change(this.currency);
+    })
+      .then(() => this.language === salla.config.get('user.language_code', 'ar') || (url = salla.helpers.addParamToUrl('lang', this.language)))
+      .then(() => this.btn.stop())
+      .then(() => this.hide())
+      .then(() => url && (window.location.href = url));
+  }
+  render() {
+    return (h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
+      h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
+        h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, this.languagesTitle), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
+          this.languages.map(lang => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { id: "language-slot", innerHTML: this.languageSlot
+              .replace(/\{name\}/g, lang.name)
+              .replace(/\{code\}/g, lang.code)
+              .replace(/\{country_code\}/g, lang.country_code) }))) :
+          h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+        : '', this.currencies.length > 1 ?
+        h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, this.currenciesTitle), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
+          this.currencies.map(currency => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), h("div", { id: "currency-slot", innerHTML: this.currencySlot
+              .replace(/\{name\}/g, currency.name)
+              .replace(/\{code\}/g, currency.code)
+              .replace(/\{country_code\}/g, currency.country_code) }))) :
+          h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+        : '', h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
+      : ''));
+  }
+  /**
+   * to reduce dom levels we will move slot data into the parent dom
+   */
+  componentDidRender() {
+    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
+    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
+  }
+  get host() { return getElement(this); }
+};
+SallaLocalizationModal.style = sallaLocalizationModalCss;
+
+export { SallaLocalizationModal as salla_localization_modal };