@salla.sa/twilight-components 2.11.53 → 2.11.55

package/dist/components/salla-product-options.js

@@ -120,7 +120,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return selectedOptions;
   }
   /**
-   * Get the id's of the selected options.
+   * Report options form validity.
    * */
   async reportValidity() {
     let requiredElements = this.host.querySelectorAll('[required]');
@@ -151,6 +151,12 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   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) {
@@ -159,6 +165,10 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       });
       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();
@@ -219,16 +229,16 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     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))))))));
+      : h("div", { class: "s-product-options-option", "data-option-type": option.type, "data-option-required": `${option.required}` }, 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, product) {
     return h("div", { class: "s-product-options-donation-wrapper" }, option.donation ?
       h("div", { class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
-      : '', h("div", { class: "s-product-options-donation-input-group" }, 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) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol)));
+      : '', h("div", { class: "s-product-options-donation-input-group" }, 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) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol)));
   }
   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}]`, 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 } }), 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'))
+    return 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 } }), 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'))));
   }
@@ -245,7 +255,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   //@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.changedHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
+    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.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
   }
   //@ts-ignore
   splitterOption() {
@@ -253,41 +263,40 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   //@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.changedHandler(e, 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, 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 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.changedHandler(e, option) })));
+    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, onInvalid: (e) => this.invalidHandler(e, option), onInput: (e) => this.changedHandler(e, option) })));
   }
   //@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.changedHandler(e, 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, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
   }
   colorPickerOption(option) {
-    return h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: `options[${option.id}]`, required: option.required, color: option.value || '#5dd5c4' });
+    return 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 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 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 h("div", { class: "s-product-options-date-element" }, 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 h("div", { class: "s-product-options-date-element" }, 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 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.changedHandler(e, option) }));
+    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, 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
@@ -317,24 +326,24 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
   }
   singleOption(option) {
-    return h("div", null, h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control", onChange: e => this.changedHandler(e, option) }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
+    return h("div", null, 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) }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
       option.details.map((detail) => {
         return h("option", { value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail));
       })));
   }
   multipleOptions(option) {
     return 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 h("div", null, 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` }), h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
