@salla.sa/twilight-components 2.11.8 → 2.11.10

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

@@ -18,6 +18,9 @@ export var DisplayType;
   DisplayType["TIME"] = "time";
   DisplayType["RADIO"] = "radio";
   DisplayType["CHECKBOX"] = "checkbox";
+  DisplayType["MAP"] = "map";
+  DisplayType["FILE"] = "file";
+  DisplayType["COLOR_PICKER"] = "color_picker";
 })(DisplayType || (DisplayType = {}));
 export var Currency;
 (function (Currency) {

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);
     }
@@ -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

@@ -26,6 +26,10 @@ export class SallaSwiper {
      * Show/hide display all button beside arrows
      */
     this.displayAllUrl = '';
+    /**
+     * Show/hide display all button beside arrows
+     */
+    this.arrowsCentered = false;
     /**
      * Vertical or Horizontal thumbs slider
      */
@@ -113,9 +117,6 @@ export class SallaSwiper {
       fullwidth: {
         speed: 750,
         parallax: true,
-        autoplay: {
-          delay: 5000,
-        },
       },
       fullscreen: {
         speed: 1000,
@@ -308,7 +309,7 @@ export class SallaSwiper {
   getSwiperConfig() {
     let pre_defined_config = {
       loop: this.loop,
-      autoplay: this.autoPlay,
+      autoplay: this.type == 'fullwidth' && !!this.autoPlay ? { delay: 5000 } : this.autoPlay,
       centeredSlides: this.centered,
       slidesPerView: this.slidesPerView,
       autoHeight: this.autoHeight,
@@ -410,7 +411,8 @@ export class SallaSwiper {
     let classes = this.type ? this.type + '-slider ' : '';
     classes += this.controlsOuter ? ' s-slider-controls-outer ' : '';
     classes += this.blockTitle == '' ? ' s-slider-has-notitle s-slider-v-centered ' : '';
-    classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal';
+    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 ?
         h("div", { class: "s-slider-block__title" },
@@ -524,6 +526,24 @@ export class SallaSwiper {
       "reflect": true,
       "defaultValue": "''"
     },
+    "arrowsCentered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show/hide display all button beside arrows"
+      },
+      "attribute": "arrows-centered",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "verticalThumbs": {
       "type": "boolean",
       "mutable": false,
@@ -726,8 +746,8 @@ export class SallaSwiper {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'carousel' | 'fullscreen' | 'thumbs' | 'default' | 'hero' | 'testimonials' | 'blog' | ''",
-        "resolved": "\"\" | \"blog\" | \"carousel\" | \"default\" | \"fullscreen\" | \"hero\" | \"testimonials\" | \"thumbs\"",
+        "original": "'carousel' | 'fullscreen' | 'thumbs' | 'default' | 'hero' | 'testimonials' | 'blog' | 'fullwidth' | ''",
+        "resolved": "\"\" | \"blog\" | \"carousel\" | \"default\" | \"fullscreen\" | \"fullwidth\" | \"hero\" | \"testimonials\" | \"thumbs\"",
         "references": {}
       },
       "required": false,