@salla.sa/twilight-components 2.11.9 → 2.11.10

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -6,6 +6,14 @@ import Picker from 'vanilla-picker';
 import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
 export class SallaColorPicker {
   constructor() {
+    /**
+     * File input name for the native formData
+     */
+    this.name = 'color';
+    /**
+     * Set if the color picker input is required or not
+     */
+    this.required = false;
     /**
      * Initial color for the picker.
      */
@@ -29,11 +37,14 @@ export class SallaColorPicker {
     this.enableAlpha = false;
   }
   colorChangeHandler(color) {
+    this.colorInput.value = color.hex;
     this.colorChanged.emit(color);
   }
   submittedHandler(color) {
     this.setColorValue(color.rgbaString, true);
     this.canvas.style.backgroundColor = color.rgbString;
+    this.colorInput.value = color.hex;
+    this.colorInput.dispatchEvent(new window.Event('change', { bubbles: true }));
     this.submitted.emit(color);
   }
   popupOpenedHandler(color) {
@@ -139,7 +150,8 @@ export class SallaColorPicker {
       h("slot", null,
         h("div", { class: "s-color-picker-widget" },
           h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }),
-          h("span", { innerHTML: ArrowDown })))));
+          h("span", { innerHTML: ArrowDown }))),
+      h("input", { type: "hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
   }
   static get is() { return "salla-color-picker"; }
   static get originalStyleUrls() { return {
@@ -149,6 +161,42 @@ export class SallaColorPicker {
     "$": ["salla-color-picker.css"]
   }; }
   static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "File input name for the native formData"
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "'color'"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set if the color picker input is required or not"
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "color": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Prop, State, h, Element, Host, Event, Method } from '@stencil/core';
+import { Component, Prop, h, Element, Host, Event, Method } from '@stencil/core';
 import * as FilePond from 'filepond';
 import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
@@ -15,6 +15,10 @@ export class SallaFileUpload {
      * Set the component to be profile image uploader with a preview and a circular shape
      */
     this.profileImage = false;
+    /**
+     * Accepted file types
+     */
+    this.accept = "image/png, image/jpeg, image/jpg, image/gif, video/*";
     /**
      * The submit request method.
      */
@@ -107,32 +111,6 @@ export class SallaFileUpload {
      * The icon used for undo actions
      */
     this.iconUndo = '<svg>...</svg>';
-    /// STATES
-    /**
-     * //todo:: drop all of there and set them directly @see how we set `labelFileTypeNotAllowed`
-     * Translations
-     */
-    this.labelInvalidField = salla.lang.get("common.uploader.invalid_field");
-    this.labelFileWaitingForSize = salla.lang.get('common.uploader.waiting_file_info');
-    this.labelFileSizeNotAvailable = salla.lang.get('common.uploader.size_not_available');
-    this.labelFileLoading = salla.lang.get('common.elements.loading');
-    this.labelFileLoadError = salla.lang.get('common.uploader.failed_to_load');
-    this.labelFileProcessing = salla.lang.get('common.uploader.uploading');
-    this.labelFileProcessingComplete = salla.lang.get('common.uploader.upload_completed');
-    this.labelFileProcessingAborted = salla.lang.get('common.uploader.upload_cancelled');
-    this.labelFileProcessingError = salla.lang.get('common.uploader.error_uploading');
-    this.labelFileProcessingRevertError = salla.lang.get('common.uploader.error_reverting');
-    this.labelFileRemoveError = salla.lang.get('common.uploader.error_removing');
-    this.labelTapToCancel = salla.lang.get("common.elements.cancel");
-    this.labelTapToRetry = salla.lang.get("common.elements.retry");
-    this.labelTapToUndo = salla.lang.get("common.uploader.revert");
-    this.labelButtonRemoveItem = salla.lang.get("common.elements.remove");
-    this.labelButtonAbortItemLoad = salla.lang.get("common.elements.abort");
-    this.labelButtonRetryItemLoad = salla.lang.get("common.elements.retry");
-    this.labelButtonAbortItemProcessing = salla.lang.get("common.uploader.abort_upload");
-    this.labelButtonUndoItemProcessing = salla.lang.get("common.elements.undo");
-    this.labelButtonRetryItemProcessing = `${salla.lang.get("common.elements.retry")} ${salla.lang.get("common.uploader.upload")}`;
-    this.labelButtonProcessItem = salla.lang.get("common.uploader.upload");
     FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginImageExifOrientation, FilePondPluginFileValidateSize, FilePondPluginImageEdit, FilePondPluginFileValidateType, FilePondPluginFilePoster);
     //if cartItemIdIsPassed, we need to set the url
     if (!this.url && this.cartItemId) {
@@ -149,30 +127,21 @@ export class SallaFileUpload {
     }
     salla.lang.onLoaded(() => {
       this.host.querySelectorAll('.filepond--drop-label>label').forEach(label => label.innerHTML = this.getLabel());
-      this.labelInvalidField = salla.lang.get("common.uploader.invalid_field");
-      this.labelFileWaitingForSize = salla.lang.get('common.uploader.waiting_file_info');
-      this.labelFileSizeNotAvailable = salla.lang.get('common.uploader.size_not_available');
-      this.labelFileLoading = salla.lang.get('common.elements.loading');
-      this.labelFileLoadError = salla.lang.get('common.uploader.failed_to_load');
-      this.labelFileProcessing = salla.lang.get('common.uploader.uploading');
-      this.labelFileProcessingComplete = salla.lang.get('common.uploader.upload_completed');
-      this.labelFileProcessingAborted = salla.lang.get('common.uploader.upload_cancelled');
-      this.labelFileProcessingError = salla.lang.get('common.uploader.error_uploading');
-      this.labelFileProcessingRevertError = salla.lang.get('common.uploader.error_reverting');
-      this.labelFileRemoveError = salla.lang.get('common.uploader.error_removing');
-      this.labelTapToCancel = salla.lang.get("common.elements.cancel");
-      this.labelTapToRetry = salla.lang.get("common.elements.retry");
-      this.labelTapToUndo = salla.lang.get("common.uploader.revert");
-      this.labelButtonRemoveItem = salla.lang.get("common.elements.remove");
-      this.labelButtonAbortItemLoad = salla.lang.get("common.elements.abort");
-      this.labelButtonRetryItemLoad = salla.lang.get("common.elements.retry");
-      this.labelButtonAbortItemProcessing = salla.lang.get("common.uploader.abort_upload");
-      this.labelButtonUndoItemProcessing = salla.lang.get("common.elements.undo");
-      this.labelButtonRetryItemProcessing = `${salla.lang.get("common.elements.retry")} ${salla.lang.get("common.uploader.upload")}`;
-      this.labelButtonProcessItem = salla.lang.get("common.uploader.upload");
       if (this.filepond) {
         this.filepond.labelFileTypeNotAllowed = salla.lang.get('common.uploader.invalid_type');
         this.filepond.labelMaxFileSizeExceeded = salla.lang.get('common.uploader.too_large');
+        this.filepond.labelFileSizeNotAvailable = salla.lang.get('common.uploader.size_not_available');
+        this.filepond.labelFileLoading = salla.lang.get('common.elements.loading');
+        this.filepond.labelFileLoadError = salla.lang.get('common.uploader.failed_to_load');
+        this.filepond.labelFileProcessing = salla.lang.get('common.uploader.uploading');
+        this.filepond.labelFileProcessingComplete = salla.lang.get('common.uploader.upload_completed');
+        this.filepond.labelFileProcessingAborted = salla.lang.get('common.uploader.upload_cancelled');
+        this.filepond.labelFileProcessingError = salla.lang.get('common.uploader.error_uploading');
+        this.filepond.labelTapToCancel = salla.lang.get("common.elements.cancel");
+        this.filepond.labelTapToRetry = salla.lang.get("common.elements.retry");
+        this.filepond.labelButtonRemoveItem = salla.lang.get("common.elements.remove");
+        this.filepond.labelButtonUndoItemProcessing = salla.lang.get("common.elements.undo");
+        this.filepond.labelButtonProcessItem = salla.lang.get("common.uploader.upload");
       }
     });
   }
@@ -188,11 +157,13 @@ export class SallaFileUpload {
     container.items.add(file.file);
     fileInput.type = 'file';
     fileInput.files = container.files;
+    fileInput.dispatchEvent(new window.Event('change', { bubbles: true }));
   }
   uploadedHandler() {
     let fileInput = this.getFormDataFileInput();
     fileInput.type = 'hidden';
     fileInput.value = this.value;
+    fileInput.dispatchEvent(new window.Event('change', { bubbles: true }));
     return this.uploaded.emit(this.value);
   }
   removedHandler(deletedFile) {
@@ -202,6 +173,10 @@ export class SallaFileUpload {
     if (deletedFile.getMetadata('id')) {
       salla.cart.api.deleteImage(deletedFile.getMetadata('id'));
     }
+    if (this.height) {
+      setTimeout(() => this.host.querySelector('.filepond--root').style.height = this.height, 1000);
+    }
+    fileInput.dispatchEvent(new window.Event('change', { bubbles: true }));
     return this.removed.emit(deletedFile);
   }
   async setOption(key, value) {
@@ -248,16 +223,18 @@ export class SallaFileUpload {
     }
     return [];
   }
-  render() {
+  componentWillLoad() {
     if (!this.labelIdle) {
       this.labelIdle = this.host.innerHTML;
       this.host.innerHTML = '';
     }
+  }
+  render() {
     return (h(Host, { class: {
         "s-file-upload": true,
         "s-file-upload-profile-image": this.profileImage,
       } },
-      h("input", { type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
+      h("input", { type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept })));
   }
   componentDidLoad() {
     let files = this.getFiles();
@@ -337,10 +314,7 @@ export class SallaFileUpload {
       labelDecimalSeparator: this.labelDecimalSeparator,
       labelThousandsSeparator: this.labelThousandsSeparator,
       labelIdle: this.getLabel(),
-      //todo:: pass support types from props
-      acceptedFileTypes: ['image/jpg', 'image/png', 'image/jpeg', 'image/gif', 'video/*'],
-      labelInvalidField: this.labelInvalidField,
-      labelFileWaitingForSize: this.labelFileWaitingForSize,
+      acceptedFileTypes: this.accept.replace(/\s+/g, '').split(','),
       labelFileTypeNotAllowed: salla.lang.get('common.uploader.invalid_type'),
       fileValidateTypeLabelExpectedTypes: '{allButLastType}, {lastType}',
       labelMaxFileSizeExceeded: salla.lang.get('common.uploader.too_large'),
@@ -395,6 +369,23 @@ export class SallaFileUpload {
       "attribute": "files",
       "reflect": true
     },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The original height of the uploader, will be used to reset the height after the image is removed."
+      },
+      "attribute": "height",
+      "reflect": true
+    },
     "cartItemId": {
       "type": "string",
       "mutable": false,
@@ -464,6 +455,24 @@ export class SallaFileUpload {
       "attribute": "payload-name",
       "reflect": false
     },
+    "accept": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Accepted file types"
+      },
+      "attribute": "accept",
+      "reflect": false,
+      "defaultValue": "\"image/png, image/jpeg, image/jpg, image/gif, video/*\""
+    },
     "fileId": {
       "type": "number",
       "mutable": false,
@@ -1088,7 +1097,7 @@ export class SallaFileUpload {
     },
     "labelIdle": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -1179,29 +1188,6 @@ export class SallaFileUpload {
       "defaultValue": "'<svg>...</svg>'"
     }
   }; }
-  static get states() { return {
-    "labelInvalidField": {},
-    "labelFileWaitingForSize": {},
-    "labelFileSizeNotAvailable": {},
-    "labelFileLoading": {},
-    "labelFileLoadError": {},
-    "labelFileProcessing": {},
-    "labelFileProcessingComplete": {},
-    "labelFileProcessingAborted": {},
-    "labelFileProcessingError": {},
-    "labelFileProcessingRevertError": {},
-    "labelFileRemoveError": {},
-    "labelTapToCancel": {},
-    "labelTapToRetry": {},
-    "labelTapToUndo": {},
-    "labelButtonRemoveItem": {},
-    "labelButtonAbortItemLoad": {},
-    "labelButtonRetryItemLoad": {},
-    "labelButtonAbortItemProcessing": {},
-    "labelButtonUndoItemProcessing": {},
-    "labelButtonRetryItemProcessing": {},
-    "labelButtonProcessItem": {}
-  }; }
   static get events() { return [{
       "method": "added",
       "name": "added",

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

@@ -11,6 +11,8 @@ import styles from './map-styles';
 import { Loader } from 'google-maps';
 export class SallaMap {
   constructor() {
+    this.defaultLat = 21.419421; //Mecca 🕋
+    this.defaultLng = 39.82553; //Mecca 🕋
     // state variables
     this.modalActivityTitle = 'Activity Location';
     this.confirmButtonTitle = 'Confirm';
@@ -19,21 +21,21 @@ export class SallaMap {
     this.searchInputValue = null;
     this.geolocationError = false;
     /**
-     * Disable or enable actions
+     * File input name for the native formData
      */
-    this.readonly = false;
+    this.name = 'location';
     /**
-     * Sets the search bar visibility.
+     * Set if the location input is required or not
      */
-    this.searchable = false;
+    this.required = false;
     /**
-     * Latitude coordinate, defaults to Mecca 🕋 ❤️
+     * Disable or enable actions
      */
-    this.lat = 21.419421;
+    this.readonly = false;
     /**
-     * Longitude coordinate, defaults to Mecca 🕋 ❤️
+     * Sets the search bar visibility.
      */
-    this.lng = 39.82553;
+    this.searchable = false;
     /**
      * Sets google api key value
      */
@@ -78,10 +80,10 @@ export class SallaMap {
     const loader = new Loader(this.apiKey, options);
     loader.load().then(google => {
       this.map = new google.maps.Map(mapDOM, {
-        center: {
+        center: (this.lat || this.lng) ? {
           lat: this.lat,
           lng: this.lng,
-        },
+        } : null,
         zoom: this.zoom,
         zoomControl: true,
         mapTypeControl: false,
@@ -132,7 +134,7 @@ export class SallaMap {
           address: this.searchInputValue ? this.searchInputValue : null,
         });
       });
-      if (!this.host.hasAttribute('lat') && !this.host.hasAttribute('lng')) {
+      if (this.lat == this.defaultLat && this.lng == this.defaultLng) {
         this.getCurrentLocation();
         if (this.geolocationError) {
           this.map.setCenter({
@@ -223,8 +225,10 @@ export class SallaMap {
                   lng: this.lng,
                   address: this.searchInputValue ? this.searchInputValue : null,
                 };
+                this.mapInput.value = `${points.lat}, ${points.lng}`;
                 salla.event.emit('salla-map::selected', points);
                 this.selected.emit(points);
+                this.mapInput.dispatchEvent(new window.Event('change', { bubbles: true }));
                 this.locationModal.close();
               } }, this.confirmButtonTitle)
           ])));
@@ -243,7 +247,8 @@ export class SallaMap {
           this.searchInputValue ? (h("div", null,
             this.locateButtonEdit,
             " | ",
-            this.formatAddress(this.searchInputValue))) : (this.locateButtonTitle)))));
+            this.formatAddress(this.searchInputValue))) : (this.locateButtonTitle))),
+      h("input", { type: "hidden", name: this.name, required: this.required, value: `${this.lat}, ${this.lng}`, ref: color => this.mapInput = color })));
   }
   static get is() { return "salla-map"; }
   static get originalStyleUrls() { return {
@@ -253,6 +258,42 @@ export class SallaMap {
     "$": ["salla-map.css"]
   }; }
   static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "File input name for the native formData"
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "'location'"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set if the location input is required or not"
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "readonly": {
       "type": "boolean",
       "mutable": false,
@@ -301,11 +342,10 @@ export class SallaMap {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Latitude coordinate, defaults to Mecca \uD83D\uDD4B \u2764\uFE0F"
+        "text": "Latitude coordinate, defaults to current user location"
       },
       "attribute": "lat",
-      "reflect": false,
-      "defaultValue": "21.419421"
+      "reflect": false
     },
     "lng": {
       "type": "number",
@@ -319,11 +359,10 @@ export class SallaMap {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Longitude coordinate, defaults to Mecca \uD83D\uDD4B \u2764\uFE0F"
+        "text": "Longitude coordinate, defaults to current user location"
       },
       "attribute": "lng",
-      "reflect": false,
-      "defaultValue": "39.82553"
+      "reflect": false
     },
     "apiKey": {
       "type": "string",
@@ -406,6 +445,7 @@ export class SallaMap {
     "searchInputValue": {},
     "geolocationError": {},
     "searchInput": {},
+    "mapInput": {},
     "mapElement": {}
   }; }
   static get events() { return [{

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

@@ -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 ?