@salla.sa/twilight-components 2.11.25 → 2.11.27

package/dist/cjs/{salla-button_37.cjs.entry.js → salla-button_36.cjs.entry.js}

@@ -7,6 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1d2b3370.js');
 const _commonjsHelpers = require('./_commonjsHelpers-691dd63b.js');
+const camera = require('./camera-058ddeeb.js');
 
 const sallaButtonCss = "";
 
@@ -2699,95 +2700,6 @@ const SallaCommentForm = class {
 };
 SallaCommentForm.style = sallaCommentFormCss;
 
-const SallaConditionalFields = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  hideAllOptions(optionId) {
-    this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
-      field.classList.add('hidden');
-      this.hideAllOptions(field.dataset.optionId);
-      this.disableInputs(field);
-    });
-  }
-  disableInputs(field) {
-    field.querySelectorAll('[name]').forEach((input) => {
-      var _a;
-      input.setAttribute('disabled', '');
-      input.removeAttribute('required');
-      if (((_a = input === null || input === void 0 ? void 0 : input.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'select') {
-        input.value = '';
-      }
-      if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
-        // @ts-ignore
-        input.checked = false;
-      }
-    });
-  }
-  changeHandler(event) {
-    var _a;
-    salla.event.emit('salla-onditional-fields::change', event);
-    salla.log('Received the change event: ', event);
-    if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
-      salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
-      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 condition:', `[data-show-when^="${optionId}"]`);
-    this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
-      .forEach((field) => {
-      let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
-      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;
-      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 {
-        this.hideAllOptions(field.dataset.optionId);
-        field.classList.add('hidden');
-        this.disableInputs(field);
-      }
-    });
-  }
-  componentDidRender() {
-    this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {
-      var _a;
-      // @ts-ignore
-      let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
-      if (!optionName) {
-        return;
-      }
-      this.changeHandler({
-        target: this.host.querySelector('[name^="' + optionName + '"]')
-      });
-    });
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-  get host() { return index.getElement(this); }
-};
-
 var HOOKS = [
     "onChange",
     "onClose",
@@ -21667,13 +21579,6 @@ const MailIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const CameraIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>camera</title>
-<path d="M16 10.667c-4.044 0-7.333 3.289-7.333 7.333s3.289 7.333 7.333 7.333 7.333-3.289 7.333-7.333-3.289-7.333-7.333-7.333zM16 22.667c-2.573 0-4.667-2.093-4.667-4.667s2.093-4.667 4.667-4.667 4.667 2.093 4.667 4.667-2.093 4.667-4.667 4.667zM28 5.333h-3.287l-2.271-3.407c-0.248-0.371-0.664-0.593-1.109-0.593h-10.667c-0.445 0-0.861 0.223-1.109 0.593l-2.271 3.407h-3.287c-2.205 0-4 1.795-4 4v17.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-17.333c0-2.205-1.795-4-4-4zM29.333 26.667c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-17.333c0-0.735 0.599-1.333 1.333-1.333h4c0.445 0 0.861-0.223 1.109-0.593l2.272-3.407h9.239l2.271 3.407c0.248 0.371 0.664 0.593 1.109 0.593h4c0.735 0 1.333 0.599 1.333 1.333zM25.333 10.66c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327z"></path>
-</svg>
-`;
-
 const ArrowRightIcon$1 = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>keyboard_arrow_right</title>
@@ -21900,7 +21805,7 @@ const SallaLoginModal = class {
     throw 'Please insert required fields';
   }
   getFilepondPlaceholder() {
-    return `<div class="s-login-modal-filepond-placeholder"><span class="s-login-modal-filepond-placeholder-icon">${CameraIcon}</span><p class="s-login-modal-filepond-placeholder-text">${this.dragAndDrop}</p> <span class="filepond--label-action">${this.browseFromFiles}</span></div>`;
+    return `<div class="s-login-modal-filepond-placeholder"><span class="s-login-modal-filepond-placeholder-icon">${camera.CameraIcon}</span><p class="s-login-modal-filepond-placeholder-text">${this.dragAndDrop}</p> <span class="filepond--label-action">${this.browseFromFiles}</span></div>`;
   }
   // eslint-disable-next-line @stencil/own-methods-must-be-private
   validateField(field, errorMsg) {
@@ -23313,247 +23218,6 @@ const SallaProductAvailability = class {
 };
 SallaProductAvailability.style = sallaProductAvailabilityCss;
 
-var DisplayType;
-(function (DisplayType) {
-  DisplayType["COLOR"] = "color";
-  DisplayType["DATE"] = "date";
-  DisplayType["DATETIME"] = "datetime";
-  DisplayType["DONATION"] = "donation";
-  DisplayType["IMAGE"] = "image";
-  DisplayType["MULTIPLE_OPTIONS"] = "multiple-options";
-  DisplayType["NUMBER"] = "number";
-  DisplayType["SINGLE_OPTION"] = "single-option";
-  DisplayType["SPLITTER"] = "splitter";
-  DisplayType["TEXT"] = "text";
-  DisplayType["TEXTAREA"] = "textarea";
-  DisplayType["THUMBNAIL"] = "thumbnail";
-  DisplayType["TIME"] = "time";
-  DisplayType["RADIO"] = "radio";
-  DisplayType["CHECKBOX"] = "checkbox";
-  DisplayType["MAP"] = "map";
-  DisplayType["FILE"] = "file";
-  DisplayType["COLOR_PICKER"] = "color_picker";
-})(DisplayType || (DisplayType = {}));
-var Currency;
-(function (Currency) {
-  Currency["Sar"] = "SAR";
-})(Currency || (Currency = {}));
-
-const CheckCircleIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>check</title>
-<path d="M27.521 6.976c-0.569-0.472-1.407-0.393-1.879 0.171l-12.567 15.080-7.003-4.668c-0.615-0.411-1.441-0.244-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l8 5.333c0.227 0.149 0.484 0.223 0.739 0.223 0.384 0 0.763-0.165 1.027-0.48l13.333-16c0.471-0.565 0.393-1.407-0.171-1.877z"></path>
-</svg>
-`;
-
-const FileIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>file-upload</title>
-<path d="M21.333 24c0.341 0 0.683-0.131 0.943-0.391 0.521-0.521 0.521-1.364 0-1.885l-5.333-5.333c-0.123-0.123-0.271-0.22-0.433-0.288-0.327-0.135-0.693-0.135-1.019 0-0.163 0.068-0.311 0.165-0.433 0.288l-5.333 5.333c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l3.057-3.057v10.115c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-10.115l3.057 3.057c0.26 0.26 0.601 0.391 0.943 0.391zM28.943 9.724l-9.333-9.333c-0.249-0.251-0.589-0.391-0.943-0.391h-12c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h4c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-4c-0.735 0-1.333-0.599-1.333-1.333v-24c0-0.735 0.599-1.333 1.333-1.333h11.448l8.552 8.552v16.781c0 0.735-0.599 1.333-1.333 1.333h-4c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h4c2.205 0 4-1.795 4-4v-17.333c0-0.353-0.14-0.693-0.391-0.943z"></path>
-</svg>
-`;
-
-const sallaProductOptionsCss = "";
-
-const SallaProductOptions = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.colorSelected = index.createEvent(this, "colorSelected", 7);
-    this.thumbnailSelected = index.createEvent(this, "thumbnailSelected", 7);
-    this.singleSelectOptionSelected = index.createEvent(this, "singleSelectOptionSelected", 7);
-    this.donationMoneyEntered = index.createEvent(this, "donationMoneyEntered", 7);
-    this.textOptionEntered = index.createEvent(this, "textOptionEntered", 7);
-    this.textareaOptionEntered = index.createEvent(this, "textareaOptionEntered", 7);
-    this.numberOptionEntered = index.createEvent(this, "numberOptionEntered", 7);
-    this.itemsSelected = index.createEvent(this, "itemsSelected", 7);
-    this.dateTimeSelected = index.createEvent(this, "dateTimeSelected", 7);
-    this.dateSelected = index.createEvent(this, "dateSelected", 7);
-    this.timeSelected = index.createEvent(this, "timeSelected", 7);
-    this.colorPicked = index.createEvent(this, "colorPicked", 7);
-    this.locationSelected = index.createEvent(this, "locationSelected", 7);
-    this.fileTypes = {
-      pdf: 'application/pdf',
-      png: 'image/png',
-      jpg: 'image/jpeg',
-      word: 'application/msword',
-      exl: 'application/vnd.ms-excel',
-      txt: 'text/plain',
-    };
-    this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
-    this.donationAmount = salla.lang.get('pages.products.donation_amount');
-    /**
-     * The id of the product to which the options are going to be fetched for.
-     */
-    this.productId = salla.config.get('page.id');
-    salla.lang.onLoaded(() => {
-      this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
-      this.donationAmount = salla.lang.get('pages.products.donation_amount');
-    });
-    if (this.options) {
-      try {
-        this.optionsData = JSON.parse(this.options);
-        return;
-      }
-      catch (e) {
-        salla.log('Bad json passed via options prop');
-      }
-    }
-    if (Array.isArray(this.optionsData)) {
-      salla.log('Options is not an array[] ---> ', this.optionsData);
-      this.optionsData = [];
-    }
-    if (this.productId && !salla.url.is_page('cart')) {
-      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.optionsData = resp.data.options);
-    }
-  }
-  //todo:: typo here, but I think we will drop it anyway😌
-  handleMultiSelectFieldInput() {
-    var checkedBoxes = this.multipleOptionDom.querySelectorAll('input[type="checkbox"]:checked');
-    var multiSelectedItems = [];
-    for (let checkbox of checkedBoxes) {
-      multiSelectedItems.push(checkbox.value);
-    }
-    this.itemsSelected.emit(multiSelectedItems);
-  }
-  getLatLng(value, type) {
-    return value
-      ? value.split(',')[type == 'lat' ? 0 : 1]
-      : '';
-  }
-  getDisplayForType(option) {
-    if (this[`${option.type}Option`]) {
-      return this[`${option.type}Option`](option);
-    }
-    if (option.type === DisplayType.COLOR_PICKER) {
-      return this.colorPickerOption(option);
-    }
-    if (option.type === DisplayType.MULTIPLE_OPTIONS) {
-      return this.multipleOptions(option);
-    }
-    if (option.type === DisplayType.SINGLE_OPTION) {
-      return this.singleOption(option);
-    }
-    salla.log(`Couldn't find options type(${option.type})😢`);
-    return '';
-  }
-  getOptionShownWhen(option) {
-    return option.visibility_condition
-      ? { "data-show-when": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }
-      : {};
-  }
-  //we need the cart Id for productOption Image
-  componentWillLoad() {
-    return salla.api.cart.getCurrentCartId();
-  }
-  render() {
-    if (this.optionsData.length == 0) {
-      return;
-    }
-    return (index.h(index.Host, { class: "s-product-options-wrapper" }, index.h("salla-conditional-fields", null, this.optionsData.map((option) => index.h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
-      this.splitterOption()
-      : index.h("div", { class: "s-product-options-option" }, index.h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" }, index.h("b", null, option.name, option.required && index.h("span", null, " * "), " "), index.h("small", null, option.placeholder)), index.h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
-  }
-  //@ts-ignore
-  donationOption(option) {
-    return index.h("div", { class: "s-product-options-donation-wrapper" }, index.h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.donationMoneyEntered.emit(e) }), index.h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
-  }
-  //todo:: why we need this way, use the native way!!
-  //@ts-ignore
-  selectThumbnail(e, value) {
-    this.thumbnailSelected.emit(e);
-  }
-  fileUploader(option, additions = null) {
-    return index.h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, height: "120px", url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, class: { "s-product-options-image-input": true, required: option.required } }), index.h("div", { class: "s-product-options-filepond-placeholder" }, index.h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept && additions.accept.split(',').every(type => type.includes('image'))
-        ? CameraIcon
-        : FileIcon }), index.h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')), index.h("span", { class: "filepond--label-action" }, salla.lang.get('common.uploader.browse'))));
-  }
-  //@ts-ignore
-  imageOption(option) {
-    return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });
-  }
-  //@ts-ignore
-  fileOption(option) {
-    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
-    return types.length
-      ? this.fileUploader(option, { accept: types.join(',') })
-      : 'File types not selected.';
-  }
-  //@ts-ignore
-  numberOption(option) {
-    return index.h("input", { type: "text", value: option.value, class: "s-form-control", required: option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onBlur: e => this.numberOptionEntered.emit(e), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
-  }
-  //@ts-ignore
-  splitterOption() {
-    return index.h("div", { class: "s-product-options-splitter" });
-  }
-  //@ts-ignore
-  textOption(option) {
-    return index.h("div", { class: "s-product-options-text" }, index.h("input", { type: "text", value: option.value, class: 's-form-control', required: option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onInput: e => this.textOptionEntered.emit(e) }));
-  }
-  //@ts-ignore
-  textareaOption(option) {
-    //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great
-    return index.h("div", { class: "s-product-options-textarea" }, index.h("div", { class: "mt-1" }, index.h("textarea", { rows: 4, value: option.value, class: "s-form-control", required: option.required, id: `options[${option.id}]`, name: `options[${option.id}]`, placeholder: option.placeholder, onInput: (e) => this.textareaOptionEntered.emit(e) })));
-  }
-  //@ts-ignore
-  mapOption(option) {
-    return index.h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: `options[${option.id}]`, searchable: true, required: option.required, onSelected: e => this.locationSelected.emit(e) });
-  }
-  colorPickerOption(option) {
-    return index.h("salla-color-picker", { onSubmitted: e => this.colorPicked.emit(e), name: `options[${option.id}]`, required: option.required, color: option.value || '#5dd5c4' });
-  }
-  /**
-   * ============= Date Time options =============
-   */
-  //@ts-ignore
-  timeOption(option) {
-    return index.h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: option.required, name: `options[${option.id}]`, class: "s-product-options-time-element", onPicked: e => this.timeSelected.emit(e) });
-  }
-  //@ts-ignore
-  dateOption(option) {
-    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
-    return index.h("div", { class: "s-product-options-date-element" }, index.h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: option.required, name: `options[${option.id}]`, onPicked: e => this.dateSelected.emit(e) }));
-  }
-  //@ts-ignore
-  datetimeOption(option) {
-    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
-    return index.h("div", { class: "s-product-options-datetime-element" }, index.h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: option.required, name: `options[${option.id}]`, maxDate: option.to_date_time, minDate: option.from_date_time, onPicked: e => this.dateTimeSelected.emit(e) }));
-  }
-  /**
-   * ============= Advanced options =============
-   */
-  getOptionDetailName(detail, outOfStock = true) {
-    return detail.name
-      + ((outOfStock && detail.is_out) ? ` - ${this.outOfStockText}` : '')
-      + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');
-  }
-  singleOption(option) {
-    return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" }, index.h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
-      option.details.map((detail) => {
-        return index.h("option", { value: detail.id, disabled: detail.is_out, selected: detail.is_selected, onChange: e => this.singleSelectOptionSelected.emit(e) }, this.getOptionDetailName(detail));
-      })));
-  }
-  multipleOptions(option) {
-    return index.h("div", { ref: element => this.multipleOptionDom = element, class: { "s-product-options-multiple-options-wrapper": true, 'required': option.required } }, option === null || option === void 0 ? void 0 : option.details.map((detail) => {
-      return index.h("div", null, index.h("input", { type: "checkbox", value: detail.id, disabled: detail.is_out, checked: detail.is_selected, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: () => this.handleMultiSelectFieldInput(), "aria-describedby": `options[${option.id}]-description` }), index.h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
-    }));
-  }
-  //@ts-ignore
-  colorOption(option) {
-    return index.h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => index.h("div", null, index.h("input", { type: "radio", value: detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.colorSelected.emit(e) }), index.h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, index.h("span", { style: { "background-color": detail.color } }), index.h("p", null, this.getOptionDetailName(detail))))));
-  }
-  //@ts-ignore
-  thumbnailOption(option) {
-    return index.h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-      return index.h("div", null, index.h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.selectThumbnail(e, detail.option_value) }), index.h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" }, index.h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), index.h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" })), index.h("p", null, this.getOptionDetailName(detail, false), " "), detail.is_out ?
-        [index.h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText), index.h("div", { class: "s-product-options-thumbnails-badge-overlay" })]
-        : '');
-    }));
-  }
-  get host() { return index.getElement(this); }
-};
-SallaProductOptions.style = sallaProductOptionsCss;
-
 const PencilRuler = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>pencil-ruler</title>
