@salla.sa/twilight-components 2.11.53 → 2.11.55

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

@@ -91,10 +91,10 @@ const SallaAddProductButton = class {
       return '';
     }
     if (this.hasSubscribedOptions) {
-      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }), index.h("span", { class: "s-hidden" }, index.h("slot", null))));
     }
     if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
-      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes())));
+      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), index.h("span", { class: "s-hidden" }, index.h("slot", null))));
     }
     return index.h(index.Host, null, index.h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }), index.h("slot", null)));
   }
@@ -103,19 +103,20 @@ const SallaAddProductButton = class {
       return;
     }
     salla.event.on('product-options::change', async (data) => {
-      var _a;
+      var _a, _b;
       if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
         return;
       }
-      this.hasOutOfStockOption = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.hasOutOfStockOption());
+      this.hasSubscribedOptions = false;
       this.hasLabel = false;
-      if (!this.subscribedOptions || this.subscribedOptions === 'null') {
+      this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
+      this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
+      let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
+      if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
         return;
       }
-      //check if subscribedOptions are the selected now
-      this.hasSubscribedOptions = JSON.parse(this.subscribedOptions)
-        .filter(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)))
-        .length > 0;
+      const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
+      this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
     });
   }
   componentDidRender() {

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

@@ -2519,6 +2519,7 @@ const SallaColorPicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.colorChanged = index.createEvent(this, "colorChanged", 7);
+    this.invalidInput = index.createEvent(this, "invalidInput", 7);
     this.submitted = index.createEvent(this, "submitted", 7);
     this.popupOpened = index.createEvent(this, "popupOpened", 7);
     this.popupClosed = index.createEvent(this, "popupClosed", 7);
@@ -2625,6 +2626,13 @@ const SallaColorPicker = class {
   componentDidLoad() {
     this.canvas.style.backgroundColor = this.color;
     this.initColorPicker();
+    this.colorInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.colorInput.addEventListener('input', () => {
+      this.colorInput.setCustomValidity('');
+      this.colorInput.reportValidity();
+    });
   }
   setPopIpPosition() {
     const popup = this.host.querySelector('.picker_wrapper');
@@ -5304,6 +5312,7 @@ const SallaDatetimePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.picked = index.createEvent(this, "picked", 7);
+    this.invalidInput = index.createEvent(this, "invalidInput", 7);
     /**
      * Two way data binding to retrieve the selected date[time] value
      */
@@ -5528,6 +5537,13 @@ const SallaDatetimePicker = class {
       // onClose: this.handleOnClose(selectedDates, dateStr, instance)
     };
     flatpickr(this.dateInput, options);
+    this.dateInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.dateInput.addEventListener('input', () => {
+      this.dateInput.setCustomValidity('');
+      this.dateInput.reportValidity();
+    });
   }
 };
 SallaDatetimePicker.style = sallaDatetimePickerCss;
@@ -20637,6 +20653,7 @@ const SallaFileUpload = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.added = index.createEvent(this, "added", 7);
+    this.invalidInput = index.createEvent(this, "invalidInput", 7);
     this.uploaded = index.createEvent(this, "uploaded", 7);
     this.removed = index.createEvent(this, "removed", 7);
     /**
@@ -20797,15 +20814,18 @@ const SallaFileUpload = class {
     return this.uploaded.emit(this.value);
   }
   removedHandler(deletedFile) {
+    var _a;
     let fileInput = this.getFormDataFileInput();
     fileInput.type = 'hidden';
     fileInput.value = '';
+    (_a = this.host.closest('.s-product-options-option')) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-has-value');
     if (deletedFile.getMetadata('id')) {
       salla.cart.api.deleteImage(deletedFile.getMetadata('id'));
     }
     if (this.height) {
       setTimeout(() => this.host.querySelector('.filepond--root').style.height = this.height, 1000);
     }
+    this.hiddenInput.value = '';
     fileInput.dispatchEvent(new window.Event('change', { bubbles: true }));
     return this.removed.emit(deletedFile);
   }
@@ -20838,6 +20858,7 @@ const SallaFileUpload = class {
     return this.host.querySelector('.filepond--data input');
   }
   getFiles() {
+    var _a;
     if (!this.value && !this.files) {
       return [];
     }
@@ -20845,6 +20866,9 @@ const SallaFileUpload = class {
       let files = this.files
         ? JSON.parse(this.files)
         : this.value.split(',').map(file => ({ url: file }));
+      if (files.length) {
+        (_a = this.host.closest('.s-product-options-option')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-has-value', 'true');
+      }
       return files.map(file => ({
         source: file.id ? `${file.id}` : file.url,
         options: {
@@ -20872,7 +20896,7 @@ const SallaFileUpload = class {
     return (index.h(index.Host, { class: {
         "s-file-upload": true,
         "s-file-upload-profile-image": this.profileImage,
-      } }, index.h("input", { type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept })));
+      } }, index.h("input", { type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), index.h("input", { class: "s-file-upload-hidden-input", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
   }
   componentDidLoad() {
     let files = this.getFiles();
@@ -20964,6 +20988,13 @@ const SallaFileUpload = class {
         resolve(true);
       }),
     });
+    this.hiddenInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.hiddenInput.addEventListener('change', () => {
+      this.hiddenInput.setCustomValidity('');
+      this.hiddenInput.reportValidity();
+    });
   }
   get host() { return index.getElement(this); }
 };
@@ -22574,6 +22605,7 @@ const SallaMap = class {
     this.selected = index.createEvent(this, "selected", 7);
     this.mapClicked = index.createEvent(this, "mapClicked", 7);
     this.currentLocationChanged = index.createEvent(this, "currentLocationChanged", 7);
+    this.invalidInput = index.createEvent(this, "invalidInput", 7);
     this.defaultLat = 21.419421; //Mecca 🕋
     this.defaultLng = 39.82553; //Mecca 🕋
     // state variables
@@ -22778,6 +22810,13 @@ const SallaMap = class {
         }
       });
     }
+    this.mapInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.mapInput.addEventListener('input', () => {
+      this.mapInput.setCustomValidity('');
+      this.mapInput.reportValidity();
+    });
   }
   /**
    * Open location component
@@ -23210,12 +23249,34 @@ const SallaProductAvailability = class {
      * is current user already subscribed
      */
     this.isSubscribed = false;
+    this.handleSubmitOptions = async () => {
+      let payload = { id: this.productId };
+      if (!this.notifyOptionsAvailability) {
+        return payload;
+      }
+      let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+      let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
+      //if all options not selected, show message && throw exception
+      if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
+        let errorMessage = salla.lang.get('common.messages.required_fields');
+        salla.error(errorMessage);
+        throw errorMessage;
+      }
+      payload.options = [];
+      options.forEach(option => {
+        //inject numbers only, without zeros
+        if (option && !isNaN(option)) {
+          payload.options.push(Number(option));
+        }
+      });
+      return payload;
+    };
     // helpers
