@salla.sa/twilight-components 2.11.3 → 2.11.4

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

@@ -72,15 +72,15 @@ export class SallaGifting {
       .finally(() => this.modal.stopLoading());
   }
   /**
-  *
-  * Hide / close the gifting modal window
-  */
+   *
+   * Hide / close the gifting modal window
+   */
   async close() {
     return this.modal.close();
   }
   /**
-  * Update the modal height based on the changes on the inner elements height for a specific step OR just a pass a new fixed height
-  */
+   * Update the modal height based on the changes on the inner elements height for a specific step OR just a pass a new fixed height
+   */
   async setWrapperHeight(asStep = 1, delay = 250, additionSpace = 0, newHeight = 0) {
     let currentStep = document.querySelector(`.gift-step-${asStep}`);
     setTimeout(() => {
@@ -117,9 +117,9 @@ export class SallaGifting {
     }
   }
   /**
-  *
-  * Go to the step 2
-  */
+   *
+   * Go to the step 2
+   */
   async goToStep2() {
     if (!this.selectedGiftTextOption) {
       this.textSelect.classList.add('s-form-has-error');
@@ -167,9 +167,9 @@ export class SallaGifting {
     this.parentClass = `is-current-step-${this.currentStep}`;
   }
   /**
-    *
-    * Go to the step 1
-    */
+   *
+   * Go to the step 1
+   */
   goToStep1(e) {
     e.preventDefault();
     let stepBackAnime = new anime.timeline({
@@ -239,6 +239,12 @@ export class SallaGifting {
   handleReceiverName(event) {
     this.receiverName = event.target.value;
   }
+  handleUploadImage(img) {
+    this.uploadedImage = img;
+    if (!!this.gift && this.gift.gift_images.length) {
+      this.setWrapperHeight(1, 150, 0);
+    }
+  }
   handleRemoveImage() {
     this.uploadedImage = '';
     if (!!this.gift && this.gift.gift_images.length) {
@@ -266,34 +272,6 @@ export class SallaGifting {
       "s-form-has-error": !!this.errors && this.errors['deliver_at']
     };
   }
-  // TODO: make it default server config --> add it to file-upload
-  getServerConfig() {
-    return {
-      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {
-        const formData = new FormData();
-        formData.append("image_url", file, file.name);
-        return await salla.product.uploadGiftImage(formData)
-          .then((resp) => {
-          this.uploadedImage = resp.data.url;
-          load('success');
-          file.metadata = `_${new Date().getTime()}`;
-          if (!!this.gift && this.gift.gift_images.length) {
-            this.setWrapperHeight(1, 150, 0);
-          }
-        }).catch(e => {
-          console.log(e);
-          error('error');
-        })
-          .finally(() => {
-          return {
-            abort: () => {
-              abort();
-            },
-          };
-        });
-      }
-    };
-  }
   async submitForm() {
     var _a;
     this.calendarFormGroup.classList.remove('s-form-has-error');
@@ -380,7 +358,7 @@ export class SallaGifting {
                     h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift),
                     h("div", { class: "s-gifting-modal-uploader anime-item", ref: el => this.uploader = el },
                       h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }),
-                      this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")),
+                      this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })),
                     h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
                       h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" },
                         h("div", { slot: "items" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` }))))
@@ -403,15 +381,18 @@ export class SallaGifting {
                     h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" },
                       h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel),
                       h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }),
-                      this.errors && this.errors['sender_name'] ? h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''),
+                      this.errors && this.errors['sender_name'] ?
+                        h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''),
                     h("div", { class: this.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" },
                       h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel),
                       h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }),
-                      this.errors && this.errors['receiver.name'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''),
+                      this.errors && this.errors['receiver.name'] ?
+                        h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''),
                     h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" },
                       h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel),
                       h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }),
-                      this.errors && this.errors['receiver.mobile'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''),
+                      this.errors && this.errors['receiver.mobile'] ?
+                        h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''),
                     h("div", { class: "anime-item opacity-0" },
                       h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" },
                         h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }),

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -51,7 +51,7 @@ export class SallaLoginModal {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-modal-error-message')) && (error.innerText = '');
-      //it was sending two requests for send two verification requests 
+      //it was sending two requests for send two verification requests
       submitMethod && e.key == 'Enter' && submitMethod();
     };
     this.loginBySMS = async (event = null) => {
@@ -207,36 +207,23 @@ export class SallaLoginModal {
     const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
     // Custom Fields Validation
     var isCustomFieldValid = true;
-    for (const item of this.customFieldsWrapper.children) {
-      if (item.tagName == "SALLA-FILE-UPLOAD") {
-        const fileUploader = item;
-        this.customFieldsValues[fileUploader.id] = fileUploader.uploadedImage;
-        if (fileUploader.required) {
-          if (!fileUploader.uploadedImage) {
-            isCustomFieldValid = false;
-            const errorMsg = salla.lang.get('common.errors.field_required', { attribute: fileUploader.title });
-            this.validateField(fileUploader, errorMsg);
-          }
-        }
-      }
-      if (item.tagName == "INPUT") {
-        const inputItem = item;
-        this.customFieldsValues[inputItem.id] = inputItem.value;
-        if (inputItem.required) {
-          if (inputItem.value.length == 0) {
-            isCustomFieldValid = false;
-            const errorMsg = salla.lang.get('common.errors.field_required', { attribute: inputItem.title });
-            this.validateField(inputItem, errorMsg);
-          }
-        }
+    //we should make sure that there is text nodes between children
+    this.customFieldsWrapper.childNodes
+      .forEach((field) => {
+      this.customFieldsValues[field.id] = field['value'];
+      if (!field.required || this.customFieldsValues[field.id].length) {
+        return;
       }
-    }
+      isCustomFieldValid = false;
+      const errorMsg = salla.lang.get('common.errors.field_required', { attribute: field.title });
+      this.validateField(field, errorMsg);
+    });
     if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid && isCustomFieldValid)
       return;
     !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);
     !isFirstNameValid && this.validateField(this.firstName, this.firstNameErrorMsg);
     !isLastNameValid && this.validateField(this.lastName, this.lastNameErrorMsg);
-    throw ('Please insert required fields');
+    throw 'Please insert required fields';
   }
   getFilepondPlaceholder() {
     return `<div class="s-login-modal-filepond-placeholder"><span class="s-login-modal-filepond-placeholder-icon">${CameraIcon}</span><p class="s-login-modal-filepond-placeholder-text">${this.dragAndDrop}</p> <span class="filepond--label-action">${this.browseFromFiles}</span></div>`;
@@ -322,20 +309,15 @@ export class SallaLoginModal {
             h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
             h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }),
             h("span", { class: "s-login-modal-error-message" })),
-          h("div", { class: "s-login-modal-custom-fields", ref: el => this.customFieldsWrapper = el }, this.customFields.map((field) => {
-            if (field.type === CustomFieldType.PHOTO) {
-              return [
-                h("label", { class: "s-login-modal-label" }, field.label),
-                h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), id: `${field.id}`, title: field.label, required: field.required }),
-                h("span", { class: "s-login-modal-error-message" })
-              ];
-            }
-            return [
-              h("label", { class: "s-login-modal-label" }, field.label),
-              h("input", { type: "text", onKeyDown: e => this.typing(e, this.newUser), onInput: el => field.type == CustomFieldType.NUMBER ? salla.helpers.inputDigitsOnly(el.target) : {}, placeholder: field.description, required: field.required, title: field.label, id: `${field.id}`, class: "s-login-modal-input s-ltr" }),
-              h("span", { class: "s-login-modal-error-message" })
-            ];
-          })),
+          h("div", { class: "s-login-modal-custom-fields", ref: el => this.customFieldsWrapper = el }, this.customFields.map((field) => [
+            h("label", { class: "s-login-modal-label" }, field.label),
+            field.type === CustomFieldType.PHOTO
+              ? h("salla-file-upload", { name: "image", "instant-upload": true, id: `${field.id}`, title: field.label, required: field.required, url: salla.url.get('upload-image'), 
+                // onUploaded={}
+                labelIdle: this.getFilepondPlaceholder() })
+              : h("input", { type: "text", onKeyDown: e => this.typing(e, this.newUser), onInput: el => field.type == CustomFieldType.NUMBER ? salla.helpers.inputDigitsOnly(el.target) : {}, placeholder: field.description, required: field.required, title: field.label, id: `${field.id}`, class: "s-login-modal-input s-ltr" }),
+            h("span", { class: "s-login-modal-error-message" })
+          ])),
           h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')),
           h("slot", { name: "after-registration" })))));
   }

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

@@ -1,13 +1,12 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Prop, h, State, Host, Event } from '@stencil/core';
+import { Component, Prop, h, State, Element, Host, Event } from '@stencil/core';
 import { DisplayType } from './interfaces';
 import CheckCircleIcon from '../../assets/svg/check.svg';
 import CameraIcon from '../../assets/svg/camera.svg';
 export class SallaProductOptions {
   constructor() {
-    this.uploadedImage = undefined;
     this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
     this.donationAmount = salla.lang.get('pages.products.donation_amount');
     /**
@@ -77,55 +76,40 @@ export class SallaProductOptions {
   //@ts-ignore
   donationOption(option) {
     return h("div", { class: "s-product-options-donation-wrapper" },
-      h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.donationMoneyEntered.emit(e) }),
+      h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.donationMoneyEntered.emit(e) }),
       h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
   }
   getFilepondPlaceholder() {
+    //todo:: add translatable string
     return `<div class="s-product-options-filepond-placeholder"><span class="s-product-options-filepond-placeholder-icon">${CameraIcon}</span><p class="s-product-options-filepond-placeholder-text">اسحب او افلت الصورة هنا</p> <span class="filepond--label-action">او تصفح من جهازك</span></div>`;
   }
-  setUploaderHeight() {
-    setTimeout(() => {
-      this.uploader.querySelector('.filepond--root').style.height = '120px';
-    }, 1000);
+  handleOnImageRemoved(event) {
+    //todo:: add on remove from cartitem images
+    // use salla.url.is_page('cart')
+    // call salla.cart.api.deleteImage(file('id'))
+    //@ts-ignore
+    setTimeout(() => event.target.querySelector('.filepond--root').style.height = '120px', 1000);
+  }
+  handleOnImageUploaded(event) {
+    //todo:: fire imageUploaded from salla-product-options
+    event.target.querySelector('.filepond--data input[type="hidden"]').dispatchEvent(new window.Event('change', { bubbles: true }));
   }
   //todo:: why we need this way, use the native way!!
   //@ts-ignore
   selectThumbnail(e, value) {
     this.thumbnailSelected.emit(e);
   }
-  //todo:: move it to another place, create component if there is no component
-  //@ts-ignore
-  getServerConfig(url, option_id) {
-    return {
-      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {
-        const formData = new FormData();
-        formData.append("image_url", file, file.name);
-        return await salla.product.uploadGiftImage(formData)
-          .then((resp) => {
-          this.uploadedImage = resp.data.url;
-          load('success');
-          file.metadata = `_${new Date().getTime()}`;
-        }).catch(e => {
-          console.log(e);
-          error('error');
-        })
-          .finally(() => {
-          return {
-            abort: () => {
-              abort();
-            },
-          };
-        });
-      }
-    };
-  }
   //@ts-ignore
   imageOption(option) {
-    return h("salla-file-upload", { "instant-upload": true, ref: element => this.uploader = element, "data-item-id": salla.url.is_page('cart') ? option.id : '', class: { "s-product-options-image-input": true, required: option.required }, labelIdle: this.getFilepondPlaceholder(), onRemove: () => this.setUploaderHeight(), serverConfig: this.getServerConfig(salla.cart.api.getUrl('cart/option-image'), salla.url.is_page('cart') ? option.id : null) });
+    return h("salla-file-upload", { "instant-upload": true, name: `options[${option.id}]`, "payload-name": "file", "data-item-id": salla.url.is_page('cart') ? option.id : '', class: { "s-product-options-image-input": true, required: option.required }, labelIdle: this.getFilepondPlaceholder(), onRemoved: event => this.handleOnImageRemoved(event), onUploaded: event => this.handleOnImageUploaded(event), value: option.value, url: salla.cart.api.getUploadImageEndpoint(), "form-data": {
+        _token: salla.config.get('_token'),
+        cart_item_id: this.productId,
+        product_id: this.productId,
+      } });
   }
   //@ts-ignore
   numberOption(option) {
-    return h("input", { placeholder: option.placeholder, name: `options[${option.id}]`, type: "text", onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.numberOptionEntered.emit(e), class: "s-form-control" });
+    return h("input", { type: "text", value: option.value, class: "s-form-control", required: option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onBlur: e => this.numberOptionEntered.emit(e), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
   }
   //@ts-ignore
   splitterOption() {
@@ -134,32 +118,33 @@ export class SallaProductOptions {
   //@ts-ignore
   textOption(option) {
     return h("div", { class: "s-product-options-text" },
-      h("input", { placeholder: option.placeholder, name: `options[${option.id}]`, type: "text", onInput: e => this.textOptionEntered.emit(e), required: option.required, class: 's-form-control' }));
+      h("input", { type: "text", value: option.value, class: 's-form-control', required: option.required, name: `options[${option.id}]`, placeholder: option.placeholder, onInput: e => this.textOptionEntered.emit(e) }));
   }
   //@ts-ignore
   textareaOption(option) {
+    //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great
     return h("div", { class: "s-product-options-textarea" },
       h("div", { class: "mt-1" },
-        h("textarea", { rows: 4, name: `options[${option.id}]`, required: option.required, id: `options[${option.id}]`, placeholder: option.placeholder, onInput: (e) => this.textareaOptionEntered.emit(e), class: "s-form-control" })));
+        h("textarea", { rows: 4, value: option.value, class: "s-form-control", required: option.required, id: `options[${option.id}]`, name: `options[${option.id}]`, placeholder: option.placeholder, onInput: (e) => this.textareaOptionEntered.emit(e) })));
   }
   /**
    * ============= Date Time options =============
    */
   //@ts-ignore
   timeOption(option) {
-    return h("salla-datetime-picker", { class: "s-product-options-time-element", enableTime: true, placeholder: option.name, noCalendar: true, dateFormat: "h:i K", onPicked: e => this.timeSelected.emit(e) });
+    return h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: option.required, name: `options[${option.id}]`, class: "s-product-options-time-element", onPicked: e => this.timeSelected.emit(e) });
   }
   //@ts-ignore
   dateOption(option) {
     //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
     return h("div", { class: "s-product-options-date-element" },
-      h("salla-datetime-picker", { onPicked: e => this.dateSelected.emit(e), placeholder: option.name }));
+      h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: option.required, name: `options[${option.id}]`, onPicked: e => this.dateSelected.emit(e) }));
   }
   //@ts-ignore
   datetimeOption(option) {
     //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
     return h("div", { class: "s-product-options-datetime-element" },
-      h("salla-datetime-picker", { mode: "range", dateFormat: "Y-m-d G:i:K", enableTime: true, minDate: option.from_date_time, maxDate: option.to_date_time, placeholder: option.name, onPicked: e => this.dateTimeSelected.emit(e) }));
+      h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: option.required, name: `options[${option.id}]`, maxDate: option.to_date_time, minDate: option.from_date_time, onPicked: e => this.dateTimeSelected.emit(e) }));
   }
   /**
    * ============= Advanced options =============
@@ -180,7 +165,7 @@ export class SallaProductOptions {
   multipleOptions(option) {
     return h("div", { ref: element => this.multipleOptionDom = element, class: { "s-product-options-multiple-options-wrapper": true, 'required': option.required } }, option === null || option === void 0 ? void 0 : option.details.map((detail) => {
       return h("div", null,
-        h("input", { type: "checkbox", value: detail.id, disabled: detail.is_out, checked: detail.is_selected, name: `options[${option.id}]`, id: `field-${option.id}-${detail.id}`, onChange: () => this.handleMultiSelectFieldInput(), "aria-describedby": `options[${option.id}]-description` }),
+        h("input", { type: "checkbox", value: detail.id, disabled: detail.is_out, checked: detail.is_selected, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: () => this.handleMultiSelectFieldInput(), "aria-describedby": `options[${option.id}]-description` }),
         h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
     }));
   }
@@ -254,7 +239,6 @@ export class SallaProductOptions {
   }; }
   static get states() { return {
     "optionsData": {},
-    "uploadedImage": {},
     "outOfStockText": {},
     "donationAmount": {}
   }; }
@@ -424,4 +408,5 @@ export class SallaProductOptions {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -90,6 +90,7 @@ export class SallaUserMenu {
      * - is profile page, if user changed his name or avatar, we need to update it
      * - half hour is passed than last user data fetched
      */
+    //todo:: cover sending two requests in profile page, this may cause auto logout issues🤔
     if (salla.url.is_page('customer.notifications')
       || salla.url.is_page('customer.orders.index.pending')
       || salla.url.is_page('customer.profile')

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

@@ -2570,7 +2570,7 @@ const SallaDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     /**
      * Allows the user to enter a date directly into the input field. By default, direct entry is disabled.
      */
-    this.allowInput = false;
+    this.allowInput = true;
     /**
      * Allows the preloading of an invalid date. When disabled, the field will be cleared if the provided date is invalid
      */
@@ -2728,14 +2728,10 @@ const SallaDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
      */
     this.wrap = false;
   }
-  onInputChange(event) {
-    this.value = event.target.value;
-    this.picked.emit(this.value);
+  render() {
+    return h("div", { class: "s-datetime-picker" }, h("input", { type: "datetime", name: this.name, value: this.value, required: this.required, placeholder: this.placeholder, class: "s-datetime-picker-input", ref: (el) => this.dateInput = el }));
   }
   componentDidLoad() {
-    this.initPicker();
-  }
-  initPicker() {
     let options = {
       allowInput: this.allowInput,
       allowInvalidPreload: this.allowInvalidPreload,
@@ -2781,18 +2777,18 @@ const SallaDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       time_24hr: this.time_24hr,
       weekNumbers: this.weekNumbers,
       wrap: this.wrap,
-      // onChange: this.handleOnChange(selectedDates, dateStr, instance)
+      // @ts-ignore
+      onChange: (selectedDates, dateStr) => this.picked.emit(this.value = dateStr)
       // onOpen: this.handleOnOpen(selectedDates, dateStr, instance)
       // onClose: this.handleOnClose(selectedDates, dateStr, instance)
     };
     flatpickr(this.dateInput, options);
   }
-  render() {
-    return (h("div", { class: "s-datetime-picker" }, h("input", { type: "datetime", class: "s-datetime-picker-input", ref: (el) => this.dateInput = el, value: this.value, placeholder: this.placeholder, onInput: this.onInputChange.bind(this) })));
-  }
   static get style() { return sallaDatetimePickerCss; }
 }, [0, "salla-datetime-picker", {
-    "value": [1025],
+    "value": [1537],
+    "required": [4],
+    "name": [513],
     "placeholder": [1],
     "allowInput": [4, "allow-input"],
     "allowInvalidPreload": [4, "allow-invalid-preload"],