@salla.sa/twilight-components 2.11.9 → 2.11.11

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

@@ -5,8 +5,17 @@ import { Component, Prop, h, State, Element, Host, Event } from '@stencil/core';
 import { DisplayType } from './interfaces';
 import CheckCircleIcon from '../../assets/svg/check.svg';
 import CameraIcon from '../../assets/svg/camera.svg';
+import FileIcon from '../../assets/svg/file-upload.svg';
 export class SallaProductOptions {
   constructor() {
+    this.fileTypes = {
+      pdf: 'application/pdf',
+      png: 'image/png',
+      jpg: 'image/jpeg',
+      word: 'application/msword',
+      exl: 'application/vnd.ms-excel',
+      txt: 'text/plain',
+    };
     this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
     this.donationAmount = salla.lang.get('pages.products.donation_amount');
     /**
@@ -39,10 +48,18 @@ export class SallaProductOptions {
     }
     this.itemsSelected.emit(multiSelectedItems);
   }
+  getLatLng(value, type) {
+    return value
+      ? value.split(',')[type == 'lat' ? 0 : 1]
+      : '';
+  }
   getDisplayForType(option) {
     if (this[`${option.type}Option`]) {
       return this[`${option.type}Option`](option);
     }
+    if (option.type === DisplayType.COLOR_PICKER) {
+      return this.colorPickerOption(option);
+    }
     if (option.type === DisplayType.MULTIPLE_OPTIONS) {
       return this.multipleOptions(option);
     }
@@ -66,7 +83,7 @@ export class SallaProductOptions {
       return;
     }
     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' ?
+      h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
         this.splitterOption()
         : h("div", { class: "s-product-options-option" },
           h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" },
@@ -83,33 +100,28 @@ export class SallaProductOptions {
       h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.donationMoneyEntered.emit(e) }),
       h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
   }
-  getFilepondPlaceholder() {
-    //todo:: add translatable string
-    return `<div class="s-product-options-filepond-placeholder"><span class="s-product-options-filepond-placeholder-icon">${CameraIcon}</span><p class="s-product-options-filepond-placeholder-text">اسحب او افلت الصورة هنا</p> <span class="filepond--label-action">او تصفح من جهازك</span></div>`;
-  }
-  handleOnImageRemoved(event) {
-    //todo:: add on remove from cartitem images
-    // use salla.url.is_page('cart')
-    // call salla.cart.api.deleteImage(file('id'))
-    //@ts-ignore
-    setTimeout(() => event.target.querySelector('.filepond--root').style.height = '120px', 1000);
-  }
-  handleOnImageUploaded(event) {
-    //todo:: fire imageUploaded from salla-product-options
-    event.target.querySelector('.filepond--data input[type="hidden"]').dispatchEvent(new window.Event('change', { bubbles: true }));
-  }
   //todo:: why we need this way, use the native way!!
   //@ts-ignore
   selectThumbnail(e, value) {
     this.thumbnailSelected.emit(e);
   }
+  fileUploader(option, additions = null) {
+    return h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, height: "120px", url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, class: { "s-product-options-image-input": true, required: option.required } }),
+      h("div", { class: "s-product-options-filepond-placeholder" },
+        h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions ? FileIcon : CameraIcon }),
+        h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')),
+        h("span", { class: "filepond--label-action" }, salla.lang.get('common.uploader.browse'))));
+  }
   //@ts-ignore
   imageOption(option) {
-    return h("salla-file-upload", { "instant-upload": true, name: `options[${option.id}]`, "payload-name": "file", "data-item-id": salla.url.is_page('cart') ? option.id : '', class: { "s-product-options-image-input": true, required: option.required }, labelIdle: this.getFilepondPlaceholder(), onRemoved: event => this.handleOnImageRemoved(event), onUploaded: event => this.handleOnImageUploaded(event), value: option.value, url: salla.cart.api.getUploadImageEndpoint(), "form-data": {
-        _token: salla.config.get('_token'),
-        cart_item_id: this.productId,
-        product_id: this.productId,
-      } });
+    return this.fileUploader(option);
+  }
+  //@ts-ignore
+  fileOption(option) {
+    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
+    return types.length
+      ? this.fileUploader(option, { accept: types.join(',') })
+      : 'File types not selected.';
   }
   //@ts-ignore
   numberOption(option) {
@@ -131,6 +143,13 @@ export class SallaProductOptions {
       h("div", { class: "mt-1" },
         h("textarea", { rows: 4, value: option.value, class: "s-form-control", required: option.required, id: `options[${option.id}]`, name: `options[${option.id}]`, placeholder: option.placeholder, onInput: (e) => this.textareaOptionEntered.emit(e) })));
   }
+  //@ts-ignore
+  mapOption(option) {
+    return h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: `options[${option.id}]`, searchable: true, required: option.required, onSelected: e => this.locationSelected.emit(e) });
+  }
+  colorPickerOption(option) {
+    return h("salla-color-picker", { onSubmitted: e => this.colorPicked.emit(e), name: `options[${option.id}]`, required: option.required, color: option.value || '#5dd5c4' });
+  }
   /**
    * ============= Date Time options =============
    */
@@ -411,6 +430,36 @@ export class SallaProductOptions {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "colorPicked",
+      "name": "colorPicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Color Picker option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "locationSelected",
+      "name": "locationSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Map (Location Selection) option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
 }

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

@@ -410,8 +410,8 @@ export class SallaSwiper {
     var _a, _b, _c, _d;
     let classes = this.type ? this.type + '-slider ' : '';
     classes += this.controlsOuter ? ' s-slider-controls-outer ' : '';
-    classes += this.blockTitle == '' ? ' s-slider-has-notitle ' : '';
-    classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal';
+    classes += this.blockTitle == '' ? ' s-slider-has-notitle s-slider-v-centered ' : '';
+    classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
     classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
     return (h(Host, { class: 's-slider-wrapper ' + classes },
       this.blockTitle || this.showControls ?