@salla.sa/twilight-components 1.4.12 → 1.4.17

package/dist/components/salla-modal2.js

@@ -24,6 +24,10 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * open the modal on rendering
      */
     this.visible = false;
+    /**
+     * open the modal on rendering
+     */
+    this.hasSkeleton = false;
     /**
      * Show loading in the middle
      */
@@ -125,13 +129,13 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
   }
   getWidth() {
-    return this.isLoading ? 'sm' : this.width;
+    return this.isLoading ? this.hasSkeleton ? 'md' : 'sm' : this.width;
   }
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
     if (this.isLoading) {
-      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("salla-loading", null), h("div", { class: "s-hidden" }, h("slot", null))))));
+      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
     }
     return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
       h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
@@ -155,6 +159,7 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "width": [513],
     "position": [513],
     "visible": [516],
+    "hasSkeleton": [516, "has-skeleton"],
     "isLoading": [1540, "is-loading"],
     "subTitleFirst": [4, "sub-title-first"],
     "noPadding": [4, "no-padding"],

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

@@ -76,7 +76,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
               .replace(/\{name\}/g, category.name)

package/dist/components/salla-placeholder2.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const Inbox = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -42,7 +42,7 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     };
   }
   render() {
-    return (h("div", { class: this.alignmentClass() }, 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("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }, h("span", null, this.default_description)))));
+    return (h(Host, { class: this.alignmentClass() }, 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("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }, h("span", null, this.default_description)))));
   }
   static get style() { return sallaPlaceholderCss; }
 }, [4, "salla-placeholder", {

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

@@ -156,9 +156,9 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.showActiveStep(this.thanksTab);
   }
   render() {
-    return (h(Host, { id: "s-rating" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+    return (h(Host, { class: "s-rating" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
       ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
-          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" }, h("salla-rating-stars", { size: "large" })), h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }), h("small", { class: "s-rating-modal-validation-msg" }))
+          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" }, h("salla-rating-stars", { size: "large" })), h("textarea", { 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-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("div", { class: "s-rating-modal-product-img-wrap" }, 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-modal-stars-product" }, h("salla-rating-stars", { size: "small", name: `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-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" })))))
           : '', this.order.shipping_enabled

package/dist/components/salla-scopes.js

@@ -100,7 +100,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return await salla.scope.change(payload)
       .then(() => {
       salla.storage.set("branch-choosed-before", true);
-      window.location.reload();
+      salla.storage.set("scope", this.current_scope.id);
     }).catch(e => console.log(e))
       .finally(() => {
       this.changeBtn.stop();
@@ -146,7 +146,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return h("div", { class: "s-scopes-footer" }, h("slot", { name: "footer" }, 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)));
   }
   render() {
-    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, id: "s-scopes-modal", isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true }, h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
+    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true }, h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
       h("div", { class: "s-scopes-search-wrapper" }, h("div", { class: "s-scopes-search-icon", innerHTML: Search }), h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
       : "", this.scopes.length < 2 ?
       this.placeholderContent()

package/dist/components/salla-skeleton.js

@@ -1,54 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const sallaSkeletonCss = ":host{display:block}";
-
-const SallaSkeleton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-   *  Set the shape type of the skeleton is it circle or normal
-   */
-    this.type = 'normal';
-    /**
-   *  Set the skeleton width
-   */
-    this.width = '100%';
-    /**
-   *  Set the skeleton height
-   */
-    this.height = '100%';
-  }
-  render() {
-    const classes = {
-      's-skeleton-item': true,
-      's-skeleton-item-circular': this.type == 'circle',
-    };
-    return (h("div", { class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { class: classes }, "\u00A0")));
-  }
-  static get style() { return sallaSkeletonCss; }
-}, [0, "salla-skeleton", {
-    "type": [1],
-    "width": [1],
-    "height": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["salla-skeleton"];
-  components.forEach(tagName => { switch (tagName) {
-    case "salla-skeleton":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SallaSkeleton$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { S as SallaSkeleton$1, d as defineCustomElement$1 } from './salla-skeleton2.js';
 
 const SallaSkeleton = SallaSkeleton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/salla-skeleton2.js

@@ -0,0 +1,53 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sallaSkeletonCss = ":host{display:block}";
+
+const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+   *  Set the shape type of the skeleton is it circle or normal
+   */
+    this.type = 'normal';
+    /**
+   *  Set the skeleton width
+   */
+    this.width = '100%';
+    /**
+   *  Set the skeleton height
+   */
+    this.height = '100%';
+  }
+  render() {
+    const classes = {
+      's-skeleton-item': true,
+      's-skeleton-item-circular': this.type == 'circle',
+    };
+    return (h("div", { class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { class: classes }, "\u00A0")));
+  }
+  static get style() { return sallaSkeletonCss; }
+}, [0, "salla-skeleton", {
+    "type": [1],
+    "width": [1],
+    "height": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-skeleton"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-skeleton":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaSkeleton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SallaSkeleton as S, defineCustomElement as d };

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

@@ -1427,7 +1427,7 @@ const SallaSocialShare$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }, '-=200');
   }
   render() {
-    return (h("div", { id: "s-social-share", class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
+    return (h("div", { class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
       return (h("li", { ref: el => this.platformItem = el }, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
         if (icon.name === platform) {
           return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });

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

@@ -1467,7 +1467,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   ;
   render() {
-    return (h(Host, { id: "s-tel-input" }, h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+    return (h(Host, { class: "s-tel-input" }, h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
   }
   componentDidLoad() {
     this.initTelInput();

package/dist/esm/loader.js

@@ -13,7 +13,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["salla-button_24",[[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"]]],[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]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[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-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],"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]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[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"],"direction":[1],"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,"onSelect","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]}],[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"],"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-add-product-button",[[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",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return bootstrapLazy([["salla-button_24",[[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"]]],[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]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[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-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],"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]}],[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"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[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,"onSelect","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]}],[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"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"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-add-product-button",[[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",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
   });
 };
 

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

@@ -323,7 +323,7 @@ const SallaLocalizationModal = class {
       .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 ?
+    return (h("salla-modal", { isLoading: this.isLoading, 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", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
@@ -705,7 +705,6 @@ const SallaLoyalty = class {
     this.modal.open();
     return await salla.loyalty.getProgram()
       .then((response) => {
-      console.log("🚀 ~ file: salla-loyalty.tsx ~ line 167 ~ SallaLoyalty ~ .then ~ response", response);
       this.loyaltyProgram = response.data;
     })
       .catch(e => console.log(e))
@@ -773,12 +772,12 @@ const SallaLoyalty = class {
       h("slot", { name: 'widget' }, this.customerPoints ?
         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))) :
         ''),
-      h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
-      h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "md", ref: modal => this.modal = modal }, !!this.loyaltyProgram ?
+      h("salla-modal", { noPadding: true, position: 'top', 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" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !!this.loyaltyProgram ?
         [
           h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
           h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, 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() }, this.exchange_points),
         ]
         : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
     ];
@@ -807,6 +806,10 @@ const SallaModal = class {
      * open the modal on rendering
      */
     this.visible = false;
+    /**
+     * open the modal on rendering
+     */
+    this.hasSkeleton = false;
     /**
      * Show loading in the middle
      */
@@ -908,13 +911,13 @@ const SallaModal = class {
     };
   }
   getWidth() {
-    return this.isLoading ? 'sm' : this.width;
+    return this.isLoading ? this.hasSkeleton ? 'md' : 'sm' : this.width;
   }
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
     if (this.isLoading) {
-      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("salla-loading", null), h("div", { class: "s-hidden" }, h("slot", null))))));
+      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
     }
     return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
       h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
@@ -1003,7 +1006,7 @@ const SallaOfferModal = class {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
               .replace(/\{name\}/g, category.name)
@@ -1106,7 +1109,7 @@ const SallaPlaceholder = class {
     };
   }
   render() {
-    return (h("div", { class: this.alignmentClass() }, 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("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }, h("span", null, this.default_description)))));
+    return (h(Host, { class: this.alignmentClass() }, 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("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }, h("span", null, this.default_description)))));
   }
 };
 SallaPlaceholder.style = sallaPlaceholderCss;
@@ -1418,9 +1421,9 @@ const SallaRatingModal = class {
     this.showActiveStep(this.thanksTab);
   }
   render() {
-    return (h(Host, { id: "s-rating" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+    return (h(Host, { class: "s-rating" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
       ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
-          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" }, h("salla-rating-stars", { size: "large" })), h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }), h("small", { class: "s-rating-modal-validation-msg" }))
+          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" }, h("salla-rating-stars", { size: "large" })), h("textarea", { 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-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("div", { class: "s-rating-modal-product-img-wrap" }, 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-modal-stars-product" }, h("salla-rating-stars", { size: "small", name: `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-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" })))))
           : '', this.order.shipping_enabled
@@ -1593,7 +1596,7 @@ const SallaScopees = class {
     return await salla.scope.change(payload)
       .then(() => {
       salla.storage.set("branch-choosed-before", true);
-      window.location.reload();
+      salla.storage.set("scope", this.current_scope.id);
     }).catch(e => console.log(e))
       .finally(() => {
       this.changeBtn.stop();
@@ -1639,7 +1642,7 @@ const SallaScopees = class {
     return h("div", { class: "s-scopes-footer" }, h("slot", { name: "footer" }, 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)));
   }
   render() {
-    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, id: "s-scopes-modal", isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true }, h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
+    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true }, h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
       h("div", { class: "s-scopes-search-wrapper" }, h("div", { class: "s-scopes-search-icon", innerHTML: Search }), h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
       : "", this.scopes.length < 2 ?
       this.placeholderContent()
@@ -3204,7 +3207,7 @@ const SallaSocialShare = class {
     }, '-=200');
   }
   render() {
-    return (h("div", { id: "s-social-share", class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
+    return (h("div", { class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
       return (h("li", { ref: el => this.platformItem = el }, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
         if (icon.name === platform) {
           return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });
@@ -9818,7 +9821,7 @@ const SallaTelInput = class {
   }
   ;
   render() {
-    return (h(Host, { id: "s-tel-input" }, h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+    return (h(Host, { class: "s-tel-input" }, h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
   }
   componentDidLoad() {
     this.initTelInput();

package/dist/esm/twilight-components.js

@@ -16,5 +16,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["salla-button_24",[[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"]]],[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]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[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-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],"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]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[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"],"direction":[1],"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,"onSelect","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]}],[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"],"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-add-product-button",[[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",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return bootstrapLazy([["salla-button_24",[[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"]]],[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]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[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-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],"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]}],[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"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[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,"onSelect","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]}],[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"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"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-add-product-button",[[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",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
 });