-    this.typing = (e, submitMethod) => {
+    this.typing = (e) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
-      e.key == 'Enter' && submitMethod();
+      e.keyCode === 13 && this.submit();
     };
     salla.lang.onLoaded(() => {
       var _a;
@@ -23237,28 +23298,6 @@ const SallaProductAvailability = class {
   channelsWatcher(newValue) {
     this.channels_ = !!newValue ? newValue.split(',') : [];
   }
-  async handleSubmitOptions() {
-    let payload = { id: this.productId };
-    if (!this.notifyOptionsAvailability) {
-      return payload;
-    }
-    let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-    let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
-    //if all options not selected, show message && throw exception
-    if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
-      let errorMessage = salla.lang.get('common.messages.required_fields');
-      salla.error(errorMessage);
-      throw errorMessage;
-    }
-    payload.options = [];
-    options.forEach(option => {
-      //inject numbers only, without zeros
-      if (option && !isNaN(option)) {
-        payload.options.push(Number(option));
-      }
-    });
-    return payload;
-  }
   openModel() {
     this.handleSubmitOptions().then(isSuccess => isSuccess ? this.modal.open() : null);
   }
@@ -23281,9 +23320,23 @@ const SallaProductAvailability = class {
       .then(() => this.btn.disable())
       .then(() => salla.api.product.availabilitySubscribe(payload))
       .then(() => {
+      if (!this.notifyOptionsAvailability) {
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
+        return;
+      }
+      if (payload.options.length) {
+        let options = salla.storage.get(`product-${this.productId}-subscribed-options`) || [];
+        let selectedOptionsString = payload.options.join(',');
+        if (!options.includes(selectedOptionsString)) {
+          options.push(selectedOptionsString);
+          salla.storage.set(`product-${this.productId}-subscribed-options`, options);
+        }
+        else {
+          salla.log('already subscribed to this options');
+        }
+      }
       this.isSubscribed = true;
-      salla.storage.set(`product-${this.productId}-subscribed`, true);
-    }) //no need to wait until finishing alert animation
+    })
       .then(() => this.btn.stop())
       .then(() => this.modal.close())
       .catch(() => this.btn.stop() && this.btn.enable());
@@ -23319,11 +23372,11 @@ const SallaProductAvailability = class {
   renderModal() {
     return (index.h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, index.h("span", { slot: 'icon', class: "s-product-availability-header-icon", innerHTML: BellRing }), index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      index.h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+      index.h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
       index.h("span", { class: "s-product-availability-error-msg" })
     ] : '', this.channels_.includes('sms') ? [
       index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+      index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
     ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), index.h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   get host() { return index.getElement(this); }

package/dist/cjs/salla-product-options.cjs.entry.js

@@ -114,7 +114,7 @@ const SallaProductOptions = class {
     return selectedOptions;
   }
   /**
-   * Get the id's of the selected options.
+   * Report options form validity.
    * */
   async reportValidity() {
     let requiredElements = this.host.querySelectorAll('[required]');
@@ -145,6 +145,12 @@ const SallaProductOptions = class {
   async getOption(option_id) {
     return this.optionsData.find(option => option.id === option_id);
   }
+  // @ts-ignore
+  invalidHandler(event, option) {
+    const closestProductOption = event.target.closest('.s-product-options-option');
+    closestProductOption.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    closestProductOption.classList.add('s-product-options-option-error');
+  }
   changedHandler(event, option) {
     let data = { event: event, option: option, detail: null };
     if (option.details) {
@@ -153,6 +159,10 @@ const SallaProductOptions = class {
       });
       data.detail = detail;
     }
+    let optionElement = event.target.closest('.s-product-options-option');
+    if (event.target.value || event.type == 'added') {
+      optionElement.classList.remove('s-product-options-option-error');
+    }
     const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);
     index > -1 ? this.selectedOptions[index] = Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }) : this.selectedOptions.push(Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }));
     this.setSelectedSkus();
