@salla.sa/twilight-components 2.11.53 → 2.11.54

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

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

@@ -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-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",

package/dist/collection/components/salla-map/salla-map.js

@@ -215,6 +215,13 @@ export class SallaMap {
         }
       });
     }
+    this.mapInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.mapInput.addEventListener('input', () => {
+      this.mapInput.setCustomValidity('');
+      this.mapInput.reportValidity();
+    });
   }
   /**
    * Open location component
@@ -524,6 +531,21 @@ export class SallaMap {
         "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",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "open": {

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

@@ -99,6 +99,12 @@ export class SallaProductOptions {
   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) {
@@ -107,6 +113,10 @@ export class SallaProductOptions {
       });
       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();
@@ -168,7 +178,7 @@ export class SallaProductOptions {
     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("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,
@@ -185,11 +195,11 @@ export class SallaProductOptions {
           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("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 } }),
+    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
@@ -210,7 +220,7 @@ export class SallaProductOptions {
   }
   //@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() {
@@ -219,45 +229,44 @@ export class SallaProductOptions {
   //@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) }));
+      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) })));
+        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) }));
+      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) }));
+      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
@@ -288,7 +297,7 @@ export class SallaProductOptions {
   }
   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("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));
@@ -297,14 +306,14 @@ export class SallaProductOptions {
   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("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("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) })))));
@@ -313,7 +322,7 @@ export class SallaProductOptions {
   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("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" }),