@salla.sa/twilight-components 2.10.6 → 2.11.0

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

@@ -3,10 +3,11 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { e as email } from './mail.js';
+import { C as CameraIcon } from './camera.js';
 import { K as KeyboardArrowRightIcon } from './keyboard_arrow_right.js';
-import { A as ArrowRightIcon } from './arrow-right.js';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$7 } from './salla-button2.js';
+import { d as defineCustomElement$6 } from './salla-file-upload2.js';
 import { d as defineCustomElement$5 } from './salla-loading2.js';
 import { d as defineCustomElement$4 } from './salla-modal2.js';
 import { d as defineCustomElement$3 } from './salla-tel-input2.js';
@@ -26,6 +27,20 @@ const PhoneIcon = `<!-- Generated by IcoMoon.io -->
 </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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -51,6 +66,11 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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');
@@ -88,6 +108,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         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()
@@ -106,6 +127,8 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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));
@@ -119,7 +142,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    * @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);
@@ -128,6 +151,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       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()) {
@@ -205,13 +229,42 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   async newUserValidation() {
     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);
-    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');
@@ -242,7 +295,20 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_email')) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
       h("div", { class: this.generateTabClasses('login-email'), "data-name": "login-email", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), h("form", { onSubmit: () => this.loginByEmail(event), method: "POST" }, 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" }), h("span", { class: "s-login-modal-error-message" }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter'))), this.isMobileAllowed ?
         h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_sms'))
-        : '', h("slot", { name: "after-login-email" })) : '', 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 }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon, slot: "after-footer", href: "#" })), h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("div", null, h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", null, h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", { class: this.generateRegClasses('phone') }, h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { class: this.generateRegClasses('email') }, 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("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" })))));
+        : '', h("slot", { name: "after-login-email" })) : '', 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 }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon, slot: "after-footer", href: "#" })), h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("div", null, h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", null, h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", { class: this.generateRegClasses('phone') }, h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { class: this.generateRegClasses('email') }, 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("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" })))));
   }
   get host() { return this; }
   static get style() { return sallaLoginModalCss; }
@@ -258,13 +324,17 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "emailErrorMsg": [32],
     "firstNameErrorMsg": [32],
     "lastNameErrorMsg": [32],
+    "dragAndDrop": [32],
+    "browseFromFiles": [32],
+    "customFields": [32],
+    "uploadedImage": [32],
     "open": [64]
   }, [[8, "verified", "onVerified"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-login-modal", "salla-button", "salla-loading", "salla-modal", "salla-tel-input", "salla-verify"];
+  const components = ["salla-login-modal", "salla-button", "salla-file-upload", "salla-loading", "salla-modal", "salla-tel-input", "salla-verify"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-login-modal":
       if (!customElements.get(tagName)) {
@@ -272,6 +342,11 @@ function defineCustomElement$1() {
       }
       break;
     case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "salla-file-upload":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }

package/dist/components/salla-map.js

@@ -463,15 +463,21 @@ const SallaMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     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
      */
     this.apiKey = null;
+    /**
+     * Modal Title
+     */
+    this.modalTitle = this.modalActivityTitle;
     /**
      * Sets start map zoom.
      */
@@ -635,7 +641,7 @@ const SallaMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // rendering functions
   getLocationModal() {
-    return (h("div", null, h("div", { class: "s-map-modal-title" }, this.modalActivityTitle), h("div", { class: "s-map-modal-body" }, h("div", { class: "s-map-element", ref: el => (this.mapElement = el) }), this.readonly ? "" :
+    return (h("div", null, h("div", { class: "s-map-modal-title" }, this.modalTitle), h("div", { class: "s-map-modal-body" }, h("div", { class: "s-map-element", ref: el => (this.mapElement = el) }), this.readonly ? "" :
       [
         this.searchable && (h("div", { class: "s-map-search-wrapper" }, h("input", { class: "s-map-search-input", ref: el => (this.searchInput = el) }))),
         h("salla-button", { class: "s-map-my-location-button", onClick: () => {
@@ -669,6 +675,7 @@ const SallaMap$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "lat": [1026],
     "lng": [1026],
     "apiKey": [1025, "api-key"],
+    "modalTitle": [1, "modal-title"],
     "zoom": [1026],
     "theme": [1025],
     "modalActivityTitle": [32],

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

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { C as CameraIcon } from './camera.js';
 import { d as defineCustomElement$4 } from './salla-conditional-fields2.js';
 import { d as defineCustomElement$3 } from './salla-datetime-picker2.js';
 import { d as defineCustomElement$2 } from './salla-file-upload2.js';
@@ -36,13 +37,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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -60,7 +54,6 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.dateTimeSelected = createEvent(this, "dateTimeSelected", 7);
     this.dateSelected = createEvent(this, "dateSelected", 7);
     this.timeSelected = createEvent(this, "timeSelected", 7);
-    this.options = [];
     this.uploadedImage = undefined;
     this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
     this.donationAmount = salla.lang.get('pages.products.donation_amount');
@@ -68,16 +61,22 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
      * The id of the product to which the options are going to be fetched for.
      */
     this.productId = salla.config.get('page.id');
-    if (this.product) {
-      this.setProductDetail(JSON.parse(this.product));
-    }
-    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() {
@@ -88,18 +87,6 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     this.itemsSelected.emit(multiSelectedItems);
   }
-  /**
-   * Image Selection
-   */
-  setProductDetail(detail) {
-    this.productDetail = detail;
-    this.options = detail.options;
-  }
-  fetchProductOptions() {
-    return salla.api.product.getDetails(this.productId, ['options']).then(resp => {
-      this.setProductDetail(resp.data);
-    });
-  }
   getDisplayForType(option) {
     if (this[`${option.type}Option`]) {
       return this[`${option.type}Option`](option);
@@ -113,35 +100,22 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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.options.length == 0) {
+    if (this.optionsData.length == 0) {
       return;
     }
-    return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.options.map((option) => h("div", { class: "s-product-options-option-container" }, option.name == 'splitter' ?
+    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' : ''}` }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
       this.splitterOption()
       : h("div", { class: "s-product-options-option" }, h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
   }
   //@ts-ignore
