jsuites 4.9.21 → 4.9.25

package/compile.php

@@ -0,0 +1,86 @@
+<?php
+
+function g($type = '', $modules = null, $excluded = null) {
+if ($handle = opendir('src')) {
+    $js = '';
+    $wc = '';
+    $css = '';
+    while (false !== ($entry = readdir($handle))) {
+        if ($entry != "." && $entry != ".." && (! isset($modules) || in_array(substr($entry, 0, strpos($entry, '.')), $modules))  && (! isset($excluded) || ! in_array(substr($entry, 0, strpos($entry, '.')), $excluded))) {
+            echo $entry . "\n";
+            if (substr($entry, -3) == 'css') {
+                $css .= file_get_contents('src/'.$entry) . "\r\n\r\n";
+            } else if (substr($entry, -15) == 'webcomponent.js') {
+                $wc .= file_get_contents('src/'.$entry) . "\r\n\r\n";
+            } else {
+                $js .= file_get_contents('src/'.$entry) . "\r\n\r\n";
+            }
+        }
+    }
+    closedir($handle);
+
+    $js = "/**
+ * (c) jSuites Javascript Web Components
+ *
+ * Website: https://jsuites.net
+ * Description: Create amazing web based applications.
+ *
+ * MIT License
+ *
+ */
+;(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.jSuites = factory();
+}(this, (function () {
+
+    'use strict';
+
+$js
+
+    return jSuites;
+
+})));";
+
+$wc = "
+/**
+ * (c) jSuites Javascript Web Components
+ *
+ * Website: https://jsuites.net
+ * Description: Create amazing web based applications.
+ *
+ * MIT License
+ *
+ */
+
+$wc
+";
+
+    $css = "
+/**
+ * (c) jSuites Javascript Web Components
+ *
+ * Website: https://jsuites.net
+ * Description: Create amazing web based applications.
+ *
+ * MIT License
+ *
+ */
+
+$css
+";
+
+
+    file_put_contents("dist/jsuites{$type}.js", $js);
+    file_put_contents("dist/jsuites{$type}.css", $css);
+    if (! $type) {
+        file_put_contents('dist/jsuites.webcomponents.js', $wc);
+    }
+}
+}
+
+g('.basic', [ 'a', 'ajax', 'animation', 'calendar', 'color', 'contextmenu', 'dropdown', 'editor', 'image', 'helpers', 'lazyloading', 'loading', 'mask', 'notification', 'rating', 'tabs', 'toolbar', 'sorting', 'picker', 'palette' ]);
+g('.layout', [ 'layout', 'template', 'login', 'buttons', 'organogram', 'timeline', 'chat', 'menu', 'crop', 'signature', 'heatmap', 'player', 'floating' ]);
+g('', null, [ 'app', 'dialog', 'refresh', 'layout', 'template', 'login', 'buttons', 'organogram', 'timeline', 'chat', 'menu', 'crop', 'signature', 'heatmap', 'player', 'floating', 'progress' ]);
+
+echo "Done!\n";

package/dist/jsuites.basic.css

@@ -108,6 +108,28 @@ div[data-before]:before {
     position: relative;
 }
 
