@salla.sa/twilight-components 2.11.25 → 2.11.27

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

@@ -3,6 +3,7 @@
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-f1d446ac.js';
 import { a as createCommonjsModule, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-1415ffd3.js';
+import { C as CameraIcon } from './camera-647ab50f.js';
 
 const sallaButtonCss = "";
 
@@ -2695,95 +2696,6 @@ const SallaCommentForm = class {
 };
 SallaCommentForm.style = sallaCommentFormCss;
 
-const SallaConditionalFields = class {
-  constructor(hostRef) {
-    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 (h(Host, null, h("slot", null)));
-  }
-  get host() { return getElement(this); }
-};
-
 var HOOKS = [
     "onChange",
     "onClose",
@@ -21663,13 +21575,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>
@@ -23309,247 +23214,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) {
-    registerInstance(this, hostRef);
-    this.colorSelected = createEvent(this, "colorSelected", 7);
-    this.thumbnailSelected = createEvent(this, "thumbnailSelected", 7);
-    this.singleSelectOptionSelected = createEvent(this, "singleSelectOptionSelected", 7);
-    this.donationMoneyEntered = createEvent(this, "donationMoneyEntered", 7);
-    this.textOptionEntered = createEvent(this, "textOptionEntered", 7);
-    this.textareaOptionEntered = createEvent(this, "textareaOptionEntered", 7);
-    this.numberOptionEntered = createEvent(this, "numberOptionEntered", 7);
-    this.itemsSelected = createEvent(this, "itemsSelected", 7);
-    this.dateTimeSelected = createEvent(this, "dateTimeSelected", 7);
-    this.dateSelected = createEvent(this, "dateSelected", 7);
-    this.timeSelected = createEvent(this, "timeSelected", 7);
-    this.colorPicked = createEvent(this, "colorPicked", 7);
-    this.locationSelected = 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 (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => 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()
-      : h("div", { class: "s-product-options-option" }, h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
-  }
-  //@ts-ignore
-  donationOption(option) {
-    return h("div", { class: "s-product-options-donation-wrapper" }, 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) }), 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 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 } }), h("div", { class: "s-product-options-filepond-placeholder" }, h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept && additions.accept.split(',').every(type => type.includes('image'))
-        ? CameraIcon
-        : FileIcon }), h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')), 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 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 h("div", { class: "s-product-options-splitter" });
-  }
-  //@ts-ignore
-  textOption(option) {
-    return h("div", { class: "s-product-options-text" }, 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 h("div", { class: "s-product-options-textarea" }, h("div", { class: "mt-1" }, 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 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 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 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 h("div", { class: "s-product-options-date-element" }, 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 h("div", { class: "s-product-options-datetime-element" }, 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 h("div", null, h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
-      option.details.map((detail) => {
-        return 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 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 h("div", null, 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` }), h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
-    }));
-  }
-  //@ts-ignore
-  colorOption(option) {
-    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", null, 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) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("p", null, this.getOptionDetailName(detail))))));
-  }
-  //@ts-ignore
-  thumbnailOption(option) {
-    return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-      return h("div", null, 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) }), h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" })), h("p", null, this.getOptionDetailName(detail, false), " "), detail.is_out ?
-        [h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText), h("div", { class: "s-product-options-thumbnails-badge-overlay" })]
-        : '');
-    }));
-  }
-  get host() { return 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>
@@ -23609,6 +23273,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) {
+    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 (h("div", { class: "s-progress-bar-container" }, this.header ? h("div", { class: "s-progress-bar-header" }, this.header) : '', this.getProgressBar(), this.message ? h("span", { class: "s-progress-bar-message" }, this.message) : ''));
+  }
+  getProgressBar() {
+    return this.target ? [
+      h("div", { class: "s-progress-bar-target-section" }, h("span", null, salla.helpers.number(this.value), " ", this.unit), h("span", null, salla.helpers.number(this.target), " ", this.unit)),
+      h("div", { class: "s-progress-bar-wrapper" }, 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>
@@ -24736,7 +24452,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);
@@ -24783,15 +24499,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` : '',
@@ -27063,4 +26782,4 @@ const SallaVerify = class {
 };
 SallaVerify.style = sallaVerifyCss;
 
-export { SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCommentForm as salla_comment_form, SallaConditionalFields as salla_conditional_fields, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMap as salla_map, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductOptions as salla_product_options, SallaProductSizeGuide as salla_product_size_guide, SallaQuantityInput as salla_quantity_input, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSwiper as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserSettings as salla_user_settings, SallaVerify as salla_verify };
+export { SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCommentForm as salla_comment_form, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMap as salla_map, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductSizeGuide as salla_product_size_guide, SallaProgressBar as salla_progress_bar, SallaQuantityInput as salla_quantity_input, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSwiper as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserSettings as salla_user_settings, SallaVerify as salla_verify };

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

@@ -0,0 +1,95 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f1d446ac.js';
+
+const SallaConditionalFields = class {
+  constructor(hostRef) {
+    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 (h(Host, null, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+
+export { SallaConditionalFields as salla_conditional_fields };