@@ -213,16 +223,16 @@ const SallaProductOptions = class {
     }
     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))))))));
+      : index.h("div", { class: "s-product-options-option", "data-option-type": option.type, "data-option-required": `${option.required}` }, 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, product) {
     return index.h("div", { class: "s-product-options-donation-wrapper" }, option.donation ?
       index.h("div", { class: "s-product-options-donation-progress" }, index.h("salla-progress-bar", { donation: option.donation }))
-      : '', index.h("div", { class: "s-product-options-donation-input-group" }, index.h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, required: true, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.changedHandler(e, option) }), index.h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol)));
+      : '', index.h("div", { class: "s-product-options-donation-input-group" }, index.h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, required: true, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), index.h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol)));
   }
   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}]`, required: option.required, 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'))
+    return index.h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, required: option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), 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'))
         ? camera.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'))));
   }
@@ -239,7 +249,7 @@ const SallaProductOptions = class {
   }
   //@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.changedHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
+    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.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
   }
   //@ts-ignore
   splitterOption() {
@@ -247,41 +257,40 @@ const SallaProductOptions = class {
   }
   //@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.changedHandler(e, 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, onInvalid: (e) => this.invalidHandler(e, option), onInput: e => this.changedHandler(e, option) }));
   }
   //@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.changedHandler(e, option) })));
+    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, onInvalid: (e) => this.invalidHandler(e, option), onInput: (e) => this.changedHandler(e, option) })));
   }
   //@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.changedHandler(e, 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, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
   }
   colorPickerOption(option) {
-    return index.h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: `options[${option.id}]`, required: option.required, color: option.value || '#5dd5c4' });
+    return index.h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: `options[${option.id}]`, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), 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.changedHandler(e, 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", onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) });
   }
   //@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, minDate: new Date(), name: `options[${option.id}]`, onPicked: e => this.changedHandler(e, option) }));
+    return index.h("div", { class: "s-product-options-date-element" }, index.h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: option.required, minDate: new Date(), name: `options[${option.id}]`, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
   }
   //@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.changedHandler(e, option) }));
+    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, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
   }
   /**
    * ============= Advanced options =============
    */
-  // <<<<<<< HEAD
   getOptionDetailName(detail, outOfStock = true, optionType) {
     if (optionType && optionType == DisplayType.COLOR) {
       return detail.name
@@ -311,24 +320,24 @@ const SallaProductOptions = class {
     return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
   }
   singleOption(option) {
-    return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control", onChange: e => this.changedHandler(e, option) }, index.h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
+    return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }, 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: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail));
       })));
   }
   multipleOptions(option) {
     return index.h("div", { 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: this.isOptionDetailOut(detail), checked: detail.is_selected, required: option.required, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: (e) => this.changedHandler(e, option), "aria-describedby": `options[${option.id}]-description` }), index.h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
+      return index.h("div", null, index.h("input", { type: "checkbox", value: detail.id, disabled: this.isOptionDetailOut(detail), checked: detail.is_selected, required: option.required, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: (e) => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), "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", { class: "s-product-options-colors-item" }, index.h("input", { type: "radio", value: detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.changedHandler(e, option) }), index.h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, index.h("span", { style: { "background-color": detail.color } }), index.h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
+    return index.h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => index.h("div", { class: "s-product-options-colors-item" }, index.h("input", { type: "radio", value: detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `color-${this.productId}-${option.id}-${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }), index.h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, index.h("span", { style: { "background-color": detail.color } }), index.h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
   }
   //@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, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.changedHandler(e, option) }), 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" }), this.isOptionDetailOut(detail) ?