-  colorOption(option) {
-    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((value) => h("div", null, h("input", { onChange: e => this.colorSelected.emit(e), name: `color-choice-${option.id}`, id: `color-choice-${option.id}-${value.id}`, required: true, type: "radio" }), h("label", { htmlFor: `color-choice-${option.id}-${value.id}` }, h("span", { style: { "background-color": value.color } }), 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 h("div", { class: "s-product-options-date-element" }, 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 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) }));
-  }
-  //@ts-ignore
   donationOption(option) {
-    var _a;
-    let donation = this.productDetail.donation;
-    if (!donation)
-      return '';
-    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), value: salla.url.is_page('cart') ? (_a = this.productDetail) === null || _a === void 0 ? void 0 : _a.price : '' }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
+    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("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
   }
   getFilepondPlaceholder() {
     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>`;
@@ -151,6 +125,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       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);
@@ -185,21 +160,10 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   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) });
   }
-  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((value) => {
-      return h("div", null, 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() }), h("label", { htmlFor: `field-${option.id}-${value.id}` }, value.name));
-    }));
-  }
   //@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" });
   }
-  singleOption(option) {
-    return h("div", null, h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
-      option.details.map((op) => {
-        return h("option", { onChange: e => this.singleSelectOptionSelected.emit(e), value: op.id }, op.name);
-      })));
-  }
   //@ts-ignore
   splitterOption() {
     return h("div", { class: "s-product-options-splitter" });
@@ -212,24 +176,59 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   textareaOption(option) {
     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" })));
   }
+  /**
+   * ============= 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) });
+  }
+  //@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 }));
+  }
+  //@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) }));
+  }
+  /**
+   * ============= 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 h("div", null, h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
+      option.details.map((detail) => {
+        return 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 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("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", null, 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) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("p", null, this.getOptionDetailName(detail))))));
+  }
   //@ts-ignore
   thumbnailOption(option) {
     return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-      return h("div", null, 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) }), h("label", { htmlFor: `option_${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" })), h("p", null, detail.name, " "), detail.is_out ?
+      return h("div", null, 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) }), 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" })), h("p", null, this.getOptionDetailName(detail, false), " "), detail.is_out ?
         [h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText), h("div", { class: "s-product-options-thumbnails-badge-overlay" })]
         : '');
     }));
   }
-  //@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) });
-  }
   static get style() { return sallaProductOptionsCss; }
 }, [0, "salla-product-options", {
     "productId": [2, "product-id"],
-    "product": [1],
-    "productDetail": [32],
-    "options": [32],
+    "options": [1],
+    "optionsData": [32],
     "uploadedImage": [32],
     "outOfStockText": [32],
     "donationAmount": [32]

package/dist/components/salla-slider2.js

@@ -53,6 +53,10 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Vertical or Horizontal thumbs slider
      */
     this.verticalThumbs = false;
+    /**
+     * Vertical or Horizontal main slider
+     */
+    this.vertical = false;
     /**
      * Auto Height slider
      */
@@ -129,13 +133,22 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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,
@@ -344,11 +357,14 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       } : 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`
@@ -393,7 +409,13 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
     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));
@@ -420,7 +442,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         : '', this.showControls ?
         h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? KeyboardArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowLeftIcon : KeyboardArrowRightIcon })))
         : ''))
-      : '', h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ? [h("div", { class: "s-slider-button s-slider-button-prev" }, 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() }, h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowLeftIcon : KeyboardArrowRightIcon }))), h("div", { class: "s-slider-button s-slider-button-next" }, 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() }, h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? KeyboardArrowRightIcon : ArrowLeftIcon })))] : '')) : ''));
+      : '', h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ? [h("div", { class: "s-slider-button s-slider-button-prev" }, 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() }, h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowLeftIcon : KeyboardArrowRightIcon }))), h("div", { class: "s-slider-button s-slider-button-next" }, 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() }, h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? KeyboardArrowRightIcon : ArrowLeftIcon })))] : '')) : ''));
   }
   componentDidLoad() {
     let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
@@ -445,6 +467,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "blockSubtitle": [513, "block-subtitle"],
     "displayAllUrl": [513, "display-all-url"],
     "verticalThumbs": [516, "vertical-thumbs"],
+    "vertical": [516],
     "autoHeight": [516, "auto-height"],
     "showControls": [516, "show-controls"],
     "controlsOuter": [516, "controls-outer"],

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

@@ -56,7 +56,6 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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),
@@ -141,7 +140,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     salla.auth.logout();
   }
   getTheHeader() {
-    return 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 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)
@@ -187,7 +186,6 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "hello": [32],
     "first_name": [32],
     "last_name": [32],
-    "has_red_dot": [32],
     "avatar": [32],
     "badges": [32],
     "OrderUpdate": [32]