@salla.sa/twilight-components 1.0.28 → 1.0.31

package/dist/cjs/index.cjs.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLogin = require('./salla-login-15aff630.js');
-const sallaSearch = require('./salla-search-7d0fe40b.js');
+const sallaSearch = require('./salla-search-257561ac.js');
 require('./index-714023c8.js');
 require('./Helper-fcea994c.js');
 
 
 
-exports.SallaLogin = sallaLogin.SallaLogin;
+exports.SallaLogin = sallaSearch.SallaLogin;
 exports.SallaSearch = sallaSearch.SallaSearch;

package/dist/cjs/loader.cjs.js

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

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

@@ -6,14 +6,11 @@ const index = require('./index-714023c8.js');
 
 const sallaBranchesCss = ":host{display:block}";
 
-let engine = require('store/src/store-engine');
-let storages = require('store/storages/sessionStorage');
-let sessionStore = engine.createStore(storages);
 const SallaBranches = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.open = false;
-    this.isOpenedBefore = sessionStore.get("branch-choosed-before");
+    this.isOpenedBefore = salla.localData.get("branch-choosed-before");
     this.displayAs = 'default';
     this.browseProductsFrom = 'all';
     this.branches = [
@@ -59,7 +56,7 @@ const SallaBranches = class {
     this.btn.load().then(() => {
       setTimeout(() => location.reload(), 2000);
     });
-    sessionStore.set("branch-choosed-before", true);
+    salla.localData.set("branch-choosed-before", true);
     this.show();
     setTimeout(() => {
       this.current = this.selected;

package/dist/cjs/{salla-button_5.cjs.entry.js → salla-button_7.cjs.entry.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-fcea994c.js');
-const sallaLogin = require('./salla-login-15aff630.js');
+const sallaSearch = require('./salla-search-257561ac.js');
 
 const sallaButtonCss = ":host{display:block}";
 
@@ -83,6 +83,82 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+const SallaLocalization = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a, _b;
+    this.language = salla.config.get('language', {});
+    this.currency = salla.config.get('currency', {});
+    Helper.Helper.setHost(this.host);
+    salla.event.on('localization::show', () => this.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.languagesTitle = salla.lang.get('common.titles.language');
+      this.currenciesTitle = salla.lang.get('common.titles.currency');
+      this.ok = salla.lang.get('common.elements.ok');
+    });
+    /**
+     * letting developer to insert his own slot like:
+     * <salla-localization>
+     *   <div slot="language">...{name}....</div>
+     *   <div slot="currency">...{name}....</div>
+     * </salla-localization>
+     * Because scoped templates not supported in stencil );
+     * we made a workaround to pass language & currency attributes, then replace names in rendering
+     */
+    this.languageSlot = ((_a = Helper.Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper.Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
+    this.languages = Object.values(salla.config.get('languages', {}));
+    this.currencies = Object.values(salla.config.get('currencies', {}));
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  onChangeCurrency(event) {
+    this.currency = salla.config.get('currencies.' + event.target.value);
+  }
+  onChangeLanguage(event) {
+    this.language = salla.config.get('languages.' + event.target.value);
+  }
+  async submit() {
+    let url;
+    console.log('this.currency.code::::', this.currency, this.currency.code);
+    this.btn.load()
+      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
+      .then(() => this.language.code === salla.config.get('user.language') || (url = this.language.url))
+      .then(() => this.btn.stop())
+      .then(() => this.hide())
+      .then(() => url && (window.location.href = url));
+  }
+  render() {
+    return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, width: "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
+      index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languagesTitle), index.h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
+        this.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index.h("div", { id: "language-slot", innerHTML: this.languageSlot
+            .replace(/\{name\}/g, lang.name)
+            .replace(/\{code\}/g, lang.code)
+            .replace(/\{country_code\}/g, lang.country_code) }))) :
+        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => index.h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
+      : '', this.currencies.length > 1 ?
+      index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+        this.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), index.h("div", { id: "currency-slot", innerHTML: this.currencySlot
+            .replace(/\{name\}/g, currency.name)
+            .replace(/\{code\}/g, currency.code)
+            .replace(/\{country_code\}/g, currency.country_code) }))) :
+        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
+      : ''), index.h("slot", { name: "footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok))));
+  }
+  /**
+   * to reduce dom levels we will move slot data into the parent dom
+   */
+  componentDidRender() {
+    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
+    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
+  }
+  get host() { return index.getElement(this); }
+};
+
 const sallaModalCss = "";
 
 const SallaModal = class {
@@ -1574,8 +1650,8 @@ const SallaTelInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.enterClicked = index.createEvent(this, "enterClicked", 7);
-    this.countryCode = "SA";
-    this.countryKey = "+966";
+    this.countryCode = salla.config.get('user.country_code', 'SA');
+    this.countryKey = "+966"; //TODO:: why we need it
     this.countryCodeLabel = salla.lang.get('common.country_code');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
@@ -1786,8 +1862,10 @@ const SallaVerify = class {
   get host() { return index.getElement(this); }
 };
 
-exports.salla_login = sallaLogin.SallaLogin;
+exports.salla_login = sallaSearch.SallaLogin;
+exports.salla_search = sallaSearch.SallaSearch;
 exports.salla_button = SallaButton;
+exports.salla_localization = SallaLocalization;
 exports.salla_modal = SallaModal;
 exports.salla_tel_input = SallaTelInput;
 exports.salla_verify = SallaVerify;

package/dist/cjs/{salla-login-15aff630.js → salla-search-257561ac.js}

@@ -184,4 +184,78 @@ const SallaLogin = class {
 };
 SallaLogin.style = sallaLoginCss;
 
+const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:1rem}";
+
+const SallaSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a;
+    Helper.Helper.setHost(this.host);
+    this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('search::show', () => this.modal.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+      this.noResultsText = salla.lang.get('common.elements.no_options');
+    });
+  }
+  onModalOpen() {
+    this.modal.querySelector('.s-search-input').focus();
+  }
+  onModalClose() {
+    this.modal.querySelector('.s-search-input').value = '';
+    this.results = undefined;
+    this.afterSearching();
+  }
+  getDefaultProductSlot() {
+    return '<div class="s-search-product-image-container">' +
+      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+      '</div>' +
+      '<div class="s-search-product-details">' +
+      '  <div class="s-search-product-name">{name}</div> <div class="s-search-product-price">{price}</div>' +
+      '</div>';
+  }
+  //todo:: reset data when closing
+  search(e) {
+    Helper.Helper.hideElement(this.noResults);
+    if (e.target.value.length === 0) {
+      this.results = undefined;
+      this.afterSearching();
+      return;
+    }
+    if (e.target.value.length <= 2) {
+      return;
+    }
+    //run loading spinner or stop it
+    Helper.Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    salla.search.api.search(e.target.value)
+      .then(response => this.results = response)
+      .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
+      .finally(() => this.afterSearching(/*isEmpty*/ false));
+  }
+  afterSearching(isEmpty = true) {
+    var _a;
+    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
+    Helper.Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
+      .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
+  }
+  render() {
+    var _a;
+    return (index.h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, index.h("div", { class: "s-search-container", ref: container => this.container = container }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), index.h("span", { class: "s-search-icon" }, index.h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), index.h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+      _a.data.map(item => index.h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
+          .replace(/\{name\}/g, item.name)
+          .replace(/\{price\}/g, item.price) //todo:: get discounted price too
+          .replace(/\{image\}/g, item.image_url) })), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText)))));
+  }
+  /**
+   * Run it one time after load
+   */
+  componentDidLoad() {
+    this.afterSearching();
+  }
+  get host() { return index.getElement(this); }
+};
+SallaSearch.style = sallaSearchCss;
+
 exports.SallaLogin = SallaLogin;
