@salla.sa/twilight-components 1.0.53 → 1.0.54

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

@@ -1,18 +1,27 @@
-import { Component, Element, h, Method, Prop, Watch, Host } from '@stencil/core';
+import { Component, Element, h, Method, Prop, Host } from '@stencil/core';
 export class SallaButton {
   constructor() {
+    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
      */
@@ -29,18 +38,6 @@ export class SallaButton {
      * 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');
     }
@@ -76,23 +73,45 @@ export class SallaButton {
    */
   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',].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 }, this.hostAttributes, { disabled: this.disabled }),
+      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" }) : '')));
@@ -105,59 +124,95 @@ export class SallaButton {
     "$": ["salla-button.css"]
   }; }
   static get properties() { return {
-    "btnStyle": {
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'link' | 'icon' | 'btn'",
+        "resolved": "\"btn\" | \"icon\" | \"link\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button Type"
+      },
+      "attribute": "button-type",
+      "reflect": true,
+      "defaultValue": "'btn'"
+    },
+    "color": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'outline' | 'outline-primary' | 'danger' | 'link' | 'link-danger'",
-        "resolved": "\"danger\" | \"link\" | \"link-danger\" | \"outline\" | \"outline-primary\" | \"primary\"",
+        "original": "'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark'",
+        "resolved": "\"danger\" | \"dark\" | \"gray\" | \"light\" | \"primary\" | \"success\" | \"warning\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Button Style"
+        "text": "Button Color"
       },
-      "attribute": "btn-style",
+      "attribute": "color",
       "reflect": true,
       "defaultValue": "'primary'"
     },
-    "icon": {
-      "type": "boolean",
+    "fill": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "'solid' | 'outline' | 'none'",
+        "resolved": "\"none\" | \"outline\" | \"solid\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Circle Button with icon"
+        "text": "Button Fill"
       },
-      "attribute": "icon",
+      "attribute": "fill",
       "reflect": true,
-      "defaultValue": "false"
+      "defaultValue": "'solid'"
     },
-    "miniIcon": {
-      "type": "boolean",
+    "size": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "'small' | 'large' | 'medium'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Mini Circle Button with icon"
+        "text": "Button Size"
       },
-      "attribute": "mini-icon",
+      "attribute": "size",
       "reflect": true,
-      "defaultValue": "false"
+      "defaultValue": "'medium'"
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'wide' | 'normal'",
+        "resolved": "\"normal\" | \"wide\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button Width"
+      },
+      "attribute": "width",
+      "reflect": true,
+      "defaultValue": "'normal'"
     },
     "loading": {
       "type": "boolean",
@@ -230,6 +285,23 @@ export class SallaButton {
       "attribute": "wide",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button with href as normal link"
+      },
+      "attribute": "href",
+      "reflect": false
     }
   }; }
   static get methods() { return {
@@ -301,14 +373,17 @@ export class SallaButton {
     },
     "disable": {
       "complexType": {
-        "signature": "() => Promise<void>",
+        "signature": "() => Promise<HTMLElement>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
           }
         },
-        "return": "Promise<void>"
+        "return": "Promise<HTMLElement>"
       },
       "docs": {
         "text": "Add `disabled` attribute",
@@ -317,14 +392,17 @@ export class SallaButton {
     },
     "enable": {
       "complexType": {
-        "signature": "() => Promise<void>",
+        "signature": "() => Promise<HTMLElement>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
           }
         },
-        "return": "Promise<void>"
+        "return": "Promise<HTMLElement>"
       },
       "docs": {
         "text": "Remove `disabled` attribute",
@@ -333,8 +411,4 @@ export class SallaButton {
     }
   }; }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "btnStyle",
-      "methodName": "handleVisible"
-    }]; }
 }

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

@@ -10,4 +10,8 @@
 /*
 * Salla Login Component: login popup modal
 * You can use these classes to target the elements in the component.
-*/
+*/
+[dir=ltr] #salla-login .s-login-modal-main-btn .arrow {
+  display: inline-block;
+  transform: scale(-1);
+}

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

@@ -203,11 +203,11 @@ export class SallaLoginModal {
             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("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: "main-btn-arrow sicon-keyboard_arrow_left" })),
+              h("i", { class: "sicon-keyboard_arrow_left arrow" })),
             h("slot", { name: "after-login-type" }))
           : '',
         this.isMobileAllowed ?
@@ -215,7 +215,7 @@ export class SallaLoginModal {
             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')),
+            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" })) : '',
@@ -225,7 +225,7 @@ export class SallaLoginModal {
             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')),
+            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" })) : '',
@@ -246,7 +246,7 @@ export class SallaLoginModal {
             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("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" })))));
   }
   static get is() { return "salla-login-modal"; }

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

@@ -18,13 +18,12 @@ export class SallaOfferModal {
     });
     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.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/collection/components/salla-tel-input/salla-tel-input.js

@@ -57,7 +57,7 @@ export class SallaTelInput {
     return false;
   }
   initTelInput() {
-    salla.helpers.digitsOnly(this.phoneInput);
+    salla.helpers.inputDigitsOnly(this.phoneInput);
     this.iti = TelInput(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'],
@@ -75,7 +75,7 @@ export class SallaTelInput {
     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/collection/components/salla-verify-modal/salla-verify-modal.css

@@ -13,4 +13,8 @@
 */
 salla-verify-modal {
   display: block;
+}
+
+[dir=ltr] #s-verify-modal .s-verify-modal-back {
+  transform: scale(-1);
 }

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-473768a6.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"],"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",[[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);
+  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-button.entry.js

@@ -1,22 +1,31 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-8b97d225.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) {
     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
      */
@@ -33,18 +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 +=
-      (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');
     }
@@ -80,27 +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);
+  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 }, this.hostAttributes, { 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" }) : '')));
+    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"]
-  }; }
 };
 SallaButton.style = sallaButtonCss;
 

package/dist/esm/{salla-login-modal-473768a6.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) {
@@ -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); }
 };