@salla.sa/twilight-components 1.0.57 → 1.0.58

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],"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-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-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/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],"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-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
+    }]; }
+}

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/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],"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-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 };