+.jphoto {
+    position: relative;
+    border: 1px dotted #eee;
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 100%;
+    min-height: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.jphoto:empty:before {
+    content: "\e2c3";
+    font-family: "Material Icons";
+    font-size: 90px;
+    color: #eee;
+    width: 100%;
+    height: 100%;
+}
+
 .jremove {
     opacity: 0.2;
     filter: alpha(opacity=20);
@@ -791,6 +813,7 @@ div[data-before]:before {
     cursor: default;
     font-size: 11px;
     font-family:sans-serif;
+    text-align: left;
 }
 
 .jcontextmenu > div::before {
@@ -1833,6 +1856,8 @@ div[data-before]:before {
 
 .jpicker-focus > .jpicker-content {
     display: block;
+    overflow-y: auto;
+    min-width: 100%;
 }
 
 .jpicker-content > div:hover {
@@ -1853,6 +1878,7 @@ div[data-before]:before {
     flex-wrap: wrap;
 }
 
+
 .jrating {
     display:flex;
 }

package/dist/jsuites.basic.js

@@ -17,7 +17,7 @@
 
 var jSuites = function(options) {
     var obj = {}
-    var version = '4.9.21';
+    var version = '4.9.22';
 
     var find = function(DOMElement, component) {
         if (DOMElement[component.type] && DOMElement[component.type] == component) {
@@ -231,7 +231,7 @@ jSuites.ajax = (function(options, complete) {
 
     if (options.data) {
         // Parse object to variables format
-        var parseData = function(value, key) {
+        var parseData = function (value, key) {
             var vars = [];
             var keys = Object.keys(value);
             if (keys.length) {
@@ -242,7 +242,9 @@ jSuites.ajax = (function(options, complete) {
                         var k = keys[i];
                     }
 
-                    if (typeof(value[keys[i]]) == 'object') {
+                    if (value[k] instanceof FileList) {
+                        vars[k] = value[keys[i]];
+                    } else if (typeof (value[keys[i]]) == 'object') {
                         var r = parseData(value[keys[i]], k);
                         var o = Object.keys(r);
                         for (var j = 0; j < o.length; j++) {
@@ -257,18 +259,21 @@ jSuites.ajax = (function(options, complete) {
             return vars;
         }
 
-        var data = [];
         var d = parseData(options.data);
         var k = Object.keys(d);
-        for (var i = 0; i < k.length; i++) {
-            data.push(k[i] + '=' + encodeURIComponent(d[k[i]]));
-        }
 
-        if (options.method == 'GET' && data.length > 0) {
-            if (options.url.indexOf('?') < 0) {
-                options.url += '?';
+        // Data form
+        var data = new FormData();
+        for (var i = 0; i < k.length; i++) {
+            if (d[k[i]] instanceof FileList) {
+                if (d[k[i]].length) {
+                    for (var j = 0; j < d[k[i]].length; j++) {
+                        data.append(k[i], d[k[i]][j], d[k[i]][j].name);
+                    }
+                }
+            } else {
+                data.append(k[i], d[k[i]]);
             }
-            options.url += data.join('&');
         }
     }
 
@@ -276,16 +281,25 @@ jSuites.ajax = (function(options, complete) {
     httpRequest.open(options.method, options.url, true);
     httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 
+    // Content type
+    if (options.contentType) {
+        httpRequest.setRequestHeader('Content-Type', options.contentType);
+    }
+
+    // Headers
     if (options.method == 'POST') {
         httpRequest.setRequestHeader('Accept', 'application/json');
-        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     } else {
-        if (options.dataType == 'json') {
-            httpRequest.setRequestHeader('Content-Type', 'text/json');
-        } else if (options.dataType == 'blob') {
+        if (options.dataType == 'blob') {
             httpRequest.responseType = "blob";
-        } else if (options.dataType == 'html') {
-            httpRequest.setRequestHeader('Content-Type', 'text/html');
+        } else {
+            if (! options.contentType) {
+                if (options.dataType == 'json') {
+                    httpRequest.setRequestHeader('Content-Type', 'text/json');
+                } else if (options.dataType == 'html') {
+                    httpRequest.setRequestHeader('Content-Type', 'text/html');
+                }
+            }
         }
     }
 
@@ -396,7 +410,11 @@ jSuites.ajax = (function(options, complete) {
 
 jSuites.ajax.send = function(httpRequest) {
     if (httpRequest.data) {
-        httpRequest.send(httpRequest.data.join('&'));
+        if (Array.isArray(httpRequest.data)) {
+            httpRequest.send(httpRequest.data.join('&'));
+        } else {
+            httpRequest.send(httpRequest.data);
+        }
     } else {
         httpRequest.send();
     }
@@ -2717,9 +2735,9 @@ jSuites.contextmenu = (function(el, options) {
                 itemContainer.addEventListener("mousedown", function(e) {
                     e.preventDefault();
                 });
-                itemContainer.addEventListener("mouseup", function() {
+                itemContainer.addEventListener("mouseup", function(e) {
                     // Execute method
-                    this.method(this);
+                    this.method(this, e);
                 });
             }
             itemContainer.appendChild(itemText);
@@ -3037,9 +3055,9 @@ jSuites.dropdown = (function(el, options) {
             onfocus: null,
             onblur: null,
             oninsert: null,
-            onbeforeinsert: null,
-            sortResults: false,
-            autofocus: false,
+            onbeforeinsert: null,
+            sortResults: false,
+            autofocus: false,
         }
 
         // Loop through our object
@@ -3352,7 +3370,7 @@ jSuites.dropdown = (function(el, options) {
     /**
      * Add a new item
      * @param {string} title - title of the new item
-     * @param {string} id - value/id of the new item
+     * @param {string} id - value/id of the new item
      */
     obj.add = function(title, id) {
         if (! title) {
@@ -3389,8 +3407,8 @@ jSuites.dropdown = (function(el, options) {
             } else if (ret) {
                 item = ret;
             }
-        }
-
+        }
+
         // Add item to the main list
         obj.options.data.push(item);
 
@@ -3465,11 +3483,11 @@ jSuites.dropdown = (function(el, options) {
             item.element.setAttribute('data-disabled', true);
         }
 
-        // Tooltip
-        if (data.tooltip) {
-            item.element.setAttribute('title', data.tooltip);
-        }
-
+        // Tooltip
+        if (data.tooltip) {
+            item.element.setAttribute('title', data.tooltip);
+        }
+
         // Image
         if (data.image) {
             var image = document.createElement('img');
@@ -3489,7 +3507,7 @@ jSuites.dropdown = (function(el, options) {
             if (data.color) {
                 icon.style.color = data.color;
             }
-            item.element.appendChild(icon);
+            item.element.appendChild(icon);
         } else if (data.color) {
             var color = document.createElement('div');
             color.className = 'jdropdown-color';
@@ -4381,25 +4399,25 @@ jSuites.dropdown = (function(el, options) {
 jSuites.dropdown.keydown = function(e) {
     var dropdown = null;
     if (dropdown = jSuites.dropdown.current) {
-        if (e.which == 13 || e.which == 9) {  // enter or tab
-            if (dropdown.header.value && dropdown.currentIndex == null && dropdown.options.newOptions) {
-                // if they typed something in, but it matched nothing, and newOptions are allowed, start that flow
-                dropdown.add();
-            } else {
+        if (e.which == 13 || e.which == 9) {  // enter or tab
+            if (dropdown.header.value && dropdown.currentIndex == null && dropdown.options.newOptions) {
+                // if they typed something in, but it matched nothing, and newOptions are allowed, start that flow
+                dropdown.add();
+            } else {
                 // Quick Select/Filter
                 if (dropdown.currentIndex == null && dropdown.options.autocomplete == true && dropdown.header.value != "") {
                     dropdown.find(dropdown.header.value);
                 }
                 dropdown.selectIndex(dropdown.currentIndex);
-            }
-        } else if (e.which == 38) {  // up arrow
+            }
+        } else if (e.which == 38) {  // up arrow
             if (dropdown.currentIndex == null) {
                 dropdown.first();
             } else if (dropdown.currentIndex > 0) {
                 dropdown.prev();
             }
             e.preventDefault();
-        } else if (e.which == 40) {  // down arrow
+        } else if (e.which == 40) {  // down arrow
             if (dropdown.currentIndex == null) {
                 dropdown.first();
             } else if (dropdown.currentIndex + 1 < dropdown.items.length) {
@@ -6689,10 +6707,10 @@ jSuites.mask = (function() {
                     } else {
                         // Did not find any decimal last resort the default
                         var e = new RegExp('#,##', 'ig');
-                        if ((v && v.match(e)) || '1.1'.toLocaleString().substring(1,2) == '.') {
-                            this.options.decimal = '.';
-                        } else {
+                        if ((v && v.match(e)) || '1.1'.toLocaleString().substring(1,2) == ',') {
                             this.options.decimal = ',';
+                        } else {
+                            this.options.decimal = '.';
                         }
                     }
                 }
@@ -6745,10 +6763,7 @@ jSuites.mask = (function() {
         // Get decimal
         var d = getDecimal.call(this);
         // Convert value
-        var o = Object.create(this.options || {});
-        if (! o.minimumFractionDigits) {
-            o.minimumFractionDigits = 1;
-        }
+        var o = this.options;
         // Parse value
         v = ParseValue.call(this, v);
         if (v == '') {
@@ -6765,10 +6780,13 @@ jSuites.mask = (function() {
         }
         var n = new Intl.NumberFormat(this.locale, o).format(t);
         n = n.split(d);
-        var s = n[1].replace(/[0-9]*/g, '');
-        if (s) {
-            n[2] = s;
+        if (typeof(n[1]) !== 'undefined') {
+            var s = n[1].replace(/[0-9]*/g, '');
+            if (s) {
+                n[2] = s;
+            }
         }
+
         if (v[1] !== undefined) {
             n[1] = d + v[1];
         } else {
@@ -7841,18 +7859,31 @@ jSuites.mask = (function() {
                         d = d[0].length - 2;
                         t = value.toFixed(d);
                     } else {
-                        t = (''+value);
+                        t = value.toFixed(0);
                     }
                 } else if (options.locale && fullMask) {
+                    // Append zeros 
                     var d = (''+value).split('.');
-                    if (! d[1]) {
-                        d[1] = '00';
-                    } else {
-                        if (d[1].length == 1) {
-                            d[1] += '0';
+                    if (options.options) {
+                        if (typeof(d[1]) === 'undefined') {
+                            d[1] = '';
                         }
+                        var len = d[1].length;
+                        if (options.options.minimumFractionDigits > len) {
+                            for (var i = 0; i < options.options.minimumFractionDigits - len; i++) {
+                                d[1] += '0';
+                            }
+                        }
+                    }
+                    if (! d[1].length) {
+                        t = d[0]
+                    } else {
+                        t = d.join('.');
+                    }
+                    var len = d[1].length;
+                    if (options.options && options.options.maximumFractionDigits < len) {
+                        t = parseFloat(t).toFixed(options.options.maximumFractionDigits);
                     }
-                    t = d.join('.');
                 } else {
                     t = toPlainString(value);
                 }
@@ -8051,40 +8082,45 @@ jSuites.notification.isVisible = function() {
 }
 
 // More palettes https://coolors.co/ or https://gka.github.io/palettes/#/10|s|003790,005647,ffffe0|ffffe0,ff005e,93003a|1|1
-
-jSuites.palette = function(o) {
-    // Material
-    var palette = {};
-
-    palette.material = [
-        [ "#ffebee", "#fce4ec", "#f3e5f5", "#e8eaf6", "#e3f2fd", "#e0f7fa", "#e0f2f1", "#e8f5e9", "#f1f8e9", "#f9fbe7", "#fffde7", "#fff8e1", "#fff3e0", "#fbe9e7", "#efebe9", "#fafafa", "#eceff1" ],
-        [ "#ffcdd2", "#f8bbd0", "#e1bee7", "#c5cae9", "#bbdefb", "#b2ebf2", "#b2dfdb", "#c8e6c9", "#dcedc8", "#f0f4c3", "#fff9c4", "#ffecb3", "#ffe0b2", "#ffccbc", "#d7ccc8", "#f5f5f5", "#cfd8dc" ],
-        [ "#ef9a9a", "#f48fb1", "#ce93d8", "#9fa8da", "#90caf9", "#80deea", "#80cbc4", "#a5d6a7", "#c5e1a5", "#e6ee9c", "#fff59d", "#ffe082", "#ffcc80", "#ffab91", "#bcaaa4", "#eeeeee", "#b0bec5" ],
-        [ "#e57373", "#f06292", "#ba68c8", "#7986cb", "#64b5f6", "#4dd0e1", "#4db6ac", "#81c784", "#aed581", "#dce775", "#fff176", "#ffd54f", "#ffb74d", "#ff8a65", "#a1887f", "#e0e0e0", "#90a4ae" ],
-        [ "#ef5350", "#ec407a", "#ab47bc", "#5c6bc0", "#42a5f5", "#26c6da", "#26a69a", "#66bb6a", "#9ccc65", "#d4e157", "#ffee58", "#ffca28", "#ffa726", "#ff7043", "#8d6e63", "#bdbdbd", "#78909c" ],
-        [ "#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#2196f3", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e", "#607d8b" ],
-        [ "#e53935", "#d81b60", "#8e24aa", "#3949ab", "#1e88e5", "#00acc1", "#00897b", "#43a047", "#7cb342", "#c0ca33", "#fdd835", "#ffb300", "#fb8c00", "#f4511e", "#6d4c41", "#757575", "#546e7a" ],
-        [ "#d32f2f", "#c2185b", "#7b1fa2", "#303f9f", "#1976d2", "#0097a7", "#00796b", "#388e3c", "#689f38", "#afb42b", "#fbc02d", "#ffa000", "#f57c00", "#e64a19", "#5d4037", "#616161", "#455a64" ],
-        [ "#c62828", "#ad1457", "#6a1b9a", "#283593", "#1565c0", "#00838f", "#00695c", "#2e7d32", "#558b2f", "#9e9d24", "#f9a825", "#ff8f00", "#ef6c00", "#d84315", "#4e342e", "#424242", "#37474f" ],
-        [ "#b71c1c", "#880e4f", "#4a148c", "#1a237e", "#0d47a1", "#006064", "#004d40", "#1b5e20", "#33691e", "#827717", "#f57f17", "#ff6f00", "#e65100", "#bf360c", "#3e2723", "#212121", "#263238" ],
-    ];
-
-    palette.fire = [
-        ["0b1a6d","840f38","b60718","de030b","ff0c0c","fd491c","fc7521","faa331","fbb535","ffc73a"],
-        ["071147","5f0b28","930513","be0309","ef0000","fa3403","fb670b","f9991b","faad1e","ffc123"],
-        ["03071e","370617","6a040f","9d0208","d00000","dc2f02","e85d04","f48c06","faa307","ffba08"],
-        ["020619","320615","61040d","8c0207","bc0000","c82a02","d05203","db7f06","e19405","efab00"],
-        ["020515","2d0513","58040c","7f0206","aa0000","b62602","b94903","c57205","ca8504","d89b00"],
-    ]
-
-    palette.baby = [
-        ["eddcd2","fff1e6","fde2e4","fad2e1","c5dedd","dbe7e4","f0efeb","d6e2e9","bcd4e6","99c1de"],
-        ["e1c4b3","ffd5b5","fab6ba","f5a8c4","aacecd","bfd5cf","dbd9d0","baceda","9dc0db","7eb1d5"],
-        ["daa990","ffb787","f88e95","f282a9","8fc4c3","a3c8be","cec9b3","9dbcce","82acd2","649dcb"],
-        ["d69070","ff9c5e","f66770","f05f8f","74bbb9","87bfae","c5b993","83aac3","699bca","4d89c2"],
-        ["c97d5d","f58443","eb4d57","e54a7b","66a9a7","78ae9c","b5a67e","7599b1","5c88b7","4978aa"],
-    ]
-
+jSuites.palette = function(o, v) {
+    var palette = {
+        material: [
+            [ "#ffebee", "#fce4ec", "#f3e5f5", "#e8eaf6", "#e3f2fd", "#e0f7fa", "#e0f2f1", "#e8f5e9", "#f1f8e9", "#f9fbe7", "#fffde7", "#fff8e1", "#fff3e0", "#fbe9e7", "#efebe9", "#fafafa", "#eceff1" ],
+            [ "#ffcdd2", "#f8bbd0", "#e1bee7", "#c5cae9", "#bbdefb", "#b2ebf2", "#b2dfdb", "#c8e6c9", "#dcedc8", "#f0f4c3", "#fff9c4", "#ffecb3", "#ffe0b2", "#ffccbc", "#d7ccc8", "#f5f5f5", "#cfd8dc" ],
+            [ "#ef9a9a", "#f48fb1", "#ce93d8", "#9fa8da", "#90caf9", "#80deea", "#80cbc4", "#a5d6a7", "#c5e1a5", "#e6ee9c", "#fff59d", "#ffe082", "#ffcc80", "#ffab91", "#bcaaa4", "#eeeeee", "#b0bec5" ],
+            [ "#e57373", "#f06292", "#ba68c8", "#7986cb", "#64b5f6", "#4dd0e1", "#4db6ac", "#81c784", "#aed581", "#dce775", "#fff176", "#ffd54f", "#ffb74d", "#ff8a65", "#a1887f", "#e0e0e0", "#90a4ae" ],
+            [ "#ef5350", "#ec407a", "#ab47bc", "#5c6bc0", "#42a5f5", "#26c6da", "#26a69a", "#66bb6a", "#9ccc65", "#d4e157", "#ffee58", "#ffca28", "#ffa726", "#ff7043", "#8d6e63", "#bdbdbd", "#78909c" ],
+            [ "#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#2196f3", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e", "#607d8b" ],
+            [ "#e53935", "#d81b60", "#8e24aa", "#3949ab", "#1e88e5", "#00acc1", "#00897b", "#43a047", "#7cb342", "#c0ca33", "#fdd835", "#ffb300", "#fb8c00", "#f4511e", "#6d4c41", "#757575", "#546e7a" ],
+            [ "#d32f2f", "#c2185b", "#7b1fa2", "#303f9f", "#1976d2", "#0097a7", "#00796b", "#388e3c", "#689f38", "#afb42b", "#fbc02d", "#ffa000", "#f57c00", "#e64a19", "#5d4037", "#616161", "#455a64" ],
+            [ "#c62828", "#ad1457", "#6a1b9a", "#283593", "#1565c0", "#00838f", "#00695c", "#2e7d32", "#558b2f", "#9e9d24", "#f9a825", "#ff8f00", "#ef6c00", "#d84315", "#4e342e", "#424242", "#37474f" ],
+            [ "#b71c1c", "#880e4f", "#4a148c", "#1a237e", "#0d47a1", "#006064", "#004d40", "#1b5e20", "#33691e", "#827717", "#f57f17", "#ff6f00", "#e65100", "#bf360c", "#3e2723", "#212121", "#263238" ],
+        ],
+        fire: [
+            ["0b1a6d","840f38","b60718","de030b","ff0c0c","fd491c","fc7521","faa331","fbb535","ffc73a"],
+            ["071147","5f0b28","930513","be0309","ef0000","fa3403","fb670b","f9991b","faad1e","ffc123"],
+            ["03071e","370617","6a040f","9d0208","d00000","dc2f02","e85d04","f48c06","faa307","ffba08"],
+            ["020619","320615","61040d","8c0207","bc0000","c82a02","d05203","db7f06","e19405","efab00"],
+            ["020515","2d0513","58040c","7f0206","aa0000","b62602","b94903","c57205","ca8504","d89b00"],
+        ],
+        baby: [
+            ["eddcd2","fff1e6","fde2e4","fad2e1","c5dedd","dbe7e4","f0efeb","d6e2e9","bcd4e6","99c1de"],
+            ["e1c4b3","ffd5b5","fab6ba","f5a8c4","aacecd","bfd5cf","dbd9d0","baceda","9dc0db","7eb1d5"],
+            ["daa990","ffb787","f88e95","f282a9","8fc4c3","a3c8be","cec9b3","9dbcce","82acd2","649dcb"],
+            ["d69070","ff9c5e","f66770","f05f8f","74bbb9","87bfae","c5b993","83aac3","699bca","4d89c2"],
+            ["c97d5d","f58443","eb4d57","e54a7b","66a9a7","78ae9c","b5a67e","7599b1","5c88b7","4978aa"],
+        ],
+        chart: [
+            ['#C1D37F','#4C5454','#FFD275','#66586F','#D05D5B','#C96480','#95BF8F','#6EA240','#0F0F0E','#EB8258','#95A3B3','#995D81'],
+        ],
+    }
+
+    // Is defined, set new palette value
+    if (typeof(v) !== 'undefined') {
+        palette[o] = v;
+    }
+
+    // Otherwise get palette value
     if (palette[o]) {
         return palette[o];
     } else {
@@ -8092,6 +8128,7 @@ jSuites.palette = function(o) {
     }
 }
 
+
 jSuites.picker = (function(el, options) {
     // Already created, update options
     if (el.picker) {

package/dist/jsuites.css

@@ -108,6 +108,28 @@ div[data-before]:before {
     position: relative;
 }
 
+.jphoto {
+    position: relative;
+    border: 1px dotted #eee;
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 100%;
+    min-height: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.jphoto:empty:before {
+    content: "\e2c3";
+    font-family: "Material Icons";
+    font-size: 90px;
+    color: #eee;
+    width: 100%;
+    height: 100%;
+}
+
 .jremove {
     opacity: 0.2;
     filter: alpha(opacity=20);
@@ -791,6 +813,7 @@ div[data-before]:before {
     cursor: default;
     font-size: 11px;
     font-family:sans-serif;
+    text-align: left;
 }
 
 .jcontextmenu > div::before {
@@ -1925,6 +1948,8 @@ div[data-before]:before {
 
 .jpicker-focus > .jpicker-content {
     display: block;
+    overflow-y: auto;
+    min-width: 100%;
 }
 
 .jpicker-content > div:hover {
@@ -1946,6 +1971,7 @@ div[data-before]:before {
 }
 
 
+
 .jprogressbar
 {
     cursor:pointer;