@finqu/cool 1.2.27 → 1.2.29

package/dist/js/cool.js

@@ -1,6 +1,6 @@
 /*!
-  * Cool UI v1.2.27 (https://finqu.fi)
-  * Copyright 2011-2020 Finqu Oy
+  * Cool UI v1.2.29 (https://finqu.fi)
+  * Copyright 2011-2021 Finqu Oy
   * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
   */
 (function (global, factory) {
@@ -1265,6 +1265,19 @@
   function () {
     function Common() {}
 
+    Common.refresh = function refresh() {
+      $('.form-label-group').each(function (i, formLabelGroup) {
+        var $formLabelGroup = $(formLabelGroup);
+        var val = $formLabelGroup.find('input, select').val();
+
+        if (val) {
+          $(formLabelGroup).addClass('label-on-top');
+        } else {
+          $(formLabelGroup).removeClass('label-on-top');
+        }
+      });
+    };
+
     Common.initialize = function initialize(opts) {
       // There's an error if opts is not defined
       opts = opts || {}; // Save settings for later use
@@ -1300,19 +1313,26 @@
             $inputGroup.removeClass('input-group-focus');
           }
         }
-      }); // Custom Form group
+      });
+      $(document).on('blur input change', '.form-label-group', function () {
+        var $formLabelGroup = $(this);
+        var val = $formLabelGroup.find('input, select').val();
 
+        if (val) {
+          $(this).addClass('label-on-top');
+        } else {
+          $(this).removeClass('label-on-top');
+        }
+      });
       $('.form-label-group').each(function (i, formLabelGroup) {
         var $formLabelGroup = $(formLabelGroup);
-        $formLabelGroup.find('input').on('blur input change', function () {
-          var val = $(this).val();
+        var val = $formLabelGroup.find('input, select').val();
 
-          if (val) {
-            $(formLabelGroup).addClass('label-on-top');
-          } else {
-            $(formLabelGroup).removeClass('label-on-top');
-          }
-        }).trigger('change');
+        if (val) {
+          $(formLabelGroup).addClass('label-on-top');
+        } else {
+          $(formLabelGroup).removeClass('label-on-top');
+        }
       }); // Table actions
 
       $.each($('.table'), function () {
@@ -1320,71 +1340,43 @@
           $(this).addClass('table-hover');
         }
       });
