@salla.sa/twilight-components 1.0.99 → 1.0.104

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

@@ -4,7 +4,7 @@
 import { Component, h, Prop, Method, State, Element } from "@stencil/core";
 export class SallaBranches {
   constructor() {
-    this.open = false;
+    this.open = true;
     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
@@ -38,10 +38,12 @@ export class SallaBranches {
   }
   //todo:: add description for all @methods
   async show() {
-    return this.modal.open();
+    var _a;
+    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.open();
   }
   async hide() {
-    return this.modal.close();
+    var _a;
+    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.close();
   }
   handelChange(event) {
     this.selected = event.target.value;
@@ -57,7 +59,9 @@ export class SallaBranches {
     }, 300);
   }
   render() {
-    return (h("salla-modal", { icon: "sicon-store-alt", "modal-title": "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true, "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, width: "sm", id: "s-branches-modal", class: "s-hidden" },
+    return (h("salla-modal", { icon: "sicon-store-alt", "modal-title": "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true, 
+      // is-closable={!this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true'}
+      ref: (modal) => this.modal = modal, width: "sm", id: "s-branches-modal", class: "s-hidden" },
       h("h4", { class: "s-branches-title" }, this.formTitle()),
       this.branches.length <= 5 ?
         h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => h("div", { class: "s-branches-input-wrap" },
@@ -82,7 +86,7 @@ export class SallaBranches {
             branch.open ? '' : '- مُغلق')))),
       this.isChoiceable() ?
         h("slot", { name: "footer" },
-          h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
+          h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", width: "wide" }, salla.lang.get('common.elements.ok')))
         : ''));
   }
   componentDidRender() {
@@ -165,7 +169,7 @@ export class SallaBranches {
         "tags": [],
         "text": ""
       },
-      "defaultValue": "[\n    {id: 1, name: '\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 2, name: '\u0641\u0631\u0639 \u062C\u062F\u0629', open: false, available: false, limited: false, tag: '\u063A\u064A\u0631 \u0645\u062A\u0648\u0641\u0631'},\n    {id: 3, name: '\u0641\u0631\u0639 \u0645\u0643\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 4, name: '\u0641\u0631\u0639 \u0627\u0644\u0645\u062F\u064A\u0646\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 5, name: '\u0641\u0631\u0639 \u062C\u0627\u0632\u0627\u0646', open: true, available: true, limited: true, tag: '\u0627\u0644\u0643\u0645\u064A\u0629 \u0645\u062D\u062F\u0648\u062F\u0629'}\n  ]"
+      "defaultValue": "[\n    { id: 1, name: '\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631' },\n    { id: 2, name: '\u0641\u0631\u0639 \u062C\u062F\u0629', open: false, available: false, limited: false, tag: '\u063A\u064A\u0631 \u0645\u062A\u0648\u0641\u0631' },\n    { id: 3, name: '\u0641\u0631\u0639 \u0645\u0643\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631' },\n    { id: 4, name: '\u0641\u0631\u0639 \u0627\u0644\u0645\u062F\u064A\u0646\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631' },\n    { id: 5, name: '\u0641\u0631\u0639 \u062C\u0627\u0632\u0627\u0646', open: true, available: true, limited: true, tag: '\u0627\u0644\u0643\u0645\u064A\u0629 \u0645\u062D\u062F\u0648\u062F\u0629' }\n  ]"
     },
     "current": {
       "type": "number",

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

@@ -1,91 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Button Component: has many sizes, styles and loading state.
 * You can use these classes to target the elements in the component.
-*/
-salla-button {
-  pointer-events: none;
-}
-salla-button[type=submit], salla-button[type=button], salla-button[type=reset] {
-  -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-left: 32px;
-  padding-right: 32px;
-}
-.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: 32px;
-  padding-right: 32px;
-}
-.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;
-}
+*/

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

@@ -37,13 +37,6 @@ export class SallaButton {
      * If there is need to change loader position, pass the position
      */
     this.loaderPosition = 'after';
-    /**
-     * Is the button wide
-     */
-    this.wide = false;
-    if (this.wide) {
-      this.host.classList.add('s-button-wide');
-    }
   }
   /**
    * Run loading animation
@@ -59,6 +52,7 @@ export class SallaButton {
    */
   async stop() {
     this.host.removeAttribute('loading');
+    this.host.querySelector('button').removeAttribute('loading');
     if (this.loaderPosition == 'center')
       this.text.classList.remove('s-button-hide');
     return this.host;
@@ -87,7 +81,7 @@ export class SallaButton {
   }
   getBtnAttributes() {
     for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
+      if (!['color', 'fill', 'size', 'width', 'id'].includes(this.host.attributes[i].name)) {
         this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
       }
     }
@@ -265,24 +259,6 @@ export class SallaButton {
       "reflect": false,
       "defaultValue": "'after'"
     },
-    "wide": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Is the button wide"
-      },
-      "attribute": "wide",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "href": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js

@@ -9,6 +9,7 @@ import { Component, Element, Host, Listen, h } from '@stencil/core';
 export class SallaConditionalFields {
   changeHandler(event) {
     var _a;
+    console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 17 ~ SallaConditionalFields ~ changeHandler ~ changeHandler", event);
     salla.log('Received the change event: ', event);
     if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
       salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
@@ -17,7 +18,7 @@ export class SallaConditionalFields {
     // to extract the option id from the input name, the supported names are name[*] and name[*][]
     let optionId = event.target.name.replace('[]', '');
     let isMultiple = event.target.getAttribute('type') === 'checkbox';
-    salla.log('Trying to find all the element with condation:', `[data-show-when^="${optionId}"]`);
+    salla.log('Trying to find all the element with condition:', `[data-show-when^="${optionId}"]`);
     this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
       .forEach((field) => {
       let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
@@ -66,6 +67,7 @@ export class SallaConditionalFields {
       var _a;
       // @ts-ignore
       let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+      console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 83 ~ SallaConditionalFields ~ this.host.querySelectorAll ~ optionName", optionName);
       if (!optionName) {
         return;
       }
@@ -79,12 +81,6 @@ export class SallaConditionalFields {
       h("slot", null)));
   }
   static get is() { return "salla-conditional-fields"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-conditional-fields.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-conditional-fields.css"]
-  }; }
   static get elementRef() { return "host"; }
   static get listeners() { return [{
       "name": "change",

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.css

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Infinite Scroll Component: used in latest-products page, comments, brands, orders and so on..
 * You can use these classes to target the elements in the component.
 */

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

@@ -1,8 +1,9 @@
 /*
-* Global flags style [imported from Int-tel-input]
+  The whole installment methods is a third-party widgets, 
+  So there aren't a custom classes (as other components) to style them.
 */
 /* 
-* Tabby ------------------------
+* Installment::Tabby
 */
 #tabbyPromoWrapper {
   background: white;
@@ -52,7 +53,7 @@
 }
 
 /*
-* Tamara ---------------------
+* Installment::Tamara & Spotii 
 */
 .tamara-product-widget {
   margin-bottom: 20px;

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

@@ -1,21 +1,7 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Localization Component: Languages & Currencies popup modal
 * You can use these classes to target the elements in the component.
 */
-#salla-localization .s-localization-modal-label-slot {
-  flex-grow: 1;
-}
-#salla-localization .s-localization-modal-select {
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-/*
-* global flags style, imported from int-tel-input
-*/
 .iti__flag {
   width: 20px;
 }
@@ -1078,7 +1064,7 @@
 .iti__flag {
   height: 15px;
   box-shadow: 0px 0px 1px 0px #888;
-  background-image: url("https://intl-tel-input.com/node_modules/intl-tel-input/build/img/flags.png");
+  background-image: url("https://cdn.salla.network/images/flags.png");
   background-repeat: no-repeat;
   background-color: #f5f7f9;
   background-position: 20px 0;
@@ -1086,7 +1072,7 @@
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
-    background-image: url("https://intl-tel-input.com/node_modules/intl-tel-input/build/img/flags@2x.png");
+    background-image: url("https://cdn.salla.network/images/flags@2x.png");
   }
 }
 .iti__flag.iti__np {

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

@@ -41,7 +41,8 @@ export class SallaLocalizationModal {
    * open the component
    */
   async open() {
-    return this.modal.open()
+    console.log("🚀 ~ file: salla-localization-modal.tsx ~ line 59 ~ SallaLocalizationModal ~ open ~ this.modal", this.modal);
+    return await this.modal.open()
       .then(() => this.getLanguages())
       .then(() => this.getCurrencies())
       .then(() => this.isLoading = false);
@@ -98,7 +99,7 @@ export class SallaLocalizationModal {
                     .replace(/\{name\}/g, lang.name)
                     .replace(/\{code\}/g, lang.code)
                     .replace(/\{country_code\}/g, lang.country_code) }))) :
-              h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+              h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
           : '',
         this.currencies.length > 1 ?
           h("div", { class: "s-localization-modal-section" },
@@ -112,7 +113,7 @@ export class SallaLocalizationModal {
                     .replace(/\{country_code\}/g, currency.country_code) }))) :
               h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
           : '',
-        h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
+        h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   /**

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

@@ -1,11 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * 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

@@ -147,7 +147,7 @@ export class SallaLoginModal {
     setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
     //we should have only one salla-login, so it's okay to get it from document
     //todo:: use better way for resize the modal
-    setTimeout(() => { var _a; return (_a = document.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
+    setTimeout(() => { var _a; return (_a = this.modal.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
@@ -219,8 +219,8 @@ export class SallaLoginModal {
               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("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false },
+          h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })),
         h("div", { ref: tab => this.registrationTab = tab },
           h("slot", { name: "before-registration" }),
           h("div", null,

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Modal Component: popup modal used in most parts of the theme
 * You can use these classes to target the elements in the component.
 */

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

@@ -8,7 +8,7 @@ import Helper from "../../Helpers/Helper";
  */
 export class SallaModal {
   constructor() {
-    this.isClosable = true; //todo::rename unclude
+    this.isClosable = true; //todo::rename unclude. Suggestion => persistent
     /**
      * The size of the modal
      */
@@ -124,7 +124,7 @@ export class SallaModal {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (h(Host, { class: 'salla-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
+    return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
       h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
       h("div", { class: "s-modal-wrapper" },
         h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),
@@ -138,16 +138,17 @@ export class SallaModal {
                   h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" },
                     h("span", { class: "sicon-cancel" }))
                   : '',
-                this.modalTitle || this.subTitle ?
-                  h("div", { class: "s-modal-header-inner" },
-                    this.iconStyle || this.icon
-                      ? h("div", { class: this.iconBlockClasses() },
-                        h("i", { class: this.iconClasses() }))
-                      : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '',
-                    h("div", { class: "s-modal-header-content" },
-                      h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }),
-                      h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
-                  : ''),
+                h("div", { class: "s-modal-header-inner" },
+                  this.iconStyle || this.icon
+                    ? h("div", { class: this.iconBlockClasses() },
+                      h("i", { class: this.iconClasses() }))
+                    : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '',
+                  h("div", { class: "s-modal-header-content" },
+                    h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }),
+                    h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+              // : ''
+              ,
+                "// : ''"),
               h("slot", null),
               h("slot", { name: "footer" })
             ]))));

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

@@ -1,28 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Offer Modal Component: popup modal to display the offers
 * You can use these classes to target the elements in the component.
-*/
-#salla-offer-modal .s-offer-modal-body {
-  -webkit-overflow-scrolling: touch;
-}
-#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar {
-  display: none;
-}
-#salla-offer-modal .s-offer-modal-next-btn {
-  background: linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
-}
-#salla-offer-modal .s-offer-modal-prev-btn {
-  background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
-}
-.rtl #salla-offer-modal .s-offer-modal-next-btn {
-  transform: scale(-1) translateX(100%);
-}
-.rtl #salla-offer-modal .s-offer-modal-prev-btn {
-  transform: scale(-1) translateX(-100%);
-}
-.rtl #salla-offer-modal .s-offer-modal-btn-is-active {
-  transform: scale(-1) translateX(0);
-}
+*/

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

