@salla.sa/twilight-components 1.0.49 → 1.0.51

package/dist/cjs/index.cjs.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaSearch = require('./salla-search-a7147639.js');
+const sallaLoginModal = require('./salla-login-modal-a2c7fa5d.js');
+const sallaSearch = require('./salla-search-99d08b1f.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 
 
 
-exports.SallaLogin = sallaSearch.SallaLogin;
+exports.SallaLoginModal = sallaLoginModal.SallaLoginModal;
 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_7.cjs",[[4,"salla-login",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]],[0,"salla-localization",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.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],"isVisitorSubscribed":[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],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button.cjs",[[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-modal_2.cjs",[[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.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],"isVisitorSubscribed":[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],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0b5b5867.js');
+const Helper = require('./Helper-98cc9f18.js');
+
+const sallaButtonCss = "";
+
+const SallaButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Button Style
+     */
+    this.btnStyle = 'primary';
+    /**
+     * Is the button currently loading
+     */
+    this.loading = false;
+    /**
+     * Is the button currently disabled
+     */
+    this.disabled = false;
+    /**
+     * If there is need to change loader position, pass the position
+     */
+    this.loaderPosition = 'after';
+    /**
+     * Is the button wide
+     */
+    this.wide = false;
+    this.hostAttributes = {};
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+    }
+    this.hostAttributes.type = this.hostAttributes.type || 'button';
+    this.hostAttributes.class += ' s-button-btn btn--has-loading'
+      + ' s-button-' + this.btnStyle
+      + (this.wide ? ' s-button-wide ' : '')
+      + ' s-button-btn-loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
+      + (this.loaderPosition == 'after' ? ' s-button-loader-after' : '');
+    delete this.hostAttributes['btn-style'];
+    delete this.hostAttributes['id'];
+    delete this.hostAttributes['data-on-click'];
+    if (this.wide) {
+      this.host.classList.add('s-button-wide');
+    }
+  }
+  /**
+   * Run loading animation
+   */
+  async load() {
+    if (this.loaderPosition == 'center')
+      this.text.classList.add('s-button-hide');
+    this.host.setAttribute('loading', '');
+    return this.host;
+  }
+  /**
+   * Stop loading animation
+   */
+  async stop() {
+    this.host.removeAttribute('loading');
+    if (this.loaderPosition == 'center')
+      this.text.classList.remove('s-button-hide');
+    return this.host;
+  }
+  /**
+   * Changing the body of the button
+   * @param html
+   */
+  async setText(html) {
+    this.text.innerHTML = html;
+    return this.host;
+  }
+  /**
+   * Add `disabled` attribute
+   */
+  async disable() {
+    this.host.setAttribute('disabled', '');
+  }
+  /**
+   * Remove `disabled` attribute
+   */
+  async enable() {
+    this.host.removeAttribute('disabled');
+  }
+  handleVisible(newKind, oldKind) {
+    //todo::use united styles
+    this.btn.classList.remove('btn-' + oldKind);
+    this.btn.classList.add('btn-' + newKind);
+  }
+  handleLoading(newVal) {
+    //todo::use united styles
+    Helper.Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
+  }
+  render() {
+    return (
+    //TODO:: use HOST then fake button behaviours
+    index.h(index.Host, { class: "s-button-wrap" }, index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: { 's-button-text': true, 's-button-hide': this.loaderPosition == 'center' && this.loading }, ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: {
+        //todo::use united styles
+        's-button-loader': true,
+        's-button-loader-start': this.loaderPosition === 'start',
+        's-button-loader-end': this.loaderPosition === 'end',
+        's-button-loader-center': this.loaderPosition === 'center',
+      } }) : '')));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "btnStyle": ["handleVisible"],
+    "loading": ["handleLoading"]
+  }; }
+};
+SallaButton.style = sallaButtonCss;
+
+exports.salla_button = SallaButton;

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

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

package/dist/cjs/{salla-search-a7147639.js → salla-login-modal-a2c7fa5d.js}

@@ -3,9 +3,9 @@
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaLoginCss = "";
+const sallaLoginModalCss = "";
 
