@finqu/cool 1.2.6 → 1.2.7

package/dist/js/cool.esm.js

@@ -1,6 +1,6 @@
 /*!
-  * Cool UI v1.2.5 (https://finqu.fi)
-  * Copyright 2011-2019 Finqu Oy
+  * Cool UI v1.2.6 (https://finqu.fi)
+  * Copyright 2011-2020 Finqu Oy
   * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
   */
 import 'jquery';
@@ -1671,6 +1671,7 @@ function (_AbstractUIComponent) {
   _proto.buildCache = function buildCache() {
     this.$el = $(this.el);
     this.$container = this.$el.data('container') ? $(this.$el.data('container')) : $(this.opts.container);
+    this.containerAutoDetect = this.$el.data('containerAutoDetect') ? this.$el.data('containerAutoDetect') : this.opts.containerAutoDetect;
     this.id = 'popover-' + this.generateUUID();
     this.animation = this.$el.data('animation') ? this.$el.data('animation') : this.opts.animation;
     this.animationIn = this.$el.data('animationIn') ? this.$el.data('animationIn') : this.opts.animationIn;
@@ -1681,6 +1682,10 @@ function (_AbstractUIComponent) {
     this.placementChanged = false;
     this.title = this.$el.data('title') ? this.$el.data('title') : this.opts.title;
     this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
+
+    if (this.containerAutoDetect) {
+      this.$container = this.$el.offsetParent();
+    }
   } // Bind events that trigger methods
   ;
 
@@ -2105,6 +2110,7 @@ if (typeof $ !== 'undefined') {
 
   $.fn[NAME].defaults = {
     container: '.content-inner',
+    containerAutoDetect: false,
     trigger: 'focus',
     placement: 'bottom',
     animation: true,
@@ -2258,13 +2264,13 @@ function (_AbstractUIComponent) {
         _this3.data = _this3.$el.data('setData');
       }
 
-      if (typeof _this3.data[_this3.name].filter !== 'undefined' && self.itemsToExclude) {
+      if (_this3.data[_this3.name] !== 'undefined' && _this3.data[_this3.name].length > 0 && self.itemsToExclude) {
         _this3.data[_this3.name] = _this3.data[_this3.name].filter(function (item) {
           return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
         });
       }
 
-      if (typeof _this3.items.filter !== 'undefined' && self.itemsToExclude) {
+      if (_this3.items !== 'undefined' && _this3.items.lengths > 0 && self.itemsToExclude) {
         _this3.items = _this3.items.filter(function (item) {
           return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
         });
@@ -2287,10 +2293,12 @@ function (_AbstractUIComponent) {
         if (!_this3.$select.length) {
           var items = _this3._renderItemList(_this3.items);
 
-          _this3.$select = $("\n                        <div class=\"select-content\">\n\n                            " + _this3._renderSearch() + "\n\n                            <div class=\"select-scrollable-content\">" + items + "</div>\n\n                            " + _this3._renderFooter() + "\n\n                        </div>\n                    ");
+          _this3.$select = $("\n                        <div class=\"select-content\">\n\n                            " + _this3._renderSearch() + "\n\n                            <div class=\"select-scrollable-content\"></div>\n\n                            " + _this3._renderFooter() + "\n\n                        </div>\n                    ");
 
           _this3.$el.append(_this3.$select);
 
+          _this3.$select.find('.select-scrollable-content').append(items);
+
           secondaryResolve();
         } else {
           secondaryResolve();
@@ -2603,11 +2611,27 @@ function (_AbstractUIComponent) {
           item.id = item[self.primaryKeyword].toString();
           return item;
         });
+        var itemIds = items.map(function (item) {
+          return parseInt(item.id, 10);
+        }); // Remove value from data if it doesn't exist anymore
+
+        self.data[self.name] = self.data[self.name].filter(function (value) {
+          return itemIds.indexOf(parseInt(value, 10)) > -1;
+        });
+
+        if (self.data[self.name].length == 0) {
+          self.$selectIconContainer.html(self.selectIconDefault);
+        }
+
         items = items.filter(function (item) {
           return self.data[self.name].indexOf(item.id) > -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
         });
-        var result = $(self._renderItemList(items));
+
+        var result = self._renderItemList(items);
+
         $.when(self.$scrollableContent.append(result)).then(function () {
+          var $inputs = self.$scrollableContent.find(':input');
+
           if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
             self.scroll.update();
             self.scroll.settings.suppressScrollY = false;
@@ -2618,22 +2642,22 @@ function (_AbstractUIComponent) {
             self.$scrollableContent.removeClass('ps-show-rail-y');
           }
 
-          if (self.$select.find(':input[type="checkbox"]').length) {
+          if (self.$scrollableContent.find(':input[type="checkbox"]').length) {
             self.type = 'checkbox';
-          } else if (self.$select.find(':input[type="radio"]').length) {
+          } else if (self.$scrollableContent.find(':input[type="radio"]').length) {
             self.type = 'radio';
           }
 
           if (self.type == 'checkbox') {
             self.data[self.name].forEach(function (value) {
-              var $input = self.$select.find(':input').filter(function () {
+              var $input = $inputs.filter(function () {
                 return this.value == value;
               });
               $input.prop('checked', true);
               self.onSelect($input[0]);
             });
           } else if (self.type == 'radio') {
-            var $input = self.$select.find(':input').filter(function () {
+            var $input = $inputs.filter(function () {
               return this.value == self.data[self.name];
             });
             $input.prop('checked', true);
@@ -2648,22 +2672,35 @@ function (_AbstractUIComponent) {
         });
       });
     } else {
-      if (this.$select.find(':input[type="checkbox"]').length) {
+      // Remove value from data if it doesn't exist anymore
+      var $inputs = this.$scrollableContent.find(':input');
+      var inputValues = $inputs.length > 0 ? $inputs.map(function () {
+        return parseInt(this.value, 10);
+      }).get() : [];
+      this.data[this.name] = this.data[this.name].filter(function (value) {
+        return inputValues.indexOf(parseInt(value, 10)) > -1;
+      });
+
+      if (this.data[this.name].length == 0) {
+        this.$selectIconContainer.html(this.selectIconDefault);
+      }
+
+      if (this.$scrollableContent.find(':input[type="checkbox"]').length) {
         this.type = 'checkbox';
-      } else if (this.$select.find(':input[type="radio"]').length) {
+      } else if (this.$scrollableContent.find(':input[type="radio"]').length) {
         this.type = 'radio';
       }
 
       if (this.type == 'checkbox') {
         this.data[this.name].forEach(function (value) {
-          var $input = self.$select.find(':input').filter(function () {
+          var $input = $inputs.filter(function () {
             return this.value == value;
           });
           $input.prop('checked', true);
           self.onSelect($input[0]);
         });
       } else if (this.type == 'radio') {
-        var $input = this.$select.find(':input').filter(function () {
+        var $input = $inputs.filter(function () {
           return this.value == self.data[self.name];
         });
         $input.prop('checked', true);
@@ -2697,7 +2734,9 @@ function (_AbstractUIComponent) {
           items = items.filter(function (item) {
             return self.data[self.name].indexOf(item.id) === -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
           });
-          var result = $(self._renderItemList(items));
+
+          var result = self._renderItemList(items);
+
           $.when(self.$scrollableContent.append(result)).then(function () {
             var faNameSpace = self.opts.faPro ? 'fal' : 'fas';
             self.$searchIconContainer.html("<i class=\"" + faNameSpace + " fa-times icon\"></i>");
@@ -2819,10 +2858,21 @@ function (_AbstractUIComponent) {
   ;
 
   _proto.onSelect = function onSelect(el) {
+    var self = this;
     var onSelect = this.opts.onSelect;
+    var data = $(el).parents('.select-item').data();
+
+    if (this.searchApi.length && !$.isEmptyObject(data)) {
+      if ($(el).length && el.checked) {
+        this.items.push(data);
+      } else {
+        this.items = $.grep(this.items, function (item) {
+          return item[self.primaryKeyword] != data.id;
+        });
+      }
+    }
 
     if (typeof onSelect === 'function') {
-      var data = this.getItem('id', el.value);
       onSelect.call(el, data, this);
     }
   } // Add more items after plugin is already initialized
@@ -3010,7 +3060,7 @@ function (_AbstractUIComponent) {
   };
 
   _proto._renderItemList = function _renderItemList(items) {
-    var result = '';
+    var result = [];
 
     for (var i = 0; i < items.length; ++i) {
       var item = items[i];
@@ -3028,7 +3078,7 @@ function (_AbstractUIComponent) {
         }
       }
 
-      result += "\n\n                <div class=\"select-item\">\n\n                    <div class=\"select-item-" + this.type + "\">\n\n                        <div class=\"styled-" + this.type + "\">\n\n                            <input type=\"" + this.type + "\" id=\"select-" + this.name + "-" + items[i].id + "\" value=\"" + items[i].id + "\" tabindex=\"-1\">\n\n                            <label for=\"select-" + this.name + "-" + items[i].id + "\">\n\n                                <span class=\"radio-inner\">\n                                    <svg viewBox=\"0 0 18 18\">\n                                        <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n                                    </svg>\n                                </span>\n\n                                <span class=\"" + this.type + "-label\"" + (typeof this.labelTemplate !== 'function' ? ' data-label' : '') + ">\n                                    " + label + "\n                                </span>\n\n                            </label>\n\n                        </div>\n\n                    </div>\n\n                </div>\n\n            ";
+      result.push($("\n\n                <div class=\"select-item\">\n\n                    <div class=\"select-item-" + this.type + "\">\n\n                        <div class=\"styled-" + this.type + "\">\n\n                            <input type=\"" + this.type + "\" id=\"select-" + this.name + "-" + items[i].id + "\" value=\"" + items[i].id + "\" tabindex=\"-1\">\n\n                            <label for=\"select-" + this.name + "-" + items[i].id + "\">\n\n                                <span class=\"radio-inner\">\n                                    <svg viewBox=\"0 0 18 18\">\n                                        <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n                                    </svg>\n                                </span>\n\n                                <span class=\"" + this.type + "-label\"" + (typeof this.labelTemplate !== 'function' ? ' data-label' : '') + ">\n                                    " + label + "\n                                </span>\n\n                            </label>\n\n                        </div>\n\n                    </div>\n\n                </div>\n\n            ").data(item));
     }
 
     return result;