+      return h("div", null, 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` }), 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", { class: "s-product-options-colors-item" }, 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) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
+    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", { class: "s-product-options-colors-item" }, 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) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
   }
   //@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, 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) }), 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" }), this.isOptionDetailOut(detail) ?
+      return h("div", null, 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) }), 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" }), this.isOptionDetailOut(detail) ?
         [
           h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
           this.canDisabled ? h("div", { class: "s-product-options-thumbnails-badge-overlay" }) : '',

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

@@ -87,10 +87,10 @@ const SallaAddProductButton = class {
       return '';
     }
     if (this.hasSubscribedOptions) {
-      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+      return h(Host, null, 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())));
+      return h(Host, null, 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" }), h("slot", null)));
   }
@@ -99,19 +99,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/esm/salla-button_36.entry.js

@@ -2515,6 +2515,7 @@ const SallaColorPicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.colorChanged = createEvent(this, "colorChanged", 7);
+    this.invalidInput = createEvent(this, "invalidInput", 7);
     this.submitted = createEvent(this, "submitted", 7);
     this.popupOpened = createEvent(this, "popupOpened", 7);
     this.popupClosed = createEvent(this, "popupClosed", 7);
@@ -2621,6 +2622,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');
@@ -5300,6 +5308,7 @@ const SallaDatetimePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.picked = createEvent(this, "picked", 7);
+    this.invalidInput = createEvent(this, "invalidInput", 7);
     /**
      * Two way data binding to retrieve the selected date[time] value
      */
@@ -5524,6 +5533,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;
@@ -20633,6 +20649,7 @@ const SallaFileUpload = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.added = createEvent(this, "added", 7);
+    this.invalidInput = createEvent(this, "invalidInput", 7);
     this.uploaded = createEvent(this, "uploaded", 7);
     this.removed = createEvent(this, "removed", 7);
     /**
@@ -20793,15 +20810,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);
   }
@@ -20834,6 +20854,7 @@ const SallaFileUpload = class {
     return this.host.querySelector('.filepond--data input');
   }
   getFiles() {
+    var _a;
     if (!this.value && !this.files) {
       return [];
     }
@@ -20841,6 +20862,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: {
@@ -20868,7 +20892,7 @@ const SallaFileUpload = class {
     return (h(Host, { class: {
         "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();
@@ -20960,6 +20984,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 getElement(this); }
 };
@@ -22570,6 +22601,7 @@ const SallaMap = class {
     this.selected = createEvent(this, "selected", 7);
     this.mapClicked = createEvent(this, "mapClicked", 7);
     this.currentLocationChanged = createEvent(this, "currentLocationChanged", 7);
+    this.invalidInput = createEvent(this, "invalidInput", 7);
     this.defaultLat = 21.419421; //Mecca 🕋
     this.defaultLng = 39.82553; //Mecca 🕋
     // state variables
@@ -22774,6 +22806,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
@@ -23206,12 +23245,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;
@@ -23233,28 +23294,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);
   }
@@ -23277,9 +23316,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());
@@ -23315,11 +23368,11 @@ const SallaProductAvailability = class {
   renderModal() {
     return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, h("span", { slot: 'icon', class: "s-product-availability-header-icon", innerHTML: BellRing }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      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" }),
+      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" }),
       h("span", { class: "s-product-availability-error-msg" })
     ] : '', this.channels_.includes('sms') ? [
       h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
     ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), 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 getElement(this); }

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

@@ -110,7 +110,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]');
@@ -141,6 +141,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) {
@@ -149,6 +155,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();
@@ -209,16 +219,16 @@ const SallaProductOptions = class {
     }
     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))))))));
+      : h("div", { class: "s-product-options-option", "data-option-type": option.type, "data-option-required": `${option.required}` }, 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, product) {
     return h("div", { class: "s-product-options-donation-wrapper" }, option.donation ?
       h("div", { class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
-      : '', h("div", { class: "s-product-options-donation-input-group" }, 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) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol)));
+      : '', h("div", { class: "s-product-options-donation-input-group" }, 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) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol)));
   }
   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}]`, 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 } }), 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'))
+    return 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 } }), 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'))));
   }
@@ -235,7 +245,7 @@ const SallaProductOptions = class {
   }
   //@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.changedHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
+    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.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
   }
   //@ts-ignore
   splitterOption() {
@@ -243,41 +253,40 @@ const SallaProductOptions = class {
   }
   //@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.changedHandler(e, 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, 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 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.changedHandler(e, option) })));
+    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, onInvalid: (e) => this.invalidHandler(e, option), onInput: (e) => this.changedHandler(e, option) })));
   }
   //@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.changedHandler(e, 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, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
   }
   colorPickerOption(option) {
-    return h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: `options[${option.id}]`, required: option.required, color: option.value || '#5dd5c4' });
+    return 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 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 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 h("div", { class: "s-product-options-date-element" }, 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 h("div", { class: "s-product-options-date-element" }, 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 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.changedHandler(e, option) }));
+    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, 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
@@ -307,24 +316,24 @@ const SallaProductOptions = class {
     return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
   }
   singleOption(option) {
-    return h("div", null, h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control", onChange: e => this.changedHandler(e, option) }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
+    return h("div", null, 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) }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
       option.details.map((detail) => {
         return h("option", { value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail));
       })));
   }
   multipleOptions(option) {
     return 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 h("div", null, 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` }), h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
+      return h("div", null, 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` }), 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", { class: "s-product-options-colors-item" }, 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) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
+    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", { class: "s-product-options-colors-item" }, 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) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
   }
   //@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, 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) }), 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" }), this.isOptionDetailOut(detail) ?
+      return h("div", null, 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) }), 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" }), this.isOptionDetailOut(detail) ?
         [
           h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
           this.canDisabled ? h("div", { class: "s-product-options-thumbnails-badge-overlay" }) : '',