+      $(document).on('click', '[data-table-link] .table-link-exclude, [data-table-link] input, [data-table-link] button, [data-table-link] a, [data-table-link] label, [data-table-link] .td-col-select', function (e) {
+        e.stopPropagation();
+      });
       $(document).on('click', '[data-table-link]', function (e) {
         var $container = $(this).parents('table, .table');
         var href = $(this).data('tableLink');
-        var target = $(e.target);
-        var exceptions = ['input', 'button', 'a', 'label', 'td.col-select'];
-        var linkDisabled = false;
-        $.each(exceptions, function (item) {
-          if (target.is(item) || item == 'a' && target.parent().is(item)) {
-            linkDisabled = true;
-          }
-        });
 
         if ($container.hasClass('bulk-actions-active')) {
-          linkDisabled = true;
-        }
-
-        if (target.hasClass('table-link-exclude')) {
-          linkDisabled = true;
+          return;
         }
 
-        if (target.is('td, .td, img') && !linkDisabled) {
-          if (e.ctrlKey || e.metaKey) {
-            window.open(href, '_blank');
-          } else {
-            window.location.href = href;
-          }
+        if (e.ctrlKey || e.metaKey) {
+          window.open(href, '_blank');
         } else {
-          return;
+          window.location.href = href;
         }
       });
+      $(document).on('click', '[data-table-btn] .table-btn-exclude, [data-table-btn] input, [data-table-btn] button, [data-table-btn] a, [data-table-btn] label, [data-table-btn] .td-col-select', function (e) {
+        e.stopPropagation();
+      });
       $(document).on('click', '[data-table-btn]', function (e) {
         var $container = $(this).parents('table, .table');
-        var $self = $(this);
         var btn = $(this).data('tableButton');
-        var target = $(e.target);
-        var exceptions = ['input', 'button', 'a', 'label', 'td.col-select'];
-        var btnDisabled = false;
 
         if (!btn) {
-          btn = $self.find('button')[0];
+          btn = $container.find('button')[0];
 
           if (!btn) {
             return;
           }
         }
 
-        $.each(exceptions, function (item) {
-          if (target.is(item) || item == 'a' && target.parent().is(item)) {
-            btnDisabled = true;
-          }
-        });
-
         if ($container.hasClass('bulk-actions-active')) {
-          btnDisabled = true;
-        }
-
-        if (target.hasClass('table-btn-exclude')) {
-          btnDisabled = true;
-        }
-
-        if (target.is('td, .td, img') && !btnDisabled) {
-          $(btn).click();
-        } else {
           return;
         }
+
+        $(btn).click();
       }); // button toggle
 
       $(document).on('click', '.btn-group-toggle .btn > input', function (e) {
@@ -1444,10 +1436,18 @@
           minScrollbarLength: 20,
           suppressScrollX: true
         });
-        $sidebarLeftContent.find('[data-toggle="collapse"]').on('click', function () {
-          setTimeout(function () {
-            sidebarLeftScroll.update();
-          }, 300);
+        $sidebarLeftContent.find('[data-toggle="collapse"]').on('click', function (e) {
+          if ($(this).data('breakpoint') && window.matchMedia("(min-width: " + $(this).data('breakpoint') + "px)").matches) {
+            var a = $(this).next().find('li').first().children('a').first();
+
+            if (a) {
+              window.location.href = a.attr('href');
+            }
+          } else {
+            setTimeout(function () {
+              sidebarLeftScroll.update();
+            }, 300);
+          }
         });
       } // Sidebar tabs
 
@@ -1500,6 +1500,7 @@
   }();
 
   window.Cool.initialize = Common.initialize;
+  window.Cool.refresh = Common.refresh;
 
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
@@ -1713,9 +1714,11 @@
         this.$el.on('mouseenter' + '.' + NAME, function () {
           _this2.show();
         });
-        this.$el.on('mouseleave' + '.' + NAME, function () {
-          _this2.close();
-        });
+        this.$el.on('mouseleave' + '.' + NAME, debounce(function () {
+          if (!_this2.popupHasFocus) {
+            _this2.close();
+          }
+        }, 500));
       } else if (this.trigger === 'focus') {
         this.$el.on('focusin' + '.' + NAME, function () {
           _this2.show();
@@ -1750,6 +1753,8 @@
     ;
 
     _proto.buildPopover = function buildPopover() {
+      var _this3 = this;
+
       var content;
 
       if (typeof this.content === 'function') {
@@ -1760,6 +1765,14 @@
 
       this.$popover = $("\n    \t\t<div class=\"popover\" role=\"tooltip\" id=\"" + this.id + "\">\n\n\t\t\t    <div class=\"arrow\"></div>\n\n\t\t\t    <h3 class=\"popover-header\">" + this.title + "</h3>\n\n\t\t\t    <div class=\"popover-body\">" + content + "</div>\n\n\t\t\t</div>\n    \t");
       this.$container.append(this.$popover);
+      this.$container.find('#' + this.id).on('mouseenter', function () {
+        _this3.popupHasFocus = true;
+      });
+      this.$container.find('#' + this.id).on('mouseleave', function () {
+        _this3.popupHasFocus = false;
+
+        _this3.close();
+      });
       this.$arrow = this.$popover.find('.arrow') ? this.$popover.find('.arrow') : false;
       this.log(this.$el);
       this.log(this.$container);
@@ -2056,7 +2069,7 @@
     ;
 
     _proto.close = function close() {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!this.$popover) {
         return;
@@ -2064,14 +2077,14 @@
 
       if (this.animation && !this.$popover.hasClass('animated')) {
         this.$popover.animateCss(this.animationOut, function () {
-          _this3.$popover.remove();
+          _this4.$popover.remove();
 
-          _this3.$el.removeAttr('data-popover');
+          _this4.$el.removeAttr('data-popover');
 
-          _this3.$popover = null;
-          _this3.placementChanged = false;
+          _this4.$popover = null;
+          _this4.placementChanged = false;
 
-          _this3.onClose();
+          _this4.onClose();
         });
       } else {
         this.$popover.remove();
@@ -2206,13 +2219,14 @@
       this.$select.find('.select-item').remove();
       this.$selectItems = [];
       this.$selectIconContainer.html(this.selectIconDefault);
+      this.$selectHeader.removeClass('select-placeholder');
 
       if (this.data[this.name].length == 0 && this.dynamicTitle && this.dynamicTitleDefault && this.dynamicTitleDefault !== 0 && this.$selectTitle.text().trim() == 0 && (this.$selectItems.length > 0 || this.searchApi)) {
         this.$selectTitle.html(this.dynamicTitleDefault);
       }
 
       if (this.$selectItems.length == 0 && !this.searchApi && this.dynamicTitle && this.dynamicTitleEmptyDefault && this.dynamicTitleEmptyDefault !== 0) {
-        this.$selectHeader.css('cursor', 'default');
+        this.$selectHeader.addClass('select-placeholder');
         this.$selectIconContainer.addClass('d-none');
         this.$selectTitle.html(this.dynamicTitleEmptyDefault);
       }
@@ -2349,12 +2363,14 @@
           _this3.$scrollableContent = _this3.$select.find('.select-scrollable-content') ? _this3.$select.find('.select-scrollable-content') : false;
           _this3.$selectItems = _this3.$select.find('.select-item');
 
+          _this3.$selectHeader.removeClass('select-placeholder');
+
           if (_this3.data[_this3.name].length == 0 && _this3.dynamicTitle && _this3.dynamicTitleDefault && _this3.dynamicTitleDefault !== 0 && _this3.$selectTitle.text().trim() == 0 && (_this3.$selectItems.length > 0 || _this3.searchApi)) {
             _this3.$selectTitle.html(_this3.dynamicTitleDefault);
           }
 
           if (_this3.$selectItems.length == 0 && !_this3.searchApi && _this3.dynamicTitle && _this3.dynamicTitleEmptyDefault && _this3.dynamicTitleEmptyDefault !== 0) {
-            _this3.$selectHeader.css('cursor', 'default');
+            _this3.$selectHeader.addClass('select-placeholder');
 
             _this3.$selectIconContainer.addClass('d-none');
 
@@ -2628,7 +2644,7 @@
       var faNameSpace = this.opts.faPro ? 'fal' : 'fas';
 
       if (this.showValidStateIcon) {
-        this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-green icon\"></i>");
+        this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-success icon\"></i>");
       } else {
         this.$selectIconContainer.html(this.selectIconDefault);
       }
@@ -2894,7 +2910,7 @@
         }, 300);
 
         if (this.data[this.name].length > 0 && this.showValidStateIcon) {
-          this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-green icon\"></i>");
+          this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-success icon\"></i>");
         } else {
           this.$selectIconContainer.html(this.selectIconDefault);
         }
@@ -3145,7 +3161,7 @@
       if (!this.showFooter) {
         return '';
       } else {
-        return "\n\n                <div class=\"select-footer\">\n\n                    <button class=\"btn btn-block btn-secondary\" type=\"button\" tabindex=\"-1\" data-select-close >\n                        " + this.btnCloseText + "\n                    </button>\n\n                </div>\n\n            ";
+        return "\n\n                <div class=\"select-footer\">\n\n                    <button class=\"btn btn-block btn-light btn-sm\" type=\"button\" tabindex=\"-1\" data-select-close >\n                        " + this.btnCloseText + "\n                    </button>\n\n                </div>\n\n            ";
       }
     };
 
@@ -3768,21 +3784,25 @@
       this.placement = this.$el.data('placement') ? this.$el.data('placement') : this.opts.placement;
       this.placementChanged = false;
       this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
+      this.trigger = this.$el.data('trigger') ? this.$el.data('trigger') : this.opts.trigger;
     } // Bind events that trigger methods
     ;
 
     _proto.bindEvents = function bindEvents() {
       var _this2 = this;
 
-      this.$el.on('mouseenter' + '.' + NAME$3, function () {
-        _this2.show();
-      });
-      this.$el.on('mouseleave' + '.' + NAME$3, function () {
-        _this2.close();
-      });
-      this.$el.on('blur' + '.' + NAME$3, function () {
-        _this2.close();
-      });
+      if (this.trigger === 'auto') {
+        this.$el.on('mouseenter' + '.' + NAME$3, function () {
+          _this2.show();
+        });
+        this.$el.on('mouseleave' + '.' + NAME$3, function () {
+          _this2.close();
+        });
+        this.$el.on('blur' + '.' + NAME$3, function () {
+          _this2.close();
+        });
+      }
+
       this.$el.on('destroyed' + '.' + NAME$3, function () {
         _this2.close();
       });
@@ -3825,6 +3845,7 @@
       this.log('Animation speed: ' + this.animationSpeed);
       this.log('Placement: ' + this.placement);
       this.log('Content: ' + this.content);
+      this.log('Trigger: ' + this.trigger);
     } // Set positions
     ;
 
