@salla.sa/twilight-components 1.3.1 → 1.4.1

package/README.md

@@ -63,7 +63,7 @@ Every web component comes with a list of **properties and events** that make tha
 
 | Component                                                                         | Code Tag                     | Description                                                                                                                      |
 | --------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| [Branches](https://salla.stoplight.io/docs/twilight-themes-documentation/70422e4259f02-branches)                           | `salla-branches`             | Header component that redirects merchants to a specific branch owned by the store.                                                |
+| [Branches](https://salla.stoplight.io/docs/twilight-themes-documentation/70422e4259f02-branches)                           | `salla-scopes`             | Header component that redirects merchants to a specific branch owned by the store.                                                |
 | [Button](https://salla.stoplight.io/docs/twilight-themes-documentation/f973f4bbc269b-button)                               | `salla-button`               | Customizable Button component.                                                                                                    |
 | [Infinite Scroll](https://salla.stoplight.io/docs/twilight-themes-documentation/ede37d6e84859-infinite-scroll)           | `salla-infinite-scroll`      | Items that can be scrolled infinitely.                                                                                           |
 | [Localization](https://salla.stoplight.io/docs/twilight-themes-documentation/559cc67721f74-localization)                   | `salla-localization-modal`   | Modal dialoug which merchants can select languages/currencies from.                                                              |

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0167d5.js');
 
 /*
- Stencil Client Patch Esm v2.17.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.17.4 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -17,7 +17,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-branches_23.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-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[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]}],[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]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[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"]]],[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.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]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-button_23.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"]]],[4,"salla-scopes",{"position":[1],"searchFieldToggler":[2,"search-field-toggler"],"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],"isDefault":[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]}],[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.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]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
   });
 };
 

package/dist/cjs/{salla-branches_23.cjs.entry.js → salla-button_23.cjs.entry.js}

@@ -9,94 +9,6 @@ const index$1 = require('./index-0d0167d5.js');
 const Helper = require('./Helper-8ae6a805.js');
 require('https://static.addtoany.com/menu/page.js');
 
-const sallaBranchesCss = "";
-
-const SallaBranches = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.open = true;
-    this.isOpenedBefore = salla.storage.get("branch-choosed-before");
-    this.displayAs = 'default'; //todo:: change it to boolean, isPopup default false
-    this.browseProductsFrom = 'all'; //todo:: get better name
-    this.branches = [
-      { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
-      { id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
-    ];
-    this.current = 1;
-    this.currentBranch = (prop) => {
-      return this.branches.filter((el) => el.id == this.current)[0][prop];
-    };
-    this.statusColor = (branch = null) => {
-      return branch ?
-        branch.limited ? 's-branches-color-red' : branch.available ? 's-branches-color-green' : 's-branches-color-gray'
-        :
-          this.currentBranch('limited') ? 's-branches-color-red' : this.currentBranch('available') ? 's-branches-color-green' : 's-branches-color-gray';
-    };
-    this.isChoiceable = () => {
-      return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
-    };
-    this.formTitle = () => {
-      return this.isChoiceable() ?
-        'توفر المنتج في الفروع الآخرى'
-        : 'التسوق من فرع آخر';
-    };
-    salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
-    salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
-  }
-  //todo:: add description for all @methods
-  async show() {
-    var _a;
-    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.open();
-  }
-  async hide() {
-    var _a;
-    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.close();
-  }
-  handelChange(event) {
-    this.selected = event.target.value;
-  }
-  handleSubmit() {
-    this.btn.load().then(() => {
-      setTimeout(() => location.reload(), 2000);
-    });
-    salla.storage.set("branch-choosed-before", true);
-    this.show();
-    setTimeout(() => {
-      this.current = this.selected;
-    }, 300);
-  }
-  render() {
-    return (index$1.h("salla-modal", { icon: "sicon-store-alt", "modal-title": "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true,
-      // is-closable={!this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true'}
-      ref: (modal) => this.modal = modal, width: "sm", id: "s-branches-modal", class: "s-hidden" }, index$1.h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
-      index$1.h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => index$1.h("div", { class: "s-branches-input-wrap" }, index$1.h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
-          's-branches-input': true,
-          'opacity-50': !branch.open,
-          's-hidden': !this.isChoiceable()
-        }, checked: this.current == branch.id }), index$1.h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
-          's-branches-label': true,
-          's-branches-clickable': this.isChoiceable()
-        } }, index$1.h("span", { class: { 's-branches-is-closed': !branch.open } }, branch.name), this.isChoiceable() ?
-        index$1.h("small", { class: "s-branches-closed-badge" }, branch.open ? '' : 'مُغلق')
-        :
-          index$1.h("span", { class: this.statusColor(branch) }, branch.tag)))))
-      :
-        index$1.h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index$1.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
-      index$1.h("slot", { name: "footer" }, index$1.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", width: "wide" }, salla.lang.get('common.elements.ok')))
-      : ''));
-  }
-  componentDidRender() {
-    if (!this.isOpenedBefore && this.displayAs == 'popup') {
-      this.show();
-    }
-  }
-  get host() { return index$1.getElement(this); }
-};
-SallaBranches.style = sallaBranchesCss;
-
 const sallaButtonCss = "";
 
 const SallaButton = class {
@@ -1595,6 +1507,139 @@ const SallaRatingStars = class {
 };
 SallaRatingStars.style = sallaRatingStarsCss;
 
+const StoreAlt = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>store-alt</title>
+<path d="M6.667 24h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.86 10.071l-4-8c-0.227-0.452-0.688-0.737-1.193-0.737h-21.333c-0.505 0-0.967 0.285-1.193 0.737l-4 8c-0.092 0.184-0.14 0.389-0.14 0.596v18.667c0 0.737 0.597 1.333 1.333 1.333h29.333c0.736 0 1.333-0.596 1.333-1.333v-18.667c0-0.207-0.048-0.412-0.14-0.596zM6.157 4h19.685l3.333 6.667h-26.352zM24 28h-5.333v-9.333h5.333zM29.333 28h-2.667v-10.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333v10.667h-13.333v-14.667h26.667zM6.667 18.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333z"></path>
+</svg>
+`;
+
+const Search = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>search</title>
+<path d="M30.276 28.391l-7.576-7.576c1.644-2.053 2.633-4.652 2.633-7.481 0-6.616-5.384-12-12-12s-12 5.384-12 12 5.384 12 12 12c2.829 0 5.428-0.989 7.481-2.633l7.576 7.576c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885zM13.333 22.667c-5.147 0-9.333-4.187-9.333-9.333s4.187-9.333 9.333-9.333 9.333 4.187 9.333 9.333-4.187 9.333-9.333 9.333z"></path>
+</svg>
+`;
+
+var ModeType;
+(function (ModeType) {
+  ModeType["DEFAULT"] = "default";
+  ModeType["AVAILABILITY"] = "availability";
+})(ModeType || (ModeType = {}));
+
+const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-placeholder{flex:0 0 85%}";
+
+const SallaScopees = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.mode = ModeType.DEFAULT;
+    this.scopes = [];
+    this.originalScopesList = [];
+    this.isDefault = true;
+    /**
+     * Dictates when to show the searchfield
+     */
+    this.searchFieldToggler = 6;
+    this.getFormTitle = () => {
+      var _a;
+      if (((_a = this.originalScopesList) === null || _a === void 0 ? void 0 : _a.length) < 2)
+        return "";
+      return this.isDefault ?
+        this.shoppingFromAnotherBranch :
+        this.searchForAvailabilityInOtherBranch;
+    };
+    salla.event.on('scopes::open', ({ mode = null, product_id = null }) => {
+      if (!!mode)
+        this.mode = mode;
+      this.isDefault = !mode || mode == ModeType.DEFAULT;
+      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');
+    });
+  }
+  async close() {
+    var _a;
+    return await ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.close());
+  }
+  async open(mode = ModeType.DEFAULT, product_id = null) {
+    this.modal.open();
+    return await (mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
+      .then((resp) => {
+      if (mode == ModeType.AVAILABILITY) {
+        this.setScopeValues(resp.data);
+      }
+      else {
+        this.setScopeValues(resp.data.scopes);
+      }
+    }).catch(e => console.log(e))
+      .finally(() => {
+      this.modal.stopLoading();
+    });
+  }
+  async handleSubmit() {
+    let payload = { 'scope_id': this.current_scope.id };
+    this.changeBtn.load();
+    return await salla.scope.change(payload)
+      .then(() => {
+      window.location.reload();
+    }).catch(e => console.log(e))
+      .finally(() => {
+      this.changeBtn.stop();
+    });
+  }
+  setScopeValues(value) {
+    this.scopes = value;
+    this.originalScopesList = value;
+    if (value.length == 1) {
+      this.current_scope = value[0];
+      this.selected_scope = value[0];
+    }
+    else {
+      this.current_scope = value.find(scope => scope.selected);
+      this.selected_scope = value.find(scope => scope.selected);
+    }
+  }
+  handleSearchFieldTyping(e) {
+    let value = e.target.value.toLocaleLowerCase();
+    if (!!value) {
+      this.scopes = this.originalScopesList.filter(scope => scope.name.toLowerCase().includes(value));
+    }
+    else {
+      this.scopes = this.originalScopesList;
+    }
+  }
+  handleScopeSelection(event) {
+    this.current_scope = this.scopes.find(scope => scope.id == event.target.value);
+  }
+  placeholderContent() {
+    return index$1.h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, index$1.h("span", { slot: "title" }, this.branchNotFound), index$1.h("span", { slot: "description" }, this.ourServiceIsNotFound));
+  }
+  defaultContent() {
+    return [index$1.h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => index$1.h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, index$1.h("input", { id: `${this.position} + '_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$1.h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" }, index$1.h("span", null, scope.name))))), this.footerContent()];
+  }
+  availabilityContent() {
+    return index$1.h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => index$1.h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, index$1.h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.isDefault } }, index$1.h("span", null, scope.name)), index$1.h("h2", { style: { 'color': scope.availability.color }, class: `s-scopes-${scope.availability.key}` }, scope.availability.label))));
+  }
+  footerContent() {
+    return index$1.h("div", { class: "s-scopes-footer" }, index$1.h("slot", { name: "footer" }, index$1.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 (index$1.h(index$1.Host, null, index$1.h("salla-modal", { ref: modal => this.modal = modal, id: "s-scopes-modal", class: "s-scopes-modal", isLoading: true }, index$1.h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, index$1.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index$1.h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom, "            "), index$1.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index$1.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && index$1.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchFieldToggler ?
+      index$1.h("div", { class: "s-scopes-search-wrapper" }, index$1.h("div", { class: "s-scopes-search-icon", innerHTML: Search }), index$1.h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
+      : "", this.scopes.length < 2 ?
+      this.placeholderContent()
+      : this.isDefault ? this.defaultContent() : this.availabilityContent()))));
+  }
+};
+SallaScopees.style = sallaScopesCss;
+
 const sallaSearchCss = "";
 
 const SallaSearch = class {
@@ -9881,7 +9926,6 @@ const SallaVerify = class {
 };
 SallaVerify.style = sallaVerifyCss;
 
-exports.salla_branches = SallaBranches;
 exports.salla_button = SallaButton;
 exports.salla_infinite_scroll = SallaInfiniteScroll;
 exports.salla_list_tile = SallaListTile;
@@ -9896,6 +9940,7 @@ exports.salla_product_availability = SallaProductAvailability;
 exports.salla_product_size_guide = SallaProductSizeGuide;
 exports.salla_rating_modal = SallaRatingModal;
 exports.salla_rating_stars = SallaRatingStars;
+exports.salla_scopes = SallaScopees;
 exports.salla_search = SallaSearch;
 exports.salla_social_share = SallaSocialShare;
 exports.salla_swiper = SallaSwiper;

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

@@ -6,7 +6,7 @@
 const index = require('./index-0d0167d5.js');
 
 /*
- Stencil Client Patch Browser v2.17.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.4 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('twilight-components.cjs.js', document.baseURI).href));
@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-branches_23.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-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[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]}],[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]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[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"]]],[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.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]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-button_23.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"]]],[4,"salla-scopes",{"position":[1],"searchFieldToggler":[2,"search-field-toggler"],"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],"isDefault":[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]}],[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.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]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -1,7 +1,6 @@
 {
   "entries": [
     "./components/salla-add-product-button/salla-add-product-button.js",
-    "./components/salla-branches/salla-branches.js",
     "./components/salla-button/salla-button.js",
     "./components/salla-conditional-fields/salla-conditional-fields.js",
     "./components/salla-infinite-scroll/salla-infinite-scroll.js",
@@ -19,6 +18,7 @@
     "./components/salla-quantity-input/salla-quantity-input.js",
     "./components/salla-rating-modal/salla-rating-modal.js",
     "./components/salla-rating-stars/salla-rating-stars.js",
+    "./components/salla-scopes/salla-scopes.js",
     "./components/salla-search/salla-search.js",
     "./components/salla-social-share/salla-social-share.js",
     "./components/salla-swiper/salla-swiper.js",
@@ -30,7 +30,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.17.3",
+    "version": "2.17.4",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/salla-scopes/interfaces.js

@@ -0,0 +1,8 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export var ModeType;
+(function (ModeType) {
+  ModeType["DEFAULT"] = "default";
+  ModeType["AVAILABILITY"] = "availability";
+})(ModeType || (ModeType = {}));

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

@@ -0,0 +1,13 @@
+/*
+* Salla Branches Component: Store branches & warehouses popup modal
+* You can use these classes to target the elements in the component.
+*/
+.s-scopes-availability-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.s-scopes-placeholder {
+  flex: 0 0 85%;
+}