@@ -54,6 +54,7 @@ export class SallaOfferModal {
     return this.modal.open();
   }
   rememberMe(event) {
+    console.log("🚀 ~ file: salla-offer-modal.tsx ~ line 75 ~ SallaOfferModal ~ rememberMe ~ rememberMe", event);
     salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
   }
   //todo:: pass event then use sallaButton from it
@@ -108,7 +109,7 @@ export class SallaOfferModal {
   componentDidRender() {
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
-      let sliderWrap = document.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = document.querySelector('.s-offer-modal-scrolled-slider'), navButtons = document.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = document.querySelector('.s-offer-modal-next-btn'), prevBtn = document.querySelector('.s-offer-modal-prev-btn'), items = document.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      let sliderWrap = this.modal.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.modal.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.modal.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.modal.querySelector('.s-offer-modal-next-btn'), prevBtn = this.modal.querySelector('.s-offer-modal-prev-btn'), items = this.modal.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
       current = 0, // current slide
       slidesToScroll = 3, itemsLength = items.length;
       console.log('items[0]:', items[0]);

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Product Availability Component: popup modal to notify user if the product is available,
 * used in the product single page if the product isn't available.
 * You can use these classes to target the elements in the component.

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

@@ -17,6 +17,7 @@ export class SallaProductAvailability {
     this.isSubscribed = false;
     // @Method()
     this.submit = async () => {
+      console.log("🚀 ~ file: salla-product-availability.tsx ~ line 74 ~ SallaProductAvailability ~ submit= ~ submit");
       if (this.isUser) {
         return salla.api.product.availabilitySubscribe(this.productId)
           .then(() => this.isSubscribed = true);
@@ -72,21 +73,25 @@ export class SallaProductAvailability {
     this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
   }
   channelsWatcher(newValue) {
-    this.channels_ = newValue.split(',');
+    this.channels_ = !!newValue ? newValue.split(',') : [];
   }
   async validateform() {
-    if (this.channels_.includes('email')) {
-      const isEmailValid = Helper.isValidEmail(this.email.value);
-      if (isEmailValid)
-        return;
-      !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+    try {
+      if (this.channels_.includes('email')) {
+        const isEmailValid = Helper.isValidEmail(this.email.value);
+        if (isEmailValid)
+          return;
+        !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+      }
+      if (this.channels_.includes('sms')) {
+        const isPhoneValid = await this.mobileInput.isValid();
+        if (isPhoneValid)
+          return;
+      }
     }
-    if (this.channels_.includes('sms')) {
-      const isPhoneValid = await this.mobileInput.isValid();
-      if (isPhoneValid)
-        return;
+    catch (error) {
+      throw ('Please insert required fields');
     }
-    throw ('Please insert required fields');
   }
   validateField(field, errorMsg) {
     field.classList.add('s-has-error');
@@ -116,8 +121,8 @@ export class SallaProductAvailability {
           h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
         ] : ''),
       h("div", { slot: "footer", class: "s-product-availability-footer" },
-        h("salla-button", { width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')),
-        h("salla-button", { "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
+        h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')),
+        h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   static get is() { return "salla-product-availability"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/salla-quantity-input/salla-quantity-input.css

@@ -1,3 +1,4 @@
-:host {
-  display: block;
-}
+/*
+* Salla Qunatity Input Component: quantity input with increase & decrease buttons.
+* You can use these classes to target the elements in the component.
+*/

package/dist/collection/components/salla-quantity-input/salla-quantity-input.js

@@ -68,17 +68,17 @@ export class SallaQuantityInput {
   }
   render() {
     return (h(Host, { class: "s-quantity-input s-quantity-input-container" },
-      h("button", { onClick: () => this.increase(), class: "s-quantity-input-button", type: "button" },
+      h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button", type: "button" },
         !this.hasIncrementSlot ? h("i", { class: "sicon-add" }) : '',
         h("slot", { name: "increment-button" })),
       h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })),
-      h("button", { class: "s-quantity-input-button", onClick: () => this.decrease(), type: "button" },
+      h("button", { class: "s-quantity-input-decrease-button", onClick: () => this.decrease(), type: "button" },
         !this.hasDecrementSlot ? h("i", { class: "sicon-minus" }) : '',
         h("slot", { name: "decrement-button" }))));
   }
   static get is() { return "salla-quantity-input"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-quantity-input.css"]
+    "$": ["salla-quantity-input.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["salla-quantity-input.css"]

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

@@ -1,23 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Rating Component: Order rating modal, used in the order single page
 * You can use these classes to target the elements in the component.
-*/
-#s-rating .s-rating-modal-product-img {
-  font-size: 0;
-  position: relative;
-}
-#s-rating .s-rating-modal-product-img:before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background: #eee;
-}
-#s-rating .unicode {
-  unicode-bidi: plaintext;
-}
+*/

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

@@ -54,8 +54,8 @@ export class SallaRatingModal {
   }
   // handle wizard
   handleWizard() {
-    this.steps = document.querySelectorAll(".s-rating-modal-step");
-    this.dots = document.querySelectorAll(".s-rating-modal-step-dot");
+    this.steps = this.modal.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.modal.querySelectorAll(".s-rating-modal-step-dot");
     this.showActiveStep();
   }
   showActiveStep(current = null) {
@@ -143,7 +143,7 @@ export class SallaRatingModal {
       this.thanksTime.remove();
       this.close().then(() => window.location.reload());
     }, 1000);
-    document.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+    this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
     this.showActiveStep(this.thanksTab);
   }
   render() {

package/dist/collection/components/salla-rating-stars/salla-rating-stars.css

@@ -1,6 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-:host {
-  display: block;
-}
+* Salla Rating Stars Component: Rating starts as rating input or to display rating values.
+* You can use these classes to target the elements in the component.
+*/