fixed #395

Gruntfile.js

@@ -146,7 +146,7 @@
                     'dist/modular/js/colorpicker.js': ['src/colorpicker/js/header.txt', 'dist/modular/js/colorpicker.code.js'],
                     'dist/modular/css/colorpicker.css': ['dist/modular/css/colorpicker.code.css'],
 
-                    'dist/combined/js/gijgo.js': ['src/header.txt', 'src/core/js/core.js', 'dist/modular/js/dialog.code.js', 'dist/modular/js/draggable.code.js', 'dist/modular/js/droppable.code.js', 'dist/modular/js/grid.code.js', 'dist/modular/js/tree.code.js', 'dist/modular/js/checkbox.code.js', 'dist/modular/js/editor.code.js', 'dist/modular/js/dropdown.code.js', 'dist/modular/js/datepicker.code.js', 'dist/modular/js/timepicker.code.js', 'dist/modular/js/datetimepicker.code.js', 'dist/modular/js/slider.code.js', 'dist/modular/js/colorpicker.code.js'],
+                    'dist/combined/js/gijgo.js': ['src/header.txt', 'src/core/js/core.js', 'src/picker/js/picker.base.js', 'dist/modular/js/dialog.code.js', 'dist/modular/js/draggable.code.js', 'dist/modular/js/droppable.code.js', 'dist/modular/js/grid.code.js', 'dist/modular/js/tree.code.js', 'dist/modular/js/checkbox.code.js', 'dist/modular/js/editor.code.js', 'dist/modular/js/dropdown.code.js', 'dist/modular/js/datepicker.code.js', 'dist/modular/js/timepicker.code.js', 'dist/modular/js/datetimepicker.code.js', 'dist/modular/js/slider.code.js', 'dist/modular/js/colorpicker.code.js'],
                     'dist/combined/css/gijgo.css': ['src/core/css/core.css', 'src/icons/icons.css', 'dist/modular/css/dialog.code.css', 'dist/modular/css/grid.code.css', 'dist/modular/css/tree.code.css', 'dist/modular/css/checkbox.code.css', 'dist/modular/css/editor.code.css', 'dist/modular/css/dropdown.code.css', 'dist/modular/css/datepicker.code.css', 'dist/modular/css/timepicker.code.css', 'dist/modular/css/datetimepicker.code.css', 'dist/modular/css/colorpicker.code.css'],
                     'dist/combined/js/messages/messages.bg-bg.js': ['src/dialog/js/messages/messages.bg-bg.js', 'src/grid/js/messages/messages.bg-bg.js', 'src/editor/js/messages/messages.bg-bg.js', 'src/core/js/messages/messages.bg-bg.js'],
                     'dist/combined/js/messages/messages.fr-fr.js': ['src/dialog/js/messages/messages.fr-fr.js', 'src/grid/js/messages/messages.fr-fr.js', 'src/editor/js/messages/messages.fr-fr.js', 'src/core/js/messages/messages.fr-fr.js'],

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "gijgo",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "description": "Gijgo is a set of free open source javascript controls distributed under MIT License with built-in support for Bootstrap and Material Design",
   "main": [
     "./dist/combined/js/gijgo.js",

dist/combined/js/gijgo.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo JavaScript Library v1.9.7
+ * Gijgo JavaScript Library v1.9.9
  * http://gijgo.com/
  *
  * Copyright 2014, 2018 gijgo.com
@@ -595,6 +595,154 @@ gj.core = {
         }
     }
 };
