@salla.sa/twilight-components 1.0.52 → 1.0.54

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

@@ -6,6 +6,7 @@ import Helper from "../../Helpers/Helper";
  */
 export class SallaVerifyModal {
   constructor() {
+    // Helper.setHost(this.host);
     this.initiated = false;
     /**
      * Verifying method
@@ -15,7 +16,6 @@ export class SallaVerifyModal {
      * should auto reloading the page after success verification
      */
     this.autoReload = true;
-    Helper.setHost(this.host);
     if (this.withoutModal) {
       this.modal = { show: () => '', hide: () => '' };
     }
@@ -48,7 +48,7 @@ export class SallaVerifyModal {
     this.resendTimer();
     this.otpInputs = this.host.querySelectorAll('.s-verify-modal-input');
     if (!this.initiated) {
-      Helper.on('input', '.s-verify-modal-input', e => salla.helpers.digitsOnly(e.target));
+      Helper.on('input', '.s-verify-modal-input', e => salla.helpers.inputDigitsOnly(e.target));
       Helper.onKeyUp('.s-verify-modal-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
@@ -63,7 +63,7 @@ export class SallaVerifyModal {
         this.toggleOTPSubmit();
       });
       Helper.on('paste', '.s-verify-modal-input', event => {
-        let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
+        let text = salla.helpers.number(event.clipboardData.getData('text')).replace(/[^0-9.]/g, '').replace('..', '.');
         this.otpInputs.forEach((input, i) => input.value = text[i] || '');
         this.toggleOTPSubmit();
         setTimeout(() => this.otpInputs[3].focus(), 100);
@@ -130,11 +130,11 @@ export class SallaVerifyModal {
       .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
   }
   render() {
-    return this.withoutModal ? this.myBody() :
+    return this.withoutModal ? h(Host, null, this.myBody()) :
       h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify-modal", ref: modal => this.modal = modal, title: this.title }, this.myBody());
   }
   myBody() {
-    return (h(Host, { id: "s-verify-modal" },
+    return (h("div", { id: "s-verify-modal" },
       h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
       h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
       h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))),

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { S as SallaLoginModal } from './salla-login-modal-187c1f98.js';
-export { S as SallaSearch } from './salla-search-2e3e60cb.js';
+export { S as SallaLoginModal } from './salla-login-modal-63f03766.js';
+export { S as SallaSearch } from './salla-search-7521be0c.js';
 import './index-8b97d225.js';
 import './Helper-7162a06c.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",[[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",[[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",[[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",[[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",[[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",[[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",[[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",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[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",[[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",[[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 bootstrapLazy([["salla-button",[[4,"salla-button",{"buttonType":[513,"button-type"],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-modal_2",[[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",[[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",[[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",[[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",[[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",[[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",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[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",[[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",[[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/esm/salla-branches.entry.js

@@ -6,7 +6,7 @@ const SallaBranches = class {
   constructor(hostRef) {
     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 = [
@@ -51,7 +51,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/esm/salla-button.entry.js

@@ -1,15 +1,31 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-8b97d225.js';
-import { H as Helper } from './Helper-7162a06c.js';
 
-const sallaButtonCss = "";
+const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-right:40px}.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-element{padding-left:40px}.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}";
 
 const SallaButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.hostAttributes = {};
+    /**
+     * Button Type
+     */
+    this.buttonType = 'btn';
+    /**
+     * Button Color
+     */
+    this.color = 'primary';
     /**
-     * Button Style
+     * Button Fill
      */
-    this.btnStyle = 'primary';
+    this.fill = 'solid';
+    /**
+     * Button Size
+     */
+    this.size = 'medium';
+    /**
+     * Button Width
+     */
+    this.width = 'normal';
     /**
      * Is the button currently loading
      */
@@ -26,19 +42,6 @@ const SallaButton = class {
      * 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');
     }
@@ -74,38 +77,46 @@ const SallaButton = class {
    */
   async disable() {
     this.host.setAttribute('disabled', '');
+    return this.host;
   }
   /**
    * Remove `disabled` attribute
    */
   async enable() {
     this.host.removeAttribute('disabled');
+    return this.host;
   }
-  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.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
+  getBtnAttributes() {
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      if (!['type', 'color', 'fill', 'size', 'width', 'id',].includes(this.host.attributes[i].name)) {
+        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+      }
+    }
+    this.hostAttributes.type = this.hostAttributes.type || 'button';
+    this.hostAttributes.class +=
+      ' s-button-element s-button-' + this.buttonType
+        + ' s-button-' + (this.fill == "none" ? 'fill-none' : this.fill)
+        + (this.size != "medium" ? ' s-button-' + this.size : '')
+        + (this.width != "normal" ? ' s-button-' + this.width : '')
+        + (this.buttonType == "link" ? ' s-button-' + this.color + '-link' : '')
+        + (this.buttonType != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
+        + (this.fill == 'outline' ? ' s-button-' + this.color + '-outline' : '')
+        + (this.disabled ? ' s-button-disabled ' : '')
+        + (this.buttonType == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
+    return this.hostAttributes;
   }
+  // @Watch('btnStyle')
+  // handleVisible(newKind: string, oldKind: string) {
+  //   //todo::use united styles
+  //   this.btn.classList.remove('btn-' + oldKind);
+  //   this.btn.classList.add('btn-' + newKind);
+  // }
   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("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',
-      } }) : '')));
+    h(Host, { class: "s-button-wrap" }, h("button", Object.assign({}, this.getBtnAttributes(), { disabled: this.disabled }), h("span", { class: "s-button-text", ref: el => this.text = el }, h("slot", null)), this.loading ? h("span", { class: "s-button-loader" }) : '')));
   }
   get host() { return getElement(this); }
-  static get watchers() { return {
-    "btnStyle": ["handleVisible"],
-    "loading": ["handleLoading"]
-  }; }
 };
 SallaButton.style = sallaButtonCss;
 

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
 
-const sallaLocalizationModalCss = "";
+const sallaLocalizationModalCss = "#salla-localization .s-localization-modal-select{appearance:none;-webkit-appearance:none}";
 
 const SallaLocalizationModal = class {
   constructor(hostRef) {

package/dist/esm/{salla-login-modal-187c1f98.js → salla-login-modal-63f03766.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
 
-const sallaLoginModalCss = "";
+const sallaLoginModalCss = "[dir=ltr] #salla-login .s-login-modal-main-btn .arrow{display:inline-block;transform:scale(-1)}";
 
 const SallaLoginModal = class {
   constructor(hostRef) {
@@ -68,7 +68,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();
@@ -188,12 +188,12 @@ const SallaLoginModal = class {
   }
   render() {
     return (h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("slot", { name: "after-login-type" }))
+      h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
+      h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("label", { class: "s-login-modal-label" }, this.firstNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" }), h("label", { class: "s-login-modal-label" }, this.lastNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" }), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" })), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
+      h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
+        h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("label", { class: "s-login-modal-label" }, this.firstNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" }), h("label", { class: "s-login-modal-label" }, this.lastNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" }), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" })), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
   }
   get host() { return getElement(this); }
 };

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

@@ -1,3 +1,3 @@
-export { S as salla_login_modal } from './salla-login-modal-187c1f98.js';
+export { S as salla_login_modal } from './salla-login-modal-63f03766.js';
 import './index-8b97d225.js';
 import './Helper-7162a06c.js';

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
-export { S as salla_search } from './salla-search-2e3e60cb.js';
+export { S as salla_search } from './salla-search-7521be0c.js';
 
-const sallaModalCss = "";
+const sallaModalCss = ".salla-modal .s-modal-wrapper{height:calc(var(--vh, 1vh) * 100)}";
 
 const SallaModal = class {
   constructor(hostRef) {

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

@@ -17,13 +17,12 @@ const SallaOfferModal = class {
     });
     this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
     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)) {
+    salla.offer.event.onExisted(offer => {
+      if (salla.storage.get('remember-offer-' + offer.id)) {
         salla.log('User selected to don\'t show this offer again.');
         return;
       }
-      this.show(data.product_id);
+      this.show(offer.product_id);
     });
   }
   /**
@@ -46,7 +45,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/esm/salla-product-availability.entry.js

@@ -30,7 +30,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())
@@ -63,7 +63,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/esm/{salla-search-2e3e60cb.js → salla-search-7521be0c.js}

@@ -1,12 +1,16 @@
 import { r as registerInstance, h, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.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) {
     registerInstance(this, hostRef);
     var _a;
+    this.inputValue = '';
+    this.inline = false;
+    this.oval = false;
+    this.height = 60;
     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());
@@ -22,6 +26,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">' +
@@ -33,6 +38,7 @@ const SallaSearch = class {
   }
   //todo:: reset data when closing
   search(e) {
+    this.inputValue = e.target.value;
     Helper.hideElement(this.noResults);
     if (e.target.value.length === 0) {
       this.results = undefined;
@@ -52,17 +58,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.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.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 (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 :
+    const searchContent = 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' } : {} }, h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e), style: { height: this.height + 'px' } }), h("span", { class: "s-search-icon-wrap" }, h("i", { class: "s-search-icon 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)))));
+          .replace(/\{image\}/g, item.image_url) })), h("p", { ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, this.noResultsText)));
+    return (this.inline ?
+      h("div", { id: "s-search-modal" }, searchContent)
+      :
+        h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
   }
   /**
    * Run it one time after load

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

@@ -1434,7 +1434,7 @@ const SallaTelInput = class {
     return false;
   }
   initTelInput() {
-    salla.helpers.digitsOnly(this.phoneInput);
+    salla.helpers.inputDigitsOnly(this.phoneInput);
     this.iti = intlTelInput(this.phoneInput, {
       initialCountry: this.countryCode || 'sa',
       preferredCountries: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'sy', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],
@@ -1445,16 +1445,14 @@ 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());
     // on keyup / change flag: reset
     this.phoneInput.addEventListener('input', e => {
-      salla.helpers.digitsOnly(e.target);
+      salla.helpers.inputDigitsOnly(e.target);
       this.reset();
     });
   }

package/dist/esm/salla-verify-modal.entry.js

@@ -1,12 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
 
-const sallaVerifyModalCss = "salla-verify-modal{display:block}";
+const sallaVerifyModalCss = "salla-verify-modal{display:block}[dir=ltr] #s-verify-modal .s-verify-modal-back{transform:scale(-1)}";
 
 const SallaVerifyModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.verified = createEvent(this, "verified", 7);
+    // Helper.setHost(this.host);
     this.initiated = false;
     /**
      * Verifying method
@@ -16,7 +17,6 @@ const SallaVerifyModal = class {
      * should auto reloading the page after success verification
      */
     this.autoReload = true;
-    Helper.setHost(this.host);
     if (this.withoutModal) {
       this.modal = { show: () => '', hide: () => '' };
     }
@@ -49,7 +49,7 @@ const SallaVerifyModal = class {
     this.resendTimer();
     this.otpInputs = this.host.querySelectorAll('.s-verify-modal-input');
     if (!this.initiated) {
-      Helper.on('input', '.s-verify-modal-input', e => salla.helpers.digitsOnly(e.target));
+      Helper.on('input', '.s-verify-modal-input', e => salla.helpers.inputDigitsOnly(e.target));
       Helper.onKeyUp('.s-verify-modal-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
@@ -64,7 +64,7 @@ const SallaVerifyModal = class {
         this.toggleOTPSubmit();
       });
       Helper.on('paste', '.s-verify-modal-input', event => {
-        let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
+        let text = salla.helpers.number(event.clipboardData.getData('text')).replace(/[^0-9.]/g, '').replace('..', '.');
         this.otpInputs.forEach((input, i) => input.value = text[i] || '');
         this.toggleOTPSubmit();
         setTimeout(() => this.otpInputs[3].focus(), 100);
@@ -131,11 +131,11 @@ const SallaVerifyModal = class {
       .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
   }
   render() {
-    return this.withoutModal ? this.myBody() :
+    return this.withoutModal ? h(Host, null, this.myBody()) :
       h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify-modal", ref: modal => this.modal = modal, title: this.title }, this.myBody());
   }
   myBody() {
-    return (h(Host, { id: "s-verify-modal" }, h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), h("div", { slot: "footer", class: "s-verify-modal-footer" }, h("salla-button", { class: "s-verify-modal-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
+    return (h("div", { id: "s-verify-modal" }, h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), h("div", { slot: "footer", class: "s-verify-modal-footer" }, h("salla-button", { class: "s-verify-modal-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/twilight-components.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["salla-button",[[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",[[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",[[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",[[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",[[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",[[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",[[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",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[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",[[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",[[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 bootstrapLazy([["salla-button",[[4,"salla-button",{"buttonType":[513,"button-type"],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-modal_2",[[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",[[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",[[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",[[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",[[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",[[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",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[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",[[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",[[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/twilight-components/index.esm.js

@@ -1 +1 @@
-export{S as SallaLoginModal}from"./p-0b599094.js";export{S as SallaSearch}from"./p-5ffd56fb.js";import"./p-cb1c59a2.js";import"./p-ed1c00c5.js";
+export{S as SallaLoginModal}from"./p-88dce1e4.js";export{S as SallaSearch}from"./p-e4f716b0.js";import"./p-cb1c59a2.js";import"./p-ed1c00c5.js";

package/dist/twilight-components/p-05574321.entry.js

@@ -0,0 +1 @@
+export{S as salla_login_modal}from"./p-88dce1e4.js";import"./p-cb1c59a2.js";import"./p-ed1c00c5.js";

package/dist/twilight-components/{p-ea455ae9.entry.js → p-134fa158.entry.js}

@@ -1 +1 @@
-import{r as s,c as i,h as t,H as a,g as l}from"./p-cb1c59a2.js";import{H as e}from"./p-ed1c00c5.js";export{S as salla_search}from"./p-5ffd56fb.js";const o=class{constructor(t){s(this,t),this.modalOpened=i(this,"modalOpened",7),this.modalClosed=i(this,"modalClosed",7),this.isClosable=!0,this.width="md",this.position="middle",this.visible=!1,this.isLoading=!1,this.subTitleFirst=!1,this.noPadding=!1,this.subTitle="",this.icon="",this.iconStyle="",this.imageIcon="",e.setHost(this.host),salla.event.on("modal::open",(s=>s.dataset.target==this.host.id&&this.show())),salla.event.on("modal::close",(s=>s.dataset.target==this.host.id&&this.hide())),this.title=this.host.title,this.host.removeAttribute("title")}handleVisible(s){if(!s)return this.toggleModal(!1),void this.modalClosed.emit();this.host.classList.remove("s-hidden"),setTimeout((()=>this.toggleModal(!0))),this.modalOpened.emit()}async show(){return this.host.setAttribute("visible",""),this.host}async hide(){return this.host.removeAttribute("visible"),this.host}async setTitle(s){return this.title=s,this.host}async loading(){return this.isLoading=!0,this.host}async stopLoading(){return this.isLoading=!1,this.host}toggleModal(s){const i=this.host.querySelector(".s-modal-body");e.toggleElement(i,"s-modal-entering","s-modal-leaving",(()=>s)).toggleElement(this.overlay,"s-modal-entering","s-modal-overlay-leaving",(()=>s)).toggleElement(document.body,"modal-is-open","modal-is-closed",(()=>s)),s||setTimeout((()=>this.host.classList.add("s-hidden")),350)}closeModal(){this.isClosable&&this.host.removeAttribute("visible")}iconBlockClasses(){return{"s-modal-icon":!0,"s-modal-bg-error":"error"==this.iconStyle,"s-modal-bg-success":"success"==this.iconStyle,"s-modal-bg-normal":"error"!=this.iconStyle&&"success"!=this.iconStyle,"s-modal-bg-primary":"primary"==this.iconStyle}}iconClasses(){return{[this.icon]:!0,"sicon-alert-engine":!this.icon&&"error"==this.iconStyle&&!this.imageIcon,"sicon-check-circle2":!this.icon&&"success"==this.iconStyle&&!this.imageIcon}}render(){return this.host.id=this.host.id||"salla-modal",t(a,{class:"salla-modal s-modal-container s-hidden","aria-modal":"true",role:"dialog"},t("div",{class:"s-modal-overlay",ref:s=>this.overlay=s,onClick:()=>this.closeModal()}),t("div",{class:"s-modal-wrapper"},t("span",{class:"s-modal-spacer s-modal-align-"+this.position},"​"),t("div",{class:"s-modal-body s-modal-align-"+this.position+" s-modal-"+this.width+(this.noPadding?" s-modal-nopadding":" s-modal-padding")},this.isLoading?t("div",{class:"s-modal-loader-wrap"},t("span",{class:"s-modal-loader"})):[t("div",{class:{"s-modal-header":!0,"s-modal-is-center":""!=this.icon||""!=this.imageIcon}},this.isClosable?t("button",{class:"s-modal-close",onClick:()=>this.closeModal(),type:"button"},t("span",{class:"sicon-cancel"})):"",this.title||this.subTitle?t("div",{class:"s-modal-header-inner"},this.iconStyle||this.icon?t("div",{class:this.iconBlockClasses()},t("i",{class:this.iconClasses()})):this.imageIcon?t("img",{class:"s-modal-header-img",src:this.imageIcon}):"",t("div",{class:"s-modal-header-content"},t("div",{class:{"s-modal-title":!0,"s-modal-title-below":this.subTitleFirst},innerHTML:this.title}),t("p",{class:{"s-modal-sub-title":!0},innerHTML:this.subTitle}))):""),t("slot",null),t("slot",{name:"footer"})])))}get host(){return l(this)}static get watchers(){return{visible:["handleVisible"]}}};o.style="";export{o as salla_modal}
+import{r as s,c as i,h as t,H as a,g as l}from"./p-cb1c59a2.js";import{H as e}from"./p-ed1c00c5.js";export{S as salla_search}from"./p-e4f716b0.js";const o=class{constructor(t){s(this,t),this.modalOpened=i(this,"modalOpened",7),this.modalClosed=i(this,"modalClosed",7),this.isClosable=!0,this.width="md",this.position="middle",this.visible=!1,this.isLoading=!1,this.subTitleFirst=!1,this.noPadding=!1,this.subTitle="",this.icon="",this.iconStyle="",this.imageIcon="",e.setHost(this.host),salla.event.on("modal::open",(s=>s.dataset.target==this.host.id&&this.show())),salla.event.on("modal::close",(s=>s.dataset.target==this.host.id&&this.hide())),this.title=this.host.title,this.host.removeAttribute("title")}handleVisible(s){if(!s)return this.toggleModal(!1),void this.modalClosed.emit();this.host.classList.remove("s-hidden"),setTimeout((()=>this.toggleModal(!0))),this.modalOpened.emit()}async show(){return this.host.setAttribute("visible",""),this.host}async hide(){return this.host.removeAttribute("visible"),this.host}async setTitle(s){return this.title=s,this.host}async loading(){return this.isLoading=!0,this.host}async stopLoading(){return this.isLoading=!1,this.host}toggleModal(s){const i=this.host.querySelector(".s-modal-body");e.toggleElement(i,"s-modal-entering","s-modal-leaving",(()=>s)).toggleElement(this.overlay,"s-modal-entering","s-modal-overlay-leaving",(()=>s)).toggleElement(document.body,"modal-is-open","modal-is-closed",(()=>s)),s||setTimeout((()=>this.host.classList.add("s-hidden")),350)}closeModal(){this.isClosable&&this.host.removeAttribute("visible")}iconBlockClasses(){return{"s-modal-icon":!0,"s-modal-bg-error":"error"==this.iconStyle,"s-modal-bg-success":"success"==this.iconStyle,"s-modal-bg-normal":"error"!=this.iconStyle&&"success"!=this.iconStyle,"s-modal-bg-primary":"primary"==this.iconStyle}}iconClasses(){return{[this.icon]:!0,"sicon-alert-engine":!this.icon&&"error"==this.iconStyle&&!this.imageIcon,"sicon-check-circle2":!this.icon&&"success"==this.iconStyle&&!this.imageIcon}}render(){return this.host.id=this.host.id||"salla-modal",t(a,{class:"salla-modal s-modal-container s-hidden","aria-modal":"true",role:"dialog"},t("div",{class:"s-modal-overlay",ref:s=>this.overlay=s,onClick:()=>this.closeModal()}),t("div",{class:"s-modal-wrapper"},t("span",{class:"s-modal-spacer s-modal-align-"+this.position},"​"),t("div",{class:"s-modal-body s-modal-align-"+this.position+" s-modal-"+this.width+(this.noPadding?" s-modal-nopadding":" s-modal-padding")},this.isLoading?t("div",{class:"s-modal-loader-wrap"},t("span",{class:"s-modal-loader"})):[t("div",{class:{"s-modal-header":!0,"s-modal-is-center":""!=this.icon||""!=this.imageIcon}},this.isClosable?t("button",{class:"s-modal-close",onClick:()=>this.closeModal(),type:"button"},t("span",{class:"sicon-cancel"})):"",this.title||this.subTitle?t("div",{class:"s-modal-header-inner"},this.iconStyle||this.icon?t("div",{class:this.iconBlockClasses()},t("i",{class:this.iconClasses()})):this.imageIcon?t("img",{class:"s-modal-header-img",src:this.imageIcon}):"",t("div",{class:"s-modal-header-content"},t("div",{class:{"s-modal-title":!0,"s-modal-title-below":this.subTitleFirst},innerHTML:this.title}),t("p",{class:{"s-modal-sub-title":!0},innerHTML:this.subTitle}))):""),t("slot",null),t("slot",{name:"footer"})])))}get host(){return l(this)}static get watchers(){return{visible:["handleVisible"]}}};o.style=".salla-modal .s-modal-wrapper{height:calc(var(--vh, 1vh) * 100)}";export{o as salla_modal}

package/dist/twilight-components/p-2a032b88.entry.js

@@ -0,0 +1 @@
+import{r as s,h as a,g as e}from"./p-cb1c59a2.js";const t=class{constructor(a){s(this,a),this.open=!1,this.isOpenedBefore=salla.storage.get("branch-choosed-before"),this.displayAs="default",this.browseProductsFrom="all",this.branches=[{id:1,name:"فرع الرياض",open:!0,available:!0,limited:!1,tag:"متوفر"},{id:2,name:"فرع جدة",open:!1,available:!1,limited:!1,tag:"غير متوفر"},{id:3,name:"فرع مكة",open:!0,available:!0,limited:!1,tag:"متوفر"},{id:4,name:"فرع المدينة",open:!0,available:!0,limited:!1,tag:"متوفر"},{id:5,name:"فرع جازان",open:!0,available:!0,limited:!0,tag:"الكمية محدودة"}],this.current=1,this.currentBranch=s=>this.branches.filter((s=>s.id==this.current))[0][s],this.statusColor=(s=null)=>s?s.limited?"s-branches-color-red":s.available?"s-branches-color-green":"s-branches-color-gray":this.currentBranch("limited")?"s-branches-color-red":this.currentBranch("available")?"s-branches-color-green":"s-branches-color-gray",this.isChoiceable=()=>"all"!==this.browseProductsFrom&&"single"==this.position||"header"==this.position,this.formTitle=()=>this.isChoiceable()?"توفر المنتج في الفروع الآخرى":"التسوق من فرع آخر",salla.event.on("branches::show",(()=>this.show())),salla.event.on("languages::translations.loaded",(()=>{var s;return null===(s=this.btn)||void 0===s?void 0:s.setText(salla.lang.get("common.elements.ok"))}))}async show(){return this.modal.show()}async hide(){return this.modal.hide()}handelChange(s){this.selected=s.target.value}handleSubmit(){this.btn.load().then((()=>{setTimeout((()=>location.reload()),2e3)})),salla.storage.set("branch-choosed-before",!0),this.show(),setTimeout((()=>{this.current=this.selected}),300)}render(){return a("salla-modal",{icon:"sicon-store-alt",title:"فرع الرياض","sub-title":"أنت الآن تتصفح المتجر من","sub-title-first":!0,"is-closable":this.isOpenedBefore||"popup"!=this.displayAs?"true":"false",ref:s=>this.modal=s,width:"sm",id:"s-branches-modal",class:"s-hidden"},a("h4",{class:"s-branches-title"},this.formTitle()),this.branches.length<=5?a("div",{class:"s-branches-space-v"},this.branches.map((s=>a("div",{class:"s-branches-input-wrap"},a("input",{id:this.position+"_branch_"+s.id,disabled:!s.open&&this.isChoiceable(),name:"lang",type:"radio",value:s.id,onChange:s=>this.handelChange(s),class:{"s-branches-input":!0,"opacity-50":!s.open,"s-hidden":!this.isChoiceable()},checked:this.current==s.id}),a("label",{htmlFor:this.position+"_branch_"+s.id,class:{"s-branches-label":!0,"s-branches-clickable":this.isChoiceable()}},a("span",{class:{"s-branches-is-closed":!s.open}},s.name),this.isChoiceable()?a("small",{class:"s-branches-closed-badge"},s.open?"":"مُغلق"):a("span",{class:this.statusColor(s)},s.tag)))))):a("select",{class:"s-branches-select",onInput:s=>this.handelChange(s)},this.branches.map((s=>a("option",{value:s.id,disabled:!s.open,selected:this.selected==s.id},s.name," ",s.open?"":"- مُغلق")))),this.isChoiceable()?a("slot",{name:"footer"},a("salla-button",{ref:s=>this.btn=s,onClick:()=>this.handleSubmit(),class:"s-branches-submit",wide:!0},salla.lang.get("common.elements.ok"))):"")}componentDidRender(){this.isOpenedBefore||"popup"!=this.displayAs||this.show()}get host(){return e(this)}};t.style="";export{t as salla_branches}

package/dist/twilight-components/p-2f3f4cce.entry.js

@@ -0,0 +1 @@
+import{r as s,h as i,H as t,g as a}from"./p-cb1c59a2.js";import{H as l}from"./p-ed1c00c5.js";const e=class{constructor(i){s(this,i),this.isUser=l.isUser(),this.productId=salla.config.get("page.id"),this.isSubscribed=!1,this.submit=async()=>{if(this.isUser)return salla.api.product.availabilitySubscribe(this.productId).then((()=>this.isSubscribed=!0));let{mobile:s,countryCode:i}=await this.mobileInput.getValues(),t={id:this.productId,country_code:i};return""!==s&&(t.mobile=s),""!==this.email.value&&(t.email=this.email.value),await this.validateform(),this.btn.load().then((()=>this.btn.disable())).then((()=>salla.api.product.availabilitySubscribe(t))).then((()=>{this.isSubscribed=!0,salla.storage.set(`product-${this.productId}-subscribed`,!0)})).then((()=>this.btn.stop())).then((()=>this.modal.hide())).catch((()=>this.btn.stop()&&this.btn.enable()))},this.typing=(s,i)=>{const t=s.target.nextElementSibling;s.target.classList.remove("s-has-error"),(null==t?void 0:t.classList.contains("s-product-availability-error-msg"))&&(t.innerText=""),"Enter"==s.key&&i()},salla.event.on("languages::translations.loaded",(()=>{var s,i,t,a;this.subscribedMessage=salla.lang.get("pages.products.notify_availability_success"),this.title_=this.host.title||salla.lang.get("pages.products.notify_availability_title"),this.subTitle=salla.lang.get("pages.products.notify_availability_subtitle"),this.mobileLabel=salla.lang.get("common.elements.mobile"),this.emailLabel=salla.lang.get("common.elements.email"),this.emailPlaceholder=salla.lang.get("common.elements.email_placeholder"),this.emailErrorMsg=salla.lang.get("common.elements.email_is_valid"),null===(s=this.modal)||void 0===s||s.setTitle(this.title_),null===(i=this.btn)||void 0===i||i.setText(salla.lang.get("common.elements.submit")),null===(t=this.cancelBtn)||void 0===t||t.setText(salla.lang.get("common.elements.cancel")),null===(a=this.inlineBtn)||void 0===a||a.setText(salla.lang.get("pages.products.notify_availability"))})),this.isUser||(this.channelsWatcher(this.channels),this.title_=this.host.title||salla.lang.get("pages.products.notify_availability_title"),this.host.removeAttribute("title"),this.isVisitorSubscribed=salla.storage.get(`product-${this.productId}-subscribed`))}channelsWatcher(s){this.channels_=s.split(",")}async validateform(){if(this.channels_.includes("email")){const s=l.isValidEmail(this.email.value);if(s)return;!s&&this.validateField(this.email,this.emailErrorMsg)}if(!this.channels_.includes("sms")||!await this.mobileInput.isValid())throw"Please insert required fields"}validateField(s,i){s.classList.add("s-has-error"),s.nextElementSibling.innerText="* "+i}render(){return i(t,{id:"s-product-availability"},this.isSubscribed||this.isVisitorSubscribed?i("div",{class:"s-product-availability-subscribed"},i("i",{class:"sicon-bell-ring s-product-availability-subs-icon"})," ",this.subscribedMessage):i("slot",null,i("salla-button",{onClick:()=>this.isUser?this.submit():this.modal.show(),wide:!0,ref:s=>this.inlineBtn=s},salla.lang.get("pages.products.notify_availability"))),this.isUser||this.isSubscribed||this.isVisitorSubscribed?"":this.renderModal())}renderModal(){return i("salla-modal",{ref:s=>this.modal=s,title:this.title_,subTitle:this.subTitle,icon:"sicon-bell-ring",width:"sm"},i("div",{class:"s-product-availability-body"},this.channels_.includes("email")?[i("label",{class:"s-product-availability-label"},this.emailLabel),i("input",{class:"s-product-availability-input",onKeyDown:s=>this.typing(s,this.submit),placeholder:this.emailPlaceholder,ref:s=>this.email=s,type:"email"}),i("span",{class:"s-product-availability-error-msg"})]:"",this.channels_.includes("sms")?[i("label",{class:"s-product-availability-label"},this.mobileLabel),i("salla-tel-input",{ref:s=>this.mobileInput=s,onKeyDown:s=>this.typing(s,this.submit)})]:""),i("div",{slot:"footer",class:"s-product-availability-footer"},i("salla-button",{wide:!0,"btn-style":"outline",onClick:()=>this.modal.hide(),ref:s=>this.cancelBtn=s},salla.lang.get("common.elements.cancel")),i("salla-button",{"loader-position":"center",wide:!0,ref:s=>this.btn=s,onClick:()=>this.submit()},salla.lang.get("common.elements.submit"))))}get host(){return a(this)}static get watchers(){return{channels:["channelsWatcher"]}}};e.style="";export{e as salla_product_availability}

package/dist/twilight-components/p-4da2c2c8.entry.js

@@ -0,0 +1 @@
+import{r as t,h as s,H as o,g as n}from"./p-cb1c59a2.js";const e=class{constructor(s){t(this,s),this.hostAttributes={},this.buttonType="btn",this.color="primary",this.fill="solid",this.size="medium",this.width="normal",this.loading=!1,this.disabled=!1,this.loaderPosition="after",this.wide=!1,this.wide&&this.host.classList.add("s-button-wide")}async load(){return"center"==this.loaderPosition&&this.text.classList.add("s-button-hide"),this.host.setAttribute("loading",""),this.host}async stop(){return this.host.removeAttribute("loading"),"center"==this.loaderPosition&&this.text.classList.remove("s-button-hide"),this.host}async setText(t){return this.text.innerHTML=t,this.host}async disable(){return this.host.setAttribute("disabled",""),this.host}async enable(){return this.host.removeAttribute("disabled"),this.host}getBtnAttributes(){for(let t=0;t<this.host.attributes.length;t++)["type","color","fill","size","width","id"].includes(this.host.attributes[t].name)||(this.hostAttributes[this.host.attributes[t].name]=this.host.attributes[t].value);return this.hostAttributes.type=this.hostAttributes.type||"button",this.hostAttributes.class+=" s-button-element s-button-"+this.buttonType+" s-button-"+("none"==this.fill?"fill-none":this.fill)+("medium"!=this.size?" s-button-"+this.size:"")+("normal"!=this.width?" s-button-"+this.width:"")+("link"==this.buttonType?" s-button-"+this.color+"-link":"")+("link"!=this.buttonType&&"outline"!=this.fill?" s-button-"+this.color:"")+("outline"==this.fill?" s-button-"+this.color+"-outline":"")+(this.disabled?" s-button-disabled ":"")+("icon"==this.buttonType?" s-button-loader-center":" s-button-loader-"+this.loaderPosition),this.hostAttributes}render(){return s(o,{class:"s-button-wrap"},s("button",Object.assign({},this.getBtnAttributes(),{disabled:this.disabled}),s("span",{class:"s-button-text",ref:t=>this.text=t},s("slot",null)),this.loading?s("span",{class:"s-button-loader"}):""))}get host(){return n(this)}};e.style="salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-right:40px}.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-element{padding-left:40px}.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}";export{e as salla_button}