@salla.sa/twilight-components 1.0.56 → 1.0.58

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

@@ -40,7 +40,7 @@ export class SallaInfiniteScroll {
   }
   loading(isLoading = true) {
     let btnText = this.status.querySelector('.s-button-text');
-    Helper.toggleElement(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
     this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
   }
   componentWillLoad() {

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

@@ -70,7 +70,7 @@ export class SallaLoginModal {
         .then(() => salla.auth.api.login({ type: 'email', email: this.loginEmail.value }))
         .then(() => this.emailBtn.stop() && this.emailBtn.enable())
         .then(() => this.showTab(this.verifyTab))
-        .then(() => this.verifyTab.by = 'email')
+        .then(() => (this.verifyTab.by = 'email') && (this.verifyTab.url = 'auth/email/verify'))
         .then(() => this.verifyTab.show({ email: this.loginEmail.value }));
     };
     this.newUser = async () => {
@@ -164,8 +164,8 @@ export class SallaLoginModal {
     var _a, _b;
     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
     let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
-    tabs.map(el => Helper.toggleElement(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.toggleElement(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    tabs.map(el => Helper.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
+    setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
     setTimeout(() => this.host.querySelector('.s-login-modal-wrapper').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';
@@ -174,8 +174,8 @@ export class SallaLoginModal {
     isRegistrationTab && ((_a = this.firstName) === null || _a === void 0 ? void 0 : _a.focus());
     (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
-      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
-        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
+        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
     }
     return this;
   }

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

@@ -10,7 +10,4 @@
 /*
 * Salla Modal Component: popup modal used in most parts of the theme
 * You can use these classes to target the elements in the component.
-*/
-.salla-modal .s-modal-wrapper {
-  height: calc(var(--vh, 1vh) * 100);
-}
+*/

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

@@ -88,10 +88,10 @@ export class SallaModal {
   }
   toggleModal(isOpen) {
     const body = this.host.querySelector('.s-modal-body');
-    Helper.toggleElement(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+    Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       //todo:: use united class names
-      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+      .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
       setTimeout(() => this.host.classList.add('s-hidden'), 350);
     }

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

@@ -11,10 +11,14 @@ export class SallaOfferModal {
     this.offer = null;
     this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
     this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
+    this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+    this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     Helper.setHost(this.host);
     salla.event.on('languages::translations.loaded', () => {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.remember_my_choice');
+      this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+      this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     });
     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();
@@ -43,6 +47,7 @@ export class SallaOfferModal {
     this.offer = offer;
     this.offer_name = offer.name;
     this.offer_message = offer.message;
+    this.modal.setTitle(this.offer_name);
     return this.modal.show();
   }
   rememberMe(event) {
@@ -64,13 +69,13 @@ export class SallaOfferModal {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" },
           h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
             ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
                 .replace(/\{name\}/g, category.name)
                 .replace(/\{url\}/g, category.urls.customer) }))
-            : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-modal-product s-offer-modal-slider-item", id: 'product_' + product.id, innerHTML: this.productSlot
+            : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: { "s-offer-modal-product": true, "s-offer-modal-slider-item": true, "s-offer-modal-not-available": !product.is_available }, id: 'product_' + product.id, innerHTML: this.productSlot
                 .replace(/\{name\}/g, product.name)
                 .replace(/\{url\}/g, product.url)
                 .replace(/\{image\}/g, product.thumbnail)
@@ -78,7 +83,7 @@ export class SallaOfferModal {
                 ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
                 : salla.money(product.price)) },
               h("div", { class: "s-offer-modal-btn-wrap" },
-                h("salla-button", { wide: true, "btn-style": 'outline-primary', "data-id": product.id, "loader-position": "center", onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart')))))),
+                h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))),
           h("div", { class: "s-offer-modal-slider-nav" },
             h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" },
               h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })),
@@ -155,7 +160,9 @@ export class SallaOfferModal {
     "offer_name": {},
     "offer_message": {},
     "offer_expires_in": {},
-    "remember_my_choice": {}
+    "remember_my_choice": {},
+    "add_to_cart": {},
+    "out_of_stock": {}
   }; }
   static get methods() { return {
     "show": {

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,71 @@
+import { Component, Element, Host, State, Watch, h } from '@stencil/core';
+export class SallaQuantityInput {
+  constructor() {
+    this.hostAttributes = {};
+    this.hasIncrementSlot = false;
+    this.hasDecrementSlot = false;
+    this.quantity = 1;
+  }
+  /**
+   * Workaround to fire change event for the input.
+   */
+  watchPropHandler() {
+    salla.helpers.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }))();
+  }
+  componentWillLoad() {
+    this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
+    this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
+  }
+  // border-border-color
+  // transtion transition-color duration-300
+  componentdidLoad() {
+    this.quantity = parseInt(this.host.getAttribute('value')) || 1;
+    //app.on('input', '[name="quantity"]', event => salla.helpers.inputDigitsOnly(event.target));
+  }
+  getInputAttributes() {
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
+        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+      }
+    }
+    return this.hostAttributes;
+  }
+  decrement() {
+    if (this.quantity <= 1) {
+      return;
+    }
+    this.quantity--;
+  }
+  increment() {
+    let maxQuantity = parseInt(this.host.getAttribute('max'));
+    if (maxQuantity && this.quantity >= maxQuantity) {
+      return;
+    }
+    this.quantity++;
+  }
+  render() {
+    return (h(Host, { class: "s-quantity-input s-quantity-input-container" },
+      h("button", { onClick: () => this.increment(), class: "s-quantity-input-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(), { min: "1", value: this.quantity, ref: (el) => this.textInput = el })),
+      h("button", { class: "s-quantity-input-button", onClick: () => this.decrement(), 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"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-quantity-input.css"]
+  }; }
+  static get states() { return {
+    "quantity": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "quantity",
+      "methodName": "watchPropHandler"
+    }]; }
+}

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

@@ -66,7 +66,7 @@ export class SallaRatingModal {
       // Loop through each star, and add or remove the `.selected` class to toggle highlighting
       event.target
         .querySelectorAll('.s-rating-modal-btn-star')
-        .forEach((star, index) => Helper.toggleElement(star, 's-rating-modal-selected', 's-rating-modal-un-selected', () => index < selectedIndex));
+        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-modal-selected', 's-rating-modal-un-selected', () => index < selectedIndex));
       // Remove aria-pressed from any previously selected star
       event.target.querySelectorAll('.s-rating-modal-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
       // Add aria-pressed role to the selected button
@@ -82,12 +82,12 @@ export class SallaRatingModal {
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.toggle('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
-      .toggle('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
+    Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
     if (this.currentIndex != 0) {
       // the animation
-      Helper.toggleElement(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
-      setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
+      Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
@@ -119,7 +119,7 @@ export class SallaRatingModal {
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    Helper.toggleElement(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -130,7 +130,7 @@ export class SallaRatingModal {
       .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
       .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
       .then(() => this.showActiveStep())
-      .then(() => Helper.toggle('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
+      .then(() => Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -155,7 +155,7 @@ export class SallaRatingModal {
       return;
     }
     type = type || rating['dataset'].type;
-    Helper.toggleElement(comment, 'save', 's-has-error', el => el.value.length > 3);
+    Helper.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
     throw validationMessage.innerHTML = stars
       ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
       : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');

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

@@ -48,7 +48,7 @@ export class SallaSearch {
       return;
     }
     //run loading spinner or stop it
-    Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    Helper.toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
     salla.search.api.search(e.target.value)
       .then(response => this.results = response)
       .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
@@ -57,8 +57,8 @@ export class SallaSearch {
   afterSearching(isEmpty = true) {
     var _a;
     this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
-    Helper.toggleElement(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
-      .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    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.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
     this.inputValue.length == 0 ? this.container.classList.remove('s-search-no-results') : '';
   }

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { S as SallaLoginModal } from './salla-login-modal-63f03766.js';
-export { S as SallaSearch } from './salla-search-7521be0c.js';
+export { S as SallaLoginModal } from './salla-login-modal-7ad386c8.js';
+export { S as SallaSearch } from './salla-search-ce45eb5b.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",{"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);
+  return bootstrapLazy([["salla-button",[[4,"salla-button",{"shape":[513],"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],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[64]}]]],["salla-rating-modal",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-conditional-fields",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["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-quantity-input",[[4,"salla-quantity-input",{"quantity":[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

@@ -7,9 +7,9 @@ const SallaButton = class {
     registerInstance(this, hostRef);
     this.hostAttributes = {};
     /**
-     * Button Type
+     * Button Type todo :: find better name,
      */
-    this.buttonType = 'btn';
+    this.shape = 'btn';
     /**
      * Button Color
      */
@@ -88,21 +88,21 @@ const SallaButton = class {
   }
   getBtnAttributes() {
     for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['type', 'color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
+      if (!['color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
         this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
       }
     }
     this.hostAttributes.type = this.hostAttributes.type || 'button';
     this.hostAttributes.class +=
-      ' s-button-element s-button-' + this.buttonType
+      ' s-button-element s-button-' + this.shape
         + ' 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.shape == "link" ? ' s-button-' + this.color + '-link' : '')
+        + (this.shape != "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);
+        + (this.shape == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
     return this.hostAttributes;
   }
   render() {

package/dist/esm/salla-conditional-fields.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8b97d225.js';
+
+const sallaConditionalFieldsCss = ":host{display:block}";
+
+const SallaConditionalFields = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  changeHandler(event) {
+    salla.log('Received the change event: ', event);
+    if (!['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
+      // todo :: support debug
+      salla.log('Ignore the change because is not support input: ' + event.target.tagName);
+      return;
+    }
+    // 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}"]`);
+    this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
+      .forEach((field) => {
+      // @ts-ignore
+      let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
+      // @ts-ignore
+      let value = field === null || field === void 0 ? void 0 : field.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();
+      // let isSelected = isMultiple ? event.target?.checked : value === event.target.value;
+      let isSelected = false;
+      if (isMultiple) {
+        // @ts-ignore
+        let selectedValues = Array.from(this.host.querySelectorAll(`input[name="${event.target.name}"]:checked`), e => e === null || e === void 0 ? void 0 : e.value);
+        isSelected = selectedValues.includes(value.toString());
+      }
+      else {
+        isSelected = value === event.target.value;
+      }
+      salla.log('The input is ', (isMultiple ? 'Multiple' : 'Single'), ' value:', isSelected);
+      let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
+      if (showTheInput) {
+        field.classList.remove('hidden');
+        field.querySelectorAll('[name]').forEach((input) => {
+          input.removeAttribute('disabled');
+          //To handle focus on hidden input error
+          if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {
+            input.setAttribute('required', '');
+          }
+        });
+      }
+      else {
+        field.classList.add('hidden');
+        field.querySelectorAll('[name]').forEach((input) => {
+          input.setAttribute('disabled', '');
+          input.removeAttribute('required');
+          if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
+            // @ts-ignore
+            input.checked = false;
+          }
+          //firing this event will show errors, so don't run it when pageLoading.
+          // if (this.optionsAlreadyInitiated) {
+          //   salla.document.event.fireEvent(input, 'change', {'bubbles': true});
+          // }
+        });
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+SallaConditionalFields.style = sallaConditionalFieldsCss;
+
+export { SallaConditionalFields as salla_conditional_fields };

package/dist/esm/salla-infinite-scroll.entry.js

@@ -42,7 +42,7 @@ const SallaInfiniteScroll = class {
   }
   loading(isLoading = true) {
     let btnText = this.status.querySelector('.s-button-text');
-    Helper.toggleElement(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
     this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
   }
   componentWillLoad() {

package/dist/esm/{salla-login-modal-63f03766.js → salla-login-modal-7ad386c8.js}

@@ -63,7 +63,7 @@ const SallaLoginModal = class {
         .then(() => salla.auth.api.login({ type: 'email', email: this.loginEmail.value }))
         .then(() => this.emailBtn.stop() && this.emailBtn.enable())
         .then(() => this.showTab(this.verifyTab))
-        .then(() => this.verifyTab.by = 'email')
+        .then(() => (this.verifyTab.by = 'email') && (this.verifyTab.url = 'auth/email/verify'))
         .then(() => this.verifyTab.show({ email: this.loginEmail.value }));
     };
     this.newUser = async () => {
@@ -157,8 +157,8 @@ const SallaLoginModal = class {
     var _a, _b;
     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
     let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
-    tabs.map(el => Helper.toggleElement(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.toggleElement(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    tabs.map(el => Helper.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
+    setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
     setTimeout(() => this.host.querySelector('.s-login-modal-wrapper').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';
@@ -167,8 +167,8 @@ const SallaLoginModal = class {
     isRegistrationTab && ((_a = this.firstName) === null || _a === void 0 ? void 0 : _a.focus());
     (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
-      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
-        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
+        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
     }
     return this;
   }

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

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

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
-export { S as salla_search } from './salla-search-7521be0c.js';
+export { S as salla_search } from './salla-search-ce45eb5b.js';
 
-const sallaModalCss = ".salla-modal .s-modal-wrapper{height:calc(var(--vh, 1vh) * 100)}";
+const sallaModalCss = "";
 
 const SallaModal = class {
   constructor(hostRef) {
@@ -92,10 +92,10 @@ const SallaModal = class {
   }
   toggleModal(isOpen) {
     const body = this.host.querySelector('.s-modal-body');
-    Helper.toggleElement(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+    Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       //todo:: use united class names
-      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+      .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
       setTimeout(() => this.host.classList.add('s-hidden'), 350);
     }

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

@@ -10,10 +10,14 @@ const SallaOfferModal = class {
     this.offer = null;
     this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
     this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
+    this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+    this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     Helper.setHost(this.host);
     salla.event.on('languages::translations.loaded', () => {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.remember_my_choice');
+      this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+      this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     });
     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();
@@ -42,6 +46,7 @@ const SallaOfferModal = class {
     this.offer = offer;
     this.offer_name = offer.name;
     this.offer_message = offer.message;
+    this.modal.setTitle(this.offer_name);
     return this.modal.show();
   }
   rememberMe(event) {
@@ -63,18 +68,18 @@ const SallaOfferModal = class {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
               .replace(/\{name\}/g, category.name)
               .replace(/\{url\}/g, category.urls.customer) }))
-          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-modal-product s-offer-modal-slider-item", id: 'product_' + product.id, innerHTML: this.productSlot
+          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: { "s-offer-modal-product": true, "s-offer-modal-slider-item": true, "s-offer-modal-not-available": !product.is_available }, id: 'product_' + product.id, innerHTML: this.productSlot
               .replace(/\{name\}/g, product.name)
               .replace(/\{url\}/g, product.url)
               .replace(/\{image\}/g, product.thumbnail)
               .replace(/\{price\}/g, product.has_special_price
               ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
-              : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { wide: true, "btn-style": 'outline-primary', "data-id": product.id, "loader-position": "center", onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart')))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })))),
+              : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })))),
         h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.expiry_date ?
           h("p", { class: "s-offer-modal-expiry" }, this.offer_expires_in, " ", this.offer.expiry_date)
           : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", this.remember_my_choice)),

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

@@ -0,0 +1,60 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8b97d225.js';
+
+const sallaQuantityInputCss = ":host{display:block}";
+
+const SallaQuantityInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hostAttributes = {};
+    this.hasIncrementSlot = false;
+    this.hasDecrementSlot = false;
+    this.quantity = 1;
+  }
+  /**
+   * Workaround to fire change event for the input.
+   */
+  watchPropHandler() {
+    salla.helpers.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }))();
+  }
+  componentWillLoad() {
+    this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
+    this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
+  }
+  // border-border-color
+  // transtion transition-color duration-300
+  componentdidLoad() {
+    this.quantity = parseInt(this.host.getAttribute('value')) || 1;
+    //app.on('input', '[name="quantity"]', event => salla.helpers.inputDigitsOnly(event.target));
+  }
+  getInputAttributes() {
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
+        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+      }
+    }
+    return this.hostAttributes;
+  }
+  decrement() {
+    if (this.quantity <= 1) {
+      return;
+    }
+    this.quantity--;
+  }
+  increment() {
+    let maxQuantity = parseInt(this.host.getAttribute('max'));
+    if (maxQuantity && this.quantity >= maxQuantity) {
+      return;
+    }
+    this.quantity++;
+  }
+  render() {
+    return (h(Host, { class: "s-quantity-input s-quantity-input-container" }, h("button", { onClick: () => this.increment(), class: "s-quantity-input-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(), { min: "1", value: this.quantity, ref: (el) => this.textInput = el })), h("button", { class: "s-quantity-input-button", onClick: () => this.decrement(), type: "button" }, !this.hasDecrementSlot ? h("i", { class: "sicon-minus" }) : '', h("slot", { name: "decrement-button" }))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "quantity": ["watchPropHandler"]
+  }; }
+};
+SallaQuantityInput.style = sallaQuantityInputCss;
+
+export { SallaQuantityInput as salla_quantity_input };