-const SallaLogin = class {
+const SallaLoginModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
@@ -39,7 +39,7 @@ const SallaLogin = class {
     this.typing = (e, submitMethod) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
-      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-error-message')) && (error.innerText = '');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-modal-error-message')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
     this.loginBySMS = async () => {
@@ -160,8 +160,8 @@ const SallaLogin = class {
     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
     let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
     tabs.map(el => Helper.Helper.toggleElement(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)), 200);
-    setTimeout(() => this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'));
+    setTimeout(() => tabs.map(el => Helper.Helper.toggleElement(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    setTimeout(() => this.host.querySelector('.s-login-modal-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'));
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
@@ -189,90 +189,16 @@ const SallaLogin = class {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (index.h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), index.h("slot", { name: "before-login-type" }), index.h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("i", { class: "s-login-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-main-btn-text" }, this.smsLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("i", { class: "s-login-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-main-btn-text" }, this.emailLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("slot", { name: "after-login-type" }))
+    return (index.h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), index.h("slot", { name: "before-login-type" }), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
-        index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-error-message" }), index.h("label", { class: "s-login-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
+        index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
+        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-modal-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("label", { class: "s-login-modal-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
 };
-SallaLogin.style = sallaLoginCss;
+SallaLoginModal.style = sallaLoginModalCss;
 
-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:50%;transform:translateY(-50%)}";
-
-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-title">{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;
+exports.SallaLoginModal = SallaLoginModal;

package/dist/cjs/salla-login-modal.cjs.entry.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const sallaLoginModal = require('./salla-login-modal-a2c7fa5d.js');
+require('./index-0b5b5867.js');
+require('./Helper-98cc9f18.js');
+
+
+
+exports.salla_login_modal = sallaLoginModal.SallaLoginModal;

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

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0b5b5867.js');
+const Helper = require('./Helper-98cc9f18.js');
+const sallaSearch = require('./salla-search-99d08b1f.js');
+
+const sallaModalCss = "";
+
+const SallaModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.modalOpened = index.createEvent(this, "modalOpened", 7);
+    this.modalClosed = index.createEvent(this, "modalClosed", 7);
+    this.isClosable = true; //todo::rename unclude
+    /**
+     * The size of the modal
+     */
+    this.width = 'md';
+    /**
+     * The position of the modal
+     */
+    this.position = 'middle';
+    /**
+     * Show the modal on rendering
+     */
+    this.visible = false;
+    /**
+     * Show loading in the middle
+     */
+    this.isLoading = false;
+    this.subTitleFirst = false; //todo:: choose better name
+    this.noPadding = false; //todo:: choose better name
+    this.subTitle = '';
+    /**
+     * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
+     */
+    this.icon = '';
+    this.iconStyle = '';
+    /**
+     * url of an image
+     */
+    this.imageIcon = '';
+    Helper.Helper.setHost(this.host);
+    salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
+    salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+    this.title = this.host.title;
+    this.host.removeAttribute('title');
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.modalClosed.emit();
+      return;
+    }
+    this.host.classList.remove('s-hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.modalOpened.emit();
+  }
+  /**
+   * Show the modal
+   */
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  /**
+   * hide the modal
+   */
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  /**
+   * Change the title
+   * @param {string} title
+   */
+  async setTitle(title) {
+    this.title = title;
+    return this.host;
+  }
+  /**
+   * Start loading
+   */
+  async loading() {
+    this.isLoading = true;
+    return this.host;
+  }
+  /**
+   * Stop the loading
+   */
+  async stopLoading() {
+    this.isLoading = false;
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    const body = this.host.querySelector('.s-modal-body');
+    Helper.Helper.toggleElement(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+      //todo:: use united class names
+      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+    if (!isOpen) {
+      setTimeout(() => this.host.classList.add('s-hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  iconBlockClasses() {
+    return {
+      's-modal-icon': true,
+      's-modal-bg-error': this.iconStyle == 'error',
+      's-modal-bg-success': this.iconStyle == 'success',
+      's-modal-bg-normal': this.iconStyle != 'error' && this.iconStyle != 'success',
+      's-modal-bg-primary': this.iconStyle == 'primary'
+    };
+  }
+  iconClasses() {
+    return {
+      [this.icon]: true,
+      'sicon-alert-engine': !this.icon && this.iconStyle == 'error' && !this.imageIcon,
+      'sicon-check-circle2': !this.icon && this.iconStyle == 'success' && !this.imageIcon,
+    };
+  }
+  //todo:: pref for each modal
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (index.h(index.Host, { class: 'salla-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
+      index.h("div", { class: "s-modal-loader-wrap" }, index.h("span", { class: "s-modal-loader" }))
+      :
+        [
+          index.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
+            index.h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
+            : '', this.title || this.subTitle ?
+            index.h("div", { class: "s-modal-header-inner" }, this.iconStyle || this.icon
+              ? index.h("div", { class: this.iconBlockClasses() }, index.h("i", { class: this.iconClasses() }))
+              : this.imageIcon ? index.h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '', index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+            : ''),
+          index.h("slot", null),
+          index.h("slot", { name: "footer" })
+        ]))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "visible": ["handleVisible"]
+  }; }
+};
+SallaModal.style = sallaModalCss;
+
+exports.salla_search = sallaSearch.SallaSearch;
+exports.salla_modal = SallaModal;