@salla.sa/twilight-components 2.10.7 → 2.11.0

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

@@ -20027,7 +20027,12 @@ const sallaFileUploadCss = "/*!\n * FilePond 4.30.4\n * Licensed under MIT, http
 const SallaFileUpload = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.uploaded = index.createEvent(this, "uploaded", 7);
     this.remove = index.createEvent(this, "remove", 7);
+    /**
+     * The uploaded image link or URL
+     */
+    this.uploadedImage = undefined;
     /**
      * Sets the required attribute to the output field
      */
@@ -20133,7 +20138,28 @@ const SallaFileUpload = class {
     /**
      * A server configuration object describing how FilePond should interact with the server.
      */
-    this.serverConfig = null;
+    this.serverConfig = {
+      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;
+          this.uploaded.emit(resp.data.url);
+          load('success');
+        }).catch(e => {
+          console.log(e);
+          error('error');
+        })
+          .finally(() => {
+          return {
+            abort: () => {
+              abort();
+            },
+          };
+        });
+      }
+    };
     /**
      * Immediately upload new files to the server
      */
@@ -20285,7 +20311,7 @@ const SallaFileUpload = class {
   }
   intiFilePond() {
     filepond.registerPlugin(FilePondPluginImagePreview, filepondPluginImageExifOrientation, filepondPluginFileValidateSize, filepondPluginImageEdit, filepondPluginFileValidateType);
-    return filepond.create(document.querySelector('.s-file-upload-input'), {
+    return filepond.create(this.fileUploader, {
       files: this.files,
       required: this.required,
       disabled: this.disabled,
@@ -20323,13 +20349,18 @@ const SallaFileUpload = class {
       labelFileWaitingForSize: this.labelFileWaitingForSize,
       beforeRemoveFile: (file_deleted) => new Promise((resolve) => {
         this.remove.emit(file_deleted);
+        setTimeout(() => {
+          // TODO: needs a better way
+          this.host.style.height = '120px !important';
+        }, 1000);
         resolve(true);
       }),
     });
   }
   render() {
-    return (index.h(index.Host, { class: "s-file-upload" }, index.h("input", { type: "file", class: "s-file-upload-wrapper s-file-upload-input", name: "filepond", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
+    return (index.h(index.Host, { class: "s-file-upload" }, index.h("input", { type: "file", class: "s-file-upload-wrapper s-file-upload-input", ref: ele => this.fileUploader = ele, name: "filepond", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
   }
+  get host() { return index.getElement(this); }
 };
 SallaFileUpload.style = sallaFileUploadCss;
 
@@ -20339,13 +20370,6 @@ const Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32"
 </svg>
 `;
 
-const ArrowRightIcon$1 = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>arrow-right</title>
-<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>
-</svg>
-`;
-
 const LeftArrow = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>arrow-left</title>
@@ -20391,13 +20415,6 @@ const SallaGifting = class {
     salla.lang.onLoaded(() => {
       this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
       this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
-      this.step1Elems = document.querySelectorAll('.gift-step-1 .anime-item');
-      this.step2Elems = document.querySelectorAll('.gift-step-2 .anime-item');
-      this.imageCover = document.querySelector('.s-gifting-modal-uploader');
-      this.stepsWrapper = document.querySelector('.steps-wrapper');
-      this.textSelect = document.querySelector('.s-gifting-selectText');
-      this.customTextArea = document.querySelector('.s-gifting-textarea');
-      this.calendarFormGroup = document.querySelector('.s-gifting-calendar');
       this.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
       this.sectionSubtitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love_message');
       this.sectionBtnText = salla.lang.get('blocks.buy_as_gift.send_as_a_gift');
@@ -20491,25 +20508,24 @@ const SallaGifting = class {
   * Go to the step 2
   */
   async goToStep2() {
-    var _a, _b, _c, _d, _e, _f;
     if (!this.selectedGiftTextOption) {
-      (_a = this.textSelect) === null || _a === void 0 ? void 0 : _a.classList.add('s-form-has-error');
-      (_b = this.customTextArea) === null || _b === void 0 ? void 0 : _b.classList.remove('s-form-has-error');
+      this.textSelect.classList.add('s-form-has-error');
+      this.customTextArea.classList.remove('s-form-has-error');
       return;
     }
     else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
-      (_c = this.textSelect) === null || _c === void 0 ? void 0 : _c.classList.remove('s-form-has-error');
-      (_d = this.customTextArea) === null || _d === void 0 ? void 0 : _d.classList.add('s-form-has-error');
+      this.textSelect.classList.remove('s-form-has-error');
+      this.customTextArea.classList.add('s-form-has-error');
       return;
     }
     else {
-      (_e = this.textSelect) === null || _e === void 0 ? void 0 : _e.classList.remove('s-form-has-error');
-      (_f = this.customTextArea) === null || _f === void 0 ? void 0 : _f.classList.remove('s-form-has-error');
+      this.textSelect.classList.remove('s-form-has-error');
+      this.customTextArea.classList.remove('s-form-has-error');
     }
     this.setWrapperHeight(2, 600, 0);
     let stepNextAnime = new anime.timeline();
     stepNextAnime.add({
-      targets: this.step1Elems,
+      targets: this.step1Elems.querySelectorAll('.anime-item'),
       opacity: [1, 0],
       translateX: [0, 50],
       delay: anime.stagger(70),
@@ -20522,13 +20538,13 @@ const SallaGifting = class {
       opacity: [0, 1],
     }, '-=1800')
       .add({
-      targets: this.step2Elems,
+      targets: this.step2Elems.querySelectorAll('.anime-item'),
       opacity: [0, 1],
       translateX: [-50, 0],
       delay: anime.stagger(70),
       duration: 1200,
       complete: () => {
-        this.step2Elems.forEach(item => {
+        this.step2Elems.querySelectorAll('.anime-item').forEach(item => {
           item.classList.remove('opacity-0');
           item.removeAttribute('style');
         });
@@ -20541,12 +20557,13 @@ const SallaGifting = class {
     *
     * Go to the step 1
     */
-  goToStep1() {
+  goToStep1(e) {
+    e.preventDefault();
     let stepBackAnime = new anime.timeline({
       autoplay: false,
     });
     stepBackAnime.add({
-      targets: this.step2Elems,
+      targets: this.step2Elems.querySelectorAll('.anime-item'),
       opacity: [1, 0],
       translateX: [0, -50],
       delay: anime.stagger(70),
@@ -20559,13 +20576,13 @@ const SallaGifting = class {
       opacity: [0, 1],
     }, '-=1800')
       .add({
-      targets: this.step1Elems,
+      targets: this.step1Elems.querySelectorAll('.anime-item'),
       opacity: [0, 1],
       translateX: [50, 0],
       delay: anime.stagger(70),
       duration: 1200,
       complete: () => {
-        this.step1Elems.forEach(item => {
+        this.step1Elems.querySelectorAll('.anime-item').forEach(item => {
           item.classList.remove('opacity-0');
           item.removeAttribute('style');
         });
@@ -20581,19 +20598,19 @@ const SallaGifting = class {
   }
   setPreview(image) {
     var _a, _b;
-    (_a = this.imageCover) === null || _a === void 0 ? void 0 : _a.classList.add('has-bg');
+    (_a = this.uploader) === null || _a === void 0 ? void 0 : _a.classList.add('has-bg');
     var bg = document.querySelector('.filepond-bg') ? document.querySelector('.filepond-bg') : document.createElement('div');
     bg.classList.add('filepond-bg');
     bg.classList.remove('s-hidden');
     bg.style.backgroundImage = "url('" + image.url + "')";
-    (_b = this.imageCover) === null || _b === void 0 ? void 0 : _b.querySelector('.filepond--root').appendChild(bg);
+    (_b = this.uploader) === null || _b === void 0 ? void 0 : _b.querySelector('.filepond--root').appendChild(bg);
     this.uploadedImage = image.url;
     if (!!this.gift && this.gift.gift_images.length) {
       this.setWrapperHeight(1, 150, 0);
     }
   }
   removePreview() {
-    this.imageCover.classList.remove('has-bg');
+    this.uploader.classList.remove('has-bg');
     let bg = document.querySelector('.filepond-bg');
     bg.removeAttribute('style');
     bg.classList.add('s-hidden');
@@ -20708,10 +20725,10 @@ const SallaGifting = class {
         :
           [
             index.h("div", { class: "s-gifting-modal-header" }, index.h("span", { class: "s-gifting-modal-icon" }, index.h("span", { innerHTML: GiftSharing })), index.h("h2", { class: "s-gifting-modal-title" }, index.h("div", { class: "s-gifting-modal-badge-wrapper" }, index.h("div", { class: "s-gifting-modal-badge" }, index.h("span", null, index.h("span", null, this.currentStep), "/2")), index.h("span", null, this.giftDetails)))),
-            index.h("div", { class: "s-gifting-steps-wrapper steps-wrapper " + this.parentClass }, index.h("div", { class: "s-gifting-step-one gift-step-1" }, index.h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), index.h("div", { class: "s-gifting-modal-uploader anime-item" }, index.h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && index.h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")), index.h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
+            index.h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el }, index.h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, index.h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), index.h("div", { class: "s-gifting-modal-uploader anime-item", ref: el => this.uploader = el }, index.h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && index.h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")), index.h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
               index.h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, index.h("div", { slot: "items" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => index.h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` }))))
-              : ""), index.h("div", { class: "anime-item" }, index.h("div", { class: "s-form-group s-gifting-selectText" }, index.h("label", { htmlFor: "gift-text-selection", class: "s-form-label" }, this.selectGiftMessage), index.h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, index.h("option", { "data-id": null, selected: true }, this.selectGiftMessage), (_b = this.gift) === null || _b === void 0 ? void 0 :
-              _b.gift_texts.map((txt) => index.h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), index.h("option", { "data-id": "custom" }, this.giftCustomText))), index.h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" }, index.h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), index.h("div", { class: "mt-1" }, index.h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), index.h("div", { class: "anime-item" }, index.h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, index.h("span", null, this.nextStep)))), index.h("div", { class: "s-gifting-step-two gift-step-2" }, index.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" }, index.h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), index.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'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), index.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" }, index.h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), index.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'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), index.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" }, index.h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), index.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'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), index.h("div", { class: "anime-item opacity-0" }, index.h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, index.h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), index.h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), index.h("div", { class: this.getCalendarClasses() }, index.h("label", { class: "s-form-label" }, this.selectSendDateAndTime), index.h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), index.h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), index.h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, index.h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? ArrowRightIcon$1 : LeftArrow, onClick: () => this.goToStep1() }), index.h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, index.h("span", null, this.sendGift)))))
+              : ""), index.h("div", { class: "anime-item" }, index.h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, index.h("label", { htmlFor: "gift-text-selection", class: "s-form-label" }, this.selectGiftMessage), index.h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, index.h("option", { "data-id": null, selected: true }, this.selectGiftMessage), (_b = this.gift) === null || _b === void 0 ? void 0 :
+              _b.gift_texts.map((txt) => index.h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), index.h("option", { "data-id": "custom" }, this.giftCustomText))), index.h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, index.h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), index.h("div", { class: "mt-1" }, index.h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), index.h("div", { class: "anime-item" }, index.h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, index.h("span", null, this.nextStep)))), index.h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el }, index.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" }, index.h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), index.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'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), index.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" }, index.h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), index.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'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), index.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" }, index.h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), index.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'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), index.h("div", { class: "anime-item opacity-0" }, index.h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, index.h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), index.h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), index.h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, index.h("label", { class: "s-form-label" }, this.selectSendDateAndTime), index.h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), index.h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), index.h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, index.h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), index.h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, index.h("span", null, this.sendGift)))))
           ], index.h("slot", { name: "footer" })))
     ];
   }
@@ -21028,13 +21045,34 @@ const MailIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const ArrowRightIcon = `<!-- Generated by IcoMoon.io -->
+const CameraIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>camera</title>
+<path d="M16 10.667c-4.044 0-7.333 3.289-7.333 7.333s3.289 7.333 7.333 7.333 7.333-3.289 7.333-7.333-3.289-7.333-7.333-7.333zM16 22.667c-2.573 0-4.667-2.093-4.667-4.667s2.093-4.667 4.667-4.667 4.667 2.093 4.667 4.667-2.093 4.667-4.667 4.667zM28 5.333h-3.287l-2.271-3.407c-0.248-0.371-0.664-0.593-1.109-0.593h-10.667c-0.445 0-0.861 0.223-1.109 0.593l-2.271 3.407h-3.287c-2.205 0-4 1.795-4 4v17.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-17.333c0-2.205-1.795-4-4-4zM29.333 26.667c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-17.333c0-0.735 0.599-1.333 1.333-1.333h4c0.445 0 0.861-0.223 1.109-0.593l2.272-3.407h9.239l2.271 3.407c0.248 0.371 0.664 0.593 1.109 0.593h4c0.735 0 1.333 0.599 1.333 1.333zM25.333 10.66c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327z"></path>
+</svg>
+`;
+
+const ArrowRightIcon$1 = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>keyboard_arrow_right</title>
 <path d="M11.438 22.479l6.125-6.125-6.125-6.125 1.875-1.875 8 8-8 8z"></path>
 </svg>
 `;
 
+const ArrowRightIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-right</title>
+<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>
+</svg>
+`;
+
+var CustomFieldType;
+(function (CustomFieldType) {
+  CustomFieldType["TEXT"] = "text";
+  CustomFieldType["NUMBER"] = "number";
+  CustomFieldType["PHOTO"] = "photo";
+})(CustomFieldType || (CustomFieldType = {}));
+
 const sallaLoginModalCss = "";
 
 const SallaLoginModal = class {
@@ -21059,6 +21097,11 @@ const SallaLoginModal = class {
     this.currentTabName = 'home';
     this.regType = 'phone';
     this.translationLoaded = false;
+    this.dragAndDrop = salla.lang.get('common.uploader.drag_and_drop');
+    this.browseFromFiles = salla.lang.get('common.uploader.browse');
+    this.customFields = [];
+    this.customFieldsValues = {};
+    this.uploadedImage = undefined;
     this.typing = (e, submitMethod = null) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
@@ -21096,6 +21139,7 @@ const SallaLoginModal = class {
         phone: regPhone || this.loginTelInput.phone,
         country_code: countryCode,
         verified_by: this.regType,
+        custom_fields: this.customFieldsValues,
       };
       emailValue && (data = Object.assign(Object.assign({}, data), { email: emailValue }));
       this.verifyTab.getCode()
@@ -21114,6 +21158,8 @@ const SallaLoginModal = class {
     salla.lang.onLoaded(() => {
       this.translationLoaded = true;
       this.title = salla.lang.get('blocks.header.login');
+      this.dragAndDrop = salla.lang.get('common.uploader.drag_and_drop');
+      this.browseFromFiles = salla.lang.get('common.uploader.browse');
       this.updateTranslations();
     });
     salla.event.on('login::open', (event) => this.open(event));
@@ -21127,7 +21173,7 @@ const SallaLoginModal = class {
    * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
    */
   onVerified(event) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     salla.log('verified', event);
     //there is a case when force login is activated & is new user, it will return case inside error key., so cover it.
     let verifyCase = ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.data.case) || ((_b = event.detail) === null || _b === void 0 ? void 0 : _b.error.case);
@@ -21136,6 +21182,7 @@ const SallaLoginModal = class {
       return;
     }
     if (verifyCase === "new_customer") {
+      this.customFields = ((_d = (_c = event.detail) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.custom_fields) || [];
       return this.showTab(this.registrationTab);
     }
     if (!salla.auth.canRedirect()) {
@@ -21213,13 +21260,42 @@ const SallaLoginModal = class {
   }
   async newUserValidation() {
     const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper$1.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);
-    if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
+    // 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);
+          }
+        }
+      }
+    }
+    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');
   }
+  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>`;
+  }
   // eslint-disable-next-line @stencil/own-methods-must-be-private
   validateField(field, errorMsg) {
     field.classList.add('s-has-error');
@@ -21244,13 +21320,26 @@ const SallaLoginModal = class {
     // @ts-ignore
     // @ts-ignore
     return (index.h("salla-modal", { class: "s-login-modal", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("span", { slot: 'icon', class: "s-login-modal-header-icon", innerHTML: UserIcon }), index.h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      index.h("div", { class: this.generateTabClasses('home'), "data-name": "home", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')), index.h("slot", { name: "before-login-type" }), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }), index.h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('blocks.header.sms')), index.h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: ArrowRightIcon })), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("span", { class: "s-login-modal-main-btn-icon", innerHTML: MailIcon }), index.h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('common.elements.email')), index.h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: ArrowRightIcon })), index.h("slot", { name: "after-login-type" }))
+      index.h("div", { class: this.generateTabClasses('home'), "data-name": "home", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')), index.h("slot", { name: "before-login-type" }), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }), index.h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('blocks.header.sms')), index.h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: ArrowRightIcon$1 })), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("span", { class: "s-login-modal-main-btn-icon", innerHTML: MailIcon }), index.h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('common.elements.email')), index.h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: ArrowRightIcon$1 })), index.h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
       index.h("div", { class: this.generateTabClasses('login-phone'), "data-name": "login-phone", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("form", { onSubmit: () => this.loginBySMS(event), method: "POST" }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), index.h("salla-tel-input", { tabindex: "0", ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e) }), index.h("salla-button", { type: "submit", "loader-position": 'center', width: "wide", ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter'))), this.isEmailAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_email')) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
       index.h("div", { class: this.generateTabClasses('login-email'), "data-name": "login-email", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), index.h("form", { onSubmit: () => this.loginByEmail(event), method: "POST" }, index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e), placeholder: "your@email.com", enterkeyhint: "next", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter'))), this.isMobileAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_sms'))
-        : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { display: "inline", "support-web-auth": this.supportWebAuth ? 'true' : 'false', class: this.generateTabClasses('otp'), "data-name": "otp", ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon$1, slot: "after-footer", href: "#" })), index.h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", { class: this.generateRegClasses('phone') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { class: this.generateRegClasses('email') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), index.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" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+        : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { display: "inline", "support-web-auth": this.supportWebAuth ? 'true' : 'false', class: this.generateTabClasses('otp'), "data-name": "otp", ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon, slot: "after-footer", href: "#" })), index.h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", { class: this.generateRegClasses('phone') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { class: this.generateRegClasses('email') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), index.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" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", { class: "s-login-modal-custom-fields", ref: el => this.customFieldsWrapper = el }, this.customFields.map((field) => {
+      if (field.type === CustomFieldType.PHOTO) {
+        return [
+          index.h("label", { class: "s-login-modal-label" }, field.label),
+          index.h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), id: `${field.id}`, title: field.label, required: field.required }),
+          index.h("span", { class: "s-login-modal-error-message" })
+        ];
+      }
+      return [
+        index.h("label", { class: "s-login-modal-label" }, field.label),
+        index.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" }),
+        index.h("span", { class: "s-login-modal-error-message" })
+      ];
+    })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
 };
@@ -21945,10 +22034,12 @@ const SallaMap = class {
      */
     this.searchable = false;
     /**
-     * Sets the start location.
+     * Latitude coordinate, defaults to Mecca 🕋 ❤️
      */
-    // start in mecca 🕋 ❤️
     this.lat = 21.419421;
+    /**
+     * Longitude coordinate, defaults to Mecca 🕋 ❤️
+     */
     this.lng = 39.82553;
     /**
      * Sets google api key value
@@ -21957,7 +22048,7 @@ const SallaMap = class {
     /**
      * Modal Title
      */
-    this.title = this.modalActivityTitle;
+    this.modalTitle = this.modalActivityTitle;
     /**
      * Sets start map zoom.
      */
@@ -22121,7 +22212,7 @@ const SallaMap = class {
   }
   // rendering functions
   getLocationModal() {
-    return (index.h("div", null, index.h("div", { class: "s-map-modal-title" }, this.title), index.h("div", { class: "s-map-modal-body" }, index.h("div", { class: "s-map-element", ref: el => (this.mapElement = el) }), this.readonly ? "" :
+    return (index.h("div", null, index.h("div", { class: "s-map-modal-title" }, this.modalTitle), index.h("div", { class: "s-map-modal-body" }, index.h("div", { class: "s-map-element", ref: el => (this.mapElement = el) }), this.readonly ? "" :
       [
         this.searchable && (index.h("div", { class: "s-map-search-wrapper" }, index.h("input", { class: "s-map-search-input", ref: el => (this.searchInput = el) }))),
         index.h("salla-button", { class: "s-map-my-location-button", onClick: () => {
@@ -22645,13 +22736,6 @@ const CheckCircleIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const CameraIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>camera</title>
-<path d="M16 10.667c-4.044 0-7.333 3.289-7.333 7.333s3.289 7.333 7.333 7.333 7.333-3.289 7.333-7.333-3.289-7.333-7.333-7.333zM16 22.667c-2.573 0-4.667-2.093-4.667-4.667s2.093-4.667 4.667-4.667 4.667 2.093 4.667 4.667-2.093 4.667-4.667 4.667zM28 5.333h-3.287l-2.271-3.407c-0.248-0.371-0.664-0.593-1.109-0.593h-10.667c-0.445 0-0.861 0.223-1.109 0.593l-2.271 3.407h-3.287c-2.205 0-4 1.795-4 4v17.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-17.333c0-2.205-1.795-4-4-4zM29.333 26.667c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-17.333c0-0.735 0.599-1.333 1.333-1.333h4c0.445 0 0.861-0.223 1.109-0.593l2.272-3.407h9.239l2.271 3.407c0.248 0.371 0.664 0.593 1.109 0.593h4c0.735 0 1.333 0.599 1.333 1.333zM25.333 10.66c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327z"></path>
-</svg>
-`;
-
 const sallaProductOptionsCss = "";
 
 const SallaProductOptions = class {
@@ -22668,7 +22752,6 @@ const SallaProductOptions = class {
     this.dateTimeSelected = index.createEvent(this, "dateTimeSelected", 7);
     this.dateSelected = index.createEvent(this, "dateSelected", 7);
     this.timeSelected = index.createEvent(this, "timeSelected", 7);
-    this.optionsData = [];
     this.uploadedImage = undefined;
     this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
     this.donationAmount = salla.lang.get('pages.products.donation_amount');
@@ -22676,16 +22759,22 @@ const SallaProductOptions = class {
      * The id of the product to which the options are going to be fetched for.
      */
     this.productId = salla.config.get('page.id');
-    if (this.options) {
-      this.optionsData = JSON.parse(this.options);
-    }
-    else if (this.productId) {
-      this.fetchProductOptions();
-    }
     salla.lang.onLoaded(() => {
       this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
       this.donationAmount = salla.lang.get('pages.products.donation_amount');
     });
+    if (this.options) {
+      try {
+        this.optionsData = JSON.parse(this.options);
+        return;
+      }
+      catch (e) {
+        salla.log('Bad json passed via options prop');
+      }
+    }
+    if (this.productId && !salla.url.is_page('cart')) {
+      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.optionsData = resp.data.options);
+    }
   }
   //todo:: typo here, but I think we will drop it anyway😌
   handleMultiSelectFieldInput() {
@@ -22696,14 +22785,6 @@ const SallaProductOptions = class {
     }
     this.itemsSelected.emit(multiSelectedItems);
   }
-  /**
-   * Image Selection
-   */
-  fetchProductOptions() {
-    return salla.api.product.getDetails(this.productId, ['options']).then(resp => {
-      this.optionsData = resp.data.options;
-    });
-  }
   getDisplayForType(option) {
     if (this[`${option.type}Option`]) {
       return this[`${option.type}Option`](option);
@@ -22717,29 +22798,20 @@ const SallaProductOptions = class {
     salla.log(`Couldn't find options type(${option.type})😢`);
     return '';
   }
+  getOptionShownWhen(option) {
+    return option.visibility_condition
+      ? { "data-show-when": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }
+      : {};
+  }
   render() {
     if (this.optionsData.length == 0) {
       return;
     }
-    return (index.h(index.Host, { class: "s-product-options-wrapper" }, index.h("salla-conditional-fields", null, this.optionsData.map((option) => index.h("div", { class: "s-product-options-option-container" }, option.name == 'splitter' ?
+    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' : ''}` }, 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))))))));
   }
   //@ts-ignore
-  colorOption(option) {
-    return index.h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((value) => index.h("div", null, index.h("input", { onChange: e => this.colorSelected.emit(e), name: `color-choice-${option.id}`, id: `color-choice-${option.id}-${value.id}`, required: true, type: "radio" }), index.h("label", { htmlFor: `color-choice-${option.id}-${value.id}` }, index.h("span", { style: { "background-color": value.color } }), index.h("p", null, value.name)))));
-  }
-  //@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", { onPicked: e => this.dateSelected.emit(e), placeholder: option.name }));
-  }
-  //@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", { 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) }));
-  }
-  //@ts-ignore
   donationOption(option) {
     return index.h("div", { class: "s-product-options-donation-wrapper" }, index.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) }), index.h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
   }
@@ -22751,6 +22823,7 @@ const SallaProductOptions = class {
       this.uploader.querySelector('.filepond--root').style.height = '120px';
     }, 1000);
   }
+  //todo:: why we need this way, use the native way!!
   //@ts-ignore
   selectThumbnail(e, value) {
     this.thumbnailSelected.emit(e);
@@ -22785,21 +22858,10 @@ const SallaProductOptions = class {
   imageOption(option) {
     return index.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) });
   }
-  multipleOptions(option) {
-    return index.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((value) => {
-      return index.h("div", null, index.h("input", { id: `field-${option.id}-${value.id}`, "aria-describedby": `options[${option.id}]-description`, name: `options[${option.id}]`, value: value.id, type: "checkbox", onChange: () => this.handleMultiSelectFieldInput() }), index.h("label", { htmlFor: `field-${option.id}-${value.id}` }, value.name));
-    }));
-  }
   //@ts-ignore
   numberOption(option) {
     return index.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" });
   }
-  singleOption(option) {
-    return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" }, index.h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
-      option.details.map((op) => {
-        return index.h("option", { onChange: e => this.singleSelectOptionSelected.emit(e), value: op.id }, op.name);
-      })));
-  }
   //@ts-ignore
   splitterOption() {
     return index.h("div", { class: "s-product-options-splitter" });
@@ -22812,18 +22874,54 @@ const SallaProductOptions = class {
   textareaOption(option) {
     return index.h("div", { class: "s-product-options-textarea" }, index.h("div", { class: "mt-1" }, index.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" })));
   }
+  /**
+   * ============= Date Time options =============
+   */
+  //@ts-ignore
+  timeOption(option) {
+    return index.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) });
+  }
+  //@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", { onPicked: e => this.dateSelected.emit(e), placeholder: option.name }));
+  }
+  //@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", { 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) }));
+  }
+  /**
+   * ============= Advanced options =============
+   */
+  getOptionDetailName(detail, outOfStock = true) {
+    return detail.name
+      + ((outOfStock && detail.is_out) ? ` - ${this.outOfStockText}` : '')
+      + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');
+  }
+  singleOption(option) {
+    return index.h("div", null, index.h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" }, 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: detail.is_out, selected: detail.is_selected, onChange: e => this.singleSelectOptionSelected.emit(e) }, this.getOptionDetailName(detail));
+      })));
+  }
+  multipleOptions(option) {
+    return index.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 index.h("div", null, index.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` }), 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", null, index.h("input", { type: "radio", value: detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.colorSelected.emit(e) }), index.h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, index.h("span", { style: { "background-color": detail.color } }), index.h("p", null, this.getOptionDetailName(detail))))));
+  }
   //@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", { required: option.required, type: "radio", id: `option_${option.id}_${detail.id}`, disabled: detail.is_out, "data-itemid": detail.id, name: `options[${option.id}]`, "data-img-id": detail.option_value, value: detail.option_value, onChange: (e) => this.selectThumbnail(e, detail.option_value) }), index.h("label", { htmlFor: `option_${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" })), index.h("p", null, detail.name, " "), detail.is_out ?
+      return index.h("div", null, index.h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.selectThumbnail(e, detail.option_value) }), 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" })), index.h("p", null, this.getOptionDetailName(detail, false), " "), detail.is_out ?
         [index.h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText), index.h("div", { class: "s-product-options-thumbnails-badge-overlay" })]
         : '');
     }));
   }
-  //@ts-ignore
-  timeOption(option) {
-    return index.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) });
-  }
 };
 SallaProductOptions.style = sallaProductOptionsCss;
 
@@ -23773,6 +23871,10 @@ const SallaSwiper = class {
      * Vertical or Horizontal thumbs slider
      */
     this.verticalThumbs = false;
+    /**
+     * Vertical or Horizontal main slider
+     */
+    this.vertical = false;
     /**
      * Auto Height slider
      */
@@ -23849,13 +23951,22 @@ const SallaSwiper = class {
         slidesPerView: 'auto',
         spaceBetween: 0,
       },
-      fullscreen: {
+      fullwidth: {
         speed: 750,
         parallax: true,
         autoplay: {
           delay: 5000,
         },
       },
+      fullscreen: {
+        speed: 1000,
+        parallax: true,
+        direction: "vertical",
+        followFinger: false,
+        touchReleaseOnEdges: true,
+        lazy: true,
+        mousewheel: {}
+      },
       testimonials: {
         draggable: true,
         slidesPerView: 1,
@@ -24064,11 +24175,14 @@ const SallaSwiper = class {
       } : false,
       breakpoints: {
         768: {
-          direction: this.verticalThumbs ? "vertical" : "horizontal",
+          direction: this.vertical ? "vertical" : "horizontal",
         },
       },
     };
-    pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), (this.pre_defined_config[this.type] || {}));
+    this.pre_defined_config.fullscreen.mousewheel = {
+      releaseOnEdges: this.host.querySelectorAll('.swiper-slide').length > 1 ? false : true
+    },
+      pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), (this.pre_defined_config[this.type] || {}));
     if (this.type == 'thumbs') {
       for (const slide of this.thumbsSliderWrapper.children) {
         //todo:: use `s-slider-slide`
@@ -24113,7 +24227,13 @@ const SallaSwiper = class {
     });
     this.slider.on('reachBeginning', (slider) => this.reachBeginning.emit(slider));
     this.slider.on('reachEnd', (slider) => this.reachEnd.emit(slider));
-    this.slider.on('slideChangeTransitionEnd', (slider) => this.slideChangeTransitionEnd.emit(slider));
+    this.slider.on('slideChangeTransitionEnd', (slider) => {
+      if (this.type == "fullscreen") {
+        const activeIndex = slider.activeIndex;
+        slider.params.mousewheel.releaseOnEdges = activeIndex === 0 || (activeIndex === slider.slides.length - 1);
+      }
+      this.slideChangeTransitionEnd.emit(slider);
+    });
     this.slider.on('slideChangeTransitionStart', (slider) => this.slideChangeTransitionStart.emit(slider));
     this.slider.on('slideNextTransitionEnd', (slider) => this.slideNextTransitionEnd.emit(slider));
     this.slider.on('slideNextTransitionStart', (slider) => this.slideNextTransitionStart.emit(slider));
@@ -24138,9 +24258,9 @@ const SallaSwiper = class {
         : '', index.h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
         index.h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle)
         : '', this.showControls ?
-        index.h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, index.h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowRightIcon : ArrowLeftIcon })), index.h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowLeftIcon : ArrowRightIcon })))
+        index.h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, index.h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowRightIcon$1 : ArrowLeftIcon })), index.h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowLeftIcon : ArrowRightIcon$1 })))
         : ''))
-      : '', index.h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, index.h("slot", null), index.h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, index.h("slot", { name: 'items' })), this.pagination ? index.h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' ? index.h("div", { class: "s-slider-thumbs" }, index.h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, index.h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, index.h("slot", { name: "thumbs" })), this.showThumbsControls ? [index.h("div", { class: "s-slider-button s-slider-button-prev" }, index.h("salla-button", { disabled: this.isRTL ? (_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.isEnd : (_b = this.thumbsSlider) === null || _b === void 0 ? void 0 : _b.isBeginning, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slideNext() : this.thumbsSlider.slidePrev() }, index.h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowLeftIcon : ArrowRightIcon }))), index.h("div", { class: "s-slider-button s-slider-button-next" }, index.h("salla-button", { disabled: this.isRTL ? (_c = this.thumbsSlider) === null || _c === void 0 ? void 0 : _c.isBeginning : (_d = this.thumbsSlider) === null || _d === void 0 ? void 0 : _d.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slidePrev() : this.thumbsSlider.slideNext() }, index.h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowRightIcon : ArrowLeftIcon })))] : '')) : ''));
+      : '', index.h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, index.h("slot", null), index.h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, index.h("slot", { name: 'items' })), this.pagination ? index.h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' ? index.h("div", { class: "s-slider-thumbs" }, index.h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, index.h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, index.h("slot", { name: "thumbs" })), this.showThumbsControls ? [index.h("div", { class: "s-slider-button s-slider-button-prev" }, index.h("salla-button", { disabled: this.isRTL && !this.verticalThumbs ? (_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.isEnd : (_b = this.thumbsSlider) === null || _b === void 0 ? void 0 : _b.isBeginning, shape: "icon", color: "light", onClick: () => this.isRTL && !this.verticalThumbs ? this.thumbsSlider.slideNext() : this.thumbsSlider.slidePrev() }, index.h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowLeftIcon : ArrowRightIcon$1 }))), index.h("div", { class: "s-slider-button s-slider-button-next" }, index.h("salla-button", { disabled: this.isRTL && !this.verticalThumbs ? (_c = this.thumbsSlider) === null || _c === void 0 ? void 0 : _c.isBeginning : (_d = this.thumbsSlider) === null || _d === void 0 ? void 0 : _d.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL && !this.verticalThumbs ? this.thumbsSlider.slidePrev() : this.thumbsSlider.slideNext() }, index.h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowRightIcon$1 : ArrowLeftIcon })))] : '')) : ''));
   }
   componentDidLoad() {
     let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
@@ -25947,7 +26067,6 @@ const SallaUserMenu = class {
     this.hello = salla.lang.get("pages.checkout.hello");
     this.first_name = salla.storage.get('user.first_name') || '';
     this.last_name = salla.storage.get('user.last_name') || '';
-    this.has_red_dot = salla.storage.get('user.notifications') || salla.storage.get('user.pending_orders');
     this.avatar = salla.storage.get('user.avatar') || salla.url.cdn('images/avatar.png');
     this.badges = {
       notifications: salla.helpers.number(salla.storage.get('user.notifications') || 0),
@@ -26032,7 +26151,7 @@ const SallaUserMenu = class {
     salla.auth.logout();
   }
   getTheHeader() {
-    return index.h("div", { class: { 's-user-menu-trigger-slot': true, 's-user-menu-red-dot': this.has_red_dot, 's-user-menu-trigger-avatar-only': this.avatarOnly }, id: 'trigger-slot', onClick: (e) => this.open(e), innerHTML: this.triggerSlot
+    return index.h("div", { class: { 's-user-menu-trigger-slot': true, 's-user-menu-red-dot': this.badges.pending_orders || this.badges.notifications, 's-user-menu-trigger-avatar-only': this.avatarOnly }, id: 'trigger-slot', onClick: (e) => this.open(e), innerHTML: this.triggerSlot
         .replace(/\{hello\}/g, this.hello)
         .replace(/\{first_name\}/g, this.first_name)
         .replace(/\{last_name\}/g, this.last_name)