@salla.sa/twilight-components 1.0.52 → 1.0.53

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLoginModal = require('./salla-login-modal-a2c7fa5d.js');
-const sallaSearch = require('./salla-search-99d08b1f.js');
+const sallaLoginModal = require('./salla-login-modal-54cc2e83.js');
+const sallaSearch = require('./salla-search-f76c6d61.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 

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.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);
+  return index.bootstrapLazy([["salla-button.cjs",[[4,"salla-button",{"btnStyle":[513,"btn-style"],"icon":[516],"miniIcon":[516,"mini-icon"],"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",{"inline":[4],"oval":[4],"height":[2],"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-branches.cjs.entry.js

@@ -10,7 +10,7 @@ const SallaBranches = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.open = false;
-    this.isOpenedBefore = salla.localData.get("branch-choosed-before");
+    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 = [
@@ -55,7 +55,7 @@ const SallaBranches = class {
     this.btn.load().then(() => {
       setTimeout(() => location.reload(), 2000);
     });
-    salla.localData.set("branch-choosed-before", true);
+    salla.storage.set("branch-choosed-before", true);
     this.show();
     setTimeout(() => {
       this.current = this.selected;

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

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
-const Helper = require('./Helper-98cc9f18.js');
 
-const sallaButtonCss = "";
+const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-text{opacity:0}.s-button-wrap .s-button-icon:not(:disabled),.s-button-wrap .s-button-btn:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}.s-button-wrap .s-button-mini-icon .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-danger .s-button-loader::before,.s-button-wrap .s-button-outline-danger .s-button-loader::before{border-top-color:#f87171;border-left-color:#f87171}";
 
 const SallaButton = class {
   constructor(hostRef) {
@@ -14,6 +13,14 @@ const SallaButton = class {
      * Button Style
      */
     this.btnStyle = 'primary';
+    /**
+     * Circle Button with icon
+     */
+    this.icon = false;
+    /**
+     * Mini Circle Button with icon
+     */
+    this.miniIcon = false;
     /**
      * Is the button currently loading
      */
@@ -35,14 +42,13 @@ const SallaButton = class {
       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' : '');
+    this.hostAttributes.class +=
+      (this.icon ? ' s-button-icon s-button-loader-center' : ' s-button-btn ' + 's-button-loader-' + this.loaderPosition)
+        + (this.wide ? ' s-button-wide ' : '')
+        + (this.disabled ? ' s-button-disabled ' : ' s-button-' + this.btnStyle)
+        + (this.miniIcon ? ' s-button-mini-icon ' : '');
     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');
     }
@@ -90,25 +96,14 @@ const SallaButton = class {
     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',
-      } }) : '')));
+    index.h(index.Host, { class: "s-button-wrap" }, index.h("button", Object.assign({ ref: btn => this.btn = btn }, this.hostAttributes, { disabled: this.disabled }), index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: "s-button-loader" }) : '')));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
-    "btnStyle": ["handleVisible"],
-    "loading": ["handleLoading"]
+    "btnStyle": ["handleVisible"]
   }; }
 };
 SallaButton.style = sallaButtonCss;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaLocalizationModalCss = "";
+const sallaLocalizationModalCss = "#salla-localization .s-localization-modal-select{appearance:none;-webkit-appearance:none}";
 
 const SallaLocalizationModal = class {
   constructor(hostRef) {

package/dist/cjs/{salla-login-modal-a2c7fa5d.js → salla-login-modal-54cc2e83.js}

@@ -70,7 +70,7 @@ const SallaLoginModal = class {
     };
     this.newUser = async () => {
       var _a;
-      const { mobile: regPhone, countryCode, countryKey } = await this.regTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
+      const { mobile: regPhone, countryCode, countryKey } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
       await this.newUserValidation();
       await this.regBtn.load();
       await this.regBtn.disable();

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLoginModal = require('./salla-login-modal-a2c7fa5d.js');
+const sallaLoginModal = require('./salla-login-modal-54cc2e83.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 

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

@@ -4,9 +4,9 @@ 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 sallaSearch = require('./salla-search-f76c6d61.js');
 
-const sallaModalCss = "";
+const sallaModalCss = ".salla-modal .s-modal-wrapper{height:calc(var(--vh, 1vh) * 100)}";
 
 const SallaModal = class {
   constructor(hostRef) {

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

@@ -23,7 +23,7 @@ const SallaOfferModal = class {
     this.productSlot = ((_b = Helper.Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
     salla.offer.event.onExisted(data => {
       //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
-      if (salla.localData.get('remember-offer-' + data.offer.offer_id)) {
+      if (salla.storage.get('remember-offer-' + data.offer.offer_id)) {
         salla.log('User selected to don\'t show this offer again.');
         return;
       }
@@ -50,7 +50,7 @@ const SallaOfferModal = class {
     return this.modal.show();
   }
   rememberMe(event) {
-    salla.localData.set('remember-offer-' + this.offer.id, event.target.checked);
+    salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
   }
   addItem() {
     // this here, is sallaButton

package/dist/cjs/salla-product-availability.cjs.entry.js

@@ -34,7 +34,7 @@ const SallaProductAvailability = class {
         .then(() => salla.api.product.availabilitySubscribe(data))
         .then(() => {
         this.isSubscribed = true;
-        salla.localData.set(`product-${this.productId}-subscribed`, true);
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
       }) //no need to wait until finishing alert animation
         .then(() => this.btn.stop())
         .then(() => this.modal.hide())
@@ -67,7 +67,7 @@ const SallaProductAvailability = class {
     this.channelsWatcher(this.channels);
     this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
     this.host.removeAttribute('title');
-    this.isVisitorSubscribed = salla.localData.get(`product-${this.productId}-subscribed`);
+    this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
   }
   channelsWatcher(newValue) {
     this.channels_ = newValue.split(',');

package/dist/cjs/{salla-search-99d08b1f.js → salla-search-f76c6d61.js}

@@ -3,12 +3,16 @@
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-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 sallaSearchCss = "#s-search-modal .s-search-inline{border:1px solid #eee}#s-search-modal .s-search-no-results .s-search-input,#s-search-modal .s-search-container-open .s-search-input{border-bottom:1px solid #f4f4f5}#s-search-modal .s-search-product-image[src=null]{opacity:0}#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;background:transparent;overflow:visible}#s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
 
 const SallaSearch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     var _a;
+    this.inputValue = '';
+    this.inline = false;
+    this.oval = false;
+    this.height = 60;
     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());
@@ -24,6 +28,7 @@ const SallaSearch = class {
     this.modal.querySelector('.s-search-input').value = '';
     this.results = undefined;
     this.afterSearching();
+    this.container.classList.remove('s-search-no-results');
   }
   getDefaultProductSlot() {
     return '<div class="s-search-product-image-container">' +
@@ -35,6 +40,7 @@ const SallaSearch = class {
   }
   //todo:: reset data when closing
   search(e) {
+    this.inputValue = e.target.value;
     Helper.Helper.hideElement(this.noResults);
     if (e.target.value.length === 0) {
       this.results = undefined;
@@ -54,17 +60,22 @@ const SallaSearch = class {
   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; })
+    Helper.Helper.toggleElement(this.container, 's-search-container-open', 's-search-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;
+    this.inputValue.length == 0 ? this.container.classList.remove('s-search-no-results') : '';
   }
   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 :
+    const searchContent = index.h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container, style: this.oval ? { borderRadius: this.height / 2 + 'px' } : {} }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e), style: { height: this.height + 'px' } }), index.h("span", { class: "s-search-icon-wrap" }, index.h("i", { class: "s-search-icon 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)))));
+          .replace(/\{image\}/g, item.image_url) })), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, this.noResultsText)));
+    return (this.inline ?
+      index.h("div", { id: "s-search-modal" }, searchContent)
+      :
+        index.h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
   }
   /**
    * Run it one time after load

package/dist/cjs/salla-tel-input.cjs.entry.js

@@ -1449,10 +1449,8 @@ const SallaTelInput = class {
     });
     this.phoneInput.addEventListener("countrychange", () => {
       let data = this.iti.getSelectedCountryData();
-      this.host.querySelectorAll('.country_code').forEach((input) => input.value = data.iso2.toUpperCase());
-      this.host.querySelectorAll('.country_key').forEach((input) => {
-        input.value = ('+' + data.dialCode).replace('++', '+');
-      });
+      this.countryCodeInput.value = data.iso2.toUpperCase();
+      this.countryKeyInput.value = ('+' + data.dialCode).replace('++', '+');
     });
     // on blur: validate
     this.phoneInput.addEventListener('blur', () => this.isValid());

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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);
+  return index.bootstrapLazy([["salla-button.cjs",[[4,"salla-button",{"btnStyle":[513,"btn-style"],"icon":[516],"miniIcon":[516,"mini-icon"],"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",{"inline":[4],"oval":[4],"height":[2],"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/collection/components/salla-branches/salla-branches.js

@@ -2,7 +2,7 @@ import { Component, h, Prop, Method, State, Element } from "@stencil/core";
 export class SallaBranches {
   constructor() {
     this.open = false;
-    this.isOpenedBefore = salla.localData.get("branch-choosed-before");
+    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 = [
@@ -47,7 +47,7 @@ export class SallaBranches {
     this.btn.load().then(() => {
       setTimeout(() => location.reload(), 2000);
     });
-    salla.localData.set("branch-choosed-before", true);
+    salla.storage.set("branch-choosed-before", true);
     this.show();
     setTimeout(() => {
       this.current = this.selected;

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

@@ -10,4 +10,54 @@
 /*
 * Salla Button Component: has many sizes, styles and loading state.
 * You can use these classes to target the elements in the component.
-*/
+*/
+salla-button {
+  pointer-events: none;
+}
+salla-button[type=submit] {
+  -webkit-appearance: none;
+}
+
+.s-button-wrap[loading] {
+  pointer-events: none;
+}
+.s-button-wrap[loading] .s-button-text {
+  opacity: 0;
+}
+.s-button-wrap .s-button-icon:not(:disabled), .s-button-wrap .s-button-btn:not(:disabled) {
+  pointer-events: auto;
+}
+.s-button-wrap .s-button-loader-after .s-button-load {
+  flex-direction: row;
+}
+.s-button-wrap .s-button-loader-start .s-button-loader {
+  position: absolute;
+  right: 8px;
+}
+.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr] {
+  left: 8px;
+  right: auto;
+}
+.s-button-wrap .s-button-loader-end .s-button-loader {
+  position: absolute;
+  left: 8px;
+}
+.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr] {
+  right: 8px;
+  left: auto;
+}
+.s-button-wrap .s-button-loader-center .s-button-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  margin: 0 !important;
+}
+.s-button-wrap .s-button-mini-icon .s-button-loader:before {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+.s-button-wrap .s-button-danger .s-button-loader::before, .s-button-wrap .s-button-outline-danger .s-button-loader::before {
+  border-top-color: #f87171;
+  border-left-color: #f87171;
+}

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

@@ -1,11 +1,18 @@
 import { Component, Element, h, Method, Prop, Watch, Host } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
 export class SallaButton {
   constructor() {
     /**
      * Button Style
      */
     this.btnStyle = 'primary';
+    /**
+     * Circle Button with icon
+     */
+    this.icon = false;
+    /**
+     * Mini Circle Button with icon
+     */
+    this.miniIcon = false;
     /**
      * Is the button currently loading
      */
@@ -27,14 +34,13 @@ export class SallaButton {
       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' : '');
+    this.hostAttributes.class +=
+      (this.icon ? ' s-button-icon s-button-loader-center' : ' s-button-btn ' + 's-button-loader-' + this.loaderPosition)
+        + (this.wide ? ' s-button-wide ' : '')
+        + (this.disabled ? ' s-button-disabled ' : ' s-button-' + this.btnStyle)
+        + (this.miniIcon ? ' s-button-mini-icon ' : '');
     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');
     }
@@ -82,24 +88,14 @@ export class SallaButton {
     this.btn.classList.remove('btn-' + oldKind);
     this.btn.classList.add('btn-' + newKind);
   }
-  handleLoading(newVal) {
-    //todo::use united styles
-    Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
-  }
   render() {
     return (
     //TODO:: use HOST then fake button behaviours
     h(Host, { class: "s-button-wrap" },
-      h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes),
-        h("span", { class: { 's-button-text': true, 's-button-hide': this.loaderPosition == 'center' && this.loading }, ref: el => this.text = el },
+      h("button", Object.assign({ ref: btn => this.btn = btn }, this.hostAttributes, { disabled: this.disabled }),
+        h("span", { class: "s-button-text", ref: el => this.text = el },
           h("slot", null)),
-        this.loading ? h("span", { class: {
-            //todo::use united styles
-            's-button-loader': true,
-            's-button-loader-start': this.loaderPosition === 'start',
-            's-button-loader-end': this.loaderPosition === 'end',
-            's-button-loader-center': this.loaderPosition === 'center',
-          } }) : '')));
+        this.loading ? h("span", { class: "s-button-loader" }) : '')));
   }
   static get is() { return "salla-button"; }
   static get originalStyleUrls() { return {
@@ -113,8 +109,8 @@ export class SallaButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'outline' | 'outline-primary' | 'danger'",
-        "resolved": "\"danger\" | \"outline\" | \"outline-primary\" | \"primary\"",
+        "original": "'primary' | 'outline' | 'outline-primary' | 'danger' | 'link' | 'link-danger'",
+        "resolved": "\"danger\" | \"link\" | \"link-danger\" | \"outline\" | \"outline-primary\" | \"primary\"",
         "references": {}
       },
       "required": false,
@@ -127,6 +123,42 @@ export class SallaButton {
       "reflect": true,
       "defaultValue": "'primary'"
     },
+    "icon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Circle Button with icon"
+      },
+      "attribute": "icon",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "miniIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Mini Circle Button with icon"
+      },
+      "attribute": "mini-icon",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "loading": {
       "type": "boolean",
       "mutable": false,
@@ -304,8 +336,5 @@ export class SallaButton {
   static get watchers() { return [{
       "propName": "btnStyle",
       "methodName": "handleVisible"
-    }, {
-      "propName": "loading",
-      "methodName": "handleLoading"
     }]; }
 }

package/dist/collection/components/salla-localization-modal/salla-localization-modal.css

@@ -10,4 +10,8 @@
 /*
 * Salla Localization Component: Languages & Currencies popup modal
 * You can use these classes to target the elements in the component.
-*/
+*/
+#salla-localization .s-localization-modal-select {
+  appearance: none;
+  -webkit-appearance: none;
+}

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -75,7 +75,7 @@ export class SallaLoginModal {
     };
     this.newUser = async () => {
       var _a;
-      const { mobile: regPhone, countryCode, countryKey } = await this.regTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
+      const { mobile: regPhone, countryCode, countryKey } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
       await this.newUserValidation();
       await this.regBtn.load();
       await this.regBtn.disable();

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

@@ -10,4 +10,7 @@
 /*
 * Salla Modal Component: popup modal used in most parts of the theme
 * You can use these classes to target the elements in the component.
-*/
+*/
+.salla-modal .s-modal-wrapper {
+  height: calc(var(--vh, 1vh) * 100);
+}

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

@@ -20,7 +20,7 @@ export class SallaOfferModal {
     this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
     salla.offer.event.onExisted(data => {
       //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
-      if (salla.localData.get('remember-offer-' + data.offer.offer_id)) {
+      if (salla.storage.get('remember-offer-' + data.offer.offer_id)) {
         salla.log('User selected to don\'t show this offer again.');
         return;
       }
@@ -47,7 +47,7 @@ export class SallaOfferModal {
     return this.modal.show();
   }
   rememberMe(event) {
-    salla.localData.set('remember-offer-' + this.offer.id, event.target.checked);
+    salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
   }
   addItem() {
     // this here, is sallaButton

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -26,7 +26,7 @@ export class SallaProductAvailability {
         .then(() => salla.api.product.availabilitySubscribe(data))
         .then(() => {
         this.isSubscribed = true;
-        salla.localData.set(`product-${this.productId}-subscribed`, true);
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
       }) //no need to wait until finishing alert animation
         .then(() => this.btn.stop())
         .then(() => this.modal.hide())
@@ -59,7 +59,7 @@ export class SallaProductAvailability {
     this.channelsWatcher(this.channels);
     this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
     this.host.removeAttribute('title');
-    this.isVisitorSubscribed = salla.localData.get(`product-${this.productId}-subscribed`);
+    this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
   }
   channelsWatcher(newValue) {
     this.channels_ = newValue.split(',');

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

@@ -11,6 +11,15 @@
 * Salla Search Component: Site search modal.
 * You can use these classes to target the elements in the component.
 */
+#s-search-modal .s-search-inline {
+  border: 1px solid #eee;
+}
+#s-search-modal .s-search-no-results .s-search-input, #s-search-modal .s-search-container-open .s-search-input {
+  border-bottom: 1px solid #f4f4f5;
+}
+#s-search-modal .s-search-product-image[src=null] {
+  opacity: 0;
+}
 /*
 * Override general modal style with custom style for search modal
 */
@@ -26,6 +35,8 @@
   max-width: 90%;
   margin-top: 3.2rem;
   border-radius: 0.5rem;
+  background: transparent;
+  overflow: visible;
 }
 #s-search-modal .s-modal-close {
   top: 50%;