@salla.sa/twilight-components 1.0.99 → 1.0.104

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

@@ -9,45 +9,36 @@ export class SallaRatingStars {
     this.size = 'medium';
   }
   initiateRating() {
-    document.querySelectorAll('.s-rating-stars-element').forEach((elem) => {
-      elem.addEventListener('submit', function (event) {
-        event.preventDefault();
-        // Get the selected star - activeElement is not supported in safari
-        let activeStars = event.target.querySelectorAll('.s-rating-stars-btn-star.s-rating-stars-hovered');
-        let selected = activeStars[activeStars.length - 1];
-        if (!selected)
-          return;
-        let selectedIndex = selected.getAttribute('data-star');
-        event.target.querySelector('.rating_hidden_input').value = selectedIndex;
-        // Get all stars in this form (only search in the form, not the whole document)
-        // Loop through each star, and add or remove the `.selected` class to toggle highlighting
-        event.target
-          .querySelectorAll('.s-rating-stars-btn-star')
-          .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
-        // Remove aria-pressed from any previously selected star
-        event.target.querySelectorAll('.s-rating-stars-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
-        // Add aria-pressed role to the selected button
-        selected.setAttribute('aria-pressed', '');
-      });
+    this.host.addEventListener('click', () => {
+      if (!this.startsElem)
+        return;
+      // Get the selected star - activeElement is not supported in safari
+      let activeStars = this.startsElem.querySelectorAll('.s-rating-stars-hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let selectedIndex = selected.getAttribute('data-star');
+      this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
+        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
+      // update aria-pressed attr status
+      this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
+      selected.setAttribute('aria-pressed', 'true');
     });
   }
   highlightSelectedStars() {
-    let hover = ['s-rating-stars-hovered'], element = this.host.querySelector('.s-rating-stars-element'), starElements = element === null || element === void 0 ? void 0 : element.querySelectorAll('.s-rating-stars-btn-star');
-    element === null || element === void 0 ? void 0 : element.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
-    starElements === null || starElements === void 0 ? void 0 : starElements.forEach((starElement, index) => {
-      starElement.addEventListener('mouseover', () => {
-        starElement.classList.add(...hover);
-        if (index <= 1) {
-          starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
-        }
-        else {
-          for (let i = 0; i < index; i++) {
-            starElements[i].classList.add(...hover);
-          }
+    var _a, _b;
+    let hoveredClass = 's-rating-stars-hovered', stars = (_a = this.startsElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.s-rating-stars-btn-star');
+    stars === null || stars === void 0 ? void 0 : stars.forEach((star, index) => {
+      star.addEventListener('mouseover', () => {
+        for (let i = 0; i <= index; i++) {
+          stars[i].classList.add(hoveredClass);
         }
       });
-      starElement.addEventListener('mouseout', () => starElement.classList.remove(...hover));
+      star.addEventListener('mouseout', () => star.classList.remove(hoveredClass));
     });
+    (_b = this.startsElem) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
   }
   createStars(n) {
     let stars = [];
@@ -67,9 +58,9 @@ export class SallaRatingStars {
         this.createStars(this.value),
         " ")
       :
-        h("form", { class: "s-rating-stars-element" },
+        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el },
           h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }),
-          [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star },
+          [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star },
             h("i", { class: "sicon-star2" }))))));
   }
   componentDidLoad() {

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

@@ -1,48 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Search Component: Site search modal.
 * You can use these classes to target the elements in the component.
-*/
-#s-search-modal .s-search-inline {
-  border: 1px solid #eee;
-}
-#s-search-modal .s-search-no-results .s-search-input, #s-search-modal .s-search-container-open .s-search-input {
-  border-bottom: 1px solid #f4f4f5;
-}
-#s-search-modal .s-search-product-image {
-  font-size: 0;
-  position: relative;
-}
-#s-search-modal .s-search-product-image:before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background: #eee;
-}
-/*
-* Override general modal style with custom style for search modal
-*/
-#s-search-modal .s-modal-wrapper {
-  align-items: flex-start;
-  padding: 0;
-}
-#s-search-modal .s-modal-spacer {
-  display: inline;
-}
-#s-search-modal .s-modal-body {
-  padding: 0;
-  max-width: 90%;
-  margin-top: 3.2rem;
-  border-radius: 0.5rem;
-  background: transparent;
-  overflow: visible;
-}
-#s-search-modal .s-modal-close {
-  top: 50%;
-  transform: translateY(-50%);
-}
+*/

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Prop, h, State, Element } from '@stencil/core';
+import { Component, Prop, h, State, Element, Watch } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 /**
  * @slot product - Replaces products card in the results, has replaceable props `{name}`, `{price}`, `{regular_price}`, `{image}`.
@@ -10,6 +10,8 @@ export class SallaSearch {
   constructor() {
     var _a;
     this.inputValue = '';
+    this.typing = false;
+    this.debounce = setTimeout(() => '', 1000);
     this.inline = false;
     this.oval = false;
     this.height = 60;
@@ -23,6 +25,7 @@ export class SallaSearch {
     salla.event.on('modalOpened', () => this.onModalOpen());
     salla.event.on('modalClosed', () => this.onModalClose());
   }
+  ;
   onModalOpen() {
     setTimeout(() => this.searchInput.focus(), 300);
   }
@@ -40,20 +43,29 @@ export class SallaSearch {
       '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
       '</div>';
   }
-  search(e) {
-    this.inputValue = e.target.value;
-    Helper.hideElement(this.noResults);
-    if (e.target.value.length === 0) {
+  debounceSearch(event) {
+    this.typing = true;
+    clearTimeout(this.debounce);
+    this.debounce = setTimeout(() => {
+      this.typing = false;
+      this.search_term = event.target.value;
+    }, 500);
+  }
+  handelSearch(val) {
+    this.inputValue = val;
+    if (val.length > 2) {
+      this.search(val);
+    }
+    else {
       this.results = undefined;
       this.afterSearching();
-      return;
-    }
-    if (e.target.value.length <= 2) {
-      return;
     }
+  }
+  search(val) {
+    Helper.hideElement(this.noResults);
     //run loading spinner or stop it
     Helper.toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
-    salla.product.search(e.target.value)
+    salla.product.search(val)
       .then(response => this.results = response)
       .catch(err => err !== 'Query is same as previous one!' ? this.results = undefined : null)
       .finally(() => this.afterSearching(/*isEmpty*/ false));