@@ -4176,6 +4197,7 @@
       animationSpeed: 'fastest',
       placement: 'bottom',
       content: '',
+      trigger: 'auto',
       onInit: null,
       onUpdate: null,
       onDestroy: null,
@@ -4428,7 +4450,9 @@
     _proto.buildCache = function buildCache() {
       this.$el = $(this.el);
       this.$target = this.$el.data('target') ? $(document).find(this.$el.data('target')) : $(document).find(this.opts.target);
+      this.breakpoint = this.$el.data('breakpoint');
       this.expanded = this.$el.attr('aria-expanded') == 'true' ? true : false;
+      this.transitionendEvent = this.whichTransitionEvent();
 
       if (this.$target.length) {
         this.targetHeight = this.$target.height();
@@ -4458,10 +4482,12 @@
       var _this2 = this;
 
       this.$el.on('click' + '.' + this.name, function (e) {
-        if (_this2.expanded) {
-          _this2.close();
-        } else {
-          _this2.show();
+        if (!_this2.breakpoint || !window.matchMedia("(min-width: " + _this2.breakpoint + "px)").matches) {
+          if (_this2.expanded) {
+            _this2.close();
+          } else {
+            _this2.show();
+          }
         }
       });
       $(window).on('resize', debounce(function () {
@@ -4499,9 +4525,8 @@
     ;
 
     _proto.show = function show() {
-      var _this3 = this;
+      var self = this; // Update target height if something is added to dom which causes height to change
 
-      // Update target height if something is added to dom which causes height to change
       if (this.targetHeight !== this.$target.height()) {
         this.targetHeight = this.$target.height();
       }
@@ -4524,30 +4549,30 @@
         this.$indicator.addClass('show');
       }
 
-      this.$target.one(this.whichTransitionEvent(), function () {
-        _this3.$target.removeClass('collapsing');
-
-        if (_this3.$el.is('button')) {
-          _this3.$el.attr('disabled', false);
-        }
-
-        _this3.$target.removeAttr('style');
+      this.$target.on(this.transitionendEvent, function (e) {
+        if ($(e.target).is(this)) {
+          self.$target.removeClass('collapsing');
 
-        _this3.$target.addClass('collapse show');
-
-        _this3.$el.attr('aria-expanded', true);
-
-        _this3.$target.css('height', 'auto');
+          if (self.$el.is('button')) {
+            self.$el.attr('disabled', false);
+          }
 
-        _this3.expanded = true;
+          self.$target.removeAttr('style');
+          self.$target.addClass('collapse show');
+          self.$el.attr('aria-expanded', true);
+          self.$target.css('height', 'auto');
+          self.expanded = true;
+          $(this).off(self.transitionendEvent);
+        }
       });
       this.onShow();
     } // Close
     ;
 
     _proto.close = function close() {
-      var _this4 = this;
+      var _this3 = this;
 
+      var self = this;
       this.$target.removeClass('collapse show');
       this.$target.addClass('collapsing');
 
@@ -4561,30 +4586,31 @@
 
       this.$target.css('height', this.$target.height());
       setTimeout(function () {
-        _this4.$target.css('height', 0);
+        _this3.$target.css('height', 0);
       }, 10);
 
       if (this.$indicator.length && this.$indicator.hasClass('show')) {
         this.$indicator.removeClass('show');
       }
 
-      this.$target.one(this.whichTransitionEvent(), function () {
-        _this4.$target.removeClass('collapsing');
-
-        if (_this4.$el.is('button')) {
-          _this4.$el.attr('disabled', false);
-        }
-
-        _this4.$target.removeAttr('style');
+      this.$target.on(this.transitionendEvent, function (e) {
+        if ($(e.target).is(this)) {
+          self.$target.removeClass('collapsing');
 
-        _this4.$target.addClass('collapse');
+          if (self.$el.is('button')) {
+            self.$el.attr('disabled', false);
+          }
 
-        _this4.$el.attr('aria-expanded', false);
+          self.$target.removeAttr('style');
+          self.$target.addClass('collapse');
+          self.$el.attr('aria-expanded', false);
+          self.expanded = false; // Update target height if something is added to dom which causes height to change
 
-        _this4.expanded = false; // Update target height if something is added to dom which causes height to change
+          if (self.targetHeight !== self.$target.height()) {
+            self.targetHeight = self.$target.height();
+          }
 
-        if (_this4.targetHeight !== _this4.$target.height()) {
-          _this4.targetHeight = _this4.$target.height();
+          $(this).off(self.transitionendEvent);
         }
       });
       this.onClose();
@@ -5422,7 +5448,7 @@
         }
 
         if (dialog.actions.remove.visible) {
-          btnStyle = dialog.actions.remove.primary ? 'btn-primary' : 'btn-secondary';
+          btnStyle = 'btn-remove';
           btnClasses = dialog.actions.remove.classes ? ' ' + dialog.actions.remove.classes : '';
           btnAttrs = dialog.actions.remove.attrs ? ' ' + dialog.actions.remove.attrs : '';
           btnRemove = "\n                    <button type=\"button\" class=\"btn " + btnStyle + btnClasses + "\"" + btnAttrs + " data-dialog-remove>\n                        " + dialog.actions.remove.content + "\n                    </button>\n                ";
@@ -5435,7 +5461,7 @@
           btnConfirm = "\n                    <button type=\"button\" class=\"btn " + btnStyle + btnClasses + "\"" + btnAttrs + " data-dialog-confirm>\n                        " + dialog.actions.confirm.content + "\n                    </button>\n                ";
         }
 
-        footer = "\n                " + btnCancel + "\n                " + btnRemove + "\n                " + btnConfirm + "\n            ";
+        footer = "\n                " + btnRemove + "\n                <div class=\"spacer\"></div>\n                " + btnCancel + "\n                " + btnConfirm + "\n            ";
       } else {
         return footer;
       }