@finqu/cool 1.1.9 → 1.2.0

package/dist/js/cool.esm.js

@@ -1,5 +1,5 @@
 /*!
-  * Cool UI v1.1.8 (https://finqu.fi)
+  * Cool UI v1.1.9 (https://finqu.fi)
   * Copyright 2011-2019 Finqu Oy
   * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
   */
@@ -1373,6 +1373,21 @@ function () {
       } else {
         return;
       }
+    }); // button toggle
+
+    $(document).on('click', '.btn-group-toggle .btn > input', function (e) {
+      e.stopPropagation();
+    });
+    $(document).on('click', '.btn-group-toggle .btn', function () {
+      $(this).find('input').trigger('click');
+      $(this).parent().find('input').trigger('change');
+    });
+    $(document).on('change', '.btn-group-toggle .btn > input', function () {
+      if ($(this).is(':checked')) {
+        $(this).parent().addClass('active');
+      } else {
+        $(this).parent().removeClass('active');
+      }
     }); // Force select element unfocus after change
 
     $('select').on('change', function () {
@@ -1509,6 +1524,14 @@ var touchEvents = function touchEvents() {
   return result;
 };
 
+$.event.special.destroyed = {
+  remove: function remove(obj) {
+    if (obj.handler) {
+      obj.handler();
+    }
+  }
+};
+
 var AbstractUIComponent =
 /*#__PURE__*/
 function () {
@@ -1521,7 +1544,7 @@ function () {
     var onInit = this.opts.onInit;
 
     if (typeof onInit === 'function') {
-      onInit.call(this.el);
+      onInit.call(this);
     }
   } // Update callback
   ;
@@ -1530,7 +1553,7 @@ function () {
     var onUpdate = this.opts.onUpdate;
 
     if (typeof onUpdate === 'function') {
-      onUpdate.call(this.el);
+      onUpdate.call(this);
     }
   } // Destroy callback
   ;
@@ -1539,7 +1562,7 @@ function () {
     var onDestroy = this.opts.onDestroy;
 
     if (typeof onDestroy === 'function') {
-      onDestroy.call(this.el);
+      onDestroy.call(this);
     }
   } // Show callback
   ;
@@ -1548,7 +1571,7 @@ function () {
     var onShow = this.opts.onShow;
 
     if (typeof onShow === 'function') {
-      onShow.call(this.el);
+      onShow.call(this);
     }
   } // Close callback
   ;
@@ -1557,7 +1580,16 @@ function () {
     var onClose = this.opts.onClose;
 
     if (typeof onClose === 'function') {
-      onClose.call(this.el);
+      onClose.call(this);
+    }
+  } // Reset callback
+  ;
+
+  _proto.onReset = function onReset() {
+    var onReset = this.opts.onReset;
+
+    if (typeof onReset === 'function') {
+      onReset.call(this);
     }
   } // Debug log
   ;
@@ -2116,7 +2148,7 @@ function (_AbstractUIComponent) {
   _proto.init = function init() {
     var _this2 = this;
 
-    $.when(this.buildCache()).then(function () {
+    this.buildCache().then(function () {
       _this2.buildScroll();
 
       _this2.bindEvents();
@@ -2141,112 +2173,165 @@ function (_AbstractUIComponent) {
     this.buildCache();
     this.bindEvents();
     this.onUpdate();
-  } // Cache DOM nodes for performance
+  } // Reset plugin data
   ;
 
-  _proto.buildCache = function buildCache() {
-    var _this3 = this;
-
-    this.$el = $(this.el);
-    this.$selectHeader = this.$el.find('.select-header');
-    this.$selectIconContainer = this.$selectHeader.find('.select-icon');
-    this.name = this.$el.data('name') ? this.$el.data('name') : this.opts.name;
-    this.scrollContentHeight = this.$el.data('scrollContentHeight') ? this.$el.data('scrollContentHeight') : this.opts.scrollContentHeight;
-    this.items = this.$el.data('items') ? this.$el.data('items') : this.opts.items;
+  _proto.reset = function reset() {
     this.data = {};
     this.data[this.name] = [];
-    this.searchData = [];
-    this.searchApi = this.$el.data('searchApi') ? this.$el.data('searchApi') : this.opts.searchApi;
-    this.type = this.$el.data('type') ? this.$el.data('type') : this.opts.type;
-    this.contentOpen = false;
+    this.items = [];
+    this.$select.find('.select-item').remove();
+    this.$selectItems = [];
+    this.$selectIconContainer.html(this.selectIconDefault);
 
-    if (this.$el.data('setData') && this.$el.data('setData') != '') {
-      this.data = this.$el.data('setData');
+    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.$el.find('.select-search')) {
-      this.showSearch = true;
-    } else {
-      this.showSearch = this.$el.data('showSearch') ? this.$el.data('showSearch') : this.opts.showSearch;
+    if (this.$selectItems.length == 0 && !this.searchApi && this.dynamicTitle && this.dynamicTitleEmptyDefault && this.dynamicTitleEmptyDefault !== 0) {
+      this.$selectHeader.css('cursor', 'default');
+      this.$selectIconContainer.addClass('d-none');
+      this.$selectTitle.html(this.dynamicTitleEmptyDefault);
     }
 
-    if (this.$el.find('.select-footer')) {
-      this.showFooter = true;
-    } else {
-      this.showFooter = this.$el.data('showFooter') ? this.$el.data('showFooter') : this.opts.showFooter;
+    if (this.showSearch) {
+      this.searchData = [];
+      this.$searchInput.val('');
+      this.searchString = '';
+      this.search.call(this);
     }
+  } // Cache DOM nodes for performance
+  ;
 
-    if (this.items.length) {
-      var items = this._renderItemList(this.items);
-
-      this.$select = $("\n                <div class=\"select-content\">\n\n                    " + this._renderSearch() + "\n\n                    <div class=\"select-scrollable-content\">" + items + "</div>\n\n                    " + this._renderFooter() + "\n\n                </div>\n            ");
-      this.$el.append(this.$select);
-      this.$scrollableContent = this.$select.find('.select-scrollable-content') ? this.$select.find('.select-scrollable-content') : false;
-      this.$selectItems = this.$select.find('.select-item');
-      this.$selectLabels = this.$select.find('[data-label]');
+  _proto.buildCache = function buildCache() {
+    var _this3 = this;
 
-      if (this.showSearch) {
-        this.$searchContainer = this.$select.find('.select-search');
-        this.$searchInput = this.$select.find('[name="select-search"]');
-        this.$searchIconContainer = this.$select.find('.select-search-icon');
-        this.$clearSearchButton = this.$select.find('[data-clear-search]');
+    return new Promise(function (primaryResolve, primaryReject) {
+      var self = _this3;
+      _this3.$el = $(_this3.el);
+      _this3.$container = _this3.$el.parent();
+      _this3.$selectHeader = _this3.$el.find('.select-header');
+      _this3.$selectTitle = _this3.$el.find('.select-title');
+      _this3.$selectIconContainer = _this3.$selectHeader.find('.select-icon');
+      _this3.selectIconDefault = _this3.$selectHeader.find('.select-icon') ? _this3.$selectHeader.find('.select-icon').html() : '<i class="' + (_this3.opts.faPro ? 'fal' : 'fas') + 'fa-angle-down icon"></i>';
+      _this3.name = _this3.$el.data('name') ? _this3.$el.data('name') : _this3.opts.name;
+      _this3.scrollContentHeight = _this3.$el.data('scrollContentHeight') ? _this3.$el.data('scrollContentHeight') : _this3.opts.scrollContentHeight;
+      _this3.items = _this3.$el.data('items') ? _this3.$el.data('items') : _this3.opts.items;
+      _this3.data = {};
+      _this3.data[_this3.name] = [];
+      _this3.searchData = [];
+      _this3.searchApi = _this3.$el.data('searchApi') ? _this3.$el.data('searchApi') : _this3.opts.searchApi;
+      _this3.type = _this3.$el.data('type') ? _this3.$el.data('type') : _this3.opts.type;
+      _this3.contentOpen = false;
+      _this3.searchPlaceholder = _this3.$el.data('search-placeholder') ? _this3.$el.data('search-placeholder') : _this3.opts.searchPlaceholder;
+      _this3.btnCloseText = _this3.$el.data('btn-close-text') ? _this3.$el.data('btn-close-text') : _this3.opts.btnCloseText;
+      _this3.labelTemplate = _this3.opts.labelTemplate;
+      _this3.confirmCheck = _this3.opts.confirmCheck;
+      _this3.confirmUncheck = _this3.opts.confirmUncheck;
+      _this3.preventUncheck = _this3.opts.preventUncheck;
+      _this3.dynamicTitle = _this3.$el.data('dynamicTitle') ? _this3.$el.data('dynamicTitle') : _this3.opts.dynamicTitle;
+      _this3.dynamicTitleDefault = _this3.$el.data('dynamicTitleDefault') ? _this3.$el.data('dynamicTitleDefault') : _this3.opts.dynamicTitleDefault;
+      _this3.dynamicTitleEmptyDefault = _this3.$el.data('dynamicTitleEmptyDefault') ? _this3.$el.data('dynamicTitleEmptyDefault') : _this3.opts.dynamicTitleEmptyDefault;
+      _this3.allowNoneOnRadioSelect = _this3.$el.data('allowNoneOnRadioSelect') ? _this3.$el.data('allowNoneOnRadioSelect') : _this3.opts.allowNoneOnRadioSelect;
+      _this3.showValidStateIcon = _this3.$el.data('showValidStateIcon') ? _this3.$el.data('showValidStateIcon') : _this3.opts.showValidStateIcon;
+      _this3.itemsToExclude = _this3.$el.data('itemsToExclude') ? _this3.$el.data('itemsToExclude').replace(/\s/g, '').split(',') : _this3.opts.itemsToExclude;
+      _this3.preventClose = false;
+
+      if (_this3.opts.setData) {
+        _this3.data = _this3.opts.setData;
       }
 
-      if (this.showFooter) {
-        this.$footerContainer = this.$select.find('.select-footer');
-        this.$closeButton = this.$select.find('[data-select-close]');
+      if (_this3.$el.data('setData') && _this3.$el.data('setData') != '') {
+        _this3.data = _this3.$el.data('setData');
       }
 
-      $.each(this.$selectLabels, function (i, el) {
-        this.searchData.push({
-          id: i,
-          val: $(el).text().trim()
-        });
+      _this3.data[_this3.name] = _this3.data[_this3.name].filter(function (item) {
+        return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
+      });
+      _this3.items = _this3.items.filter(function (item) {
+        return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
       });
-      this.log(this.$el);
-      this.log(this.$select);
-      this.log(this.$scrollableContent);
-      this.log('Name: ' + this.name);
-      this.log('Show search: ' + this.showSearch);
-      this.log('Show footer: ' + this.showFooter);
-      this.log('Scroll content height: ' + this.scrollContentHeight + 'px');
-      this.log(this.items);
-      this.log(this.searchData);
-    } else {
-      this.$select = this.$el.find('.select-content');
-      this.$scrollableContent = this.$select.find('.select-scrollable-content');
-      this.$selectItems = this.$select.find('.select-item');
-      this.$selectLabels = this.$select.find('[data-label]');
 
-      if (this.showSearch) {
-        this.$searchContainer = this.$select.find('.select-search');
-        this.$searchInput = this.$select.find('[name="select-search"]');
-        this.$searchIconContainer = this.$select.find('.select-search-icon');
-        this.$clearSearchButton = this.$select.find('[data-clear-search]');
+      if (_this3.$el.find('.select-search').length) {
+        _this3.showSearch = true;
+      } else {
+        _this3.showSearch = _this3.$el.data('showSearch') ? _this3.$el.data('showSearch') : _this3.opts.showSearch;
       }
 
-      if (this.showFooter) {
-        this.$footerContainer = this.$select.find('.select-footer');
-        this.$closeButton = this.$select.find('[data-select-close]');
+      if (_this3.$el.find('.select-footer').length) {
+        _this3.showFooter = true;
+      } else {
+        _this3.showFooter = _this3.$el.data('showFooter') ? _this3.$el.data('showFooter') : _this3.opts.showFooter;
       }
 
-      $.each(this.$selectLabels, function (i, el) {
-        _this3.searchData.push({
-          id: i,
-          val: $(el).text().trim()
-        });
+      _this3.$select = _this3.$el.find('.select-content');
+      new Promise(function (secondaryResolve, secondaryReject) {
+        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.$el.append(_this3.$select);
+
+          secondaryResolve();
+        } else {
+          secondaryResolve();
+        }
+      }).then(function () {
+        _this3.$scrollableContent = _this3.$select.find('.select-scrollable-content') ? _this3.$select.find('.select-scrollable-content') : false;
+        _this3.$selectItems = _this3.$select.find('.select-item');
+
+        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.$selectIconContainer.addClass('d-none');
+
+          _this3.$selectTitle.html(_this3.dynamicTitleEmptyDefault);
+        }
+
+        if (_this3.showSearch) {
+          _this3.$searchContainer = _this3.$select.find('.select-search');
+          _this3.$searchInput = _this3.$select.find('[name="select-search"]');
+          _this3.$searchIconContainer = _this3.$select.find('.select-search-icon');
+          _this3.$clearSearchButton = _this3.$select.find('[data-clear-search]'); // Prevent tabfocus from breaking select functionality
+
+          _this3.$searchInput[0].tabIndex = -1;
+        }
+
+        if (_this3.showFooter) {
+          _this3.$footerContainer = _this3.$select.find('.select-footer');
+          _this3.$closeButton = _this3.$select.find('[data-select-close]'); // Prevent tabfocus from breaking select functionality
+
+          _this3.$closeButton[0].tabIndex = -1;
+        }
+
+        _this3.buildSearchData();
+
+        _this3.log(_this3.$el);
+
+        _this3.log(_this3.$select);
+
+        _this3.log(_this3.$scrollableContent);
+
+        _this3.log('Name: ' + _this3.name);
+
+        _this3.log('Show search: ' + _this3.showSearch);
+
+        _this3.log('Show footer: ' + _this3.showFooter);
+
+        _this3.log('Scroll content height: ' + _this3.scrollContentHeight + 'px');
+
+        _this3.log(_this3.items);
+
+        _this3.log(_this3.searchData);
+
+        primaryResolve();
       });
-      this.log(this.$el);
-      this.log(this.$select);
-      this.log(this.$scrollableContent);
-      this.log('Name: ' + this.name);
-      this.log('Show search: ' + this.showSearch);
-      this.log('Show footer: ' + this.showFooter);
-      this.log('Scroll content height: ' + this.scrollContentHeight + 'px');
-      this.log(this.items);
-      this.log(this.searchData);
-      return true;
-    }
+    });
   } // Build scroll
   ;
 
@@ -2279,7 +2364,9 @@ function (_AbstractUIComponent) {
           scrollYMarginOffset: -1,
           suppressScrollY: true,
           suppressScrollX: true
-        });
+        }); // Prevent tabfocus from breaking select functionality
+
+        this.$scrollableContent.find('[tabindex="0"]').attr('tabindex', -1);
 
         if (this.$scrollableContent[0].offsetHeight < this.$scrollableContent[0].scrollHeight) {
           this.$scrollableContent.addClass('ps-show-rail-y');
@@ -2287,32 +2374,94 @@ function (_AbstractUIComponent) {
         }
       }
     }
+  } // Build search data
+  ;
+
+  _proto.buildSearchData = function buildSearchData() {
+    var _this4 = this;
+
+    return new Promise(function (resolve, reject) {
+      _this4.searchData = [];
+
+      var selectLabels = _this4.$select.find('[data-label]');
+
+      $.each(selectLabels, function (i, el) {
+        _this4.searchData.push({
+          id: i,
+          val: $(el).text().trim()
+        });
+      });
+      resolve();
+    });
   } // Bind events that trigger methods
   ;
 
   _proto.bindEvents = function bindEvents() {
-    var _this4 = this;
+    var _this5 = this;
 
     var self = this;
     this.$selectHeader.on('click' + '.' + NAME$1, function () {
-      if (_this4.contentOpen) {
-        _this4.close();
-      } else {
-        _this4.show();
+      if (_this5.contentOpen) {
+        _this5.close();
+      } else if (_this5.$selectItems.length > 0 || _this5.searchApi) {
+        _this5.show();
       }
     });
     this.$el.on('change' + '.' + NAME$1, 'input[type="checkbox"]', function () {
+      var el = this;
       var val = $(this).val();
-
-      if (this.checked) {
+      self.preventClose = true;
+
+      if (typeof self.confirmCheck === 'function' && el.checked) {
+        el.checked = false;
+        self.confirmCheck(function (cb) {
+          if (cb == 'confirmed') {
+            self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
+            el.checked = true;
+            self.onSelect(el);
+            self.preventClose = false;
+          } else {
+            setTimeout(function () {
+              self.preventClose = false;
+            }, 800);
+          }
+        }, el);
+      } else if (el.checked) {
         self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
-      } else {
+        self.onSelect(el);
+        setTimeout(function () {
+          self.preventClose = false;
+        }, 800);
+      } else if (typeof self.confirmUncheck === 'function' && !el.checked) {
+        el.checked = true;
+        self.confirmUncheck(function (cb) {
+          if (cb == 'confirmed') {
+            self.data[self.name] = self.data[self.name].filter(function (n) {
+              return n != val;
+            });
+            el.checked = false;
+            self.onSelect(el);
+            self.preventClose = false;
+          } else {
+            setTimeout(function () {
+              self.preventClose = false;
+            }, 800);
+          }
+        }, el);
+      } else if (!el.checked && !self.preventUncheck) {
         self.data[self.name] = self.data[self.name].filter(function (n) {
           return n != val;
         });
+        self.onSelect(el);
+        setTimeout(function () {
+          self.preventClose = false;
+        }, 800);
+      } else if (!el.checked && self.preventUncheck) {
+        el.checked = true;
+        setTimeout(function () {
+          self.preventClose = false;
+        }, 800);
       }
-
-      self.onSelect(this);
     });
     this.$el.on('change' + '.' + NAME$1, 'input[type="radio"]', function () {
       var val = $(this).val();
@@ -2326,12 +2475,20 @@ function (_AbstractUIComponent) {
       }
     });
     this.$el.on('click' + '.' + NAME$1, 'input[type="radio"]', function () {
-      if ($(this).hasClass('checked')) {
-        self.data[plugin.name] = [];
+      if ($(this).hasClass('checked') && self.allowNoneOnRadioSelect) {
+        self.data[self.name] = [];
         $(this).prop('checked', false);
         $(this).removeClass('checked');
+
+        if (self.dynamicTitle) {
+          self.$selectTitle.html(self.dynamicTitleDefault);
+        }
       } else {
         $(this).addClass('checked');
+
+        if (self.dynamicTitle) {
+          self.$selectTitle.html($(this).parent().find('[data-label]').text());
+        }
       }
 
       self.onSelect(this);
@@ -2359,7 +2516,7 @@ function (_AbstractUIComponent) {
       this.$searchInput.on('focusout' + '.' + NAME$1, function () {
         self.$searchContainer.removeClass('focused');
       });
-      this.$clearSearchButton.on('click' + '.' + NAME$1, function () {
+      this.$searchContainer.on('click' + '.' + NAME$1, '[data-clear-search]', function () {
         if (self.searchString.length) {
           self.$searchInput.val('');
           self.searchString = '';
@@ -2372,12 +2529,12 @@ function (_AbstractUIComponent) {
 
     if (this.showFooter) {
       this.$closeButton.on('click' + '.' + NAME$1, function () {
-        _this4.close();
+        _this5.close();
       });
     }
 
     $(document).on('touchstart click', function (e) {
-      if (!self.$el.is(e.target) && self.$el.has(e.target).length === 0 && self.contentOpen) {
+      if (!self.$el.is(e.target) && !self.$el.has(e.target).length && self.contentOpen && !self.preventClose) {
         self.close.call(self);
       }
     });
@@ -2400,9 +2557,13 @@ function (_AbstractUIComponent) {
 
   _proto.setData = function setData() {
     var self = this;
-    var type = null;
     var faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-    this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-green icon\"></i>");
+
+    if (this.showValidStateIcon) {
+      this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-green icon\"></i>");
+    } else {
+      this.$selectIconContainer.html(this.selectIconDefault);
+    }
 
     if (this.searchApi.length) {
       var searchUrl = this.searchApi;
@@ -2421,23 +2582,11 @@ function (_AbstractUIComponent) {
         url: searchUrl
       }).done(function (data) {
         var items = data.map(function (item) {
-          var label = '';
-
-          if (item.name) {
-            label = item.name;
-          } else if (item.label) {
-            label = item.label;
-          } else if (item.value) {
-            label = item.value;
-          }
-
-          return {
-            id: item.id.toString(),
-            label: label
-          };
+          item.id = item.id.toString();
+          return item;
         });
         items = items.filter(function (item) {
-          return self.data[self.name].indexOf(item.id) > -1;
+          return !(self.data[self.name].indexOf(item.id) > -1) && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
         });
         var result = $(self._renderItemList(items));
         $.when(self.$scrollableContent.append(result)).then(function () {
@@ -2452,12 +2601,12 @@ function (_AbstractUIComponent) {
           }
 
           if (self.$select.find(':input[type="checkbox"]').length) {
-            type = 'checkbox';
+            self.type = 'checkbox';
           } else if (self.$select.find(':input[type="radio"]').length) {
-            type = 'radio';
+            self.type = 'radio';
           }
 
-          if (type == 'checkbox') {
+          if (self.type == 'checkbox') {
             self.data[self.name].forEach(function (value) {
               var $input = self.$select.find(':input').filter(function () {
                 return this.value == value;
@@ -2465,24 +2614,29 @@ function (_AbstractUIComponent) {
               $input.prop('checked', true);
               self.onSelect($input[0]);
             });
-          } else if (type == 'radio') {
+          } else if (self.type == 'radio') {
             var $input = self.$select.find(':input').filter(function () {
               return this.value == self.data[self.name];
             });
             $input.prop('checked', true);
             $input.addClass('checked');
+
+            if (self.dynamicTitle) {
+              self.$selectTitle.html($input.parent().find('[data-label]').text());
+            }
+
             self.onSelect($input[0]);
           }
         });
       });
     } else {
       if (this.$select.find(':input[type="checkbox"]').length) {
-        type = 'checkbox';
+        this.type = 'checkbox';
       } else if (this.$select.find(':input[type="radio"]').length) {
-        type = 'radio';
+        this.type = 'radio';
       }
 
-      if (type == 'checkbox') {
+      if (this.type == 'checkbox') {
         this.data[this.name].forEach(function (value) {
           var $input = self.$select.find(':input').filter(function () {
             return this.value == value;
@@ -2490,12 +2644,17 @@ function (_AbstractUIComponent) {
           $input.prop('checked', true);
           self.onSelect($input[0]);
         });
-      } else if (type == 'radio') {
+      } else if (this.type == 'radio') {
         var $input = this.$select.find(':input').filter(function () {
           return this.value == self.data[self.name];
         });
         $input.prop('checked', true);
         $input.addClass('checked');
+
+        if (this.dynamicTitle) {
+          this.$selectTitle.html($input.parent().find('[data-label]').text());
+        }
+
         this.onSelect($input[0]);
       }
     }
@@ -2514,13 +2673,11 @@ function (_AbstractUIComponent) {
           url: this.searchApi + this.searchString
         }).done(function (data) {
           var items = data.map(function (item) {
-            return {
-              id: item.id.toString(),
-              label: item.name || item.label || item.value || null
-            };
+            item.id = item.id.toString();
+            return item;
           });
           items = items.filter(function (item) {
-            return !(self.data[self.name].indexOf(item.id) > -1);
+            return !(self.data[self.name].indexOf(item.id) > -1) && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
           }); // Remove id with value 0 from results
 
           items = items.filter(function (item) {
@@ -2578,6 +2735,8 @@ function (_AbstractUIComponent) {
   ;
 
   _proto.show = function show() {
+    var _this6 = this;
+
     if (this.$el.hasClass('show')) {
       return;
     }
@@ -2611,29 +2770,39 @@ function (_AbstractUIComponent) {
     }
 
     this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-angle-up icon\"></i>");
+    setTimeout(function () {
+      _this6.$el[0].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }, 300);
     this.contentOpen = true;
     this.onShow();
   } // Close
   ;
 
   _proto.close = function close() {
-    var self = this;
-    var faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-    this.$el.css('max-height', '');
-    this.$el.removeClass('show');
-    setTimeout(function () {
-      self.$el.removeAttr('style');
-    }, 300);
+    if (!this.preventClose) {
+      var self = this;
+      var faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+      this.$el.css('max-height', '');
+      this.$el.removeClass('show');
+      setTimeout(function () {
+        self.$el.removeAttr('style');
+      }, 300);
 
-    if (this.data[this.name].length > 0) {
-      this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-green icon\"></i>");
-    } else {
-      this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-angle-down icon\"></i>");
-    }
+      if (this.data[this.name].length > 0 && this.showValidStateIcon) {
+        this.$selectIconContainer.html("<i class=\"" + faNameSpace + " fa-check text-green icon\"></i>");
+      } else {
+        this.$selectIconContainer.html(this.selectIconDefault);
+      }
 
-    this.contentOpen = false;
-    this.onClose();
-  };
+      this.contentOpen = false;
+      this.onClose();
+    }
+  } // On select
+  ;
 
   _proto.onSelect = function onSelect(el) {
     var onSelect = this.opts.onSelect;
@@ -2641,13 +2810,210 @@ function (_AbstractUIComponent) {
     if (typeof onSelect === 'function') {
       onSelect.call(el);
     }
+  } // Add more items after plugin is already initialized
+  ;
+
+  _proto.appendItems = function appendItems(items, selectItems) {
+    var _this7 = this;
+
+    return new Promise(function (resolve, reject) {
+      var self = _this7;
+
+      if (!$.isArray(items)) {
+        var itemsArr = [];
+        itemsArr.push(items);
+        items = itemsArr;
+      }
+
+      items = items.filter(function (item) {
+        return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
+      });
+      items.forEach(function (item) {
+        _this7.items.push(item);
+      });
+
+      var domItems = _this7._renderItemList(items);
+
+      _this7.$scrollableContent.prepend(domItems);
+
+      _this7.$selectItems = _this7.$select.find('.select-item');
+
+      _this7.buildSearchData().then(function () {
+        if (_this7.$selectItems.length > 0) {
+          if (_this7.$select.find(':input[type="checkbox"]').length) {
+            _this7.type = 'checkbox';
+          } else if (_this7.$select.find(':input[type="radio"]').length) {
+            _this7.type = 'radio';
+          }
+
+          if (_this7.type == 'checkbox') {
+            items.forEach(function (item) {
+              var $input = _this7.$select.find(':input').filter(function () {
+                return this.value == item.id;
+              });
+
+              var val = parseInt($input.val(), 10);
+              $input.prop('checked', true);
+              _this7.data[_this7.name].indexOf(val) === -1 ? _this7.data[_this7.name].push(val) : false;
+
+              _this7.onSelect($input[0]);
+            });
+          } else if (_this7.type == 'radio') {
+            var item = items[0];
+
+            var $input = _this7.$select.find(':input').filter(function () {
+              return this.value == item.id;
+            });
+
+            var val = parseInt($input.val(), 10);
+            $input.prop('checked', true);
+            $input.addClass('checked');
+            _this7.data[_this7.name].indexOf(val) === -1 ? _this7.data[_this7.name].push(val) : false;
+
+            if (_this7.dynamicTitle) {
+              _this7.$selectTitle.html($input.parent().find('[data-label]').text());
+            }
+
+            _this7.$select.find('input[type="radio"]').not($input).prop('checked', false);
+
+            _this7.$select.find('input[type="radio"]').not($input).removeClass('checked');
+
+            _this7.onSelect($input[0]);
+          }
+        }
+
+        if (_this7.data[_this7.name].length == 0 && _this7.dynamicTitle && _this7.dynamicTitleDefault && _this7.dynamicTitleDefault !== 0 && _this7.$selectTitle.text().trim() == 0 && (_this7.$selectItems.length > 0 || _this7.searchApi)) {
+          _this7.$selectTitle.html(_this7.dynamicTitleDefault);
+        }
+
+        if (_this7.$selectHeader.attr('style')) {
+          _this7.$selectHeader.removeAttr('style');
+        }
+
+        if (_this7.$selectIconContainer.hasClass('d-none')) {
+          _this7.$selectIconContainer.removeClass('d-none');
+        }
+
+        resolve();
+      });
+    });
+  } // Deselect items
+  ;
+
+  _proto.deselectItems = function deselectItems(array) {
+    var _this8 = this;
+
+    return new Promise(function (resolve, reject) {
+      array.forEach(function (id) {
+        var $input = _this8.$select.find(':input').filter(function () {
+          return this.value == id;
+        });
+
+        if ($input[0].checked) {
+          $input.trigger('click');
+        }
+      });
+
+      if (_this8.data[_this8.name].length == 0) {
+        _this8.$selectIconContainer.html(_this8.selectIconDefault);
+      }
+    });
+  } // Get item
+  ;
+
+  _proto.getItem = function getItem(key, val) {
+    var result = $.grep(this.items, function (item) {
+      return item[key] == val;
+    })[0];
+    return result ? result : null;
+  } // Get selected items
+  ;
+
+  _proto.getSelectedItems = function getSelectedItems(segment) {
+    var ids = [];
+    var result = [];
+    var data = this.data[this.name];
+
+    if (!$.isArray(data)) {
+      ids.push(data);
+    } else {
+      ids = data;
+    }
+
+    ids = ids.map(Number);
+
+    if (this.items.length > 0) {
+      result = $.grep(this.items, function (item) {
+        return ids.indexOf(parseInt(item.id, 10)) > -1;
+      });
+
+      if (segment) {
+        result = result.map(function (obj) {
+          return obj[segment];
+        }).filter(function (obj) {
+          return obj != null;
+        });
+      }
+    } else {
+      result = ids;
+    }
+
+    return result;
+  } // Get selected item
+  ;
+
+  _proto.getSelectedItem = function getSelectedItem(segment) {
+    var ids = [];
+    var result = [];
+    var data = this.data[this.name];
+
+    if (!$.isArray(data)) {
+      ids.push(data);
+    } else {
+      ids = data;
+    }
+
+    ids = ids.map(Number);
+
+    if (this.items.length > 0) {
+      result = $.grep(this.items, function (item) {
+        return ids.indexOf(parseInt(item.id, 10)) > -1;
+      });
+
+      if (segment) {
+        result = result.map(function (obj) {
+          return obj[segment];
+        }).filter(function (obj) {
+          return obj != null;
+        });
+      }
+    } else {
+      result = ids;
+    }
+
+    return result[0] == null ? null : result[0];
   };
 
   _proto._renderItemList = function _renderItemList(items) {
     var result = '';
 
     for (var i = 0; i < items.length; ++i) {
-      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 + "\">\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\" data-label>\n                                    " + items[i].label + "\n                                </span>\n\n                            </label>\n\n                        </div>\n\n                    </div>\n\n                </div>\n\n            ";
+      var item = items[i];
+      var label = '';
+
+      if (typeof this.labelTemplate === 'function') {
+        label = this.labelTemplate(item);
+      } else {
+        if (item.name) {
+          label = item.name;
+        } else if (item.label) {
+          label = item.label;
+        } else if (item.value) {
+          label = item.value;
+        }
+      }
+
+      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            ";
     }
 
     return result;
@@ -2656,18 +3022,18 @@ function (_AbstractUIComponent) {
   _proto._renderSearch = function _renderSearch() {
     if (!this.showSearch) {
       return '';
+    } else {
+      var faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+      return "\n\n                <div class=\"select-search\">\n\n                    <div class=\"select-search-input\">\n\n                        <input type=\"text\" name=\"select-search\" value=\"\" placeholder=\"" + this.searchPlaceholder + "\" tabindex=\"-1\">\n\n                    </div>\n\n                    <div class=\"select-search-icon\">\n\n                        <i class=\"" + faNameSpace + " fa-search icon\"></i>\n\n                    </div>\n\n                </div>\n\n            ";
     }
-
-    var faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-    return "\n\n            <div class=\"select-search\">\n\n                <div class=\"select-search-input\">\n\n                    <input type=\"text\" name=\"select-search\" value=\"\" placeholder=\"" + this.opts.searchPlaceholder + "\">\n\n                </div>\n\n                <div class=\"select-search-icon\">\n\n                    <i class=\"" + faNameSpace + " fa-search icon\"></i>\n\n                </div>\n\n            </div>\n\n        ";
   };
 
   _proto._renderFooter = function _renderFooter() {
     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-primary\" type=\"button\" data-select-close>\n                    " + this.opts.btnCloseText + "\n                </button>\n\n            </div>\n\n        ";
   };
 
   Select._jQueryInterface = function _jQueryInterface(config) {
@@ -2708,6 +3074,10 @@ if (typeof $ !== 'undefined') {
   $.fn[NAME$1].defaults = {
     name: '',
     type: 'checkbox',
+    labelTemplate: null,
+    confirmCheck: null,
+    confirmUncheck: null,
+    setData: null,
     scrollContentHeight: 100,
     faPro: false,
     items: [],
@@ -2719,12 +3089,20 @@ if (typeof $ !== 'undefined') {
     onDestroy: null,
     onShow: null,
     onClose: null,
+    onReset: null,
     onSearch: null,
     onSelect: null,
     buildScroll: null,
     searchPlaceholder: null,
     btnCloseText: null,
-    debug: false
+    debug: false,
+    dynamicTitle: false,
+    dynamicTitleDefault: '',
+    dynamicTitleEmptyDefault: '',
+    allowNoneOnRadioSelect: true,
+    preventUncheck: false,
+    showValidStateIcon: true,
+    itemsToExclude: []
   };
 }
 
@@ -3212,6 +3590,9 @@ function (_AbstractUIComponent) {
     this.$el.on('mouseleave' + '.' + NAME$3, function () {
       _this2.close();
     });
+    this.$el.on('destroyed' + '.' + NAME$3, function () {
+      _this2.close();
+    });
     $(window).on('resize', debounce(function () {
       if (_this2.$tooltip) {
         _this2.setPosition();
@@ -3857,6 +4238,10 @@ function (_AbstractUIComponent) {
       this.$indicator = $(this.$el).parent().find('[data-collapse-indicator]');
     }
 
+    if (this.expanded) {
+      this.$target.css('height', 'auto');
+    }
+
     this.log(this.$el);
     this.log(this.$target);
     this.log(this.$container);
@@ -3913,7 +4298,12 @@ function (_AbstractUIComponent) {
   _proto.show = function show() {
     var _this3 = this;
 
-    this.$target.removeClass('collapse visible');
+    // 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();
+    }
+
+    this.$target.removeClass('collapse show');
     this.$target.addClass('collapsing');
 
     if (this.$el.is('button')) {
@@ -3921,14 +4311,14 @@ function (_AbstractUIComponent) {
     }
 
     if (this.$container.length) {
-      this.$container.addClass('visible');
+      this.$container.addClass('show');
     }
 
     this.$target.css('height');
     this.$target.css('height', this.targetHeight);
 
     if (this.$indicator.length) {
-      this.$indicator.addClass('visible');
+      this.$indicator.addClass('show');
     }
 
     this.$target.one(this.whichTransitionEvent(), function () {
@@ -3940,7 +4330,7 @@ function (_AbstractUIComponent) {
 
       _this3.$target.removeAttr('style');
 
-      _this3.$target.addClass('collapse visible');
+      _this3.$target.addClass('collapse show');
 
       _this3.$el.attr('aria-expanded', true);
 
@@ -3955,7 +4345,7 @@ function (_AbstractUIComponent) {
   _proto.close = function close() {
     var _this4 = this;
 
-    this.$target.removeClass('collapse visible');
+    this.$target.removeClass('collapse show');
     this.$target.addClass('collapsing');
 
     if (this.$el.is('button')) {
@@ -3963,7 +4353,7 @@ function (_AbstractUIComponent) {
     }
 
     if (this.$container.length) {
-      this.$container.removeClass('visible');
+      this.$container.removeClass('show');
     }
 
     this.$target.css('height', this.$target.height());
@@ -3971,8 +4361,8 @@ function (_AbstractUIComponent) {
       _this4.$target.css('height', 0);
     }, 10);
 
-    if (this.$indicator.length && this.$indicator.hasClass('visible')) {
-      this.$indicator.removeClass('visible');
+    if (this.$indicator.length && this.$indicator.hasClass('show')) {
+      this.$indicator.removeClass('show');
     }
 
     this.$target.one(this.whichTransitionEvent(), function () {
@@ -3988,7 +4378,11 @@ function (_AbstractUIComponent) {
 
       _this4.$el.attr('aria-expanded', false);
 
-      _this4.expanded = false;
+      _this4.expanded = false; // Update target height if something is added to dom which causes height to change
+
+      if (_this4.targetHeight !== _this4.$target.height()) {
+        _this4.targetHeight = _this4.$target.height();
+      }
     });
     this.onClose();
   };
@@ -4571,6 +4965,7 @@ function () {
       animationSpeed: settings.animationSpeed,
       callbacks: settings.callbacks,
       maxBodyHeight: settings.maxBodyHeight,
+      overflowVisible: settings.overflowVisible,
       actions: settings.actions,
       onInit: settings.onInit,
       onShow: settings.onShow,
@@ -4676,16 +5071,6 @@ function () {
 
     this.$container.append(dialog.$el);
 
-    if (dialog.template === '' && touchEvents() == false) {
-      dialog.$el.find('.dialog-body').addClass('ps-dark');
-      new PerfectScrollbar(dialog.$el.find('.dialog-body')[0], {
-        wheelSpeed: 1,
-        wheelPropagation: false,
-        minScrollbarLength: 20
-      });
-      dialog.$el.find('.dialog-body').addClass('ps-show-rail-y');
-    }
-
     if (dialog.animation) {
       dialog.$el.find('.dialog-content').addClass(dialog.animationSpeed).animateCss(dialog.animationIn);
     }
@@ -4859,6 +5244,7 @@ function () {
     var classes = dialog.classes ? ' ' + dialog.classes : '';
     var centered = dialog.centered ? ' dialog-centered' : '';
     var size = dialog.size ? ' dialog-' + dialog.size : '';
+    var overFlowVisible = dialog.overflowVisible ? ' dialog-overflow-visible' : '';
     var uuid = ' data-dialog-uuid="' + dialog.uuid + '"';
     var backdrop = dialog.backdrop ? ' data-dialog-backdrop="true"' : ' data-dialog-backdrop="false"';
     var title = dialog.title;
@@ -4874,7 +5260,7 @@ function () {
       body = dialog.body;
     }
 
-    return "\n            <div class=\"dialog" + classes + centered + size + "\"" + uuid + backdrop + ">\n\n                <div class=\"dialog-container\">\n\n                    <div class=\"dialog-content\">\n\n                        <div class=\"dialog-header\">\n\n                            <span class=\"dialog-title\">\n                                " + title + "\n                            </span>\n\n                            " + closeBtn + "\n\n                        </div>\n\n                        <div class=\"dialog-body\"" + maxBodyHeight + ">\n\n                            " + body + "\n\n                        </div>\n\n                        " + footer + "\n\n                    </div>\n\n                </div>\n\n            </div>\n        ";
+    return "\n            <div class=\"dialog" + classes + centered + size + overFlowVisible + "\"" + uuid + backdrop + ">\n\n                <div class=\"dialog-container\">\n\n                    <div class=\"dialog-content\">\n\n                        <div class=\"dialog-header\">\n\n                            <span class=\"dialog-title\">\n                                " + title + "\n                            </span>\n\n                            " + closeBtn + "\n\n                        </div>\n\n                        <div class=\"dialog-body\"" + maxBodyHeight + ">\n\n                            " + body + "\n\n                        </div>\n\n                        " + footer + "\n\n                    </div>\n\n                </div>\n\n            </div>\n        ";
   };
 
   Dialog._jQueryInterface = function _jQueryInterface(config) {
@@ -4930,6 +5316,7 @@ if (typeof $ !== 'undefined') {
     animationSpeed: 'fastest',
     callbacks: {},
     maxBodyHeight: window.innerHeight - 200,
+    overflowVisible: false,
     faPro: false,
     debug: true,
     onInitialize: null,