jsuites 4.11.5 → 4.12.2

package/dist/jsuites.basic.css

@@ -57,6 +57,10 @@ div[data-before]:before {
     right: 5px;
 }
 
+.jupload:empty:before {
+    z-index: 0;
+}
+
 .jupload img {
     width: 100%;
 } 
@@ -139,7 +143,35 @@ div[data-before]:before {
     border-radius: 1000px;
 }
 
+.jtooltip {
+    position: fixed;
+    top: 10px;
+    left: 10px;
 
+    z-index: 5;
+    font-family: initial;
+    font-size: 12px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid black;
+    padding: 8px;
+
+    display: block;
+    animation: fadeIn 0.5s
+}
+
+.jtooltip:empty {
+    display: none;
+}
+
+@keyframes fadeIn {
+     0% {
+          opacity: 0;
+     }
+     100% {
+          opacity: 1;
+     }
+}
 
 /** Animations **/
 .fade-in {
@@ -821,22 +853,15 @@ div[data-before]:before {
 .jcontextmenu > div::before {
     content: attr(data-icon);
     font-family: 'Material Icons' !important;
-    font-weight: normal;
-    font-style: normal;
-    font-size: 16px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
+    font-size: 15px;
     position: absolute;
     left: 9px;
 }
 
+.jcontextmenu.symbols > div::before {
+    font-family: 'Material Symbols Outlined' !important;
+}
+
 .jcontextmenu > div.header {
     display: none;
 }
@@ -916,25 +941,6 @@ div[data-before]:before {
     .jcontextmenu > div.header > a.close {
         text-align: right;
     }
-
-    .jcontextmenu > div::before {
-        content: attr(data-icon);
-        font-family: 'Material Icons' !important;
-        font-weight: normal;
-        font-style: normal;
-        font-size: 16px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        position: absolute;
-        left: 9px;
-    }
     .jcontextmenu a {
         font-size: 1.4em;
         text-transform: uppercase;
@@ -2212,6 +2218,7 @@ div[data-before]:before {
     padding: 4px;
     z-index: 50;
     text-align: left;
+    margin-right: 20px;
 }
 
 .jtoolbar-floating .jtoolbar-divisor {

package/dist/jsuites.basic.js

@@ -17,7 +17,7 @@
 
 var jSuites = function(options) {
     var obj = {}
-    var version = '4.11.5';
+    var version = '4.12.2';
 
     var find = function(DOMElement, component) {
         if (DOMElement[component.type] && DOMElement[component.type] == component) {
@@ -55,8 +55,12 @@ var jSuites = function(options) {
             y: null,
         }
 
+        // Tooltip element
+        var tooltip = document.createElement('div')
+        tooltip.classList.add('jtooltip');
+
         // Events
-        var editorMouseDown = function(e) {
+        var mouseDown = function(e) {
             // Check if this is the floating
             var item = jSuites.findElement(e.target, 'jpanel');
             // Jfloating found
@@ -73,6 +77,7 @@ var jSuites = function(options) {
                     h: rect.height,
                     d: item.style.cursor,
                     resizing: item.style.cursor ? true : false,
+                    actioned: false,
                 }
 
                 // Make sure width and height styling is OK
@@ -128,9 +133,9 @@ var jSuites = function(options) {
             isOpened(element);
         }
 
-        var editorMouseUp = function(e) {
+        var mouseUp = function(e) {
             if (editorAction && editorAction.e) {
-                if (typeof(editorAction.e.refresh) == 'function') {
+                if (typeof(editorAction.e.refresh) == 'function' && state.actioned) {
                     editorAction.e.refresh();
                 }
                 editorAction.e.style.cursor = '';
@@ -145,7 +150,7 @@ var jSuites = function(options) {
             editorAction = false;
         }
 
-        var editorMouseMove = function(e) {
+        var mouseMove = function(e) {
             if (editorAction) {
                 var x = e.clientX || e.pageX;
                 var y = e.clientY || e.pageY;
@@ -173,6 +178,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('position', top, left);
                     }
                 } else {
@@ -203,6 +209,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('dimensions', width, height);
                     }
                 }
@@ -241,7 +248,31 @@ var jSuites = function(options) {
             }
         }
 
-        var editorDblClick = function(e) {
+        var mouseOver = function(e) {
+            var message = e.target.getAttribute('data-tooltip');
+            if (message) {
+                // Instructions
+                tooltip.innerText = message;
+
+                // Position
+                if (e.changedTouches && e.changedTouches[0]) {
+                    var x = e.changedTouches[0].clientX;
+                    var y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
+
+                tooltip.style.top = y + 'px';
+                tooltip.style.left = x + 'px';
+                document.body.appendChild(tooltip);
+            } else if (tooltip.innerText) {
+                tooltip.innerText = '';
+                document.body.removeChild(tooltip);
+            }
+        }
+
+        var dblClick = function(e) {
             var item = jSuites.findElement(e.target, 'jpanel');
             if (item && typeof(item.dblclick) == 'function') {
                 // Create edition
@@ -249,7 +280,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorContextmenu = function(e) {
+        var contextMenu = function(e) {
             var item = document.activeElement;
             if (item && typeof(item.contextmenu) == 'function') {
                 // Create edition
@@ -276,7 +307,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorKeyDown = function(e) {
+        var keyDown = function(e) {
             var item = document.activeElement;
             if (item) {
                 if (e.key == "Delete" && typeof(item.delete) == 'function') {
@@ -297,12 +328,13 @@ var jSuites = function(options) {
             }
         }
 
-        document.addEventListener('mouseup', editorMouseUp);
-        document.addEventListener("mousedown", editorMouseDown);
-        document.addEventListener('mousemove', editorMouseMove);
-        document.addEventListener('dblclick', editorDblClick);
-        document.addEventListener('keydown', editorKeyDown);
-        document.addEventListener('contextmenu', editorContextmenu);
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener("mousedown", mouseDown);
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseover', mouseOver);
+        document.addEventListener('dblclick', dblClick);
+        document.addEventListener('keydown', keyDown);
+        document.addEventListener('contextmenu', contextMenu);
         document.dictionary = {};
 
         obj.version = version;
@@ -1882,6 +1914,7 @@ jSuites.calendar.prettifyAll = function() {
             elements[i].innerHTML = jSuites.calendar.prettify(elements[i].getAttribute('data-date'));
         } else {
             if (elements[i].innerHTML) {
+                elements[i].setAttribute('title', elements[i].innerHTML);
                 elements[i].setAttribute('data-date', elements[i].innerHTML);
                 elements[i].innerHTML = jSuites.calendar.prettify(elements[i].innerHTML);
             }
@@ -2305,7 +2338,7 @@ jSuites.color = (function(el, options) {
     }
 
     obj.select = function(color) {
-        // Remove current selecded mark
+        // Remove current selected mark
         var selected = container.querySelector('.jcolor-selected');
         if (selected) {
             selected.classList.remove('jcolor-selected');
@@ -2315,6 +2348,8 @@ jSuites.color = (function(el, options) {
         if (obj.values[color]) {
             obj.values[color].classList.add('jcolor-selected');
         }
+
+        obj.options.value = color;
     }
 
     /**
@@ -2936,8 +2971,13 @@ jSuites.contextmenu = (function(el, options) {
         // Coordinates
         if ((obj.options.items && obj.options.items.length > 0) || el.children.length) {
             if (e.target) {
-                var x = e.clientX;
-                var y = e.clientY;
+                if (e.changedTouches && e.changedTouches[0]) {
+                    x = e.changedTouches[0].clientX;
+                    y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
             } else {
                 var x = e.x;
                 var y = e.y;
@@ -2967,6 +3007,10 @@ jSuites.contextmenu = (function(el, options) {
         }
     }
 
+    obj.isOpened = function() {
+        return el.classList.contains('jcontextmenu-focus') ? true : false;
+    }
+
     /**
      * Close menu
      */
@@ -7125,13 +7169,13 @@ jSuites.mask = (function() {
 
         // New value
         v = (''+v).split(decimal);
-        v[0] = v[0].match(/[\-0-9]+/g, '');
+        v[0] = v[0].match(/[\-0-9]+/g);
         if (v[0]) {
             v[0] = v[0].join('');
         }
         if (v[0] || v[1]) {
             if (v[1] !== undefined) {
-                v[1] = v[1].match(/[0-9]+/g, '');
+                v[1] = v[1].match(/[0-9]+/g);
                 if (v[1]) {
                     v[1] = v[1].join('');
                 } else {
@@ -7141,11 +7185,10 @@ jSuites.mask = (function() {
         } else {
             return '';
         }
-
         return v;
     }
 
-    var FormatValue = function(v) {
+    var FormatValue = function(v, event) {
         if (v == '') {
             return '';
         }
@@ -7158,10 +7201,6 @@ jSuites.mask = (function() {
         if (v == '') {
             return '';
         }
-        // Negative values
-        if (v[0] === '-') {
-            v[0] = '-0';
-        }
         // Temporary value
         if (v[0]) {
             var t = parseFloat(v[0] + '.1');
@@ -7171,6 +7210,11 @@ jSuites.mask = (function() {
         } else {
             var t = null;
         }
+
+        if ((v[0] == '-' || v[0] == '-00') && ! v[1] && (event && event.inputType == "deleteContentBackward")) {
+            return '';
+        }
+
         var n = new Intl.NumberFormat(this.locale, o).format(t);
         n = n.split(d);
         if (typeof(n[1]) !== 'undefined') {
@@ -7189,7 +7233,7 @@ jSuites.mask = (function() {
         return n.join('');
     }
 
-    var Format = function(e) {
+    var Format = function(e, event) {
         var v = Value.call(e);
         if (! v) {
             return;
@@ -7197,7 +7241,7 @@ jSuites.mask = (function() {
 
         // Get decimal
         var d = getDecimal.call(this);
-        var n = FormatValue.call(this, v);
+        var n = FormatValue.call(this, v, event);
         var t = (n.length) - v.length;
         var index = Caret.call(e) + t;
         // Set value and update caret
@@ -8021,14 +8065,12 @@ jSuites.mask = (function() {
                 if (o.mask.indexOf('##') !== -1) {
                     var d = o.mask.split(';');
                     if (d[0]) {
-                        d[0] = d[0].replace('*', '');
-                        d[0] = d[0].replace(/_/g, '');
-                        d[0] = d[0].replace(/-/g, '');
-                        d[0] = d[0].replace('(','');
-                        d[0] = d[0].replace(')','');
+                        d[0] = d[0].replace('*', '\t');
+                        d[0] = d[0].replace(new RegExp(/_-/g), ' ');
                         d[0] = d[0].replace('##0.###','##0.000');
                         d[0] = d[0].replace('##0.##','##0.00');
                         d[0] = d[0].replace('##0.#','##0.0');
+                        d[0] = d[0].replace(new RegExp(/\[.*?\]/),'');
                     }
                     o.mask = d[0];
                 }
@@ -8041,10 +8083,10 @@ jSuites.mask = (function() {
             }
             // On new input
             if (typeof(e) !== 'object'  || ! e.inputType || ! e.inputType.indexOf('insert') || ! e.inputType.indexOf('delete')) {
-                // Start tranformation
+                // Start transformation
                 if (o.locale) {
                     if (o.input) {
-                        Format.call(o, o.input);
+                        Format.call(o, o.input, e);
                     } else {
                         var newValue = FormatValue.call(o, o.value);
                     }
@@ -8159,6 +8201,8 @@ jSuites.mask = (function() {
         if (typeof(options) != 'object') {
             return value;
         } else {
+            options = Object.assign({}, options);
+
             if (! options.options) {
                 options.options = {};
             }
@@ -8189,9 +8233,14 @@ jSuites.mask = (function() {
             }
 
             var o = obj(v, options, true);
-            var value = getDate.call(o);
-            var t = jSuites.calendar.now(o.date);
-            value = jSuites.calendar.dateToNum(t);
+
+            if (jSuites.isNumeric(v)) {
+                value = v;
+            } else {
+                var value = getDate.call(o);
+                var t = jSuites.calendar.now(o.date);
+                value = jSuites.calendar.dateToNum(t);
+            }
         } else {
             var value = Extract.call(options, v);
             // Percentage
@@ -8225,6 +8274,8 @@ jSuites.mask = (function() {
         if (typeof(options) != 'object') {
             return value;
         } else {
+            options = Object.assign({}, options);
+
             if (! options.options) {
                 options.options = {};
             }
@@ -8265,10 +8316,11 @@ jSuites.mask = (function() {
             if (typeof(value) === 'number') {
                 var t = null;
                 if (options.mask && fullMask) {
-                    var e = new RegExp('0{1}(.{1})0+', 'ig');
-                    var d = options.mask.match(e);
-                    if (d && d[0]) {
-                        d = d[0].length - 2;
+                    var d = getDecimal.call(options, options.mask);
+                    if (options.mask.indexOf(d) !== -1) {
+                        d = options.mask.split(d);
+                        d = (''+d[1].match(/[0-9]+/g))
+                        d = d.length;
                         t = value.toFixed(d);
                     } else {
                         t = value.toFixed(0);
@@ -9172,21 +9224,23 @@ jSuites.tabs = (function(el, options) {
     // Helpers
     var setBorder = function(index) {
         if (obj.options.animation) {
-            var rect = obj.headers.children[index].getBoundingClientRect();
+            setTimeout(function() {
+                var rect = obj.headers.children[index].getBoundingClientRect();
 
-            if (obj.options.palette == 'modern') {
-                border.style.width = rect.width - 4 + 'px';
-                border.style.left = obj.headers.children[index].offsetLeft + 2 + 'px';
-            } else {
-                border.style.width = rect.width + 'px';
-                border.style.left = obj.headers.children[index].offsetLeft + 'px';
-            }
+                if (obj.options.palette == 'modern') {
+                    border.style.width = rect.width - 4 + 'px';
+                    border.style.left = obj.headers.children[index].offsetLeft + 2 + 'px';
+                } else {
+                    border.style.width = rect.width + 'px';
+                    border.style.left = obj.headers.children[index].offsetLeft + 'px';
+                }
 
-            if (obj.options.position == 'bottom') {
-                border.style.top = '0px';
-            } else {
-                border.style.bottom = '0px';
-            }
+                if (obj.options.position == 'bottom') {
+                    border.style.top = '0px';
+                } else {
+                    border.style.bottom = '0px';
+                }
+            }, 150);
         }
     }
 
@@ -9303,6 +9357,8 @@ jSuites.tabs = (function(el, options) {
             obj.options.oncreate(el, div)
         }
 
+        setBorder();
+
         return div;
     }
 
@@ -9397,6 +9453,8 @@ jSuites.tabs = (function(el, options) {
         }
 
         obj.content.replaceChild(newContent, obj.content.children[position]);
+
+        setBorder();
     }
 
     obj.updatePosition = function(f, t) {
@@ -9722,6 +9780,14 @@ jSuites.toolbar = (function(el, options) {
                 toolbarItem.updateState(el, obj, toolbarItem, a, b);
             }
         }
+        for (var i = 0; i < toolbarFloating.children.length; i++) {
+            // Toolbar element
+            var toolbarItem = toolbarFloating.children[i];
+            // State management
+            if (typeof(toolbarItem.updateState) == 'function') {
+                toolbarItem.updateState(el, obj, toolbarItem, a, b);
+            }
+        }
     }
 
     obj.create = function(items) {

package/dist/jsuites.css

@@ -57,6 +57,10 @@ div[data-before]:before {
     right: 5px;
 }
 
+.jupload:empty:before {
+    z-index: 0;
+}
+
 .jupload img {
     width: 100%;
 } 
@@ -139,7 +143,35 @@ div[data-before]:before {
     border-radius: 1000px;
 }
 
+.jtooltip {
+    position: fixed;
+    top: 10px;
+    left: 10px;
 
+    z-index: 5;
+    font-family: initial;
+    font-size: 12px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid black;
+    padding: 8px;
+
+    display: block;
+    animation: fadeIn 0.5s
+}
+
+.jtooltip:empty {
+    display: none;
+}
+
+@keyframes fadeIn {
+     0% {
+          opacity: 0;
+     }
+     100% {
+          opacity: 1;
+     }
+}
 
 /** Animations **/
 .fade-in {
@@ -821,22 +853,15 @@ div[data-before]:before {
 .jcontextmenu > div::before {
     content: attr(data-icon);
     font-family: 'Material Icons' !important;
-    font-weight: normal;
-    font-style: normal;
-    font-size: 16px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
+    font-size: 15px;
     position: absolute;
     left: 9px;
 }
 
+.jcontextmenu.symbols > div::before {
+    font-family: 'Material Symbols Outlined' !important;
+}
+
 .jcontextmenu > div.header {
     display: none;
 }
@@ -916,25 +941,6 @@ div[data-before]:before {
     .jcontextmenu > div.header > a.close {
         text-align: right;
     }
-
-    .jcontextmenu > div::before {
-        content: attr(data-icon);
-        font-family: 'Material Icons' !important;
-        font-weight: normal;
-        font-style: normal;
-        font-size: 16px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        position: absolute;
-        left: 9px;
-    }
     .jcontextmenu a {
         font-size: 1.4em;
         text-transform: uppercase;
@@ -1685,38 +1691,61 @@ div[data-before]:before {
     left:50%;
     width:60%;
     height:60%;
-    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
-    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
+    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.2);
+    -moz-box-shadow: 0 2px 12px rgba(0,0,0,.2);
     border:1px solid #ccc;
     background-color:#fff;
     transform: translate(-50%, -50%);
     box-sizing: border-box;
-    padding-top:50px !important;
+    padding-top: 50px !important;
     z-index:9002;
-    border-radius: 8px;
+    border-radius: 4px;
 }
 
 .jmodal:before {
-    position:absolute;
-    top:0;
-    left:0;
-    width:100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     content:attr(title);
-    padding:15px;
+    padding: 25px;
+    padding-bottom: 20px;
     box-sizing: border-box;
-    font-size:1.2em;
-    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+    font-size: 1.4em;
     background-color: #fff;
     border-radius: 8px 8px 0px 0px;
 }
 
 .jmodal_content {
-    padding:20px;
-    overflow-y:auto;
-    max-height:100%;
+    padding: 22px;
+    overflow-y: auto;
+    max-height: 100%;
     box-sizing: border-box;
     height: -webkit-fill-available;
+
+    scrollbar-width: thin;
+    scrollbar-color: #333 transparent;
+}
+
+.jmodal_content::-webkit-scrollbar {
+    height: 12px;
+}
+
+.jmodal_content::-webkit-scrollbar {
+    width: 12px;
+}
+
+.jmodal_content::-webkit-scrollbar-track {
+    border: 1px solid #fff;
+    background: #eee;
+}
+
+.jmodal_content::-webkit-scrollbar-thumb {
+    border: 1px solid #fff;
+    background: #888;
 }
+
+
 .jmodal.no-title {
     padding-top: initial !important;
 }
@@ -1726,16 +1755,16 @@ div[data-before]:before {
 }
 
 .jmodal:after {
-    content:'';
+    content: '';
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-    position:absolute;
-    top:0;
-    right:0;
-    margin:14px;
-    font-size:24px;
-    width:24px;
-    height:24px;
-    cursor:pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 25px;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
     text-shadow: 0px 0px 5px #fff;
 }
 
@@ -2782,6 +2811,7 @@ div[data-before]:before {
     padding: 4px;
     z-index: 50;
     text-align: left;
+    margin-right: 20px;
 }
 
 .jtoolbar-floating .jtoolbar-divisor {

package/dist/jsuites.js

@@ -17,7 +17,7 @@
 
 var jSuites = function(options) {
     var obj = {}
-    var version = '4.11.5';
+    var version = '4.12.2';
 
     var find = function(DOMElement, component) {
         if (DOMElement[component.type] && DOMElement[component.type] == component) {
@@ -55,8 +55,12 @@ var jSuites = function(options) {
             y: null,
         }
 
+        // Tooltip element
+        var tooltip = document.createElement('div')
+        tooltip.classList.add('jtooltip');
+
         // Events
-        var editorMouseDown = function(e) {
+        var mouseDown = function(e) {
             // Check if this is the floating
             var item = jSuites.findElement(e.target, 'jpanel');
             // Jfloating found
@@ -73,6 +77,7 @@ var jSuites = function(options) {
                     h: rect.height,
                     d: item.style.cursor,
                     resizing: item.style.cursor ? true : false,
+                    actioned: false,
                 }
 
                 // Make sure width and height styling is OK
@@ -128,9 +133,9 @@ var jSuites = function(options) {
             isOpened(element);
         }
 
-        var editorMouseUp = function(e) {
+        var mouseUp = function(e) {
             if (editorAction && editorAction.e) {
-                if (typeof(editorAction.e.refresh) == 'function') {
+                if (typeof(editorAction.e.refresh) == 'function' && state.actioned) {
                     editorAction.e.refresh();
                 }
                 editorAction.e.style.cursor = '';
@@ -145,7 +150,7 @@ var jSuites = function(options) {
             editorAction = false;
         }
 
-        var editorMouseMove = function(e) {
+        var mouseMove = function(e) {
             if (editorAction) {
                 var x = e.clientX || e.pageX;
                 var y = e.clientY || e.pageY;
@@ -173,6 +178,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('position', top, left);
                     }
                 } else {
@@ -203,6 +209,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('dimensions', width, height);
                     }
                 }
@@ -241,7 +248,31 @@ var jSuites = function(options) {
             }
         }
 
-        var editorDblClick = function(e) {
+        var mouseOver = function(e) {
+            var message = e.target.getAttribute('data-tooltip');
+            if (message) {
+                // Instructions
+                tooltip.innerText = message;
+
+                // Position
+                if (e.changedTouches && e.changedTouches[0]) {
+                    var x = e.changedTouches[0].clientX;
+                    var y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
+
+                tooltip.style.top = y + 'px';
+                tooltip.style.left = x + 'px';
+                document.body.appendChild(tooltip);
+            } else if (tooltip.innerText) {
+                tooltip.innerText = '';
+                document.body.removeChild(tooltip);
+            }
+        }
+
+        var dblClick = function(e) {
             var item = jSuites.findElement(e.target, 'jpanel');
             if (item && typeof(item.dblclick) == 'function') {
                 // Create edition
@@ -249,7 +280,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorContextmenu = function(e) {
+        var contextMenu = function(e) {
             var item = document.activeElement;
             if (item && typeof(item.contextmenu) == 'function') {
                 // Create edition
@@ -276,7 +307,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorKeyDown = function(e) {
+        var keyDown = function(e) {
             var item = document.activeElement;
             if (item) {
                 if (e.key == "Delete" && typeof(item.delete) == 'function') {
@@ -297,12 +328,13 @@ var jSuites = function(options) {
             }
         }
 
-        document.addEventListener('mouseup', editorMouseUp);
-        document.addEventListener("mousedown", editorMouseDown);
-        document.addEventListener('mousemove', editorMouseMove);
-        document.addEventListener('dblclick', editorDblClick);
-        document.addEventListener('keydown', editorKeyDown);
-        document.addEventListener('contextmenu', editorContextmenu);
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener("mousedown", mouseDown);
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseover', mouseOver);
+        document.addEventListener('dblclick', dblClick);
+        document.addEventListener('keydown', keyDown);
+        document.addEventListener('contextmenu', contextMenu);
         document.dictionary = {};
 
         obj.version = version;
@@ -1893,6 +1925,7 @@ jSuites.calendar.prettifyAll = function() {
             elements[i].innerHTML = jSuites.calendar.prettify(elements[i].getAttribute('data-date'));
         } else {
             if (elements[i].innerHTML) {
+                elements[i].setAttribute('title', elements[i].innerHTML);
                 elements[i].setAttribute('data-date', elements[i].innerHTML);
                 elements[i].innerHTML = jSuites.calendar.prettify(elements[i].innerHTML);
             }
@@ -2316,7 +2349,7 @@ jSuites.color = (function(el, options) {
     }
 
     obj.select = function(color) {
-        // Remove current selecded mark
+        // Remove current selected mark
         var selected = container.querySelector('.jcolor-selected');
         if (selected) {
             selected.classList.remove('jcolor-selected');
@@ -2326,6 +2359,8 @@ jSuites.color = (function(el, options) {
         if (obj.values[color]) {
             obj.values[color].classList.add('jcolor-selected');
         }
+
+        obj.options.value = color;
     }
 
     /**
@@ -2947,8 +2982,13 @@ jSuites.contextmenu = (function(el, options) {
         // Coordinates
         if ((obj.options.items && obj.options.items.length > 0) || el.children.length) {
             if (e.target) {
-                var x = e.clientX;
-                var y = e.clientY;
+                if (e.changedTouches && e.changedTouches[0]) {
+                    x = e.changedTouches[0].clientX;
+                    y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
             } else {
                 var x = e.x;
                 var y = e.y;
@@ -2978,6 +3018,10 @@ jSuites.contextmenu = (function(el, options) {
         }
     }
 
+    obj.isOpened = function() {
+        return el.classList.contains('jcontextmenu-focus') ? true : false;
+    }
+
     /**
      * Close menu
      */
@@ -7550,13 +7594,13 @@ jSuites.mask = (function() {
 
         // New value
         v = (''+v).split(decimal);
-        v[0] = v[0].match(/[\-0-9]+/g, '');
+        v[0] = v[0].match(/[\-0-9]+/g);
         if (v[0]) {
             v[0] = v[0].join('');
         }
         if (v[0] || v[1]) {
             if (v[1] !== undefined) {
-                v[1] = v[1].match(/[0-9]+/g, '');
+                v[1] = v[1].match(/[0-9]+/g);
                 if (v[1]) {
                     v[1] = v[1].join('');
                 } else {
@@ -7566,11 +7610,10 @@ jSuites.mask = (function() {
         } else {
             return '';
         }
-
         return v;
     }
 
-    var FormatValue = function(v) {
+    var FormatValue = function(v, event) {
         if (v == '') {
             return '';
         }
@@ -7583,10 +7626,6 @@ jSuites.mask = (function() {
         if (v == '') {
             return '';
         }
-        // Negative values
-        if (v[0] === '-') {
-            v[0] = '-0';
-        }
         // Temporary value
         if (v[0]) {
             var t = parseFloat(v[0] + '.1');
@@ -7596,6 +7635,11 @@ jSuites.mask = (function() {
         } else {
             var t = null;
         }
+
+        if ((v[0] == '-' || v[0] == '-00') && ! v[1] && (event && event.inputType == "deleteContentBackward")) {
+            return '';
+        }
+
         var n = new Intl.NumberFormat(this.locale, o).format(t);
         n = n.split(d);
         if (typeof(n[1]) !== 'undefined') {
@@ -7614,7 +7658,7 @@ jSuites.mask = (function() {
         return n.join('');
     }
 
-    var Format = function(e) {
+    var Format = function(e, event) {
         var v = Value.call(e);
         if (! v) {
             return;
@@ -7622,7 +7666,7 @@ jSuites.mask = (function() {
 
         // Get decimal
         var d = getDecimal.call(this);
-        var n = FormatValue.call(this, v);
+        var n = FormatValue.call(this, v, event);
         var t = (n.length) - v.length;
         var index = Caret.call(e) + t;
         // Set value and update caret
@@ -8446,14 +8490,12 @@ jSuites.mask = (function() {
                 if (o.mask.indexOf('##') !== -1) {
                     var d = o.mask.split(';');
                     if (d[0]) {
-                        d[0] = d[0].replace('*', '');
-                        d[0] = d[0].replace(/_/g, '');
-                        d[0] = d[0].replace(/-/g, '');
-                        d[0] = d[0].replace('(','');
-                        d[0] = d[0].replace(')','');
+                        d[0] = d[0].replace('*', '\t');
+                        d[0] = d[0].replace(new RegExp(/_-/g), ' ');
                         d[0] = d[0].replace('##0.###','##0.000');
                         d[0] = d[0].replace('##0.##','##0.00');
                         d[0] = d[0].replace('##0.#','##0.0');
+                        d[0] = d[0].replace(new RegExp(/\[.*?\]/),'');
                     }
                     o.mask = d[0];
                 }
@@ -8466,10 +8508,10 @@ jSuites.mask = (function() {
             }
             // On new input
             if (typeof(e) !== 'object'  || ! e.inputType || ! e.inputType.indexOf('insert') || ! e.inputType.indexOf('delete')) {
-                // Start tranformation
+                // Start transformation
                 if (o.locale) {
                     if (o.input) {
-                        Format.call(o, o.input);
+                        Format.call(o, o.input, e);
                     } else {
                         var newValue = FormatValue.call(o, o.value);
                     }
@@ -8584,6 +8626,8 @@ jSuites.mask = (function() {
         if (typeof(options) != 'object') {
             return value;
         } else {
+            options = Object.assign({}, options);
+
             if (! options.options) {
                 options.options = {};
             }
@@ -8655,6 +8699,8 @@ jSuites.mask = (function() {
         if (typeof(options) != 'object') {
             return value;
         } else {
+            options = Object.assign({}, options);
+
             if (! options.options) {
                 options.options = {};
             }
@@ -8695,10 +8741,11 @@ jSuites.mask = (function() {
             if (typeof(value) === 'number') {
                 var t = null;
                 if (options.mask && fullMask) {
-                    var e = new RegExp('0{1}(.{1})0+', 'ig');
-                    var d = options.mask.match(e);
-                    if (d && d[0]) {
-                        d = d[0].length - 2;
+                    var d = getDecimal.call(options, options.mask);
+                    if (options.mask.indexOf(d) !== -1) {
+                        d = options.mask.split(d);
+                        d = (''+d[1].match(/[0-9]+/g))
+                        d = d.length;
                         t = value.toFixed(d);
                     } else {
                         t = value.toFixed(0);
@@ -10455,21 +10502,23 @@ jSuites.tabs = (function(el, options) {
     // Helpers
     var setBorder = function(index) {
         if (obj.options.animation) {
-            var rect = obj.headers.children[index].getBoundingClientRect();
+            setTimeout(function() {
+                var rect = obj.headers.children[index].getBoundingClientRect();
 
-            if (obj.options.palette == 'modern') {
-                border.style.width = rect.width - 4 + 'px';
-                border.style.left = obj.headers.children[index].offsetLeft + 2 + 'px';
-            } else {
-                border.style.width = rect.width + 'px';
-                border.style.left = obj.headers.children[index].offsetLeft + 'px';
-            }
+                if (obj.options.palette == 'modern') {
+                    border.style.width = rect.width - 4 + 'px';
+                    border.style.left = obj.headers.children[index].offsetLeft + 2 + 'px';
+                } else {
+                    border.style.width = rect.width + 'px';
+                    border.style.left = obj.headers.children[index].offsetLeft + 'px';
+                }
 
-            if (obj.options.position == 'bottom') {
-                border.style.top = '0px';
-            } else {
-                border.style.bottom = '0px';
-            }
+                if (obj.options.position == 'bottom') {
+                    border.style.top = '0px';
+                } else {
+                    border.style.bottom = '0px';
+                }
+            }, 150);
         }
     }
 
@@ -10586,6 +10635,8 @@ jSuites.tabs = (function(el, options) {
             obj.options.oncreate(el, div)
         }
 
+        setBorder();
+
         return div;
     }
 
@@ -10680,6 +10731,8 @@ jSuites.tabs = (function(el, options) {
         }
 
         obj.content.replaceChild(newContent, obj.content.children[position]);
+
+        setBorder();
     }
 
     obj.updatePosition = function(f, t) {
@@ -11689,6 +11742,14 @@ jSuites.toolbar = (function(el, options) {
                 toolbarItem.updateState(el, obj, toolbarItem, a, b);
             }
         }
+        for (var i = 0; i < toolbarFloating.children.length; i++) {
+            // Toolbar element
+            var toolbarItem = toolbarFloating.children[i];
+            // State management
+            if (typeof(toolbarItem.updateState) == 'function') {
+                toolbarItem.updateState(el, obj, toolbarItem, a, b);
+            }
+        }
     }
 
     obj.create = function(items) {

package/package.json

@@ -19,7 +19,7 @@
         "javascript plugins"
     ],
     "main": "dist/jsuites.js",
-    "version": "4.11.5",
+    "version": "4.12.2",
     "bugs": "https://github.com/jsuites/jsuites/issues",
     "homepage": "https://github.com/jsuites/jsuites",
     "docs": "https://jsuites.net",