@@ -64,12 +76,12 @@ export class SallaSearch {
     Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
       .toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
     salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
-    this.inputValue.length == 0 ? this.container.classList.remove('s-search-no-results') : '';
+    this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
   }
   render() {
     var _a;
-    const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container, style: this.oval ? { borderRadius: this.height / 2 + 'px' } : {} },
-      h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e), style: { height: this.height + 'px' }, ref: input => this.searchInput = input }),
+    const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container },
+      h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.debounceSearch(e), style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' }, ref: input => this.searchInput = input }),
       h("span", { class: "s-search-icon-wrap" },
         h("i", { class: "s-search-icon sicon-search", ref: el => this.searchIcon = el })),
       h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
@@ -80,9 +92,9 @@ export class SallaSearch {
             .replace(/\{image\}/g, item.thumbnail) })),
         h("p", { ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, this.noResultsText)));
     return (this.inline ?
-      h("div", { id: "s-search-modal" }, searchContent)
+      h("div", { class: "s-search-modal" }, searchContent)
       :
-        h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
+        h("salla-modal", { position: "top", class: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
   }
   /**
    * Run it one time after load
@@ -156,7 +168,14 @@ export class SallaSearch {
   static get states() { return {
     "results": {},
     "placeholder": {},
-    "noResultsText": {}
+    "noResultsText": {},
+    "typing": {},
+    "debounce": {},
+    "search_term": {}
   }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "search_term",
+      "methodName": "handelSearch"
+    }]; }
 }

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

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 /*
-* Global flags style [imported from Int-tel-input]
+* Salla Tel Input Component: used to get the telephone input, in login and register steps and also in user profile.
+*/
+/*
+* native style for tel-input addon
 */
 .iti {
   width: 100%;
@@ -214,12 +217,10 @@
   line-height: 1.5em;
 }
 
-/*
-* Salla Tel Input Component: used to get the telephone input, in login and register steps and also in user profile.
-* You can use these classes to target the elements in the component.
-*/
 /*
 * Global flag style
+* Flags from Int-tel-input
+* Used in tel-input & localiztions components
 */
 .iti__flag {
   width: 20px;
@@ -1283,7 +1284,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;
@@ -1291,9 +1292,13 @@
 
 @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 {
   background-color: transparent;
-}
+}
+
+/*
+* You can use these classes to target the elements in the component.
+*/

package/dist/collection/components/{salla-verify-modal/salla-verify-modal.css → salla-verify/salla-verify.css}

@@ -1,14 +1,7 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Verify Component: verify step in login and register and displays after the user change it's phone number.
 * You can use these classes to target the elements in the component.
 */
-salla-verify-modal {
+salla-verify {
   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 → salla-verify/salla-verify.js}

@@ -7,9 +7,13 @@ import Helper from "../../Helpers/Helper";
  * @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer
  * @slot after-footer - placeholder position
  */
-export class SallaVerifyModal {
+export class SallaVerify {
   constructor() {
     this.initiated = false;
+    /**
+     * Should render component without modal
+     */
+    this.display = 'modal';
     /**
      * Verifying method
      */
@@ -30,7 +34,7 @@ export class SallaVerifyModal {
       (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
       (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('pages.profile.verify'));
     });
-    if (this.withoutModal) {
+    if (this.display == 'inline') {
       this.modal = { open: () => '', close: () => '', setTitle: () => '' };
       return;
     }
@@ -63,10 +67,10 @@ export class SallaVerifyModal {
     this.data.type = this.data.type || this.type;
     this.type = this.data.type;
     this.resendTimer();
-    this.otpInputs = document.querySelectorAll('.s-verify-modal-input');
+    this.otpInputs = this.body.querySelectorAll('.s-verify-input');
     if (!this.initiated) {
-      Helper.on('input', '.s-verify-modal-input', e => salla.helpers.inputDigitsOnly(e.target));
-      Helper.onKeyUp('.s-verify-modal-input', event => {
+      Helper.on('input', '.s-verify-input', e => salla.helpers.inputDigitsOnly(e.target));
+      Helper.onKeyUp('.s-verify-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
         if (event.target.value) {
@@ -79,7 +83,7 @@ export class SallaVerifyModal {
         }
         this.toggleOTPSubmit();
       });
-      Helper.on('paste', '.s-verify-modal-input', event => {
+      Helper.on('paste', '.s-verify-input', event => {
         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();
@@ -89,8 +93,10 @@ export class SallaVerifyModal {
       this.initiated = true;
     }
     this.reset();
-    !this.withoutModal && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
+    this.display == 'modal' && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
     this.modal.open();
+    // focus the first input after opening the modal
+    setTimeout(() => this.otpInputs[0].focus(), 100);
   }
   toggleOTPSubmit() {
     let otp = [];
@@ -144,36 +150,36 @@ export class SallaVerifyModal {
       .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
   }
   render() {
-    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, "modal-title": this.title }, this.myBody());
+    return this.display == 'inline' ? h(Host, null, this.myBody()) :
+      h("salla-modal", { icon: "sicon-android-phone", width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, this.myBody());
   }
   myBody() {
-    return (h("div", { id: "s-verify-modal" },
-      h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
+    return (h("div", { class: "s-verify-body", ref: body => this.body = body },
+      h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
       h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
-      h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))),
-      h("div", { slot: "footer", class: "s-verify-modal-footer" },
-        h("salla-button", { class: "s-verify-modal-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')),
-        h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el },
+      h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
+      h("div", { slot: "footer", class: "s-verify-footer" },
+        h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')),
+        h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el },
           salla.lang.get('blocks.header.resend_after'),
-          h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })),
-        h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
+          h("b", { class: "s-verify-timer", ref: el => this.timer = el })),
+        h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
       h("slot", { name: "after-footer" })));
   }
-  static get is() { return "salla-verify-modal"; }
+  static get is() { return "salla-verify"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-verify-modal.scss"]
+    "$": ["salla-verify.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["salla-verify-modal.css"]
+    "$": ["salla-verify.css"]
   }; }
   static get properties() { return {
-    "withoutModal": {
-      "type": "boolean",
+    "display": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "'inline' | 'modal'",
+        "resolved": "\"inline\" | \"modal\"",
         "references": {}
       },
       "required": false,
@@ -182,8 +188,9 @@ export class SallaVerifyModal {
         "tags": [],
         "text": "Should render component without modal"
       },
-      "attribute": "without-modal",
-      "reflect": false
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "'modal'"
     },
     "type": {
       "type": "string",

package/dist/collection/plugins/tailwind-theme/generator.js

@@ -26,8 +26,12 @@ fs.readdirSync(componentsPath, {withFileTypes: true})
 for (const [keyComponent, value] of Object.entries(components)) {
   console.log('> Processing ' + keyComponent + ' ...');
   _.forEach(value, function (value, keyUtility) {
-    keyUtility = '.s-' + keyComponent + '-' + keyUtility;
-    utilities[keyUtility] = {[`@apply ${value}`]: {}};
+    if(typeof value === 'string'){
+      keyUtility = '.s-' + keyComponent + '-' + keyUtility;
+      utilities[keyUtility] = {[`@apply ${value}`]: {}};
+    }else{
+      utilities[keyUtility] = value;
+    }
   });
   console.log('✓ Processed ' + keyComponent + '');
 }

package/dist/collection/plugins/tailwind-theme/index.js

@@ -6,11 +6,11 @@ module.exports = require('tailwindcss/plugin').withOptions(() => {
       '.text-md'            : {},
       '.s-has-error'          : {'@apply border-red-400 focus:border-red-500': {}},
       '.rounded-icon'       : {'@apply w-16 h-16 flex justify-center items-center rounded-full text-3xl': {}},
-      '.form-input'         : {'@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-border-color dark:bg-gray-600 dark:border-gray-600 rounded-md': {}},
+      '.form-input'         : {'@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-gray-150 dark:bg-gray-600 dark:border-gray-600 rounded-md': {}},
       '.btn'                : {'@apply transition duration-300 flex-1 inline-flex justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded-md hover:opacity-80 whitespace-nowrap': {}},
       '.btn-primary'        : {'@apply text-primary-reverse border border-primary bg-primary': {}},
-      '.btn-danger'         : {'@apply bg-theme-red text-white hover:opacity-80': {}},
-      '.btn-outline'        : {'@apply text-gray-400 bg-white shadow-sm hover:text-gray-600 border border-border-color': {}},
+      '.btn-danger'         : {'@apply bg-red-400 text-white hover:opacity-80': {}},
+      '.btn-outline'        : {'@apply text-gray-400 bg-white shadow-sm hover:text-gray-600 border border-gray-150': {}},
       '.btn-outline-primary': {'@apply border border-primary text-primary hover:bg-primary hover:text-reverse': {}},
     });
 

package/dist/components/index.d.ts

@@ -1,6 +1,21 @@
 /* TwilightComponents custom elements */
-
-import type { Components, JSX } from "../types/components";
+export { SallaAddProductButton as SallaAddProductButton } from '../types/components/salla-add-product-button/salla-add-product-button';
+export { SallaBranches as SallaBranches } from '../types/components/salla-branches/salla-branches';
+export { SallaButton as SallaButton } from '../types/components/salla-button/salla-button';
+export { SallaConditionalFields as SallaConditionalFields } from '../types/components/salla-conditional-fields/salla-conditional-fields';
+export { SallaInfiniteScroll as SallaInfiniteScroll } from '../types/components/salla-infinite-scroll/salla-infinite-scroll';
+export { SallaInstallment as SallaInstallment } from '../types/components/salla-installment/salla-installment';
+export { SallaLocalizationModal as SallaLocalizationModal } from '../types/components/salla-localization-modal/salla-localization-modal';
+export { SallaLoginModal as SallaLoginModal } from '../types/components/salla-login-modal/salla-login-modal';
+export { SallaModal as SallaModal } from '../types/components/salla-modal/salla-modal';
+export { SallaOfferModal as SallaOfferModal } from '../types/components/salla-offer-modal/salla-offer-modal';
+export { SallaProductAvailability as SallaProductAvailability } from '../types/components/salla-product-availability/salla-product-availability';
+export { SallaQuantityInput as SallaQuantityInput } from '../types/components/salla-quantity-input/salla-quantity-input';
+export { SallaRatingModal as SallaRatingModal } from '../types/components/salla-rating-modal/salla-rating-modal';
+export { SallaRatingStars as SallaRatingStars } from '../types/components/salla-rating-stars/salla-rating-stars';
+export { SallaSearch as SallaSearch } from '../types/components/salla-search/salla-search';
+export { SallaTelInput as SallaTelInput } from '../types/components/salla-tel-input/salla-tel-input';
+export { SallaVerify as SallaVerify } from '../types/components/salla-verify/salla-verify';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -20,7 +35,4 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export type { Components, JSX };
-
 export * from '../types';

package/dist/components/index.js

@@ -2,3 +2,20 @@
  * Crafted with ❤ by Salla
  */
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { SallaAddProductButton, defineCustomElement as defineCustomElementSallaAddProductButton } from './salla-add-product-button.js';
+export { SallaBranches, defineCustomElement as defineCustomElementSallaBranches } from './salla-branches.js';
+export { SallaButton, defineCustomElement as defineCustomElementSallaButton } from './salla-button.js';
+export { SallaConditionalFields, defineCustomElement as defineCustomElementSallaConditionalFields } from './salla-conditional-fields.js';
+export { SallaInfiniteScroll, defineCustomElement as defineCustomElementSallaInfiniteScroll } from './salla-infinite-scroll.js';
+export { SallaInstallment, defineCustomElement as defineCustomElementSallaInstallment } from './salla-installment.js';
+export { SallaLocalizationModal, defineCustomElement as defineCustomElementSallaLocalizationModal } from './salla-localization-modal.js';
+export { SallaLoginModal, defineCustomElement as defineCustomElementSallaLoginModal } from './salla-login-modal.js';
+export { SallaModal, defineCustomElement as defineCustomElementSallaModal } from './salla-modal.js';
+export { SallaOfferModal, defineCustomElement as defineCustomElementSallaOfferModal } from './salla-offer-modal.js';
+export { SallaProductAvailability, defineCustomElement as defineCustomElementSallaProductAvailability } from './salla-product-availability.js';
+export { SallaQuantityInput, defineCustomElement as defineCustomElementSallaQuantityInput } from './salla-quantity-input.js';
+export { SallaRatingModal, defineCustomElement as defineCustomElementSallaRatingModal } from './salla-rating-modal.js';
+export { SallaRatingStars, defineCustomElement as defineCustomElementSallaRatingStars } from './salla-rating-stars.js';
+export { SallaSearch, defineCustomElement as defineCustomElementSallaSearch } from './salla-search.js';
+export { SallaTelInput, defineCustomElement as defineCustomElementSallaTelInput } from './salla-tel-input.js';
+export { SallaVerify, defineCustomElement as defineCustomElementSallaVerify } from './salla-verify.js';

package/dist/components/salla-add-product-button.js

@@ -22,10 +22,6 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.donatingAmount = 0;
     this.productStatus = 'sale';
     this.productType = 'product';
-    /**
-     * Is the button currently disabled
-     */
-    this.disabled = false;
   }
   getLabel() {
     if (this.productStatus === 'sale') {
@@ -48,13 +44,20 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
      * but its work only when the id is the only value is passed via the object
      * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
      */
-    return salla.cart.quickAdd(Object.entries({
+    const data = Object.entries({
       id: this.productId,
       donating_amount: this.donatingAmount,
       quantity: this.quantity
-    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {}))
-      .then((response) => this.success.emit(response))
-      .catch((error) => this.failed.emit(error));
+    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
+    return salla.cart.quickAdd(data)
+      .then((response) => {
+      console.log("🚀 ~ file: salla-add-product-button.tsx ~ line 67 ~ SallaAddProductButton ~ .then ~ response", response);
+      return this.success.emit(response);
+    })
+      .catch((error) => {
+      console.log("🚀 ~ file: salla-add-product-button.tsx ~ line 70 ~ SallaAddProductButton ~ addProductToCart ~ error", error);
+      return this.failed.emit(error);
+    });
   }
   getBtnAttributes() {
     for (let i = 0; i < this.host.attributes.length; i++) {
@@ -70,11 +73,11 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   render() {
     return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
       h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("slot", null)) :
-      h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null))));
+      h("salla-button", Object.assign({ ref: el => this.btn = el, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null))));
   }
   componentDidRender() {
     //if label not passed, get label
-    this.hasLabel || salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.getLabel() || 'اضافة للسلة'); });
+    this.hasLabel || salla.event.on('languages::translations.loaded', () => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
   }
   get host() { return this; }
   static get style() { return sallaAddProductButtonCss; }
@@ -84,8 +87,7 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     "donatingAmount": [514, "donating-amount"],
     "productId": [520, "product-id"],
     "productStatus": [513, "product-status"],
-    "productType": [513, "product-type"],
-    "disabled": [516]
+    "productType": [513, "product-type"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/salla-branches.js

@@ -11,7 +11,7 @@ const SallaBranches$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    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
@@ -45,10 +45,12 @@ const SallaBranches$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   //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;
@@ -64,7 +66,9 @@ const SallaBranches$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }, 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" }, h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
+    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" }, h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
           's-branches-input': true,
           'opacity-50': !branch.open,
@@ -78,7 +82,7 @@ const SallaBranches$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
           h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
         h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", 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("slot", { name: "footer" }, h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", width: "wide" }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   componentDidRender() {