start copy from cimac web

public/dist/Args.js

@@ -0,0 +1 @@
+//# sourceMappingURL=Args.js.map

public/dist/Args.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Args.js","sourceRoot":"","sources":["../src/Args.ts"],"names":[],"mappings":""}

public/dist/FilterMultiSelect.js

@@ -0,0 +1,924 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/*!
+ *  Multiple select dropdown with filter jQuery plugin.
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
+ *
+ *  This library is free software; you can redistribute it and/or
+ *  modify it under the terms of the GNU Lesser General Public
+ *  License as published by the Free Software Foundation; either
+ *  version 2.1 of the License, or (at your option) any later version.
+ *
+ *  This library is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ *  Lesser General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Lesser General Public
+ *  License along with this library; if not, write to the Free Software
+ *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301
+ *  USA
+ */
+import $ from 'jquery';
+var NULL_OPTION = new /** @class */ (function () {
+    function class_1() {
+    }
+    class_1.prototype.initialize = function () { };
+    class_1.prototype.select = function () { };
+    class_1.prototype.deselect = function () { };
+    class_1.prototype.enable = function () { };
+    class_1.prototype.disable = function () { };
+    class_1.prototype.isSelected = function () { return false; };
+    class_1.prototype.isDisabled = function () { return true; };
+    class_1.prototype.getListItem = function () { return document.createElement('div'); };
+    class_1.prototype.getSelectedItemBadge = function () { return document.createElement('div'); };
+    class_1.prototype.getLabel = function () { return 'NULL_OPTION'; };
+    class_1.prototype.getValue = function () { return 'NULL_OPTION'; };
+    class_1.prototype.show = function () { };
+    class_1.prototype.hide = function () { };
+    class_1.prototype.isHidden = function () { return true; };
+    class_1.prototype.focus = function () { };
+    class_1.prototype.activate = function () { };
+    class_1.prototype.deactivate = function () { };
+    return class_1;
+}());
+var DEBUG = false;
+var FilterMultiSelect = /** @class */ (function () {
+    function FilterMultiSelect(selectTarget, args) {
+        var _this = this;
+        this.documentKeydownListener = function (e) {
+            if (DEBUG) {
+                _this.log('document', e);
+                console.log(e.key);
+            }
+            switch (e.key) {
+                case "Tab":
+                    e.stopPropagation();
+                    _this.closeDropdown();
+                    break;
+                case "ArrowUp":
+                    e.stopPropagation();
+                    e.preventDefault();
+                    if (DEBUG) {
+                        console.log("up");
+                    }
+                    _this.decrementItemFocus();
+                    _this.focusItem();
+                    break;
+                case "ArrowDown":
+                    e.stopPropagation();
+                    e.preventDefault();
+                    if (DEBUG) {
+                        console.log("down");
+                    }
+                    _this.incrementItemFocus();
+                    _this.focusItem();
+                    break;
+                case "Enter":
+                case "Spacebar":
+                case " ":
+                    //swallow to allow checkbox change to work
+                    break;
+                default:
+                    //send key to filter
+                    _this.refocusFilter();
+                    break;
+            }
+        };
+        this.documentClickListener = function (e) {
+            if (DEBUG) {
+                _this.log('document', e);
+            }
+            if (_this.div !== e.target && !_this.div.contains(e.target)) {
+                _this.closeDropdown();
+            }
+        };
+        this.fmsFocusListener = function (e) {
+            if (DEBUG) {
+                _this.log('div', e);
+            }
+            e.stopPropagation();
+            e.preventDefault();
+            _this.viewBar.dispatchEvent(new MouseEvent('click'));
+        };
+        this.fmsMousedownListener = function (e) {
+            if (DEBUG) {
+                _this.log('div', e);
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        var t = selectTarget.get(0);
+        if (!(t instanceof HTMLSelectElement)) {
+            throw new Error("JQuery target must be a select element.");
+        }
+        var select = t;
+        var name = select.name;
+        if (!name) {
+            throw new Error("Select element must have a name attribute.");
+        }
+        this.name = name;
+        var array = selectTarget.find('option').toArray();
+        this.options = FilterMultiSelect.createOptions(this, name, array, args.items);
+        // restrict selection
+        this.numSelectedItems = 0;
+        this.maxNumSelectedItems = !select.multiple ? 1 :
+            args.selectionLimit > 0 ? args.selectionLimit :
+                parseInt(select.getAttribute('multiple')) > 0 ? parseInt(select.getAttribute('multiple')) :
+                    0; //magic number 
+        var numOptions = this.options.length;
+        var restrictSelection = this.maxNumSelectedItems > 0 && this.maxNumSelectedItems < numOptions;
+        this.maxNumSelectedItems = restrictSelection ? this.maxNumSelectedItems : numOptions + 1; //magic number
+        this.selectAllOption = restrictSelection ?
+            new FilterMultiSelect.RestrictedSelectAllOption(this, name, args.selectAllText) :
+            new FilterMultiSelect.UnrestrictedSelectAllOption(this, name, args.selectAllText);
+        // filter box
+        this.filterInput = document.createElement('input');
+        this.filterInput.type = 'text';
+        this.filterInput.placeholder = args.filterText;
+        this.clearButton = document.createElement('button');
+        this.clearButton.type = 'button';
+        this.clearButton.innerHTML = '&times;';
+        this.filter = document.createElement('div');
+        this.filter.append(this.filterInput, this.clearButton);
+        // items
+        this.items = document.createElement('div');
+        this.items.append(this.selectAllOption.getListItem());
+        this.options.forEach(function (o) { return _this.items.append(o.getListItem()); });
+        // dropdown list
+        this.dropDown = document.createElement('div');
+        this.dropDown.append(this.filter, this.items);
+        // placeholder
+        this.placeholder = document.createElement('span');
+        this.placeholder.textContent = args.placeholderText;
+        this.selectedItems = document.createElement('span');
+        // label
+        this.label = document.createElement('span');
+        this.label.textContent = args.labelText;
+        var customLabel = args.labelText.length != 0;
+        if (!customLabel) {
+            this.label.hidden = true;
+        }
+        // selection counter
+        this.selectionCounter = document.createElement('span');
+        this.selectionCounter.hidden = !restrictSelection;
+        // viewbar
+        this.viewBar = document.createElement('div');
+        this.viewBar.append(this.label, this.selectionCounter, this.placeholder, this.selectedItems);
+        this.div = document.createElement('div');
+        this.div.id = select.id;
+        this.div.append(this.viewBar, this.dropDown);
+        this.caseSensitive = args.caseSensitive;
+        this.disabled = select.disabled;
+        this.allowEnablingAndDisabling = args.allowEnablingAndDisabling;
+        this.filterText = '';
+        this.showing = new Array();
+        this.itemFocus = -2; //magic number
+        this.initialize();
+    }
+    FilterMultiSelect.createOptions = function (fms, name, htmlOptions, jsOptions) {
+        var htmloptions = htmlOptions.map(function (o, i) {
+            FilterMultiSelect.checkValue(o.value, o.label);
+            return new FilterMultiSelect.SingleOption(fms, i, name, o.label, o.value, o.defaultSelected, o.disabled);
+        });
+        var j = htmlOptions.length;
+        var jsoptions = jsOptions.map(function (o, i) {
+            var label = o[0];
+            var value = o[1];
+            var selected = o[2];
+            var disabled = o[3];
+            FilterMultiSelect.checkValue(value, label);
+            return new FilterMultiSelect.SingleOption(fms, j + i, name, label, value, selected, disabled);
+        });
+        var opts = htmloptions.concat(jsoptions);
+        var counts = {};
+        opts.forEach(function (o) {
+            var v = o.getValue();
+            if (counts[v] === undefined) {
+                counts[v] = 1;
+            }
+            else {
+                throw new Error("Duplicate value: " + o.getValue() + " (" + o.getLabel() + ")");
+            }
+        });
+        return opts;
+    };
+    FilterMultiSelect.checkValue = function (value, label) {
+        if (value === "") {
+            throw new Error("Option " + label + " does not have an associated value.");
+        }
+    };
+    FilterMultiSelect.createEvent = function (e, n, v, l) {
+        var event = new CustomEvent(e, {
+            detail: {
+                name: n,
+                value: v,
+                label: l
+            },
+            bubbles: true,
+            cancelable: true,
+            composed: false
+        });
+        return event;
+    };
+    FilterMultiSelect.prototype.initialize = function () {
+        this.options.forEach(function (o) { return o.initialize(); });
+        this.selectAllOption.initialize();
+        this.filterInput.className = 'form-control';
+        this.clearButton.tabIndex = -1;
+        this.filter.className = 'filter dropdown-item';
+        this.items.className = 'items dropdown-item';
+        this.dropDown.className = 'dropdown-menu';
+        this.placeholder.className = 'placeholder';
+        this.selectedItems.className = 'selected-items';
+        this.viewBar.className = 'viewbar form-control dropdown-toggle';
+        this.label.className = 'col-form-label mr-2 text-dark';
+        this.selectionCounter.className = 'mr-2';
+        this.div.className = 'filter-multi-select dropdown';
+        if (this.maxNumSelectedItems > 1) {
+            var v = this.maxNumSelectedItems >= this.options.length ? "" : this.maxNumSelectedItems.toString();
+            this.div.setAttribute('multiple', v);
+        }
+        else {
+            this.div.setAttribute('single', "");
+        }
+        if (this.isDisabled()) {
+            this.disableNoPermissionCheck();
+        }
+        this.attachDropdownListeners();
+        this.attachViewbarListeners();
+        this.closeDropdown();
+    };
+    FilterMultiSelect.prototype.log = function (m, e) {
+        if (DEBUG) {
+            console.log(e.timeStamp + " - " + m + ":" + e.type + ":" + e.target);
+        }
+    };
+    FilterMultiSelect.prototype.attachDropdownListeners = function () {
+        var _this = this;
+        this.filterInput.addEventListener('keyup', function (e) {
+            if (DEBUG) {
+                _this.log('filterInput', e);
+            }
+            e.stopImmediatePropagation();
+            _this.updateDropdownList();
+            var numShown = _this.showing.length;
+            switch (e.key) {
+                case "Enter":
+                    if (numShown === 1) {
+                        var o = _this.options[_this.showing[0]]; //magic number
+                        if (!o.isDisabled()) {
+                            if (o.isSelected()) {
+                                o.deselect();
+                            }
+                            else {
+                                o.select();
+                            }
+                            _this.clearFilterAndRefocus();
+                        }
+                    }
+                    break;
+                case "Escape":
+                    if (_this.filterText.length > 0) {
+                        _this.clearFilterAndRefocus();
+                    }
+                    else {
+                        _this.closeDropdown();
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }, true);
+        this.clearButton.addEventListener('click', function (e) {
+            if (DEBUG) {
+                _this.log('clearButton', e);
+            }
+            e.stopImmediatePropagation();
+            var text = _this.filterInput.value;
+            if (text.length > 0) {
+                _this.clearFilterAndRefocus();
+            }
+            else {
+                _this.closeDropdown();
+            }
+        }, true);
+    };
+    FilterMultiSelect.prototype.updateDropdownList = function () {
+        var text = this.filterInput.value;
+        if (text.length > 0) {
+            this.selectAllOption.hide();
+        }
+        else {
+            this.selectAllOption.show();
+        }
+        var showing = new Array();
+        if (this.caseSensitive) {
+            this.options.forEach(function (o, i) {
+                if (o.getLabel().indexOf(text) !== -1) { //magic number
+                    o.show();
+                    showing.push(i);
+                }
+                else {
+                    o.hide();
+                }
+            });
+        }
+        else {
+            this.options.forEach(function (o, i) {
+                if (o.getLabel().toLowerCase().indexOf(text.toLowerCase()) !== -1) { //magic number 
+                    o.show();
+                    showing.push(i);
+                }
+                else {
+                    o.hide();
+                }
+            });
+        }
+        this.filterText = text;
+        this.showing = showing;
+    };
+    FilterMultiSelect.prototype.clearFilterAndRefocus = function () {
+        if (DEBUG) {
+            console.log('clear filter');
+        }
+        this.filterInput.value = '';
+        this.updateDropdownList();
+        this.refocusFilter();
+    };
+    FilterMultiSelect.prototype.refocusFilter = function () {
+        if (DEBUG) {
+            console.log('refocus filter');
+        }
+        this.filterInput.focus();
+        this.itemFocus = -2; //magic number
+    };
+    FilterMultiSelect.prototype.attachViewbarListeners = function () {
+        var _this = this;
+        this.viewBar.addEventListener('click', function (e) {
+            if (DEBUG) {
+                _this.log('viewBar', e);
+            }
+            if (_this.isClosed()) {
+                _this.openDropdown();
+            }
+            else {
+                _this.closeDropdown();
+            }
+        });
+    };
+    FilterMultiSelect.prototype.isClosed = function () {
+        return !this.dropDown.classList.contains('show');
+    };
+    FilterMultiSelect.prototype.setTabIndex = function () {
+        if (this.isDisabled()) {
+            this.div.tabIndex = -1;
+        }
+        else {
+            if (this.isClosed()) {
+                this.div.tabIndex = 0;
+            }
+            else {
+                this.div.tabIndex = -1;
+            }
+        }
+    };
+    FilterMultiSelect.prototype.closeDropdown = function () {
+        var _this = this;
+        if (DEBUG) {
+            console.log('close');
+        }
+        document.removeEventListener('keydown', this.documentKeydownListener, true);
+        document.removeEventListener('click', this.documentClickListener, true);
+        this.dropDown.classList.remove('show');
+        setTimeout(function () {
+            _this.setTabIndex();
+        }, 100); //magic number
+        this.div.addEventListener('mousedown', this.fmsMousedownListener, true);
+        this.div.addEventListener('focus', this.fmsFocusListener);
+    };
+    FilterMultiSelect.prototype.incrementItemFocus = function () {
+        if (this.itemFocus >= this.options.length - 1)
+            return;
+        var i = this.itemFocus;
+        do {
+            i++;
+        } while ((i == -1 && (this.selectAllOption.isDisabled() || this.selectAllOption.isHidden())) || //magic number
+            (i >= 0 && i < this.options.length && (this.options[i].isDisabled() || this.options[i].isHidden())));
+        this.itemFocus = i > this.options.length - 1 ? this.itemFocus : i;
+        if (DEBUG) {
+            console.log("item focus: " + this.itemFocus);
+        }
+    };
+    FilterMultiSelect.prototype.decrementItemFocus = function () {
+        if (this.itemFocus <= -2)
+            return; //magic number
+        var i = this.itemFocus;
+        do {
+            i--;
+        } while ((i == -1 && (this.selectAllOption.isDisabled() || this.selectAllOption.isHidden())) ||
+            (i >= 0 && (this.options[i].isDisabled() || this.options[i].isHidden())) &&
+                i > -2); //magic number
+        this.itemFocus = i;
+        if (DEBUG) {
+            console.log("item focus: " + this.itemFocus);
+        }
+    };
+    FilterMultiSelect.prototype.focusItem = function () {
+        if (this.itemFocus === -2) {
+            this.refocusFilter();
+        }
+        else if (this.itemFocus === -1) {
+            this.selectAllOption.focus();
+        }
+        else {
+            this.options[this.itemFocus].focus();
+        }
+    };
+    FilterMultiSelect.prototype.openDropdown = function () {
+        if (this.disabled)
+            return;
+        if (DEBUG) {
+            console.log('open');
+        }
+        this.div.removeEventListener('mousedown', this.fmsMousedownListener, true);
+        this.div.removeEventListener('focus', this.fmsFocusListener);
+        this.dropDown.classList.add('show');
+        this.setTabIndex();
+        this.clearFilterAndRefocus();
+        document.addEventListener('keydown', this.documentKeydownListener, true);
+        document.addEventListener('click', this.documentClickListener, true);
+    };
+    FilterMultiSelect.prototype.queueOption = function (option) {
+        if (this.options.indexOf(option) == -1)
+            return;
+        this.numSelectedItems++;
+        $(this.selectedItems).append(option.getSelectedItemBadge());
+    };
+    FilterMultiSelect.prototype.unqueueOption = function (option) {
+        if (this.options.indexOf(option) == -1)
+            return;
+        this.numSelectedItems--;
+        $(this.selectedItems).children('[data-id="' + option.getSelectedItemBadge().getAttribute('data-id') + '"]').remove();
+    };
+    FilterMultiSelect.prototype.update = function () {
+        if (this.areAllSelected()) {
+            this.selectAllOption.markSelectAll();
+            this.placeholder.hidden = true;
+        }
+        else if (this.areSomeSelected()) {
+            if (this.areOnlyDeselectedAlsoDisabled()) {
+                this.selectAllOption.markSelectAllNotDisabled();
+                this.placeholder.hidden = true;
+            }
+            else {
+                this.selectAllOption.markSelectPartial();
+                this.placeholder.hidden = true;
+            }
+        }
+        else {
+            this.selectAllOption.markDeselect();
+            this.placeholder.hidden = false;
+        }
+        if (this.areAllDisabled()) {
+            this.selectAllOption.disable();
+        }
+        else {
+            this.selectAllOption.enable();
+        }
+        if (!this.canSelect()) {
+            this.options
+                .filter(function (o) { return !o.isSelected(); })
+                .forEach(function (o) { return o.deactivate(); });
+        }
+        else {
+            this.options
+                .filter(function (o) { return !o.isSelected(); })
+                .forEach(function (o) { return o.activate(); });
+        }
+        this.updateSelectionCounter();
+    };
+    FilterMultiSelect.prototype.areAllSelected = function () {
+        return this.options
+            .map(function (o) { return o.isSelected(); })
+            .reduce(function (acc, cur) { return acc && cur; }, true);
+    };
+    FilterMultiSelect.prototype.areSomeSelected = function () {
+        return this.options
+            .map(function (o) { return o.isSelected(); })
+            .reduce(function (acc, cur) { return acc || cur; }, false);
+    };
+    FilterMultiSelect.prototype.areOnlyDeselectedAlsoDisabled = function () {
+        return this.options
+            .filter(function (o) { return !o.isSelected(); })
+            .map(function (o) { return o.isDisabled(); })
+            .reduce(function (acc, cur) { return acc && cur; }, true);
+    };
+    FilterMultiSelect.prototype.areAllDisabled = function () {
+        return this.options
+            .map(function (o) { return o.isDisabled(); })
+            .reduce(function (acc, cur) { return acc && cur; }, true);
+    };
+    FilterMultiSelect.prototype.isEnablingAndDisablingPermitted = function () {
+        return this.allowEnablingAndDisabling;
+    };
+    FilterMultiSelect.prototype.getRootElement = function () {
+        return this.div;
+    };
+    FilterMultiSelect.prototype.hasOption = function (value) {
+        return this.getOption(value) !== NULL_OPTION;
+    };
+    FilterMultiSelect.prototype.getOption = function (value) {
+        for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
+            var o = _a[_i];
+            if (o.getValue() == value) {
+                return o;
+            }
+        }
+        return NULL_OPTION;
+    };
+    FilterMultiSelect.prototype.selectOption = function (value) {
+        if (this.isDisabled())
+            return;
+        this.getOption(value).select();
+    };
+    FilterMultiSelect.prototype.deselectOption = function (value) {
+        if (this.isDisabled())
+            return;
+        this.getOption(value).deselect();
+    };
+    FilterMultiSelect.prototype.isOptionSelected = function (value) {
+        return this.getOption(value).isSelected();
+    };
+    FilterMultiSelect.prototype.enableOption = function (value) {
+        if (!this.isEnablingAndDisablingPermitted())
+            return;
+        this.getOption(value).enable();
+    };
+    FilterMultiSelect.prototype.disableOption = function (value) {
+        if (!this.isEnablingAndDisablingPermitted())
+            return;
+        this.getOption(value).disable();
+    };
+    FilterMultiSelect.prototype.isOptionDisabled = function (value) {
+        return this.getOption(value).isDisabled();
+    };
+    FilterMultiSelect.prototype.disable = function () {
+        if (!this.isEnablingAndDisablingPermitted())
+            return;
+        this.disableNoPermissionCheck();
+    };
+    FilterMultiSelect.prototype.disableNoPermissionCheck = function () {
+        var _this = this;
+        this.options.forEach(function (o) { return _this.setBadgeDisabled(o); });
+        this.disabled = true;
+        this.div.classList.add('disabled');
+        this.viewBar.classList.remove('dropdown-toggle');
+        this.closeDropdown();
+    };
+    FilterMultiSelect.prototype.setBadgeDisabled = function (o) {
+        o.getSelectedItemBadge().classList.add('disabled');
+    };
+    FilterMultiSelect.prototype.enable = function () {
+        var _this = this;
+        if (!this.isEnablingAndDisablingPermitted())
+            return;
+        this.options.forEach(function (o) {
+            if (!o.isDisabled()) {
+                _this.setBadgeEnabled(o);
+            }
+        });
+        this.disabled = false;
+        this.div.classList.remove('disabled');
+        this.setTabIndex();
+        this.viewBar.classList.add('dropdown-toggle');
+    };
+    FilterMultiSelect.prototype.setBadgeEnabled = function (o) {
+        o.getSelectedItemBadge().classList.remove('disabled');
+    };
+    FilterMultiSelect.prototype.isDisabled = function () {
+        return this.disabled;
+    };
+    FilterMultiSelect.prototype.selectAll = function () {
+        if (this.isDisabled())
+            return;
+        this.selectAllOption.select();
+    };
+    FilterMultiSelect.prototype.deselectAll = function () {
+        if (this.isDisabled())
+            return;
+        this.selectAllOption.deselect();
+    };
+    FilterMultiSelect.prototype.getSelectedOptions = function (includeDisabled) {
+        if (includeDisabled === void 0) { includeDisabled = true; }
+        var a = this.options;
+        if (!includeDisabled) {
+            if (this.isDisabled()) {
+                return new Array();
+            }
+            a = a.filter(function (o) { return !o.isDisabled(); });
+        }
+        a = a.filter(function (o) { return o.isSelected(); });
+        return a;
+    };
+    FilterMultiSelect.prototype.getSelectedOptionsAsJson = function (includeDisabled) {
+        if (includeDisabled === void 0) { includeDisabled = true; }
+        var data = {};
+        var a = this.getSelectedOptions(includeDisabled).map(function (o) { return o.getValue(); });
+        data[this.getName()] = a;
+        var c = JSON.stringify(data, null, "  ");
+        if (DEBUG) {
+            console.log(c);
+        }
+        return c;
+    };
+    FilterMultiSelect.prototype.getName = function () {
+        return this.name;
+    };
+    FilterMultiSelect.prototype.dispatchSelectedEvent = function (option) {
+        this.dispatchEvent(FilterMultiSelect.EventType.SELECTED, option.getValue(), option.getLabel());
+    };
+    FilterMultiSelect.prototype.dispatchDeselectedEvent = function (option) {
+        this.dispatchEvent(FilterMultiSelect.EventType.DESELECTED, option.getValue(), option.getLabel());
+    };
+    FilterMultiSelect.prototype.dispatchEvent = function (eventType, value, label) {
+        var event = FilterMultiSelect.createEvent(eventType, this.getName(), value, label);
+        this.viewBar.dispatchEvent(event);
+    };
+    FilterMultiSelect.prototype.canSelect = function () {
+        return this.numSelectedItems < this.maxNumSelectedItems;
+    };
+    FilterMultiSelect.prototype.updateSelectionCounter = function () {
+        this.selectionCounter.textContent = this.numSelectedItems + "/" + this.maxNumSelectedItems;
+    };
+    FilterMultiSelect.SingleOption = /** @class */ (function () {
+        function class_2(fms, row, name, label, value, checked, disabled) {
+            this.fms = fms;
+            this.div = document.createElement('div');
+            this.checkbox = document.createElement('input');
+            this.checkbox.type = 'checkbox';
+            var id = name + '-' + row.toString();
+            var nchbx = id + '-chbx';
+            this.checkbox.id = nchbx;
+            this.checkbox.name = name;
+            this.checkbox.value = value;
+            this.initiallyChecked = checked;
+            this.checkbox.checked = false;
+            this.checkbox.disabled = disabled;
+            this.labelFor = document.createElement('label');
+            this.labelFor.htmlFor = nchbx;
+            this.labelFor.textContent = label;
+            this.div.append(this.checkbox, this.labelFor);
+            this.closeButton = document.createElement('button');
+            this.closeButton.type = 'button';
+            this.closeButton.innerHTML = '&times;';
+            this.selectedItemBadge = document.createElement('span');
+            this.selectedItemBadge.setAttribute('data-id', id);
+            this.selectedItemBadge.textContent = label;
+            this.selectedItemBadge.append(this.closeButton);
+            this.disabled = disabled;
+            this.active = true;
+        }
+        class_2.prototype.log = function (m, e) {
+            if (DEBUG) {
+                console.log(e.timeStamp + " - " + m + ":" + e.type + ":" + e.target);
+            }
+        };
+        class_2.prototype.initialize = function () {
+            var _this = this;
+            this.div.className = 'dropdown-item custom-control';
+            this.checkbox.className = 'custom-control-input custom-checkbox';
+            this.labelFor.className = 'custom-control-label';
+            this.selectedItemBadge.className = 'item';
+            if (this.initiallyChecked) {
+                this.selectNoDisabledCheck();
+            }
+            if (this.disabled) {
+                this.setDisabledViewState();
+            }
+            this.fms.update();
+            this.checkbox.addEventListener('change', function (e) {
+                e.stopPropagation();
+                if (_this.isDisabled() || _this.fms.isDisabled()) {
+                    e.preventDefault();
+                    return;
+                }
+                if (DEBUG) {
+                    _this.log('checkbox', e);
+                }
+                if (_this.isSelected()) {
+                    _this.select();
+                }
+                else {
+                    _this.deselect();
+                }
+                var numShown = _this.fms.showing.length;
+                if (numShown === 1) {
+                    _this.fms.clearFilterAndRefocus();
+                }
+            }, true);
+            this.checkbox.addEventListener('keyup', function (e) {
+                if (DEBUG) {
+                    _this.log('checkbox', e);
+                }
+                switch (e.key) {
+                    case "Enter":
+                        e.stopPropagation();
+                        _this.checkbox.dispatchEvent(new MouseEvent('click'));
+                        break;
+                    default:
+                        break;
+                }
+            }, true);
+            this.closeButton.addEventListener('click', function (e) {
+                e.stopPropagation();
+                if (_this.isDisabled() || _this.fms.isDisabled())
+                    return;
+                if (DEBUG) {
+                    _this.log('closeButton', e);
+                }
+                _this.deselect();
+                if (!_this.fms.isClosed()) {
+                    _this.fms.refocusFilter();
+                }
+            }, true);
+            this.checkbox.tabIndex = -1;
+            this.closeButton.tabIndex = -1;
+        };
+        class_2.prototype.select = function () {
+            if (this.isDisabled())
+                return;
+            this.selectNoDisabledCheck();
+            this.fms.update();
+        };
+        class_2.prototype.selectNoDisabledCheck = function () {
+            if (!this.fms.canSelect() || !this.isActive())
+                return;
+            this.checkbox.checked = true;
+            this.fms.queueOption(this);
+            this.fms.dispatchSelectedEvent(this);
+        };
+        class_2.prototype.deselect = function () {
+            if (this.isDisabled())
+                return;
+            this.checkbox.checked = false;
+            this.fms.unqueueOption(this);
+            this.fms.dispatchDeselectedEvent(this);
+            this.fms.update();
+        };
+        class_2.prototype.enable = function () {
+            this.disabled = false;
+            this.setEnabledViewState();
+            this.fms.update();
+        };
+        class_2.prototype.setEnabledViewState = function () {
+            this.checkbox.disabled = false;
+            this.selectedItemBadge.classList.remove('disabled');
+        };
+        class_2.prototype.disable = function () {
+            this.disabled = true;
+            this.setDisabledViewState();
+            this.fms.update();
+        };
+        class_2.prototype.setDisabledViewState = function () {
+            this.checkbox.disabled = true;
+            this.selectedItemBadge.classList.add('disabled');
+        };
+        class_2.prototype.isSelected = function () {
+            return this.checkbox.checked;
+        };
+        class_2.prototype.isDisabled = function () {
+            return this.checkbox.disabled;
+        };
+        class_2.prototype.getListItem = function () {
+            return this.div;
+        };
+        class_2.prototype.getSelectedItemBadge = function () {
+            return this.selectedItemBadge;
+        };
+        class_2.prototype.getLabel = function () {
+            return this.labelFor.textContent;
+        };
+        class_2.prototype.getValue = function () {
+            return this.checkbox.value;
+        };
+        class_2.prototype.show = function () {
+            this.div.hidden = false;
+        };
+        class_2.prototype.hide = function () {
+            this.div.hidden = true;
+        };
+        class_2.prototype.isHidden = function () {
+            return this.div.hidden;
+        };
+        class_2.prototype.focus = function () {
+            this.labelFor.focus();
+        };
+        class_2.prototype.isActive = function () {
+            return this.active;
+        };
+        class_2.prototype.activate = function () {
+            this.active = true;
+            if (!this.disabled) {
+                this.setEnabledViewState();
+            }
+        };
+        class_2.prototype.deactivate = function () {
+            this.active = false;
+            this.setDisabledViewState();
+        };
+        return class_2;
+    }());
+    FilterMultiSelect.UnrestrictedSelectAllOption = /** @class */ (function (_super) {
+        __extends(class_3, _super);
+        function class_3(fms, name, label) {
+            var _this = _super.call(this, fms, -1, name, label, '', false, false) || this;
+            _this.checkbox.indeterminate = false;
+            return _this;
+        }
+        class_3.prototype.markSelectAll = function () {
+            this.checkbox.checked = true;
+            this.checkbox.indeterminate = false;
+        };
+        class_3.prototype.markSelectPartial = function () {
+            this.checkbox.checked = false;
+            this.checkbox.indeterminate = true;
+        };
+        class_3.prototype.markSelectAllNotDisabled = function () {
+            this.checkbox.checked = true;
+            this.checkbox.indeterminate = true;
+        };
+        class_3.prototype.markDeselect = function () {
+            this.checkbox.checked = false;
+            this.checkbox.indeterminate = false;
+        };
+        class_3.prototype.select = function () {
+            if (this.isDisabled())
+                return;
+            this.fms.options.filter(function (o) { return !o.isSelected(); })
+                .forEach(function (o) { return o.select(); });
+            this.fms.update();
+        };
+        class_3.prototype.deselect = function () {
+            if (this.isDisabled())
+                return;
+            this.fms.options.filter(function (o) { return o.isSelected(); })
+                .forEach(function (o) { return o.deselect(); });
+            this.fms.update();
+        };
+        class_3.prototype.enable = function () {
+            this.disabled = false;
+            this.checkbox.disabled = false;
+        };
+        class_3.prototype.disable = function () {
+            this.disabled = true;
+            this.checkbox.disabled = true;
+        };
+        return class_3;
+    }(FilterMultiSelect.SingleOption));
+    FilterMultiSelect.RestrictedSelectAllOption = /** @class */ (function () {
+        function class_4(fms, name, label) {
+            this.usao = new FilterMultiSelect.UnrestrictedSelectAllOption(fms, name, label);
+        }
+        class_4.prototype.initialize = function () { this.usao.initialize(); };
+        class_4.prototype.select = function () { };
+        class_4.prototype.deselect = function () { this.usao.deselect(); };
+        class_4.prototype.enable = function () { };
+        class_4.prototype.disable = function () { };
+        class_4.prototype.isSelected = function () { return false; };
+        class_4.prototype.isDisabled = function () { return true; };
+        class_4.prototype.getListItem = function () { return document.createElement('div'); };
+        class_4.prototype.getSelectedItemBadge = function () { return document.createElement('div'); };
+        class_4.prototype.getLabel = function () { return 'RESTRICTED_SELECT_ALL_OPTION'; };
+        class_4.prototype.getValue = function () { return 'RESTRICTED_SELECT_ALL_OPTION'; };
+        class_4.prototype.show = function () { };
+        class_4.prototype.hide = function () { };
+        class_4.prototype.isHidden = function () { return true; };
+        class_4.prototype.focus = function () { };
+        class_4.prototype.markSelectAll = function () { };
+        class_4.prototype.markSelectPartial = function () { };
+        class_4.prototype.markSelectAllNotDisabled = function () { };
+        class_4.prototype.markDeselect = function () { };
+        class_4.prototype.activate = function () { };
+        class_4.prototype.deactivate = function () { };
+        return class_4;
+    }());
+    FilterMultiSelect.EventType = {
+        SELECTED: "optionselected",
+        DESELECTED: "optiondeselected"
+    };
+    return FilterMultiSelect;
+}());
+export default FilterMultiSelect;
+//# sourceMappingURL=FilterMultiSelect.js.map

public/dist/example.html

@@ -0,0 +1,345 @@
+<!-- /*! 
+ *  Multiple select dropdown with filter jQuery plugin.
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
+ *
+ *  This library is free software; you can redistribute it and/or
+ *  modify it under the terms of the GNU Lesser General Public
+ *  License as published by the Free Software Foundation; either
+ *  version 2.1 of the License, or (at your option) any later version.
+ * 
+ *  This library is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ *  Lesser General Public License for more details.
+ * 
+ *  You should have received a copy of the GNU Lesser General Public
+ *  License along with this library; if not, write to the Free Software
+ *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301
+ *  USA
+ */ -->
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <title>Filter Multi Select Plugin</title>
+    <style>
+      .notification {color: red; font-size: 85%;}
+    </style>
+  </head>
+
+  <body>
+    <!-- Load jQuery -->
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+    <!-- Load Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+    <!-- Load the plugin bundle. -->
+    <link rel="stylesheet" href="filter_multi_select.css" />
+    <script src="filter-multi-select-bundle.min.js"></script>
+
+    <section class="alternate page-heading">
+      <div class="container">
+        <header>
+          <h1>Dropdown Filter Multi-select jQuery plugin</h1>
+        </header>
+        <p class="lead"></p>
+    </section>
+    <hr>
+    <div class="container">
+      <p>Click below to open dropdown.<br />
+        Use up/down arrow to focus item and space/enter to select.<br />
+        Type to filter items. Press esc to clear or close.<br />
+        If only one item is showing, press enter to select.<br />
+        Tab/shift-tab to close and cycle to next dropdown.
+      </p>
+    </div>
+    <form class="container" method="GET" id="form">
+      <div class="row">
+        <h4 class="col-12">Default Dropdown</h4>
+      </div>
+      <div class="row">
+        <div class="col-2"></div>
+        <div class="col-10" id="notifications">&nbsp;</div>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="animals">Animals</label>
+        <div class="col-10">
+          <select multiple name="animals" id="animals" class="filter-multi-select">
+            <option value="bear">Bear</option>
+            <option value="ant">Ant</option>
+            <option value="salamander">Salamander</option>
+            <option value="owl">Owl</option>
+            <option value="frog">Frog</option>
+            <option value="shark">Shark</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Dropdown with pre-sets and case-sensitive filtering</h4>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="shapes"></label>
+        <div class="col-10">
+          <select multiple name="shapes" id="shapes">
+            <option value="1" selected>Square</option>
+            <option value="2">circle</option>
+            <option value="3">polygon</option>
+            <option value="4">Ellipse</option>
+            <option value="5">Triangle</option>
+            <option value="6" label="rect" selected>Rectangle</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Dropdown with disabled items</h4>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="cars">Cars</label>
+        <div class="col-10">
+          <select multiple name="cars" id="cars">
+            <option value="1" selected>Toyota</option>
+            <option value="2">Honda</option>
+            <option value="3">Ford</option>
+            <option value="4" disabled >BMW</option>
+            <option value="5" selected disabled label="Chevy">Chevrolet</option>
+            <option value="6">Kia</option>
+            <option value="7">Mercedes</option>
+            <option value="8">Subaru</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Dropdown with all items disabled</h4>
+        <div class="container">
+          <button id="b1" type="button">enable Java</button>
+          <button id="b2" type="button">disable Java</button>
+        </div>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="programming_languages_1">Programming Languages</label>
+        <div class="col-10">
+          <select multiple name="programming_languages_1" id="programming_languages_1">
+            <option value="1" disabled selected>Java</option>
+            <option value="2" disabled>Python</option>
+            <option value="3" disabled label="JS">Javascript</option>
+            <option value="4" disabled>C++</option>
+            <option value="5" disabled>Ruby</option>
+            <option value="6" disabled>Fortran</option>
+            <option value="7" disabled selected>Haskell</option>
+            <option value="8" disabled>C#</option>
+            <option value="9" disabled>Basic</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Disabled Dropdown</h4>
+        <div class="container">
+          <button id="b3" type="button">enable dropdown</button>
+          <button id="b4" type="button">disable dropdown</button>
+          <p>...but java is still disabled.<br /></p>
+        </div>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="programming_languages_2">Programming Languages</label>
+        <div class="col-10">
+          <select multiple disabled name="programming_languages_2" id="programming_languages_2">
+            <option value="1" disabled selected>Java</option>
+            <option value="2">Python</option>
+            <option value="3" label="JS">Javascript</option>
+            <option value="4">C++</option>
+            <option value="5">Ruby</option>
+            <option value="6">Fortran</option>
+            <option value="7" selected>Haskell</option>
+            <option value="8">C#</option>
+            <option value="9">Basic</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Dropdown with enabling/disabling not permitted</h4>
+        <div class="container">
+          <button id="b5" type="button">enable Java</button>
+          <button id="b6" type="button">disable Java</button>
+          <button id="b7" type="button">enable dropdown</button>
+          <button id="b8" type="button">disable dropdown</button>
+        </div>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="programming_languages_3">Programming Languages</label>
+        <div class="col-10">
+          <select multiple name="programming_languages_3" id="programming_languages_3">
+            <option value="1" disabled selected>Java</option>
+            <option value="2">Python</option>
+            <option value="3" label="JS">Javascript</option>
+            <option value="4">C++</option>
+            <option value="5">Ruby</option>
+            <option value="6">Fortran</option>
+            <option value="7" selected>Haskell</option>
+            <option value="8">C#</option>
+            <option value="9">Basic</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Dropdown with items added via js</h4>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="cities">Cities</label>
+        <div class="col-10">
+          <select multiple name="cities" id="cities">
+            <option value="1">London</option>
+            <option value="2" selected >New York</option>
+            <option value="3" selected disabled>Los Angeles</option>
+            <option value="4" disabled>Paris</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Single Select</h4>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="colors">Colors</label>
+        <div class="col-10">
+          <select name="colors" id="colors">
+            <option value="1">Red</option>
+            <option value="2">Orange</option>
+            <option value="3">Yellow</option>
+            <option value="4" disabled>Green</option>
+            <option value="5">Blue</option>
+            <option value="6">Indigo</option>
+            <option value="7">Violet</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Limit Selection Count</h4>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="trees">Trees</label>
+        <div class="col-10">
+          <select multiple name="trees" id="trees">
+            <option value="1">Oak</option>
+            <option value="2" selected disabled>Pine</option>
+            <option value="3" selected >Maple</option>
+            <option value="4" disabled>Poplar</option>
+            <option value="5">Beech</option>
+            <option value="6">Magnolia</option>
+          </select>
+        </div>
+      </div>
+      <button type="submit">Submit Form</button>
+    </form>
+    <div class="container">
+      <button id="jsonbtn1">Get Json (include disabled)</button>
+    </div>
+    <div class="container">
+      <span id="jsonresult1"></span>
+    </div>
+    <div class="container">
+      <button id="jsonbtn2">Get Json (exclude disabled)</button>
+    </div>
+    <div class="container">
+      <span id="jsonresult2"></span>
+    </div>
+    <script>
+      // Use the plugin once the DOM has been loaded.
+      $(function () {
+        // Apply the plugin 
+        var notifications = $('#notifications');
+        $('#animals').on("optionselected", function(e) {
+          createNotification("selected", e.detail.label);
+        });
+        $('#animals').on("optiondeselected", function(e) {
+          createNotification("deselected", e.detail.label);
+        });
+        function createNotification(event,label) {
+          var n = $(document.createElement('span'))
+            .text(event + ' ' + label + "  ")
+            .addClass('notification')
+            .appendTo(notifications)
+            .fadeOut(3000, function() {
+              n.remove();
+            });
+        }
+        var shapes = $('#shapes').filterMultiSelect({
+          selectAllText: 'all...',
+          placeholderText: 'click to select a shape',
+          filterText: 'search',
+          labelText: 'Shapes',
+          caseSensitive: true,
+        });
+        var cars = $('#cars').filterMultiSelect();
+        var pl1 = $('#programming_languages_1').filterMultiSelect();
+        $('#b1').click((e) => {
+          pl1.enableOption("1");
+        });
+        $('#b2').click((e) => {
+          pl1.disableOption("1");
+        });
+        var pl2 = $('#programming_languages_2').filterMultiSelect();
+        $('#b3').click((e) => {
+          pl2.enable();
+        });
+        $('#b4').click((e) => {
+          pl2.disable();
+        });
+        var pl3 = $('#programming_languages_3').filterMultiSelect({
+          allowEnablingAndDisabling: false,
+        });
+        $('#b5').click((e) => {
+		  pl3.enableOption("1");
+        });
+        $('#b6').click((e) => {
+          pl3.disableOption("1");
+        });
+        $('#b7').click((e) => {
+          pl3.enable();
+        });
+        $('#b8').click((e) => {
+          pl3.disable();
+        });
+        var cities = $('#cities').filterMultiSelect({
+          items: [["San Francisco","a"],
+                  ["Milan","b",false,true],
+                  ["Singapore","c",true],
+                  ["Berlin","d",true,true],
+                 ],
+        });
+        var colors = $('#colors').filterMultiSelect();
+        var trees = $('#trees').filterMultiSelect({
+          selectionLimit: 3,
+        });
+        $('#jsonbtn1').click((e) => {
+           var b = true;
+           $('#jsonresult1').text(JSON.stringify(getJson(b),null,"  "));
+         });
+         var getJson = function (b) {
+           var result = $.fn.filterMultiSelect.applied
+               .map((e) => JSON.parse(e.getSelectedOptionsAsJson(b)))
+               .reduce((prev,curr) => {
+                 prev = {
+                   ...prev,
+                   ...curr,
+                 };
+                 return prev;
+               });
+           return result;
+         }
+         $('#jsonbtn2').click((e) => {
+           var b = false;
+           $('#jsonresult2').text(JSON.stringify(getJson(b),null,"  "));
+         });
+        $('#form').on('keypress keyup', function(e) {
+          var keyCode = e.keyCode || e.which;
+          if (keyCode === 13) { 
+            e.preventDefault();
+            return false;
+          }
+        });
+      });
+    </script>
+  </body>
+
+</html>
+

public/dist/filter-multi-select.js

@@ -0,0 +1,106 @@
+/*!
+ *  Multiple select dropdown with filter jQuery plugin.
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
+ *
+ *  This library is free software; you can redistribute it and/or
+ *  modify it under the terms of the GNU Lesser General Public
+ *  License as published by the Free Software Foundation; either
+ *  version 2.1 of the License, or (at your option) any later version.
+ *
+ *  This library is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ *  Lesser General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Lesser General Public
+ *  License along with this library; if not, write to the Free Software
+ *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301
+ *  USA
+ */
+import $ from 'jquery';
+import FilterMultiSelect from './FilterMultiSelect';
+// define the plugin function on the jQuery extension point.
+$.fn.filterMultiSelect = function (args) {
+    var target = this;
+    // merge the global options with the per-call options.
+    args = $.extend({}, $.fn.filterMultiSelect.args, args);
+    // factory defaults
+    if (typeof args.placeholderText === 'undefined')
+        args.placeholderText = 'nothing selected';
+    if (typeof args.filterText === 'undefined')
+        args.filterText = 'Filter';
+    if (typeof args.selectAllText === 'undefined')
+        args.selectAllText = 'Select All';
+    if (typeof args.labelText === 'undefined')
+        args.labelText = '';
+    if (typeof args.selectionLimit === 'undefined')
+        args.selectionLimit = 0;
+    if (typeof args.caseSensitive === 'undefined')
+        args.caseSensitive = false;
+    if (typeof args.allowEnablingAndDisabling === 'undefined')
+        args.allowEnablingAndDisabling = true;
+    if (typeof args.items === 'undefined')
+        args.items = new Array();
+    var filterMultiSelect = new FilterMultiSelect(target, args);
+    var fms = $(filterMultiSelect.getRootElement());
+    target.replaceWith(fms);
+    var methods = {
+        hasOption: function (value) {
+            return filterMultiSelect.hasOption(value);
+        },
+        selectOption: function (value) {
+            filterMultiSelect.selectOption(value);
+        },
+        deselectOption: function (value) {
+            filterMultiSelect.deselectOption(value);
+        },
+        isOptionSelected: function (value) {
+            return filterMultiSelect.isOptionSelected(value);
+        },
+        enableOption: function (value) {
+            filterMultiSelect.enableOption(value);
+        },
+        disableOption: function (value) {
+            filterMultiSelect.disableOption(value);
+        },
+        isOptionDisabled: function (value) {
+            return filterMultiSelect.isOptionDisabled(value);
+        },
+        enable: function () {
+            filterMultiSelect.enable();
+        },
+        disable: function () {
+            filterMultiSelect.disable();
+        },
+        selectAll: function () {
+            filterMultiSelect.selectAll();
+        },
+        deselectAll: function () {
+            filterMultiSelect.deselectAll();
+        },
+        getSelectedOptionsAsJson: function (includeDisabled) {
+            if (includeDisabled === void 0) { includeDisabled = true; }
+            return filterMultiSelect.getSelectedOptionsAsJson(includeDisabled);
+        }
+    };
+    // store applied element
+    $.fn.filterMultiSelect.applied.push(methods);
+    return methods;
+};
+// activate plugin by targeting selector
+$(function () {
+    // factory defaults
+    var selector = typeof $.fn.filterMultiSelect.selector === 'undefined' ? 'select.filter-multi-select' : $.fn.filterMultiSelect.selector;
+    // target
+    var s = $(selector);
+    s.each(function (i, e) {
+        $(e).filterMultiSelect();
+    });
+});
+// store collection of applied elements
+$.fn.filterMultiSelect.applied = new Array();
+// define the plugin's global default selector.
+$.fn.filterMultiSelect.selector = undefined;
+// define the plugin's global default options.
+$.fn.filterMultiSelect.args = {};
+//# sourceMappingURL=filter-multi-select.js.map

public/dist/filter-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-multi-select.js","sourceRoot":"","sources":["../src/filter-multi-select.ts"],"names":[],"mappings":"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"}

public/dist/filter_multi_select.css

@@ -0,0 +1,222 @@
+/*! 
+ *  Multiple select dropdown with filter jQuery plugin.
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
+ *
+ *  This library is free software; you can redistribute it and/or
+ *  modify it under the terms of the GNU Lesser General Public
+ *  License as published by the Free Software Foundation; either
+ *  version 2.1 of the License, or (at your option) any later version.
+ * 
+ *  This library is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ *  Lesser General Public License for more details.
+ * 
+ *  You should have received a copy of the GNU Lesser General Public
+ *  License along with this library; if not, write to the Free Software
+ *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301
+ *  USA
+ */
+:root {
+    --fms-badge-text-color: white;
+    --fms-badge-color: var(--primary)
+}
+
+.filter-multi-select.dropup, .filter-multi-select.dropdown {
+    position: relative;
+}
+
+.filter-multi-select .dropdown-toggle::after {
+    all: unset;
+}
+
+.filter-multi-select .dropdown-toggle:empty::after {
+    all: unset;
+}
+
+.filter-multi-select > .dropdown-toggle::before {
+    display: inline-block;
+    margin-right: 0.255em;
+    vertical-align: middle;
+    content: "";
+    border-top: 0.3em solid;
+    border-right: 0.3em solid transparent;
+    border-bottom: 0;
+    border-left: 0.3em solid transparent;
+}
+
+.filter-multi-select > .dropdown-toggle:empty::before {
+    margin-right: 0.255em;
+}
+
+.filter-multi-select > .viewbar {
+    white-space: normal;
+    font-size: 0.875rem;
+    font-weight: 400;
+    height: auto;
+    cursor: pointer;
+}
+
+.filter-multi-select > .viewbar > .selected-items > .item {
+    margin: .125rem .25rem .125rem 0;
+    padding: 0px 0px 0px .5em;
+    display: inline-flex;
+    height: 1.875em;
+    color: var(--fms-badge-text-color);
+    background-color: var(--fms-badge-color);
+    border-radius: 1.1em;
+    align-items: center;
+    vertical-align: baseline;
+}
+
+.filter-multi-select > .viewbar > .selected-items > .item > button {
+    background-color: transparent;
+    color: var(--fms-badge-text-color);
+    border: 0;
+    font-weight: 900;
+    cursor: pointer;
+}
+
+.filter-multi-select > .viewbar > .selected-items > .item > button:hover {
+    filter: contrast(50%);
+}
+
+.filter-multi-select > .viewbar > .selected-items > .item.disabled {
+    display: inline-flex;
+    padding: 0px .5em 0px .5em;
+    filter: grayscale(80%) brightness(150%);
+}
+
+.filter-multi-select > .viewbar > .selected-items > .item.disabled > button {
+    display: none;
+}
+
+.filter-multi-select > .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0%;
+    z-index: 1000;
+    display: none;
+    float: left;
+    max-height: 50vh;
+    min-width: 10rem;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+    margin: 0.125rem 0 0;
+    font-size: 0.875rem;
+    text-align: left;
+    list-style: none;
+    background-color: #FFFFFF;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+}
+
+.filter-multi-select > .dropdown-menu.show {
+    display: block;
+}
+
+.filter-multi-select > .dropdown-menu > .filter > input {
+    font-size: 0.875rem;
+}
+
+.filter-multi-select > .dropdown-menu > .filter > button {
+    position: absolute;
+    border: 0;
+    background-color: transparent;
+    font-weight: 900;
+    color: #ccc;
+    right: 2rem;
+    top: 1rem;
+}
+
+.filter-multi-select > .dropdown-menu > .filter > button:hover {
+    color: #aaa;
+}
+
+.filter-multi-select .dropdown-item {
+    display: block;
+    width: 100%;
+    padding: 0.25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    color: #212529;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+}
+
+.filter-multi-select .dropdown-item.disabled, .filter-multi-select .dropdown-item:disabled {
+    color: #6c757d;
+    pointer-events: none;
+    background-color: transparent;
+}
+
+.filter-multi-select .dropdown-item:hover, .filter-multi-select .dropdown-item:focus  {
+    background-color: inherit;
+}
+
+.filter-multi-select .dropdown-item.active, .filter-multi-select .dropdown-item:active {
+    color: inherit;
+}
+
+.filter-multi-select .dropdown-item .custom-control-input {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+}
+
+.filter-multi-select .dropdown-item .custom-control-label {
+    position: relative;
+    margin-bottom: 0;
+    vertical-align: top;
+    display: inline-block;   
+}
+
+.filter-multi-select .dropdown-item .custom-control-label::before {
+    border-radius: 0.25rem;
+    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    position: absolute;
+    top: 0.15625rem;
+    left: -1.5rem;
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+    content: "";
+    background-color: #FFFFFF;
+    border: #adb5bd solid 1px
+}
+
+.filter-multi-select .dropdown-item .custom-control-label::after {
+    position: absolute;
+    top: 0.15625rem;
+    left: -1.5rem;
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    content: "";
+    background: no-repeat 50% / 50% 50%;
+}
+
+.filter-multi-select .dropdown-item .custom-checkbox:checked ~ .custom-control-label::before,
+.filter-multi-select .dropdown-item .custom-checkbox:indeterminate ~ .custom-control-label::before {
+    border-color: var(--fms-badge-color);
+    background-color: var(--fms-badge-color);
+}
+
+.filter-multi-select .dropdown-item .custom-checkbox:checked:disabled ~ .custom-control-label::before,
+.filter-multi-select .dropdown-item .custom-checkbox:indeterminate:disabled ~ .custom-control-label::before {
+    border-color: var(--fms-badge-color);
+    background-color: var(--fms-badge-color);
+    filter: grayscale(80%) brightness(150%);
+}
+
+.filter-multi-select .dropdown-item .custom-checkbox:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23FFFFFF' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+}
+
+.filter-multi-select .dropdown-item .custom-checkbox:indeterminate ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23FFFFFF' d='M0 2h4'/%3e%3c/svg%3e");
+}