+      return index.h("div", null, index.h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `option_${this.productId}-${option.id}_${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), 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" }), this.isOptionDetailOut(detail) ?
         [
           index.h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
           this.canDisabled ? index.h("div", { class: "s-product-options-thumbnails-badge-overlay" }) : '',

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

@@ -82,11 +82,15 @@ export class SallaAddProductButton {
     }
     if (this.hasSubscribedOptions) {
       return h(Host, null,
-        h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+        h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }),
+          h("span", { class: "s-hidden" },
+            h("slot", null))));
     }
     if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
       return h(Host, null,
-        h("salla-product-availability", Object.assign({}, this.getBtnAttributes())));
+        h("salla-product-availability", Object.assign({}, this.getBtnAttributes()),
+          h("span", { class: "s-hidden" },
+            h("slot", null))));
     }
     return h(Host, null,
       h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }),
@@ -97,19 +101,20 @@ export class SallaAddProductButton {
       return;
     }
     salla.event.on('product-options::change', async (data) => {
-      var _a;
+      var _a, _b;
       if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
         return;
       }
-      this.hasOutOfStockOption = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.hasOutOfStockOption());
+      this.hasSubscribedOptions = false;
       this.hasLabel = false;
-      if (!this.subscribedOptions || this.subscribedOptions === 'null') {
+      this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
+      this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
+      let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
+      if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
         return;
       }
-      //check if subscribedOptions are the selected now
-      this.hasSubscribedOptions = JSON.parse(this.subscribedOptions)
-        .filter(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)))
-        .length > 0;
+      const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
+      this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
     });
   }
   componentDidRender() {

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -109,6 +109,13 @@ export class SallaColorPicker {
   componentDidLoad() {
     this.canvas.style.backgroundColor = this.color;
     this.initColorPicker();
+    this.colorInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.colorInput.addEventListener('input', () => {
+      this.colorInput.setCustomValidity('');
+      this.colorInput.reportValidity();
+    });
   }
   setPopIpPosition() {
     const popup = this.host.querySelector('.picker_wrapper');
@@ -311,6 +318,21 @@ export class SallaColorPicker {
           }
         }
       }
+    }, {
+      "method": "invalidInput",
+      "name": "invalidInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the input is invalid."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "submitted",
       "name": "submitted",

package/dist/collection/components/salla-datetime-picker/salla-datetime-picker.js

@@ -230,6 +230,13 @@ export class SallaDatetimePicker {
       // onClose: this.handleOnClose(selectedDates, dateStr, instance)
     };
     flatpickr(this.dateInput, options);
+    this.dateInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.dateInput.addEventListener('input', () => {
+      this.dateInput.setCustomValidity('');
+      this.dateInput.reportValidity();
+    });
   }
   static get is() { return "salla-datetime-picker"; }
   static get originalStyleUrls() { return {
@@ -1163,7 +1170,22 @@ export class SallaDatetimePicker {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Event emitted when the file input gets changed by the user when selecting file(s)."
+        "text": "Event emitted when the date input gets changed by the user when selecting file(s)."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "invalidInput",
+      "name": "invalidInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the input is invalid."
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -169,15 +169,18 @@ export class SallaFileUpload {
     return this.uploaded.emit(this.value);
   }
   removedHandler(deletedFile) {
+    var _a;
     let fileInput = this.getFormDataFileInput();
     fileInput.type = 'hidden';
     fileInput.value = '';
+    (_a = this.host.closest('.s-product-options-option')) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-has-value');
     if (deletedFile.getMetadata('id')) {
       salla.cart.api.deleteImage(deletedFile.getMetadata('id'));
     }
     if (this.height) {
       setTimeout(() => this.host.querySelector('.filepond--root').style.height = this.height, 1000);
     }
+    this.hiddenInput.value = '';
     fileInput.dispatchEvent(new window.Event('change', { bubbles: true }));
     return this.removed.emit(deletedFile);
   }
@@ -210,6 +213,7 @@ export class SallaFileUpload {
     return this.host.querySelector('.filepond--data input');
   }
   getFiles() {
+    var _a;
     if (!this.value && !this.files) {
       return [];
     }
@@ -217,6 +221,9 @@ export class SallaFileUpload {
       let files = this.files
         ? JSON.parse(this.files)
         : this.value.split(',').map(file => ({ url: file }));
+      if (files.length) {
+        (_a = this.host.closest('.s-product-options-option')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-has-value', 'true');
+      }
       return files.map(file => ({
         source: file.id ? `${file.id}` : file.url,
         options: {
@@ -245,7 +252,8 @@ export class SallaFileUpload {
         "s-file-upload": true,
         "s-file-upload-profile-image": this.profileImage,
       } },
-      h("input", { type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept })));
+      h("input", { type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }),
+      h("input", { class: "s-file-upload-hidden-input", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
   }
   componentDidLoad() {
     let files = this.getFiles();
@@ -337,6 +345,13 @@ export class SallaFileUpload {
         resolve(true);
       }),
     });
+    this.hiddenInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.hiddenInput.addEventListener('change', () => {
+      this.hiddenInput.setCustomValidity('');
+      this.hiddenInput.reportValidity();
+    });
   }
   static get is() { return "salla-file-upload"; }
   static get originalStyleUrls() { return {
@@ -1223,6 +1238,21 @@ export class SallaFileUpload {
           }
         }
       }
+    }, {
+      "method": "invalidInput",
+      "name": "invalidInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the input is invalid"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "uploaded",
       "name": "uploaded",