@salla.sa/twilight-components 1.0.53 → 1.0.55

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLoginModal = require('./salla-login-modal-54cc2e83.js');
+const sallaLoginModal = require('./salla-login-modal-d0fb6180.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"],"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);
+  return index.bootstrapLazy([["salla-button.cjs",[[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.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-button.cjs.entry.js

@@ -4,23 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
 
-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 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) {
     index.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';
     /**
-     * Circle Button with icon
+     * Button Size
      */
-    this.icon = false;
+    this.size = 'medium';
     /**
-     * Mini Circle Button with icon
+     * Button Width
      */
-    this.miniIcon = false;
+    this.width = 'normal';
     /**
      * Is the button currently loading
      */
@@ -37,18 +46,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 +=
-      (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'];
     if (this.wide) {
       this.host.classList.add('s-button-wide');
     }
@@ -84,27 +81,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);
+  getBtnAttributes() {
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      if (!['type', 'color', 'fill', 'size', 'width', 'id', 'loading'].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
-    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" }) : '')));
+    index.h(index.Host, { class: "s-button-wrap" }, index.h("button", Object.assign({}, this.getBtnAttributes(), { 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"]
-  }; }
 };
 SallaButton.style = sallaButtonCss;
 

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

@@ -3,7 +3,7 @@
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.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) {
@@ -190,12 +190,12 @@ const SallaLoginModal = class {
   }
   render() {
     return (index.h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      index.h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), index.h("slot", { name: "before-login-type" }), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("slot", { name: "after-login-type" }))
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), index.h("slot", { name: "before-login-type" }), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), index.h("i", { class: "sicon-keyboard_arrow_left arrow" })), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), index.h("i", { class: "sicon-keyboard_arrow_left arrow" })), index.h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
-      index.h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
-      index.h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-modal-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("label", { class: "s-login-modal-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
+        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-modal-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("label", { class: "s-login-modal-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
 };

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-54cc2e83.js');
+const sallaLoginModal = require('./salla-login-modal-d0fb6180.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 

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

@@ -21,13 +21,12 @@ const SallaOfferModal = class {
     });
     this.categorySlot = ((_a = Helper.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.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.storage.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);
     });
   }
   /**

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

@@ -1438,7 +1438,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'],
@@ -1456,7 +1456,7 @@ const SallaTelInput = class {
     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/cjs/salla-verify-modal.cjs.entry.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.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) {
     index.registerInstance(this, hostRef);
     this.verified = index.createEvent(this, "verified", 7);
+    // Helper.setHost(this.host);
     this.initiated = false;
     /**
      * Verifying method
@@ -20,7 +21,6 @@ const SallaVerifyModal = class {
      * should auto reloading the page after success verification
      */
     this.autoReload = true;
-    Helper.Helper.setHost(this.host);
     if (this.withoutModal) {
       this.modal = { show: () => '', hide: () => '' };
     }
@@ -53,7 +53,7 @@ const SallaVerifyModal = class {
     this.resendTimer();
     this.otpInputs = this.host.querySelectorAll('.s-verify-modal-input');
     if (!this.initiated) {
-      Helper.Helper.on('input', '.s-verify-modal-input', e => salla.helpers.digitsOnly(e.target));
+      Helper.Helper.on('input', '.s-verify-modal-input', e => salla.helpers.inputDigitsOnly(e.target));
       Helper.Helper.onKeyUp('.s-verify-modal-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
@@ -68,7 +68,7 @@ const SallaVerifyModal = class {
         this.toggleOTPSubmit();
       });
       Helper.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);
@@ -135,11 +135,11 @@ const SallaVerifyModal = class {
       .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
   }
   render() {
-    return this.withoutModal ? this.myBody() :
+    return this.withoutModal ? index.h(index.Host, null, this.myBody()) :
       index.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 (index.h(index.Host, { id: "s-verify-modal" }, index.h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-modal-footer" }, index.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')), index.h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
+    return (index.h("div", { id: "s-verify-modal" }, index.h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-modal-footer" }, index.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')), index.h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
   }
   get host() { return index.getElement(this); }
 };

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"],"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);
+  return index.bootstrapLazy([["salla-button.cjs",[[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.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-button/salla-button.css

@@ -17,19 +17,56 @@ salla-button {
 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-text {
+.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-icon:not(:disabled), .s-button-wrap .s-button-btn:not(:disabled) {
+.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;
@@ -38,6 +75,9 @@ salla-button[type=submit] {
   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;
@@ -52,12 +92,4 @@ salla-button[type=submit] {
   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;
 }