@finqu/cool 1.2.28 → 1.3.0

package/js/src/select.js

@@ -1,1341 +0,0 @@
-import 'jquery';
-import PerfectScrollbar from './util/perfect-scrollbar';
-import { debounce, touchEvents } from './util/index';
-import AbstractUIComponent from './abstract-ui-component';
-
-const NAME = 'coolSelect';
-const DATA_KEY = 'plugin_coolSelect';
-
-class Select extends AbstractUIComponent {
-
-    constructor(el, opts) {
-
-        super();
-
-        this.opts = {};
-
-        if (window.Cool.settings.select) {
-
-            $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.select, opts);
-
-        } else {
-
-            $.extend(true, this.opts, $.fn[NAME].defaults, opts);
-        }
-
-        this.el = el;
-        this.debug = this.opts.debug;
-        this.init();
-    }
-
-    // Init plugin
-    init() {
-
-        this.buildCache().then(() => {
-
-            this.buildScroll();
-            this.bindEvents();
-
-            if (this.data[this.name].length > 0) {
-                this.setData();
-            }
-
-            this.onInit();
-        });
-    }
-
-    // Remove plugin instance completely
-    destroy() {
-
-        this.unbindEvents();
-        this.$el.removeData(DATA_KEY);
-        this.onDestroy();
-    }
-
-    // Update plugin data
-    update() {
-
-        this.buildCache();
-        this.bindEvents();
-        this.onUpdate();
-    }
-
-    // Reset plugin data
-    reset() {
-
-        this.data = {};
-        this.data[this.name] = [];
-        this.items = [];
-        this.$select.find('.select-item').remove();
-        this.$selectItems = [];
-        this.$selectIconContainer.html(this.selectIconDefault);
-
-        if (this.data[this.name].length == 0 &&
-            this.dynamicTitle &&
-            this.dynamicTitleDefault &&
-            this.dynamicTitleDefault !== 0 &&
-            this.$selectTitle.text().trim() == 0 &&
-            (this.$selectItems.length > 0 || this.searchApi)) {
-
-            this.$selectTitle.html(this.dynamicTitleDefault);
-        }
-
-        if (this.$selectItems.length == 0 && !this.searchApi && this.dynamicTitle && this.dynamicTitleEmptyDefault && this.dynamicTitleEmptyDefault !== 0) {
-
-            this.$selectHeader.css('cursor', 'default');
-            this.$selectIconContainer.addClass('d-none');
-            this.$selectTitle.html(this.dynamicTitleEmptyDefault);
-        }
-
-        if (this.showSearch) {
-
-            this.searchData = [];
-            this.$searchInput.val('');
-            this.searchString = '';
-            this.search.call(this);
-        }
-    }
-
-    // Cache DOM nodes for performance
-    buildCache() {
-
-        return new Promise((primaryResolve, primaryReject) => {
-
-            let self = this;
-
-            this.$el = $(this.el);
-            this.$container = this.$el.parent();
-            this.$selectHeader = this.$el.find('.select-header');
-            this.$selectTitle = this.$el.find('.select-title');
-            this.$selectIconContainer = this.$selectHeader.find('.select-icon');
-            this.selectIconDefault = this.$selectHeader.find('.select-icon') ? this.$selectHeader.find('.select-icon').html() : '<i class="'+(this.opts.faPro ? 'fal' : 'fas')+'fa-angle-down icon"></i>';
-            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;
-            this.data = {};
-            this.data[this.name] = [];
-            this.searchData = [];
-            this.searchApi = this.$el.data('searchApi') ? this.$el.data('searchApi') : this.opts.searchApi;
-            this.searchRequest = null;
-            this.type = this.$el.data('type') ? this.$el.data('type') : this.opts.type;
-            this.contentOpen = false;
-            this.searchPlaceholder = this.$el.data('search-placeholder') ? this.$el.data('search-placeholder') : this.opts.searchPlaceholder;
-            this.btnCloseText = this.$el.data('btn-close-text') ? this.$el.data('btn-close-text') : this.opts.btnCloseText;
-            this.labelTemplate = this.opts.labelTemplate;
-            this.confirmCheck = this.opts.confirmCheck;
-            this.confirmUncheck = this.opts.confirmUncheck;
-            this.preventUncheck = this.opts.preventUncheck;
-            this.dynamicTitle = this.$el.data('dynamicTitle') ? this.$el.data('dynamicTitle') : this.opts.dynamicTitle;
-            this.dynamicTitleDefault = this.$el.data('dynamicTitleDefault') ? this.$el.data('dynamicTitleDefault') : this.opts.dynamicTitleDefault;
-            this.dynamicTitleEmptyDefault = this.$el.data('dynamicTitleEmptyDefault') ? this.$el.data('dynamicTitleEmptyDefault') : this.opts.dynamicTitleEmptyDefault;
-            this.allowNoneOnRadioSelect = this.$el.data('allowNoneOnRadioSelect') ? this.$el.data('allowNoneOnRadioSelect') : this.opts.allowNoneOnRadioSelect;
-            this.showValidStateIcon = this.$el.data('showValidStateIcon') ? this.$el.data('showValidStateIcon') : this.opts.showValidStateIcon;
-            this.itemsToExclude = this.$el.data('itemsToExclude') ? this.$el.data('itemsToExclude').replace(/\s/g, '').split(',') : this.opts.itemsToExclude;
-            this.primaryKeyword = this.$el.data('primaryKeyword') ? this.$el.data('primaryKeyword') : this.opts.primaryKeyword;
-            this.preventClose = false;
-
-            if (this.itemsToExclude.length > 0) {
-                this.itemsToExclude = this.itemsToExclude.map(String);
-            }
-
-            if (this.opts.setData) {
-                this.data = this.opts.setData;
-            }
-
-            if (this.$el.data('setData') && this.$el.data('setData') != '') {
-                this.data = this.$el.data('setData');
-            }
-
-            // Convert data to be array so filters doesn't fail
-            if (!Array.isArray(this.data[this.name]) && this.data[this.name] !== '' && this.data[this.name].length > 0) {
-
-                const arr = this.data[this.name].toString().trim().split(',');
-
-                this.data[this.name] = arr;
-            }
-
-            // Convert all values to string format to make filtering more simple
-            if (this.data[this.name].length > 0) {
-                this.data[this.name] = this.data[this.name].map(String);
-            }
-
-            if (this.data[this.name].length > 0 && this.itemsToExclude.length > 0) {
-
-                this.data[this.name] = this.data[this.name].filter(function(item) {
-
-                    if (item[self.primaryKeyword]) {
-
-                        return self.itemsToExclude.indexOf(item[self.primaryKeyword].toString()) === -1;
-
-                    } else {
-
-                        return self.itemsToExclude.indexOf(item.toString()) === -1;
-                    }
-                });
-            }
-
-            if (this.items.length > 0 && this.itemsToExclude.length > 0) {
-
-                this.items = this.items.filter(function(item) {
-
-                    if (item[self.primaryKeyword]) {
-
-                        return self.itemsToExclude.indexOf(item[self.primaryKeyword].toString()) === -1;
-
-                    } else {
-
-                        return self.itemsToExclude.indexOf(item.toString()) === -1;
-                    }
-                });
-            }
-
-            if (this.$el.find('.select-search').length) {
-                this.showSearch = true;
-            } else {
-                this.showSearch = this.$el.data('showSearch') ? this.$el.data('showSearch') : this.opts.showSearch;
-            }
-
-            if (this.$el.find('.select-footer').length) {
-                this.showFooter = true;
-            } else {
-                this.showFooter = this.$el.data('showFooter') ? this.$el.data('showFooter') : this.opts.showFooter;
-            }
-
-            this.$select = this.$el.find('.select-content');
-
-            new Promise((secondaryResolve, secondaryReject) => {
-
-                if (!this.$select.length) {
-
-                    let items = this._renderItemList(this.items);
-
-                    this.$select = $(`
-                        <div class="select-content">
-
-                            ${this._renderSearch()}
-
-                            <div class="select-scrollable-content"></div>
-
-                            ${this._renderFooter()}
-
-                        </div>
-                    `);
-
-                    this.$el.append(this.$select);
-                    this.$select.find('.select-scrollable-content').append(items);
-
-                    secondaryResolve();
-
-                } else {
-
-                    const selectItems = this.$select.find('.select-item');
-
-                    if (selectItems.length > 0 && this.itemsToExclude.length > 0) {
-
-                        $.each(selectItems, (i, el) => {
-
-                            const val = $(el).find(':input').val();
-
-                            if (self.itemsToExclude.indexOf(val) > -1) {
-                                $(el).remove();
-                            }
-                        });
-                    }
-
-                    secondaryResolve();
-                }
-
-            }).then(() => {
-
-                this.$scrollableContent = this.$select.find('.select-scrollable-content') ? this.$select.find('.select-scrollable-content') : false;
-                this.$selectItems = this.$select.find('.select-item');
-
-                if (this.data[this.name].length == 0 &&
-                    this.dynamicTitle &&
-                    this.dynamicTitleDefault &&
-                    this.dynamicTitleDefault !== 0 &&
-                    this.$selectTitle.text().trim() == 0 &&
-                    (this.$selectItems.length > 0 || this.searchApi)) {
-
-                    this.$selectTitle.html(this.dynamicTitleDefault);
-                }
-
-                if (this.$selectItems.length == 0 && !this.searchApi && this.dynamicTitle && this.dynamicTitleEmptyDefault && this.dynamicTitleEmptyDefault !== 0) {
-
-                    this.$selectHeader.css('cursor', 'default');
-                    this.$selectIconContainer.addClass('d-none');
-                    this.$selectTitle.html(this.dynamicTitleEmptyDefault);
-                }
-
-                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]');
-
-                    // Prevent tabfocus from breaking select functionality
-                    this.$searchInput[0].tabIndex = -1;
-                }
-
-                if (this.showFooter) {
-
-                    this.$footerContainer = this.$select.find('.select-footer');
-                    this.$closeButton = this.$select.find('[data-select-close]');
-
-                    // Prevent tabfocus from breaking select functionality
-                    this.$closeButton[0].tabIndex = -1;
-                }
-
-                this.buildSearchData();
-
-                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);
-
-                primaryResolve();
-            })
-        });
-    }
-
-    // Build scroll
-    buildScroll() {
-
-        if (this.$scrollableContent.length > 0) {
-
-            let scrollContentHeight = this.scrollContentHeight;
-
-            if (this.showSearch) {
-                scrollContentHeight = scrollContentHeight - (this.$searchContainer.outerHeight(true) || 0);
-            }
-
-            if (this.showFooter) {
-                scrollContentHeight = scrollContentHeight - (this.$footerContainer.outerHeight(true) || 0);
-            }
-
-            this.$scrollableContent.css({
-                'max-height': (scrollContentHeight - parseInt(this.$scrollableContent.css('marginTop'), 10) - parseInt(this.$scrollableContent.css('marginBottom'), 10)) +'px'
-            });
-
-            if (touchEvents()) {
-
-                this.$scrollableContent.css({
-                    'overflow-y': 'auto'
-                });
-
-            } else {
-
-                this.$scrollableContent.addClass('ps-dark');
-                this.scroll = new PerfectScrollbar(this.$scrollableContent[0], {
-                    wheelSpeed: 1,
-                    wheelPropagation: false,
-                    minScrollbarLength: 20,
-                    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');
-                    this.scroll.settings.suppressScrollY = false;
-                }
-            }
-        }
-    }
-
-    // Build search data
-    buildSearchData() {
-
-        return new Promise((resolve, reject) => {
-
-            this.searchData = [];
-
-            let selectLabels = this.$select.find('[data-label]');
-
-            $.each(selectLabels, (i, el) => {
-
-               this.searchData.push({
-                    id: i,
-                    val: $(el).text().trim()
-               });
-            });
-
-            resolve();
-        });
-    }
-
-    // Bind events that trigger methods
-    bindEvents() {
-
-        let self = this;
-
-        this.$selectHeader.on('click'+'.'+NAME, () => {
-
-            if (this.contentOpen) {
-                this.close();
-            } else if (this.$selectItems.length > 0 || this.searchApi) {
-                this.show();
-            }
-        });
-
-        this.$el.on('change'+'.'+NAME, 'input[type="checkbox"]', function() {
-
-            let el = this;
-            let val = $(this).val();
-            let closeTimeout = 600; // ms
-
-            self.preventClose = true;
-
-            if (typeof self.confirmCheck === 'function' && el.checked) {
-
-                el.checked = false;
-
-                self.confirmCheck((cb) => {
-
-                    if (cb == 'confirmed') {
-
-                        self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
-                        el.checked = true;
-                        self.onSelect(el);
-                    }
-
-                    setTimeout(function() {
-                        self.preventClose = false;
-                    }, closeTimeout);
-                }, el);
-
-            } else if (el.checked) {
-
-                self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
-                self.onSelect(el);
-
-                setTimeout(function() {
-                    self.preventClose = false;
-                }, closeTimeout);
-
-            } else if (typeof self.confirmUncheck === 'function' && !el.checked) {
-
-                el.checked = true;
-
-                self.confirmUncheck((cb) => {
-
-                    if (cb == 'confirmed') {
-
-                        self.data[self.name] = self.data[self.name].filter(n => n != val);
-                        el.checked = false;
-                        self.onSelect(el);
-                    }
-
-                    setTimeout(function() {
-                        self.preventClose = false;
-                    }, closeTimeout);
-                }, el);
-
-            } else if (!el.checked && !self.preventUncheck) {
-
-                self.data[self.name] = self.data[self.name].filter(n => n != val);
-                self.onSelect(el);
-
-                setTimeout(function() {
-                    self.preventClose = false;
-                }, closeTimeout);
-
-            } else if (!el.checked && self.preventUncheck) {
-
-                el.checked = true;
-
-                setTimeout(function() {
-                    self.preventClose = false;
-                }, closeTimeout);
-            }
-        });
-
-        this.$el.on('change'+'.'+NAME, 'input[type="radio"]', function() {
-
-            let val = $(this).val();
-
-            if (this.checked) {
-
-                self.data[self.name] = [val];
-                self.$select.find('input[type="radio"]').not($(this)).prop('checked', false);
-                self.$select.find('input[type="radio"]').not($(this)).removeClass('checked');
-
-            } else {
-
-                self.data[self.name] = [];
-            }
-        });
-
-        this.$el.on('click'+'.'+NAME, 'input[type="radio"]', function() {
-
-            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);
-        });
-
-        if (this.scroll) {
-
-            this.$scrollableContent.find('.ps__thumb-y').mousedown(function() {
-                self.$scrollableContent.addClass('ps-mousedown-scroll');
-            });
-
-            $(document).mouseup(function() {
-
-                if (self.$scrollableContent.hasClass('ps-mousedown-scroll')) {
-                    self.$scrollableContent.removeClass('ps-mousedown-scroll');
-                }
-            });
-        }
-
-        if (this.showSearch) {
-
-            this.$searchInput.on('keydown'+'.'+NAME, debounce(function () {
-
-                self.searchString = $(this).val().trim();
-                self.search.call(self);
-
-            }, 250));
-
-            this.$searchInput.on('focusin'+'.'+NAME, function () {
-
-                self.$searchContainer.addClass('focused');
-            });
-
-            this.$searchInput.on('focusout'+'.'+NAME, function () {
-
-                self.$searchContainer.removeClass('focused');
-            });
-
-            this.$searchContainer.on('click'+'.'+NAME, '[data-clear-search]', function () {
-
-                if (self.searchString.length) {
-
-                    self.$searchInput.val('');
-                    self.searchString = '';
-                    self.search.call(self);
-
-                } else {
-
-                    return;
-                }
-            });
-        }
-
-        if (this.showFooter) {
-
-            this.$closeButton.on('click'+'.'+NAME, () => {
-
-                this.close();
-            });
-        }
-
-        $(document).on('touchstart click', function(e) {
-
-            if (!self.$el.is(e.target) && !self.$el.has(e.target).length && self.contentOpen && !self.preventClose) {
-
-                self.close.call(self);
-            }
-        });
-    }
-
-    // Unbind events that trigger methods
-    unbindEvents() {
-
-        this.$el.off('.'+NAME);
-    }
-
-    // Get data
-    getData(data) {
-
-        if (data) {
-            return this.data[data];
-        } else {
-            return this.data;
-        }
-    }
-
-    // Set data
-    setData() {
-
-        let self = this;
-        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-
-        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) {
-
-            let searchUrl = this.searchApi;
-            let itemCount = this.data[this.name].length;
-            let currentCount = 0;
-
-            this.data[this.name].forEach(function(value) {
-
-                searchUrl += encodeURIComponent('#'+value);
-                currentCount++;
-
-                if (currentCount !== itemCount) {
-                    searchUrl += '+';
-                }
-            });
-
-            $.ajax({
-                method: 'GET',
-                url: searchUrl
-            }).done(function(data) {
-
-                let items = data.map(item => {
-
-                    item.id = item[self.primaryKeyword].toString();
-
-                    return item;
-                });
-
-                let itemIds = items.map(item => {
-                    return item.id.toString()
-                });
-
-                // Remove value from data if it doesn't exist anymore
-                self.data[self.name] = self.data[self.name].filter(function(value) {
-                    return itemIds.indexOf(value.toString()) > -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(item.id) === -1 && item.id != 0;
-                });
-
-                let result = self._renderItemList(items);
-
-                $.when(self.$scrollableContent.append(result)).then(function() {
-
-                    let $inputs = self.$scrollableContent.find(':input');
-
-                    if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
-
-                        self.scroll.update();
-                        self.scroll.settings.suppressScrollY = false;
-                        self.$scrollableContent.addClass('ps-show-rail-y');
-
-                    } else {
-
-                        self.scroll.update();
-                        self.scroll.settings.suppressScrollY = true;
-                        self.$scrollableContent.removeClass('ps-show-rail-y');
-                    }
-
-                    if (self.$scrollableContent.find(':input[type="checkbox"]').length) {
-                        self.type = 'checkbox';
-                    } else if (self.$scrollableContent.find(':input[type="radio"]').length) {
-                        self.type = 'radio';
-                    }
-
-                    if (self.type == 'checkbox') {
-
-                        self.data[self.name].forEach(function(value) {
-
-                            let $input = $inputs.filter(function() {
-                                return this.value == value;
-                            });
-
-                            $input.prop('checked', true);
-
-                            self.onSelect($input[0]);
-                        });
-
-                    } else if (self.type == 'radio') {
-
-                        let $input = $inputs.filter(function() {
-                            return this.value == self.data[self.name][0];
-                        });
-
-                        $input.prop('checked', true);
-                        $input.addClass('checked');
-
-                        if (self.dynamicTitle) {
-                            self.$selectTitle.html($input.parent().find('[data-label]').text());
-                        }
-
-                        self.onSelect($input[0]);
-                    }
-                });
-            });
-
-        } else {
-
-            // Remove value from data if it doesn't exist anymore
-            let $inputs = this.$scrollableContent.find(':input');
-            let inputValues = $inputs.length > 0 ? $inputs.map(function() {
-                return this.value.toString();
-            }).get() : [];
-
-            this.data[this.name] = this.data[this.name].filter(function(value) {
-                return inputValues.indexOf(value.toString()) > -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.$scrollableContent.find(':input[type="radio"]').length) {
-                this.type = 'radio';
-            }
-
-            if (this.type == 'checkbox') {
-
-                this.data[this.name].forEach(function(value) {
-
-                    let $input = $inputs.filter(function() {
-                        return this.value == value
-                    });
-
-                    $input.prop('checked', true);
-
-                    self.onSelect($input[0]);
-                });
-
-            } else if (this.type == 'radio') {
-
-                let $input = $inputs.filter(function() {
-                    return this.value == self.data[self.name][0];
-                });
-
-                $input.prop('checked', true);
-                $input.addClass('checked');
-
-                if (this.dynamicTitle) {
-                    this.$selectTitle.html($input.parent().find('[data-label]').text());
-                }
-
-                this.onSelect($input[0]);
-            }
-        }
-    }
-
-    // Search
-    search() {
-
-        let self = this;
-        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-
-        if (this.searchString.length) {
-
-            if (this.searchApi.length) {
-
-                this.$scrollableContent.find('input:not(:checked)').parents('.select-item').not('.static-item').remove();
-
-                if (this.searchRequest !== null) {
-                    this.searchRequest.abort();
-                }
-
-                this.searchRequest = $.ajax({
-                    method: 'GET',
-                    url: this.searchApi + this.searchString
-                }).done(function(data) {
-
-                    self.searchRequest = null;
-
-                    let items = data.map(item => {
-
-                        item.id = item[self.primaryKeyword].toString();
-
-                        return item;
-                    });
-
-                    items = items.filter(function(item) {
-                        return self.data[self.name].indexOf(item.id) === -1 && self.itemsToExclude.indexOf(item.id) === -1 && item.id != 0;
-                    });
-
-                    let result = self._renderItemList(items);
-
-                    $.when(self.$scrollableContent.append(result)).then(function() {
-
-                        let faNameSpace = self.opts.faPro ? 'fal' : 'fas';
-
-                        self.$searchIconContainer.html(`<i class="${faNameSpace} fa-times icon"></i>`);
-                        self.$searchIconContainer.attr('data-clear-search', 'true');
-
-                        if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
-
-                            self.scroll.update();
-                            self.scroll.settings.suppressScrollY = false;
-                            self.$scrollableContent.addClass('ps-show-rail-y');
-
-                        } else {
-
-                            self.scroll.update();
-                            self.scroll.settings.suppressScrollY = true;
-                            self.$scrollableContent.removeClass('ps-show-rail-y');
-                        }
-                    });
-                });
-
-            } else {
-
-                let results = this.searchData.filter(function(item) {
-                    return item.val.toLocaleLowerCase().indexOf(self.searchString.toLocaleLowerCase()) > -1;
-                });
-
-                this.$selectItems.removeClass('d-none');
-                this.$selectItems.removeClass('visible');
-
-                results.forEach(function(item) {
-                    $(self.$selectItems[item.id]).addClass('visible');
-                });
-
-                this.$selectItems.not('.visible').addClass('d-none');
-                this.$searchIconContainer.html(`<i class="${faNameSpace} fa-times icon"></i>`);
-                this.$searchIconContainer.attr('data-clear-search', 'true');
-            }
-
-        } else {
-
-            if (this.searchApi.length) {
-
-                this.$scrollableContent.find('input:not(:checked)').parents('.select-item').not('.static-item').remove();
-                this.$searchIconContainer.html(`<i class="${faNameSpace} fa-search icon"></i>`);
-                this.$searchIconContainer.attr('data-clear-search', '');
-
-            } else {
-
-                this.$selectItems.removeClass('d-none');
-                this.$selectItems.removeClass('visible');
-                this.$searchIconContainer.html(`<i class="${faNameSpace} fa-search icon"></i>`);
-                this.$searchIconContainer.attr('data-clear-search', '');
-            }
-        }
-
-        if (this.scroll) {
-            this.scroll.update();
-        }
-
-        this.onUpdate();
-    }
-
-    // Show
-    show() {
-
-        if (this.$el.hasClass('show')) {
-            return;
-        }
-
-        let $otherSelects = $('.select.show');
-        let zindex = 1;
-        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-
-        if ($otherSelects.length) {
-            zindex = parseInt($otherSelects.first().css('z-index'), 10) + 2;
-        }
-
-        this.$el.css({
-            'max-height': (this.scrollContentHeight + this.$selectHeader.outerHeight(true))+'px'
-        });
-
-        this.$el.addClass('show');
-
-        if (!$otherSelects.length) {
-            zindex =  parseInt(this.$el.css('z-index'), 10) + 1;
-        }
-
-        this.$el.css({
-            'z-index': zindex
-        });
-
-        if (this.scroll && this.$scrollableContent.length) {
-
-            if (this.$scrollableContent[0].offsetHeight < this.$scrollableContent[0].scrollHeight) {
-                this.$scrollableContent[0].scrollTop = 1;
-                this.$scrollableContent[0].scrollTop = 0;
-            }
-        }
-
-        this.$selectIconContainer.html(`<i class="${faNameSpace} fa-angle-up icon"></i>`);
-
-        setTimeout(() => {
-            this.$el[0].scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'nearest'});
-        }, 300);
-
-        this.contentOpen = true;
-        this.onShow();
-    }
-
-    // Close
-    close() {
-
-        if (!this.preventClose) {
-
-            let self = this;
-            let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-
-            this.$el.css('max-height', '');
-            this.$el.removeClass('show');
-
-            setTimeout(() => {
-                self.$el.removeAttr('style');
-            }, 300);
-
-            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();
-        }
-    }
-
-    // On select
-    onSelect(el) {
-
-        let self = this;
-        let onSelect = this.opts.onSelect;
-        let 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') {
-
-            onSelect.call(el, data, this);
-        }
-    }
-
-    // Add more items after plugin is already initialized
-    appendItems(items, selectItems) {
-
-        return new Promise((resolve, reject) => {
-
-            let self = this;
-
-            if (!$.isArray(items)) {
-
-                let itemsArr = [];
-
-                itemsArr.push(items);
-                items = itemsArr;
-            }
-
-            items = items.filter(function(item) {
-                return self.itemsToExclude.indexOf(item[self.primaryKeyword].toString()) === -1;
-            });
-
-            items.forEach(item => {
-
-                this.items.push(item);
-            });
-
-            let domItems = this._renderItemList(items);
-
-            this.$scrollableContent.prepend(domItems);
-            this.$selectItems = this.$select.find('.select-item');
-
-            this.buildSearchData().then(() => {
-
-                if (this.$selectItems.length > 0) {
-
-                    if (this.$select.find(':input[type="checkbox"]').length) {
-                        this.type = 'checkbox';
-                    } else if (this.$select.find(':input[type="radio"]').length) {
-                        this.type = 'radio';
-                    }
-
-                    if (this.type == 'checkbox') {
-
-                        items.forEach(item => {
-
-                            let $input = this.$select.find(':input').filter(function() { return this.value == item.id });
-                            let val = $input.val().toString();
-
-                            $input.prop('checked', true);
-
-                            this.data[this.name].indexOf(val) === -1 ? this.data[this.name].push(val) : false;
-                            this.onSelect($input[0]);
-                        });
-
-                    } else if (this.type == 'radio') {
-
-                        let item = items[0];
-                        let $input = this.$select.find(':input').filter(function() { return this.value == item.id });
-                        let val = $input.val().toString();
-
-                        $input.prop('checked', true);
-                        $input.addClass('checked');
-
-                        this.data[this.name].indexOf(val) === -1 ? this.data[this.name] = [val] : false;
-
-                        if (this.dynamicTitle) {
-                            this.$selectTitle.html($input.parent().find('[data-label]').text());
-                        }
-
-                        this.$select.find('input[type="radio"]').not($input).prop('checked', false);
-                        this.$select.find('input[type="radio"]').not($input).removeClass('checked');
-                        this.onSelect($input[0]);
-                    }
-                }
-
-                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.$selectHeader.attr('style')) {
-                    this.$selectHeader.removeAttr('style');
-                }
-
-                if (this.$selectIconContainer.hasClass('d-none')) {
-                    this.$selectIconContainer.removeClass('d-none');
-                }
-
-                resolve();
-            });
-        });
-    }
-
-    // Deselect items
-    deselectItems(array) {
-
-        return new Promise((resolve, reject) => {
-
-            array.forEach(id => {
-
-                let $input = this.$select.find(':input').filter(function() { return this.value == id });
-
-                if ($input[0].checked) {
-
-                    $input.trigger('click');
-                }
-            });
-
-            if (this.data[this.name].length == 0) {
-                this.$selectIconContainer.html(this.selectIconDefault);
-            }
-        });
-    }
-
-    // Get item
-    getItem(key, val) {
-
-        let result = $.grep(this.items, function(item) { return item[key] == val })[0];
-
-        return result ? result : null;
-    }
-
-    // Get selected items
-    getSelectedItems(segment) {
-
-        let ids = [];
-        let result = [];
-        let data = this.data[this.name];
-
-        if (!$.isArray(data)) {
-
-            ids.push(data);
-
-        } else {
-
-            ids = data;
-        }
-
-        ids = ids.map(String);
-
-        if (this.items.length > 0) {
-
-            result = $.grep(this.items, function(item) { return ids.indexOf(item.id.toString()) > -1 });
-
-            if (segment) {
-
-                result = result.map(obj => {
-                    return obj[segment];
-                }).filter(obj => {
-                    return obj != null;
-                });
-            }
-
-        } else {
-
-            result = ids;
-        }
-
-        return result;
-    }
-
-    // Get selected item
-    getSelectedItem(segment) {
-
-        let ids = [];
-        let result = [];
-        let data = this.data[this.name];
-
-        if (!$.isArray(data)) {
-
-            ids.push(data);
-
-        } else {
-
-            ids = data;
-        }
-
-        ids = ids.map(String);
-
-        if (this.items.length > 0) {
-
-            result = $.grep(this.items, function(item) { return ids.indexOf(item.id.toString()) > -1 });
-
-            if (segment) {
-
-                result = result.map(obj => {
-                   return obj[segment];
-                }).filter(obj => {
-                    return obj != null;
-                });
-            }
-
-        } else {
-
-            result = ids;
-        }
-
-        return result[0] == null ? null : result[0];
-    }
-
-    _renderItemList(items) {
-
-        let result = [];
-
-        for (let i = 0; i < items.length; ++i) {
-
-            let item = items[i];
-            let 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.push($(`
-
-                <div class="select-item">
-
-                    <div class="select-item-${this.type}">
-
-                        <div class="styled-${this.type}">
-
-                            <input type="${this.type}" id="select-${this.name}-${items[i].id}" value="${items[i].id}" tabindex="-1">
-
-                            <label for="select-${this.name}-${items[i].id}">
-
-                                <span class="radio-inner">
-                                    <svg viewBox="0 0 18 18">
-                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
-                                    </svg>
-                                </span>
-
-                                <span class="${this.type}-label"${typeof this.labelTemplate !== 'function' ? ' data-label' : ''}>
-                                    ${label}
-                                </span>
-
-                            </label>
-
-                        </div>
-
-                    </div>
-
-                </div>
-
-            `).data(item));
-        }
-
-        return result;
-    }
-
-    _renderSearch() {
-
-        if (!this.showSearch) {
-
-            return '';
-
-        } else {
-
-            let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
-
-            return `
-
-                <div class="select-search">
-
-                    <div class="select-search-input">
-
-                        <input type="text" name="select-search" value="" placeholder="${this.searchPlaceholder}" tabindex="-1">
-
-                    </div>
-
-                    <div class="select-search-icon">
-
-                        <i class="${faNameSpace} fa-search icon"></i>
-
-                    </div>
-
-                </div>
-
-            `;
-        }
-    }
-
-    _renderFooter() {
-
-        if (!this.showFooter) {
-
-            return '';
-
-        } else {
-
-            return `
-
-                <div class="select-footer">
-
-                    <button class="btn btn-block btn-secondary" type="button" tabindex="-1" data-select-close >
-                        ${this.btnCloseText}
-                    </button>
-
-                </div>
-
-            `;
-        }
-    }
-
-    static _jQueryInterface(config) {
-
-        return this.each(function() {
-
-            let data = $(this).data(DATA_KEY);
-            const _config = typeof config === 'object' && config;
-
-            if (!data) {
-                data = new Select(this, _config);
-                $(this).data(DATA_KEY, data);
-            }
-
-            if (typeof config === 'string') {
-
-                if (typeof data[config] === 'undefined') {
-                    throw new TypeError(`No method named "${config}"`)
-                }
-
-                data[config]()
-            }
-        });
-    }
-
-}
-
-if (typeof $ !== 'undefined') {
-
-    // jQuery
-    const JQUERY_NO_CONFLICT = $.fn[NAME];
-
-    $.fn[NAME] = Select._jQueryInterface;
-    $.fn[NAME].Constructor = Select;
-
-    $.fn[NAME].noConflict = () => {
-
-        $.fn[NAME] = JQUERY_NO_CONFLICT;
-
-        return Select._jQueryInterface;
-    }
-
-    $.fn[NAME].defaults = {
-        name: '',
-        type: 'checkbox',
-        labelTemplate: null,
-        confirmCheck: null,
-        confirmUncheck: null,
-        setData: null,
-        scrollContentHeight: 100,
-        faPro: false,
-        items: [],
-        showSearch: false,
-        showFooter: false,
-        searchApi: false,
-        onInit: null,
-        onUpdate: null,
-        onDestroy: null,
-        onShow: null,
-        onClose: null,
-        onReset: null,
-        onSearch: null,
-        onSelect: null,
-        buildScroll: null,
-        searchPlaceholder: null,
-        btnCloseText: null,
-        debug: false,
-        dynamicTitle: false,
-        dynamicTitleDefault: '',
-        dynamicTitleEmptyDefault: '',
-        allowNoneOnRadioSelect: true,
-        preventUncheck: false,
-        showValidStateIcon: true,
-        itemsToExclude: [],
-        primaryKeyword: 'id'
-    }
-}
-
-export default Select;