@@ -23613,6 +23277,58 @@ const SallaProductSizeGuide = class {
 };
 SallaProductSizeGuide.style = sallaProductSizeGuideCss;
 
+const sallaProgressBarCss = ".s-progress-bar-header{font-size:0.875rem;line-height:1.25rem;color:#6b7280;font-weight:bold}.s-progress-bar-target-section{display:-ms-flexbox;display:flex;margin-bottom:0.625rem;font-size:0.875rem;line-height:1.25rem;-ms-flex-pack:justify;justify-content:space-between}.s-progress-bar-container{margin-bottom:0.625rem}.s-progress-bar-wrapper{background-color:#E5E7EB;width:100%;height:0.625rem;border-radius:9999px;margin-bottom:0.375rem}.s-progress-bar-progress{height:0.625rem;border-radius:9999px}.s-progress-bar-message{color:#a2a8b4;font-size:0.75rem;line-height:1rem;display:block;margin-bottom:0.625rem}";
+
+const SallaProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    try {
+      if (this.donation) {
+        let donationJson = typeof this.donation == 'string' ? JSON.parse(this.donation) : this.donation;
+        if (donationJson.can_donate) {
+          this.value = donationJson.collected_amount;
+          this.target = donationJson.target_amount;
+          this.header = salla.lang.get('pages.products.target');
+          this.message = salla.lang.get('pages.products.donation_target_date') + ' ' + donationJson.target_end_date;
+        }
+        else {
+          this.message = donationJson.target_message;
+        }
+      }
+    }
+    catch (e) {
+      salla.log('Wrong donation json');
+    }
+    salla.lang.onLoaded(() => {
+      var _a, _b;
+      this.header = (_a = this.header) === null || _a === void 0 ? void 0 : _a.replace('pages.products.target', salla.lang.get('pages.products.target'));
+      this.message = (_b = this.message) === null || _b === void 0 ? void 0 : _b.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
+    });
+    salla.onReady(() => {
+      this.color = this.color || salla.config.get('theme.color.primary', "#ffd5c4");
+      if (!this.unit) {
+        this.unit = salla.config.currency().symbol;
+      }
+    });
+  }
+  getPercentage() {
+    return (this.value / this.target) * 100;
+  }
+  render() {
+    if (!this.target && !this.message) {
+      return '';
+    }
+    return (index.h("div", { class: "s-progress-bar-container" }, this.header ? index.h("div", { class: "s-progress-bar-header" }, this.header) : '', this.getProgressBar(), this.message ? index.h("span", { class: "s-progress-bar-message" }, this.message) : ''));
+  }
+  getProgressBar() {
+    return this.target ? [
+      index.h("div", { class: "s-progress-bar-target-section" }, index.h("span", null, salla.helpers.number(this.value), " ", this.unit), index.h("span", null, salla.helpers.number(this.target), " ", this.unit)),
+      index.h("div", { class: "s-progress-bar-wrapper" }, index.h("div", { class: "s-progress-bar-progress", style: { 'width': `${this.getPercentage()}%`, 'background-color': this.color } }))
+    ] : '';
+  }
+};
+SallaProgressBar.style = sallaProgressBarCss;
+
 const Add = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>add</title>
