@finqu/cool 1.1.9 → 1.2.0

package/dist/js/cool.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)
   */
@@ -1377,6 +1377,21 @@
         } 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 () {
@@ -1513,6 +1528,14 @@
     return result;
   };
 
+  $.event.special.destroyed = {
+    remove: function remove(obj) {
+      if (obj.handler) {
+        obj.handler();
+      }
+    }
+  };
+
   var AbstractUIComponent =
   /*#__PURE__*/
   function () {
@@ -1525,7 +1548,7 @@
       var onInit = this.opts.onInit;
 
       if (typeof onInit === 'function') {
-        onInit.call(this.el);
+        onInit.call(this);
       }
     } // Update callback
     ;
@@ -1534,7 +1557,7 @@
       var onUpdate = this.opts.onUpdate;
 
       if (typeof onUpdate === 'function') {
-        onUpdate.call(this.el);
+        onUpdate.call(this);
       }
     } // Destroy callback
     ;
@@ -1543,7 +1566,7 @@
       var onDestroy = this.opts.onDestroy;
 
       if (typeof onDestroy === 'function') {
-        onDestroy.call(this.el);
+        onDestroy.call(this);
       }
     } // Show callback
     ;
@@ -1552,7 +1575,7 @@
       var onShow = this.opts.onShow;
 
       if (typeof onShow === 'function') {
-        onShow.call(this.el);
+        onShow.call(this);
       }
     } // Close callback
     ;
@@ -1561,7 +1584,16 @@
       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
     ;
@@ -2120,7 +2152,7 @@
     _proto.init = function init() {
       var _this2 = this;
 
-      $.when(this.buildCache()).then(function () {
+      this.buildCache().then(function () {
         _this2.buildScroll();
 
         _this2.bindEvents();
@@ -2145,112 +2177,165 @@
       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
     ;
 
@@ -2283,7 +2368,9 @@
             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');
@@ -2291,32 +2378,94 @@
           }
         }
       }
+    } // 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();
@@ -2330,12 +2479,20 @@
         }
       });
       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);
@@ -2363,7 +2520,7 @@
         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 = '';
@@ -2376,12 +2533,12 @@
 
       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);
         }
       });
@@ -2404,9 +2561,13 @@
 
     _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;
@@ -2425,23 +2586,11 @@
           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 () {
@@ -2456,12 +2605,12 @@
             }
 
             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;
@@ -2469,24 +2618,29 @@
                 $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;
@@ -2494,12 +2648,17 @@
             $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]);
         }
       }
@@ -2518,13 +2677,11 @@
             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) {
@@ -2582,6 +2739,8 @@
     ;
 
     _proto.show = function show() {
+      var _this6 = this;
+
       if (this.$el.hasClass('show')) {
         return;
       }
@@ -2615,29 +2774,39 @@
       }
 
       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;
@@ -2645,13 +2814,210 @@
       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;
@@ -2660,18 +3026,18 @@
     _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) {
@@ -2712,6 +3078,10 @@
     $.fn[NAME$1].defaults = {
       name: '',
       type: 'checkbox',
+      labelTemplate: null,
+      confirmCheck: null,
+      confirmUncheck: null,
+      setData: null,
       scrollContentHeight: 100,
       faPro: false,
       items: [],
@@ -2723,12 +3093,20 @@
       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: []
     };
   }
 
@@ -3216,6 +3594,9 @@
       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();
@@ -3861,6 +4242,10 @@
         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);
@@ -3917,7 +4302,12 @@
     _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')) {
@@ -3925,14 +4315,14 @@
       }
 
       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 () {
@@ -3944,7 +4334,7 @@
 
         _this3.$target.removeAttr('style');
 
-        _this3.$target.addClass('collapse visible');
+        _this3.$target.addClass('collapse show');
 
         _this3.$el.attr('aria-expanded', true);
 
@@ -3959,7 +4349,7 @@
     _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')) {
@@ -3967,7 +4357,7 @@
       }
 
       if (this.$container.length) {
-        this.$container.removeClass('visible');
+        this.$container.removeClass('show');
       }
 
       this.$target.css('height', this.$target.height());
@@ -3975,8 +4365,8 @@
         _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 () {
@@ -3992,7 +4382,11 @@
 
         _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();
     };
@@ -4575,6 +4969,7 @@
         animationSpeed: settings.animationSpeed,
         callbacks: settings.callbacks,
         maxBodyHeight: settings.maxBodyHeight,
+        overflowVisible: settings.overflowVisible,
         actions: settings.actions,
         onInit: settings.onInit,
         onShow: settings.onShow,
@@ -4680,16 +5075,6 @@
 
       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);
       }
@@ -4863,6 +5248,7 @@
       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;
@@ -4878,7 +5264,7 @@
         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) {
@@ -4934,6 +5320,7 @@
       animationSpeed: 'fastest',
       callbacks: {},
       maxBodyHeight: window.innerHeight - 200,
+      overflowVisible: false,
       faPro: false,
       debug: true,
       onInitialize: null,