+gj.picker = {
+    messages: {
+        'en-us': {
+        }
+    }
+};
+
+gj.picker.methods = {
+
+    initialize: function ($input, data, methods) {
+        var $calendar, $rightIcon,
+            $picker = methods.createPicker($input, data),
+            $wrapper = $input.parent('div[role="wrapper"]');
+
+        if (data.uiLibrary === 'bootstrap') {
+            $rightIcon = $('<span class="input-group-addon">' + data.icons.rightIcon + '</span>');
+        } else if (data.uiLibrary === 'bootstrap4') {
+            $rightIcon = $('<span class="input-group-append"><button class="btn btn-outline-secondary border-left-0" type="button">' + data.icons.rightIcon + '</button></span>');
+        } else {
+            $rightIcon = $(data.icons.rightIcon);
+        }
+        $rightIcon.attr('role', 'right-icon');
+
+        if ($wrapper.length === 0) {
+            $wrapper = $('<div role="wrapper" />').addClass(data.style.wrapper); // The css class needs to be added before the wrapping, otherwise doesn't work.
+            $input.wrap($wrapper);
+        } else {
+            $wrapper.addClass(data.style.wrapper);
+        }
+        $wrapper = $input.parent('div[role="wrapper"]');
+
+        data.width && $wrapper.css('width', data.width);
+
+        $input.val(data.value).addClass(data.style.input).attr('role', 'input');
+
+        data.fontSize && $input.css('font-size', data.fontSize);
+
+        if (data.uiLibrary === 'bootstrap' || data.uiLibrary === 'bootstrap4') {
+            if (data.size === 'small') {
+                $wrapper.addClass('input-group-sm');
+                $input.addClass('form-control-sm');
+            } else if (data.size === 'large') {
+                $wrapper.addClass('input-group-lg');
+                $input.addClass('form-control-lg');
+            }
+        } else {
+            if (data.size === 'small') {
+                $wrapper.addClass('small');
+            } else if (data.size === 'large') {
+                $wrapper.addClass('large');
+            }
+        }
+
+        $rightIcon.on('click', function (e) {
+            if ($picker.is(':visible')) {
+                $input.close();
+            } else {
+                $input.open();
+            }
+        });
+        $wrapper.append($rightIcon);
+
+        if (data.footer !== true) {
+            $input.on('blur', function () {
+                $input.timeout = setTimeout(function () {
+                    $input.close();
+                }, 500);
+            });
+            $picker.mousedown(function () {
+                clearTimeout($input.timeout);
+                $input.focus();
+                return false;
+            });
+            $picker.on('click', function () {
+                clearTimeout($input.timeout);
+                $input.focus();
+            });
+        }
+    }
+};
+
+
+gj.picker.widget = function ($element, jsConfig) {
+    var self = this,
+        methods = gj.picker.methods;
+
+    self.destroy = function () {
+        return methods.destroy(this);
+    };
+
+    return $element;
+};
+
+gj.picker.widget.prototype = new gj.widget();
+gj.picker.widget.constructor = gj.picker.widget;
+
+gj.picker.widget.prototype.init = function (jsConfig, type, methods) {
+    gj.widget.prototype.init.call(this, jsConfig, type);
+    this.attr('data-' + type, 'true');
+    gj.picker.methods.initialize(this, this.data(), gj[type].methods);
+    return this;
+};
+
+gj.picker.widget.prototype.open = function (type) {
+    var data = this.data(),
+        $picker = $('body').find('[role="picker"][guid="' + this.attr('data-guid') + '"]');
+
+    $picker.show();
+    $picker.closest('div[role="modal"]').show();
+    if (data.modal) {
+        gj.core.center($picker);
+    } else {
+        gj.core.setChildPosition(this[0], $picker[0]);
+        this.focus();
+    }
+    clearTimeout(this.timeout);
+
+    gj[type].events.open(this);
+
+    return this;
+};
+
+gj.picker.widget.prototype.close = function (type) {
+    var $picker = $('body').find('[role="picker"][guid="' + this.attr('data-guid') + '"]');
+    $picker.hide();
+    $picker.closest('div[role="modal"]').hide();
+    gj[type].events.close(this);
+    return this;
+};
+
+gj.picker.widget.prototype.destroy = function (type) {
+    var data = this.data(),
+        $parent = this.parent(),
+        $picker = $('body').find('[role="picker"][guid="' + this.attr('data-guid') + '"]');
+    if (data) {
+        this.off();
+        if ($picker.parent('[role="modal"]').length > 0) {
+            $picker.unwrap();
+        }
+        $picker.remove();
+        this.removeData();
+        this.removeAttr('data-type').removeAttr('data-guid').removeAttr('data-' + type);
+        this.removeClass();
+        $parent.children('[role="right-icon"]').remove();
+        this.unwrap();
+    }
+    return this;
+};
 /* global window alert jQuery */
 /** 
  * @widget Dialog 

dist/modular/js/checkbox.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo Checkbox v1.9.7
+ * Gijgo Checkbox v1.9.9
  * http://gijgo.com/checkbox
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/colorpicker.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo ColorPicker v1.9.7
+ * Gijgo ColorPicker v1.9.9
  * http://gijgo.com/colorpicker
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/core.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo JavaScript Library v1.9.7
+ * Gijgo JavaScript Library v1.9.9
  * http://gijgo.com/
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/datepicker.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo DatePicker v1.9.7
+ * Gijgo DatePicker v1.9.9
  * http://gijgo.com/datepicker
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/datetimepicker.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo DateTimePicker v1.9.7
+ * Gijgo DateTimePicker v1.9.9
  * http://gijgo.com/datetimepicker
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/dialog.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo Dialog v1.9.7
+ * Gijgo Dialog v1.9.9
  * http://gijgo.com/dialog
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/dropdown.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo DropDown v1.9.7
+ * Gijgo DropDown v1.9.9
  * http://gijgo.com/dropdown
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/droppable.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo Droppable v1.9.7
+ * Gijgo Droppable v1.9.9
  * http://gijgo.com/droppable
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/editor.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo Editor v1.9.7
+ * Gijgo Editor v1.9.9
  * http://gijgo.com/editor
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/grid.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo Grid v1.9.7
+ * Gijgo Grid v1.9.9
  * http://gijgo.com/grid
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/timepicker.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo TimePicker v1.9.7
+ * Gijgo TimePicker v1.9.9
  * http://gijgo.com/timepicker
  *
  * Copyright 2014, 2018 gijgo.com

dist/modular/js/tree.js

@@ -1,5 +1,5 @@
 /*
- * Gijgo Tree v1.9.7
+ * Gijgo Tree v1.9.9
  * http://gijgo.com/tree
  *
  * Copyright 2014, 2018 gijgo.com

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gijgo",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "description": "Gijgo is a set of free open source javascript controls distributed under MIT License. All widgets are high performance, built on top of the jQuery JavaScript Library and with built-in support for Bootstrap and jQuery UI. They are designed to saves you time and scales with your development process.",
   "main": "js/gijgo.js",
   "homepage": "http://gijgo.com/",

src/checkbox/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo Checkbox v1.9.7
+ * Gijgo Checkbox v1.9.9
  * http://gijgo.com/checkbox
  *
  * Copyright 2014, 2018 gijgo.com

src/colorpicker/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo ColorPicker v1.9.7
+ * Gijgo ColorPicker v1.9.9
  * http://gijgo.com/colorpicker
  *
  * Copyright 2014, 2018 gijgo.com

src/datepicker/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo DatePicker v1.9.7
+ * Gijgo DatePicker v1.9.9
  * http://gijgo.com/datepicker
  *
  * Copyright 2014, 2018 gijgo.com

src/datetimepicker/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo DateTimePicker v1.9.7
+ * Gijgo DateTimePicker v1.9.9
  * http://gijgo.com/datetimepicker
  *
  * Copyright 2014, 2018 gijgo.com

src/dialog/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo Dialog v1.9.7
+ * Gijgo Dialog v1.9.9
  * http://gijgo.com/dialog
  *
  * Copyright 2014, 2018 gijgo.com

src/draggable/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo Draggable v1.9.7
+ * Gijgo Draggable v1.9.9
  * http://gijgo.com/draggable
  *
  * Copyright 2014, 2018 gijgo.com

src/dropdown/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo DropDown v1.9.7
+ * Gijgo DropDown v1.9.9
  * http://gijgo.com/dropdown
  *
  * Copyright 2014, 2018 gijgo.com

src/droppable/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo Droppable v1.9.7
+ * Gijgo Droppable v1.9.9
  * http://gijgo.com/droppable
  *
  * Copyright 2014, 2018 gijgo.com

src/editor/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo Editor v1.9.7
+ * Gijgo Editor v1.9.9
  * http://gijgo.com/editor
  *
  * Copyright 2014, 2018 gijgo.com

src/grid/js/header.txt

@@ -1,5 +1,5 @@
 /*
- * Gijgo Grid v1.9.7
+ * Gijgo Grid v1.9.9
  * http://gijgo.com/grid
  *
  * Copyright 2014, 2018 gijgo.com