@@ -24740,7 +24456,7 @@ const SallaSwiper = class {
       this.displayAllTitle = salla.lang.get('blocks.home.display_all');
     });
     this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
-    // if (this.enableCallToSlide) {     
+    // if (this.enableCallToSlide) {
     //   salla.event.on('product-options::goToSlide', data => {
     //     const slideIndex = this.sliderWrapper.querySelector(`[data-img-id="${data}"]`).getAttribute('data-slid-index');
     //     this.slideTo(parseInt(slideIndex), 300, false);
@@ -24787,15 +24503,18 @@ const SallaSwiper = class {
       autoHeight: this.autoHeight,
       lazy: true,
       on: {
-        // todo:: find better way for this workaround to show lazyLoad for duplicated slides, for some reason they are loaded but class not added.
-        afterInit: (slider) => this.loop && slider.slides.map(slide => {
+        // todo:: find better way for this workaround to show lazyLoad for duplicated slides, because it clones the slide after it's already rendered,
+        // then it re appended it as is,in this case the image is loaded but class not added.
+        afterInit: (slider) => {
           var _a;
           (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
-          if (!slide.classList.contains('swiper-slide-duplicate')) {
-            return;
-          }
-          slide.querySelectorAll('img.lazy:not(.loaded)').forEach(img => img.classList.add('loaded'));
-        }),
+          this.loop && slider.slides.map(slide => {
+            if (!slide.classList.contains('swiper-slide-duplicate')) {
+              return;
+            }
+            slide.querySelectorAll('img.lazy:not(.loaded)').forEach(img => img.classList.add('loaded'));
+          });
+        },
       },
       pagination: this.pagination ? {
         el: this.host.id ? `#${this.host.id} .swiper-pagination` : '',
@@ -27071,7 +26790,6 @@ exports.salla_button = SallaButton;
 exports.salla_cart_summary = SallaCartSummary;
 exports.salla_color_picker = SallaColorPicker;
 exports.salla_comment_form = SallaCommentForm;
-exports.salla_conditional_fields = SallaConditionalFields;
 exports.salla_datetime_picker = SallaDatetimePicker;
 exports.salla_file_upload = SallaFileUpload;
 exports.salla_gifting = SallaGifting;
@@ -27086,8 +26804,8 @@ exports.salla_modal = SallaModal;
 exports.salla_offer_modal = SallaOfferModal;
 exports.salla_placeholder = SallaPlaceholder;
 exports.salla_product_availability = SallaProductAvailability;
-exports.salla_product_options = SallaProductOptions;
 exports.salla_product_size_guide = SallaProductSizeGuide;
+exports.salla_progress_bar = SallaProgressBar;
 exports.salla_quantity_input = SallaQuantityInput;
 exports.salla_quick_order = SallaQuickOrder;
 exports.salla_rating_modal = SallaRatingModal;

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

@@ -0,0 +1,99 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1d2b3370.js');
+
+const SallaConditionalFields = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  hideAllOptions(optionId) {
+    this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
+      field.classList.add('hidden');
+      this.hideAllOptions(field.dataset.optionId);
+      this.disableInputs(field);
+    });
+  }
+  disableInputs(field) {
+    field.querySelectorAll('[name]').forEach((input) => {
+      var _a;
+      input.setAttribute('disabled', '');
+      input.removeAttribute('required');
+      if (((_a = input === null || input === void 0 ? void 0 : input.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'select') {
+        input.value = '';
+      }
+      if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
+        // @ts-ignore
+        input.checked = false;
+      }
+    });
+  }
+  changeHandler(event) {
+    var _a;
+    salla.event.emit('salla-onditional-fields::change', event);
+    salla.log('Received the change event: ', event);
+    if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
+      salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
+      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 condition:', `[data-show-when^="${optionId}"]`);
+    this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
+      .forEach((field) => {
+      let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
+      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;
+      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 {
+        this.hideAllOptions(field.dataset.optionId);
+        field.classList.add('hidden');
+        this.disableInputs(field);
+      }
+    });
+  }
+  componentDidRender() {
+    this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {
+      var _a;
+      // @ts-ignore
+      let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+      if (!optionName) {
+        return;
+      }
+      this.changeHandler({
+        target: this.host.querySelector('[name^="' + optionName + '"]')
+      });
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+
+exports.salla_conditional_fields = SallaConditionalFields;