@salla.sa/twilight-components 1.0.56 → 1.0.58

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLoginModal = require('./salla-login-modal-d0fb6180.js');
-const sallaSearch = require('./salla-search-f76c6d61.js');
+const sallaLoginModal = require('./salla-login-modal-02e4e65e.js');
+const sallaSearch = require('./salla-search-9d17eb96.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-button.cjs",[[4,"salla-button",{"buttonType":[513,"button-type"],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-button.cjs",[[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.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[64]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
   });
 };
 

package/dist/cjs/salla-button.cjs.entry.js

@@ -11,9 +11,9 @@ const SallaButton = class {
     index.registerInstance(this, hostRef);
     this.hostAttributes = {};
     /**
-     * Button Type
+     * Button Type todo :: find better name,
      */
-    this.buttonType = 'btn';
+    this.shape = 'btn';
     /**
      * Button Color
      */
@@ -92,21 +92,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/cjs/salla-conditional-fields.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0b5b5867.js');
+
+const sallaConditionalFieldsCss = ":host{display:block}";
+
+const SallaConditionalFields = class {
+  constructor(hostRef) {
+    index.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 (index.h(index.Host, null, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaConditionalFields.style = sallaConditionalFieldsCss;
+
+exports.salla_conditional_fields = SallaConditionalFields;

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

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

package/dist/cjs/{salla-login-modal-d0fb6180.js → salla-login-modal-02e4e65e.js}

@@ -65,7 +65,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 () => {
@@ -159,8 +159,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.Helper.toggleElement(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.Helper.toggleElement(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    tabs.map(el => Helper.Helper.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
+    setTimeout(() => tabs.map(el => Helper.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';
@@ -169,8 +169,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.Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
-        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+      Helper.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/cjs/salla-login-modal.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLoginModal = require('./salla-login-modal-d0fb6180.js');
+const sallaLoginModal = require('./salla-login-modal-02e4e65e.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
-const sallaSearch = require('./salla-search-f76c6d61.js');
+const sallaSearch = require('./salla-search-9d17eb96.js');
 
-const sallaModalCss = ".salla-modal .s-modal-wrapper{height:calc(var(--vh, 1vh) * 100)}";
+const sallaModalCss = "";
 
 const SallaModal = class {
   constructor(hostRef) {
@@ -96,10 +96,10 @@ const SallaModal = class {
   }
   toggleModal(isOpen) {
     const body = this.host.querySelector('.s-modal-body');
-    Helper.Helper.toggleElement(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+    Helper.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/cjs/salla-offer-modal.cjs.entry.js

@@ -14,10 +14,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.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.Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
     this.productSlot = ((_b = Helper.Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
@@ -46,6 +50,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) {
@@ -67,18 +72,18 @@ const SallaOfferModal = class {
   }
   render() {
     var _a, _b;
-    return index.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 index.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
       ? [index.h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, index.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 => index.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 => index.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 => index.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)) }, index.h("div", { class: "s-offer-modal-btn-wrap" }, index.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')))))), index.h("div", { class: "s-offer-modal-slider-nav" }, index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })), index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })))),
+              : salla.money(product.price)) }, index.h("div", { class: "s-offer-modal-btn-wrap" }, index.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))))), index.h("div", { class: "s-offer-modal-slider-nav" }, index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })), index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })))),
         index.h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.expiry_date ?
           index.h("p", { class: "s-offer-modal-expiry" }, this.offer_expires_in, " ", this.offer.expiry_date)
           : '', index.h("label", { class: "s-offer-modal-remember-label" }, index.h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", this.remember_my_choice)),

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

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0b5b5867.js');
+
+const sallaQuantityInputCss = ":host{display:block}";
+
+const SallaQuantityInput = class {
+  constructor(hostRef) {
+    index.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 (index.h(index.Host, { class: "s-quantity-input s-quantity-input-container" }, index.h("button", { onClick: () => this.increment(), class: "s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? index.h("i", { class: "sicon-add" }) : '', index.h("slot", { name: "increment-button" })), index.h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { min: "1", value: this.quantity, ref: (el) => this.textInput = el })), index.h("button", { class: "s-quantity-input-button", onClick: () => this.decrement(), type: "button" }, !this.hasDecrementSlot ? index.h("i", { class: "sicon-minus" }) : '', index.h("slot", { name: "decrement-button" }))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "quantity": ["watchPropHandler"]
+  }; }
+};
+SallaQuantityInput.style = sallaQuantityInputCss;
+
+exports.salla_quantity_input = SallaQuantityInput;

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

@@ -74,7 +74,7 @@ const SallaRatingModal = class {
       // 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.Helper.toggleElement(star, 's-rating-modal-selected', 's-rating-modal-un-selected', () => index < selectedIndex));
+        .forEach((star, index) => Helper.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
@@ -90,12 +90,12 @@ const SallaRatingModal = class {
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.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.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.Helper.toggleElement(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
-      setTimeout(() => Helper.Helper.toggleElement(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
+      Helper.Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.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;
@@ -127,7 +127,7 @@ const SallaRatingModal = class {
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    Helper.Helper.toggleElement(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper.Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -138,7 +138,7 @@ const SallaRatingModal = class {
       .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.Helper.toggle('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
+      .then(() => Helper.Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -163,7 +163,7 @@ const SallaRatingModal = class {
       return;
     }
     type = type || rating['dataset'].type;
-    Helper.Helper.toggleElement(comment, 'save', 's-has-error', el => el.value.length > 3);
+    Helper.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/cjs/{salla-search-f76c6d61.js → salla-search-9d17eb96.js}

@@ -51,7 +51,7 @@ const SallaSearch = class {
       return;
     }
     //run loading spinner or stop it
-    Helper.Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    Helper.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)
@@ -60,8 +60,8 @@ const SallaSearch = class {
   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.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.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/cjs/twilight-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button.cjs",[[4,"salla-button",{"buttonType":[513,"button-type"],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-button.cjs",[[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.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[64]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,11 +4,13 @@
     "./components/salla-search/salla-search.js",
     "./components/salla-branches/salla-branches.js",
     "./components/salla-button/salla-button.js",
+    "./components/salla-conditional-fields/salla-conditional-fields.js",
     "./components/salla-infinite-scroll/salla-infinite-scroll.js",
     "./components/salla-localization-modal/salla-localization-modal.js",
     "./components/salla-modal/salla-modal.js",
     "./components/salla-offer-modal/salla-offer-modal.js",
     "./components/salla-product-availability/salla-product-availability.js",
+    "./components/salla-quantity-input/salla-quantity-input.js",
     "./components/salla-rating-modal/salla-rating-modal.js",
     "./components/salla-tel-input/salla-tel-input.js",
     "./components/salla-verify-modal/salla-verify-modal.js"

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

@@ -3,9 +3,9 @@ export class SallaButton {
   constructor() {
     this.hostAttributes = {};
     /**
-     * Button Type
+     * Button Type todo :: find better name,
      */
-    this.buttonType = 'btn';
+    this.shape = 'btn';
     /**
      * Button Color
      */
@@ -84,21 +84,21 @@ export class SallaButton {
   }
   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() {
@@ -116,7 +116,7 @@ export class SallaButton {
     "$": ["salla-button.css"]
   }; }
   static get properties() { return {
-    "buttonType": {
+    "shape": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -128,9 +128,9 @@ export class SallaButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Button Type"
+        "text": "Button Type todo :: find better name,"
       },
-      "attribute": "button-type",
+      "attribute": "shape",
       "reflect": true,
       "defaultValue": "'btn'"
     },

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

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

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

@@ -0,0 +1,82 @@
+import { Component, Element, Host, Listen, h } from '@stencil/core';
+/**
+ * its to easy to use, currenlty its support select & checkbox input as trigger for show/hide the dom
+ * the dom you can put it like this data-show-when="{name of the field} {= or !=} {value of the field}"
+ */
+export class SallaConditionalFields {
+  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)));
+  }
+  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",
+      "method": "changeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}