@salla.sa/twilight-components 2.11.53 → 2.11.55

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-availability/salla-product-availability.js

@@ -16,12 +16,34 @@ export class SallaProductAvailability {
      * 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;
@@ -43,28 +65,6 @@ export class SallaProductAvailability {
   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);
   }
@@ -87,9 +87,23 @@ export class SallaProductAvailability {
       .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());
@@ -132,12 +146,12 @@ export class SallaProductAvailability {
       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')),

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

@@ -68,7 +68,7 @@ export class SallaProductOptions {
     return selectedOptions;
   }
   /**
-   * Get the id's of the selected options.
+   * Report options form validity.
    * */
   async reportValidity() {
     let requiredElements = this.host.querySelectorAll('[required]');
@@ -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" }),
@@ -432,7 +441,7 @@ export class SallaProductOptions {
         "return": "Promise<boolean>"
       },
       "docs": {
-        "text": "Get the id's of the selected options.",
+        "text": "Report options form validity.",
         "tags": []
       }
     },

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

@@ -93,10 +93,10 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       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)));
   }
@@ -105,19 +105,20 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       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/components/salla-color-picker2.js

@@ -1011,6 +1011,7 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     super();
     this.__registerHost();
     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);
@@ -1117,6 +1118,13 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   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');

package/dist/components/salla-datetime-picker2.js

@@ -2559,6 +2559,7 @@ const SallaDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     super();
     this.__registerHost();
     this.picked = createEvent(this, "picked", 7);
+    this.invalidInput = createEvent(this, "invalidInput", 7);
     /**
      * Two way data binding to retrieve the selected date[time] value
      */
@@ -2783,6 +2784,13 @@ const SallaDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       // 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 style() { return sallaDatetimePickerCss; }
 }, [0, "salla-datetime-picker", {

package/dist/components/salla-file-upload2.js

@@ -15110,6 +15110,7 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.added = createEvent(this, "added", 7);
+    this.invalidInput = createEvent(this, "invalidInput", 7);
     this.uploaded = createEvent(this, "uploaded", 7);
     this.removed = createEvent(this, "removed", 7);
     /**
@@ -15270,15 +15271,18 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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);
   }
@@ -15311,6 +15315,7 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return this.host.querySelector('.filepond--data input');
   }
   getFiles() {
+    var _a;
     if (!this.value && !this.files) {
       return [];
     }
@@ -15318,6 +15323,9 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       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: {
@@ -15345,7 +15353,7 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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();
@@ -15437,6 +15445,13 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         resolve(true);
       }),
     });
+    this.hiddenInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.hiddenInput.addEventListener('change', () => {
+      this.hiddenInput.setCustomValidity('');
+      this.hiddenInput.reportValidity();
+    });
   }
   get host() { return this; }
   static get style() { return sallaFileUploadCss; }

package/dist/components/salla-map2.js

@@ -447,6 +447,7 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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
@@ -651,6 +652,13 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
       });
     }
+    this.mapInput.addEventListener('invalid', e => {
+      this.invalidInput.emit(e);
+    });
+    this.mapInput.addEventListener('input', () => {
+      this.mapInput.setCustomValidity('');
+      this.mapInput.reportValidity();
+    });
   }
   /**
    * Open location component

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

@@ -25,12 +25,34 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
      * 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;
@@ -52,28 +74,6 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
   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);
   }
@@ -96,9 +96,23 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
       .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());
@@ -134,11 +148,11 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
   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 this; }