+exports.SallaSearch = SallaSearch;

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_5.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"],[0,"backClicked","onbackClicked"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"isShowBack":[4,"is-show-back"],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"setText":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"ok":[32],"show":[64],"hide":[64]}]]],["salla-localization.cjs",[[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[32],"ok":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-search.cjs",[[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button_7.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"],[0,"backClicked","onbackClicked"]]],[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[32],"ok":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"isShowBack":[4,"is-show-back"],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"setText":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"ok":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
 });

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

@@ -1,11 +1,8 @@
 import { Component, h, Prop, Method, State, Element } from "@stencil/core";
-let engine = require('store/src/store-engine');
-let storages = require('store/storages/sessionStorage');
-let sessionStore = engine.createStore(storages);
 export class SallaBranches {
   constructor() {
     this.open = false;
-    this.isOpenedBefore = sessionStore.get("branch-choosed-before");
+    this.isOpenedBefore = salla.localData.get("branch-choosed-before");
     this.displayAs = 'default';
     this.browseProductsFrom = 'all';
     this.branches = [
@@ -51,7 +48,7 @@ export class SallaBranches {
     this.btn.load().then(() => {
       setTimeout(() => location.reload(), 2000);
     });
-    sessionStore.set("branch-choosed-before", true);
+    salla.localData.set("branch-choosed-before", true);
     this.show();
     setTimeout(() => {
       this.current = this.selected;

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -3,8 +3,8 @@ import TelInput from "intl-tel-input";
 import Helper from "../../Helpers/Helper";
 export class SallaTelInput {
   constructor() {
-    this.countryCode = "SA";
-    this.countryKey = "+966";
+    this.countryCode = salla.config.get('user.country_code', 'SA');
+    this.countryKey = "+966"; //TODO:: why we need it
     this.countryCodeLabel = salla.lang.get('common.country_code');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
@@ -121,7 +121,7 @@ export class SallaTelInput {
       },
       "attribute": "country-code",
       "reflect": false,
-      "defaultValue": "\"SA\""
+      "defaultValue": "salla.config.get('user.country_code', 'SA')"
     },
     "countryKey": {
       "type": "string",

package/dist/collection/plugins/tailwind-theme/index.js

@@ -8,13 +8,28 @@ module.exports = require('tailwindcss/plugin').withOptions(() => {
       '.error'              : {},
       '.search-box'         : {},
       '.spinner-loader-wrap': {},
+      // '.me-3'               : {},
+      // '.ms-3'               : {},
+      // '.pe-4'               : {},
+      // '.ps-5'               : {},
+      // '.space-s-3'          : {},
+      // '.end-4'              : {},
+
+      '.has-error'          : {'@apply border-red-400 focus:border-red-500': {}},
+      '.rounded-icon'       : {'@apply w-16 h-16 flex justify-center items-center rounded-full text-3xl': {}},
+      '.form-input'         : {'@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-border-color dark:bg-gray-600 dark:border-gray-600 rounded-md': {}},
+      '.btn'                : {'@apply transition duration-300 flex-1 inline-flex justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded-md hover:opacity-80 whitespace-nowrap': {}},
+      '.btn-primary'        : {'@apply text-primary-reverse border border-primary bg-primary': {}},
+      '.btn-danger'         : {'@apply bg-theme-red text-white hover:opacity-80': {}},
+      '.btn-outline'        : {'@apply text-gray-400 bg-white shadow-sm hover:text-gray-600 border border-border-color': {}},
+      '.btn-outline-primary': {'@apply border border-primary text-primary hover:bg-primary hover:text-reverse': {}},
     });
 
     // todo :: move it to global
     addUtilities({
       '.spinner-loader': {
         'border-right-color': 'var(--color-main) !important',
-        '&.reverse': {
+        '&.reverse'         : {
           'border-right-color': '#9f7171 !important',
           'background-color'  : '#f98181'
         }

package/dist/esm/index.js

@@ -1,4 +1,3 @@
-export { S as SallaLogin } from './salla-login-e6e86a3d.js';
-export { S as SallaSearch } from './salla-search-66aae389.js';
+export { S as SallaLogin, a as SallaSearch } from './salla-search-c30c12ef.js';
 import './index-a1bf769d.js';
 import './Helper-d07ebbc7.js';

package/dist/esm/loader.js

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

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

@@ -2,14 +2,11 @@ import { r as registerInstance, h, g as getElement } from './index-a1bf769d.js';
 
 const sallaBranchesCss = ":host{display:block}";
 
-let engine = require('store/src/store-engine');
-let storages = require('store/storages/sessionStorage');
-let sessionStore = engine.createStore(storages);
 const SallaBranches = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.open = false;
-    this.isOpenedBefore = sessionStore.get("branch-choosed-before");
+    this.isOpenedBefore = salla.localData.get("branch-choosed-before");
     this.displayAs = 'default';
     this.browseProductsFrom = 'all';
     this.branches = [
@@ -55,7 +52,7 @@ const SallaBranches = class {
     this.btn.load().then(() => {
       setTimeout(() => location.reload(), 2000);
     });
-    sessionStore.set("branch-choosed-before", true);
+    salla.localData.set("branch-choosed-before", true);
     this.show();
     setTimeout(() => {
       this.current = this.selected;

package/dist/esm/{salla-button_5.entry.js → salla-button_7.entry.js}

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
-export { S as salla_login } from './salla-login-e6e86a3d.js';
+export { S as salla_login, a as salla_search } from './salla-search-c30c12ef.js';
 
 const sallaButtonCss = ":host{display:block}";
 
@@ -79,6 +79,82 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+const SallaLocalization = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    var _a, _b;
+    this.language = salla.config.get('language', {});
+    this.currency = salla.config.get('currency', {});
+    Helper.setHost(this.host);
+    salla.event.on('localization::show', () => this.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.languagesTitle = salla.lang.get('common.titles.language');
+      this.currenciesTitle = salla.lang.get('common.titles.currency');
+      this.ok = salla.lang.get('common.elements.ok');
+    });
+    /**
+     * letting developer to insert his own slot like:
+     * <salla-localization>
+     *   <div slot="language">...{name}....</div>
+     *   <div slot="currency">...{name}....</div>
+     * </salla-localization>
+     * Because scoped templates not supported in stencil );
+     * we made a workaround to pass language & currency attributes, then replace names in rendering
+     */
+    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
+    this.languages = Object.values(salla.config.get('languages', {}));
+    this.currencies = Object.values(salla.config.get('currencies', {}));
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  onChangeCurrency(event) {
+    this.currency = salla.config.get('currencies.' + event.target.value);
+  }
+  onChangeLanguage(event) {
+    this.language = salla.config.get('languages.' + event.target.value);
+  }
+  async submit() {
+    let url;
+    console.log('this.currency.code::::', this.currency, this.currency.code);
+    this.btn.load()
+      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
+      .then(() => this.language.code === salla.config.get('user.language') || (url = this.language.url))
+      .then(() => this.btn.stop())
+      .then(() => this.hide())
+      .then(() => url && (window.location.href = url));
+  }
+  render() {
+    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { slot: "header" }, h("slot", { name: "header" })), h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
+      h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.languagesTitle), h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
+        this.languages.map(lang => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { id: "language-slot", innerHTML: this.languageSlot
+            .replace(/\{name\}/g, lang.name)
+            .replace(/\{code\}/g, lang.code)
+            .replace(/\{country_code\}/g, lang.country_code) }))) :
+        h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
+      : '', this.currencies.length > 1 ?
+      h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.currenciesTitle), h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+        this.currencies.map(currency => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), h("div", { id: "currency-slot", innerHTML: this.currencySlot
+            .replace(/\{name\}/g, currency.name)
+            .replace(/\{code\}/g, currency.code)
+            .replace(/\{country_code\}/g, currency.country_code) }))) :
+        h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
+      : ''), h("slot", { name: "footer" }, h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok))));
+  }
+  /**
+   * to reduce dom levels we will move slot data into the parent dom
+   */
+  componentDidRender() {
+    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
+    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
+  }
+  get host() { return getElement(this); }
+};
+
 const sallaModalCss = "";
 
 const SallaModal = class {
@@ -1570,8 +1646,8 @@ const SallaTelInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.enterClicked = createEvent(this, "enterClicked", 7);
-    this.countryCode = "SA";
-    this.countryKey = "+966";
+    this.countryCode = salla.config.get('user.country_code', 'SA');
+    this.countryKey = "+966"; //TODO:: why we need it
     this.countryCodeLabel = salla.lang.get('common.country_code');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
@@ -1782,4 +1858,4 @@ const SallaVerify = class {
   get host() { return getElement(this); }
 };
 
-export { SallaButton as salla_button, SallaModal as salla_modal, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };
+export { SallaButton as salla_button, SallaLocalization as salla_localization, SallaModal as salla_modal, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };

package/dist/esm/{salla-login-e6e86a3d.js → salla-search-c30c12ef.js}

@@ -182,4 +182,77 @@ const SallaLogin = class {
 };
 SallaLogin.style = sallaLoginCss;
 
-export { SallaLogin as S };
+const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:1rem}";
+
+const SallaSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    var _a;
+    Helper.setHost(this.host);
+    this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('search::show', () => this.modal.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+      this.noResultsText = salla.lang.get('common.elements.no_options');
+    });
+  }
+  onModalOpen() {
+    this.modal.querySelector('.s-search-input').focus();
+  }
+  onModalClose() {
+    this.modal.querySelector('.s-search-input').value = '';
+    this.results = undefined;
+    this.afterSearching();
+  }
+  getDefaultProductSlot() {
+    return '<div class="s-search-product-image-container">' +
+      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+      '</div>' +
+      '<div class="s-search-product-details">' +
+      '  <div class="s-search-product-name">{name}</div> <div class="s-search-product-price">{price}</div>' +
+      '</div>';
+  }
+  //todo:: reset data when closing
+  search(e) {
+    Helper.hideElement(this.noResults);
+    if (e.target.value.length === 0) {
+      this.results = undefined;
+      this.afterSearching();
+      return;
+    }
+    if (e.target.value.length <= 2) {
+      return;
+    }
+    //run loading spinner or stop it
+    Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    salla.search.api.search(e.target.value)
+      .then(response => this.results = response)
+      .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
+      .finally(() => this.afterSearching(/*isEmpty*/ false));
+  }
+  afterSearching(isEmpty = true) {
+    var _a;
+    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
+    Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
+      .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
+  }
+  render() {
+    var _a;
+    return (h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, h("div", { class: "s-search-container", ref: container => this.container = container }, h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), h("span", { class: "s-search-icon" }, h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+      _a.data.map(item => h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
+          .replace(/\{name\}/g, item.name)
+          .replace(/\{price\}/g, item.price) //todo:: get discounted price too
+          .replace(/\{image\}/g, item.image_url) })), h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText)))));
+  }
+  /**
+   * Run it one time after load
+   */
+  componentDidLoad() {
+    this.afterSearching();
+  }
+  get host() { return getElement(this); }
+};
+SallaSearch.style = sallaSearchCss;
+
+export { SallaLogin as S, SallaSearch as a };