From cb93cadc8001b277e5fa3dd715f0548500e1926a Mon Sep 17 00:00:00 2001 From: Fabian Steinberg Date: Fri, 18 Mar 2022 14:09:14 +0100 Subject: [PATCH 1/8] #1210: Caret will now reflect state of the (un-)collapsed group - The caret in the group header will now rotate downwards if the group has been uncollapsed and rotate back to its default position to the right otherwise. - Also changed in this commit is the way the cursor looks when it is hovered over the group header. It is now a pointer to show the user that the whole header is in fact clickable. --- dist/css/bootstrap-multiselect.css | 3 +++ dist/js/bootstrap-multiselect.js | 26 ++++++++++++++------------ dist/less/bootstrap-multiselect.less | 9 +++++++++ 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/dist/css/bootstrap-multiselect.css b/dist/css/bootstrap-multiselect.css index 2406b6d1..7cc21ac7 100644 --- a/dist/css/bootstrap-multiselect.css +++ b/dist/css/bootstrap-multiselect.css @@ -44,6 +44,9 @@ span.multiselect-native-select { position: relative; } +.multiselect-group.closed .dropdown-toggle::after { + transform: rotate(-90deg); +} span.multiselect-native-select select { border: 0 !important; clip: rect(0 0 0 0) !important; diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js index f913540e..5addc95d 100644 --- a/dist/js/bootstrap-multiselect.js +++ b/dist/js/bootstrap-multiselect.js @@ -463,7 +463,7 @@ buttonGroupReset: '', option: '', divider: '', - optionGroup: '', + optionGroup: '', resetButton: '
' } }, @@ -909,11 +909,14 @@ } if (this.options.enableCollapsibleOptGroups) { - $(".multiselect-group .caret-container", this.$popupContainer).off("click"); - $(".multiselect-group .caret-container", this.$popupContainer).on("click", $.proxy(function (event) { + let clickableSelector = this.options.enableClickableOptGroups + ? ".multiselect-group .caret-container" + : ".multiselect-group"; + + $(clickableSelector, this.$popupContainer).off("click"); + $(clickableSelector, this.$popupContainer).on("click", $.proxy(function (event) { var $group = $(event.target).closest('.multiselect-group'); - var $inputs = $group.nextUntil(".multiselect-group") - .not('.multiselect-filter-hidden'); + var $inputs = $group.nextUntil(".multiselect-group").not('.multiselect-filter-hidden'); var visible = true; $inputs.each(function () { @@ -921,12 +924,11 @@ }); if (visible) { - $inputs.hide() - .addClass('multiselect-collapsible-hidden'); - } - else { - $inputs.show() - .removeClass('multiselect-collapsible-hidden'); + $inputs.hide().addClass('multiselect-collapsible-hidden'); + $group.get(0).classList.add("closed"); + } else { + $inputs.show().removeClass('multiselect-collapsible-hidden'); + $group.get(0).classList.remove("closed"); } }, this)); } @@ -1077,7 +1079,7 @@ if (this.options.enableCollapsibleOptGroups) { $groupOption.find('.form-check').addClass('d-inline-block'); - $groupOption.append(''); + $groupOption.get(0).insertAdjacentHTML("afterbegin", ''); } if ($group.is(':disabled')) { diff --git a/dist/less/bootstrap-multiselect.less b/dist/less/bootstrap-multiselect.less index 48fbe874..90134ae2 100644 --- a/dist/less/bootstrap-multiselect.less +++ b/dist/less/bootstrap-multiselect.less @@ -45,6 +45,12 @@ span.multiselect-native-select{ position:relative } +.multiselect-group.closed { + .dropdown-toggle::after { + transform: rotate(-90deg); + } +} + span.multiselect-native-select select{ border :0 !important; clip: rect(0 0 0 0) !important; @@ -107,6 +113,9 @@ span.multiselect-native-select select{ .multiselect-option.multiselect-group-option-indented { padding-left: 1.75rem; + + .multiselect-group { + cursor: pointer; } .multiselect-option, .multiselect-group, .multiselect-all { From f6ea906982620100dc76bbcf57f30c3a0d3722e9 Mon Sep 17 00:00:00 2001 From: Fabian Steinberg Date: Fri, 18 Mar 2022 14:14:08 +0100 Subject: [PATCH 2/8] #1218: Clickable area for (un-)collapsing group now bigger, caret for (un-)collapsing group now on the left of the group text - The caret for toggling the collapse and uncollapse of the group should now be slightly bigger and therefore easier to use on smaller mobile devices - The caret also has been moved to the left of the header text, which should give it a bit more structure and make the dimensions of where you can click to collapse and uncollapse the group more obvious - There is now multiple indents based on whether the group is selectable or not, because otherwise the indent would be too little and it would be hard to make out where a group begins and ends --- dist/css/bootstrap-multiselect.css | 14 ++++++++++---- dist/js/bootstrap-multiselect.js | 7 ++++++- dist/less/bootstrap-multiselect.less | 11 +++++++++-- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/dist/css/bootstrap-multiselect.css b/dist/css/bootstrap-multiselect.css index 7cc21ac7..7635ad61 100644 --- a/dist/css/bootstrap-multiselect.css +++ b/dist/css/bootstrap-multiselect.css @@ -95,8 +95,14 @@ span.multiselect-native-select select { margin-left: -1.5rem; display: none; } +.multiselect-container .multiselect-option.multiselect-group-option-indented-full { + padding-left: 2.6rem; +} .multiselect-container .multiselect-option.multiselect-group-option-indented { - padding-left: 1.75rem; + padding-left: 1.8rem; +} +.multiselect-container .multiselect-group { + cursor: pointer; } .multiselect-container .multiselect-option, .multiselect-container .multiselect-group, @@ -147,11 +153,11 @@ span.multiselect-native-select select { padding: 3px 20px 3px 40px; } .input-group.input-group-sm > .multiselect-native-select .multiselect { - padding: .25rem .5rem; - font-size: .875rem; + padding: 0.25rem 0.5rem; + font-size: 0.875rem; line-height: 1.5; padding-right: 1.75rem; - height: calc(4em); + height: calc(1.5em + 0.5rem + 2px); } .input-group > .multiselect-native-select { flex: 1 1 auto; diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js index 5addc95d..80b89b58 100644 --- a/dist/js/bootstrap-multiselect.js +++ b/dist/js/bootstrap-multiselect.js @@ -997,7 +997,12 @@ $option.addClass(classes); if (isGroupOption && this.options.indentGroupOptions) { - $option.addClass("multiselect-group-option-indented") + if (this.options.enableCollapsibleOptGroups) { + $option.addClass("multiselect-group-option-indented-full") + } + else { + $option.addClass("multiselect-group-option-indented"); + } } // Hide all children items when collapseOptGroupsByDefault is true diff --git a/dist/less/bootstrap-multiselect.less b/dist/less/bootstrap-multiselect.less index 90134ae2..7f3ff30a 100644 --- a/dist/less/bootstrap-multiselect.less +++ b/dist/less/bootstrap-multiselect.less @@ -111,8 +111,15 @@ span.multiselect-native-select select{ } } - .multiselect-option.multiselect-group-option-indented { - padding-left: 1.75rem; + .multiselect-option { + &.multiselect-group-option-indented-full { + padding-left: 2.6rem; + } + + &.multiselect-group-option-indented { + padding-left: 1.8rem; + } + } .multiselect-group { cursor: pointer; From 933a1c281f4a07ce85a541445233bcf28f41f7a8 Mon Sep 17 00:00:00 2001 From: Fabian Steinberg Date: Fri, 18 Mar 2022 14:14:46 +0100 Subject: [PATCH 3/8] #1210 & #1218: Minified files for css and js --- dist/css/bootstrap-multiselect.min.css | 45 +------------------------- dist/js/bootstrap-multiselect.min.js | 45 +------------------------- 2 files changed, 2 insertions(+), 88 deletions(-) diff --git a/dist/css/bootstrap-multiselect.min.css b/dist/css/bootstrap-multiselect.min.css index 4408dcf5..ab44791f 100644 --- a/dist/css/bootstrap-multiselect.min.css +++ b/dist/css/bootstrap-multiselect.min.css @@ -1,44 +1 @@ -/** - * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/) - * - * Apache License, Version 2.0: - * Copyright (c) 2012 - 2021 David Stutz - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not - * use this file except in compliance with the License. You may obtain a - * copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * BSD 3-Clause License: - * Copyright (c) 2012 - 2021 David Stutz - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - Redistributions of source code must retain the above copyright notice, - * this list of conditions and the following disclaimer. - * - Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution. - * - Neither the name of David Stutz nor the names of its contributors may be - * used to endorse or promote products derived from this software without - * specific prior written permission. - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" - * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, - * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR - * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR - * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, - * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; - * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, - * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR - * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF - * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - */ - span.multiselect-native-select{position:relative}span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px}.multiselect.dropdown-toggle:after{display:none}.multiselect{overflow:hidden;text-overflow:ellipsis}.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .multiselect-reset .input-group{width:93%}.multiselect-container .multiselect-filter>.fa-search{z-index:1;padding-left:.75rem}.multiselect-container .multiselect-filter>input.multiselect-search{border:none;border-bottom:1px solid #d3d3d3;padding-left:2rem;margin-left:-1.625rem;border-bottom-right-radius:0;border-bottom-left-radius:0}.multiselect-container .multiselect-filter>input.multiselect-search:focus{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.multiselect-container .multiselect-filter>.multiselect-moz-clear-filter{margin-left:-1.5rem;display:none}.multiselect-container .multiselect-option.multiselect-group-option-indented{padding-left:1.75rem}.multiselect-container .multiselect-all,.multiselect-container .multiselect-group,.multiselect-container .multiselect-option{padding:.25rem .25rem .25rem .75rem}.multiselect-container .multiselect-all .form-check-label,.multiselect-container .multiselect-all.dropdown-item,.multiselect-container .multiselect-all.dropdown-toggle,.multiselect-container .multiselect-group .form-check-label,.multiselect-container .multiselect-group.dropdown-item,.multiselect-container .multiselect-group.dropdown-toggle,.multiselect-container .multiselect-option .form-check-label,.multiselect-container .multiselect-option.dropdown-item,.multiselect-container .multiselect-option.dropdown-toggle{cursor:pointer}.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active{background-color:#d3d3d3;color:#000}.multiselect-container .multiselect-all:focus,.multiselect-container .multiselect-all:hover,.multiselect-container .multiselect-group:focus,.multiselect-container .multiselect-group:hover,.multiselect-container .multiselect-option:focus,.multiselect-container .multiselect-option:hover{background-color:#a9a9a9!important}.multiselect-container .multiselect-all .form-check,.multiselect-container .multiselect-group .form-check,.multiselect-container .multiselect-option .form-check{padding:0 5px 0 20px}.multiselect-container .multiselect-all:focus,.multiselect-container .multiselect-group:focus,.multiselect-container .multiselect-option:focus{outline:0}.form-inline .multiselect-container span.form-check{padding:3px 20px 3px 40px}.input-group.input-group-sm>.multiselect-native-select .multiselect{padding:.25rem 1.75rem .25rem .5rem;font-size:.875rem;line-height:1.5;height:calc(4em)}.input-group>.multiselect-native-select{flex:1 1 auto;width:1%}.input-group>.multiselect-native-select>div.btn-group{width:100%}.input-group>.multiselect-native-select:not(:first-child) .multiselect{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.multiselect-native-select:not(:last-child) .multiselect{border-top-right-radius:0;border-bottom-right-radius:0} \ No newline at end of file +span.multiselect-native-select{position:relative}.multiselect-group.closed .dropdown-toggle::after{transform:rotate(-90deg)}span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px}.multiselect.dropdown-toggle:after{display:none}.multiselect{overflow:hidden;text-overflow:ellipsis}.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .multiselect-reset .input-group{width:93%}.multiselect-container .multiselect-filter>.fa-search{z-index:1;padding-left:.75rem}.multiselect-container .multiselect-filter>input.multiselect-search{border:none;border-bottom:1px solid #d3d3d3;padding-left:2rem;margin-left:-1.625rem;border-bottom-right-radius:0;border-bottom-left-radius:0}.multiselect-container .multiselect-filter>input.multiselect-search:focus{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.multiselect-container .multiselect-filter>.multiselect-moz-clear-filter{margin-left:-1.5rem;display:none}.multiselect-container .multiselect-option.multiselect-group-option-indented-full{padding-left:2.6rem}.multiselect-container .multiselect-option.multiselect-group-option-indented{padding-left:1.8rem}.multiselect-container .multiselect-group{cursor:pointer}.multiselect-container .multiselect-all,.multiselect-container .multiselect-group,.multiselect-container .multiselect-option{padding:.25rem .25rem .25rem .75rem}.multiselect-container .multiselect-all.dropdown-item,.multiselect-container .multiselect-all.dropdown-toggle,.multiselect-container .multiselect-group.dropdown-item,.multiselect-container .multiselect-group.dropdown-toggle,.multiselect-container .multiselect-option.dropdown-item,.multiselect-container .multiselect-option.dropdown-toggle{cursor:pointer}.multiselect-container .multiselect-all .form-check-label,.multiselect-container .multiselect-group .form-check-label,.multiselect-container .multiselect-option .form-check-label{cursor:pointer}.multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active,.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback),.multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active{background-color:#d3d3d3;color:#000}.multiselect-container .multiselect-all:focus,.multiselect-container .multiselect-all:hover,.multiselect-container .multiselect-group:focus,.multiselect-container .multiselect-group:hover,.multiselect-container .multiselect-option:focus,.multiselect-container .multiselect-option:hover{background-color:#a9a9a9!important}.multiselect-container .multiselect-all .form-check,.multiselect-container .multiselect-group .form-check,.multiselect-container .multiselect-option .form-check{padding:0 5px 0 20px}.multiselect-container .multiselect-all:focus,.multiselect-container .multiselect-group:focus,.multiselect-container .multiselect-option:focus{outline:0}.form-inline .multiselect-container span.form-check{padding:3px 20px 3px 40px}.input-group.input-group-sm>.multiselect-native-select .multiselect{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;padding-right:1.75rem;height:calc(1.5em + .5rem + 2px)}.input-group>.multiselect-native-select{flex:1 1 auto;width:1%}.input-group>.multiselect-native-select>div.btn-group{width:100%}.input-group>.multiselect-native-select:not(:first-child) .multiselect{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.multiselect-native-select:not(:last-child) .multiselect{border-top-right-radius:0;border-bottom-right-radius:0} \ No newline at end of file diff --git a/dist/js/bootstrap-multiselect.min.js b/dist/js/bootstrap-multiselect.min.js index 4396ec87..cac22f57 100644 --- a/dist/js/bootstrap-multiselect.min.js +++ b/dist/js/bootstrap-multiselect.min.js @@ -1,44 +1 @@ -/** - * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/) - * - * Apache License, Version 2.0: - * Copyright (c) 2012 - 2021 David Stutz - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not - * use this file except in compliance with the License. You may obtain a - * copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * BSD 3-Clause License: - * Copyright (c) 2012 - 2021 David Stutz - * All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions are met: - * - Redistributions of source code must retain the above copyright notice, - * this list of conditions and the following disclaimer. - * - Redistributions in binary form must reproduce the above copyright notice, - * this list of conditions and the following disclaimer in the documentation - * and/or other materials provided with the distribution. - * - Neither the name of David Stutz nor the names of its contributors may be - * used to endorse or promote products derived from this software without - * specific prior written permission. - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" - * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, - * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR - * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR - * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, - * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; - * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, - * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR - * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF - * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - */ -!function(root,factory){"function"==typeof define&&define.amd&&"function"==typeof require&&"function"==typeof require.specified&&require.specified("knockout")?define(["jquery","knockout"],factory):factory(root.jQuery,root.ko)}(this,(function($,ko){"use strict";function forEach(array,callback){for(var index=0;index').after(this.$container),this.$select.prop("tabindex","-1"),"never"!==this.options.widthSynchronizationMode&&this.synchronizeButtonAndPopupWidth(),this.$select.data("multiselect",this),this.options.onInitialized(this.$select,this.$container)}Multiselect.prototype={defaults:{buttonText:function(selectedOptions,select){if(this.disabledText.length>0&&select.prop("disabled"))return this.disabledText;if(0===selectedOptions.length)return this.nonSelectedText;if(this.allSelectedText&&selectedOptions.length===$("option",$(select)).length&&1!==$("option",$(select)).length&&this.multiple)return this.selectAllNumber?this.allSelectedText+" ("+selectedOptions.length+")":this.allSelectedText;if(0!=this.numberDisplayed&&selectedOptions.length>this.numberDisplayed)return selectedOptions.length+" "+this.nSelectedText;var selected="",delimiter=this.delimiterText;return selectedOptions.each((function(){var label=void 0!==$(this).attr("label")?$(this).attr("label"):$(this).text();selected+=label+delimiter})),selected.substr(0,selected.length-this.delimiterText.length)},buttonTitle:function(options,select){if(0===options.length)return this.nonSelectedText;var selected="",delimiter=this.delimiterText;return options.each((function(){var label=void 0!==$(this).attr("label")?$(this).attr("label"):$(this).text();selected+=label+delimiter})),selected.substr(0,selected.length-this.delimiterText.length)},checkboxName:function(option){return!1},optionLabel:function(element){return $(element).attr("label")||$(element).text()},optionClass:function(element){return $(element).attr("class")||""},onChange:function(option,checked){},onDropdownShow:function(event){},onDropdownHide:function(event){},onDropdownShown:function(event){},onDropdownHidden:function(event){},onSelectAll:function(selectedOptions){},onDeselectAll:function(deselectedOptions){},onInitialized:function($select,$container){},onFiltering:function($filter){},enableHTML:!1,buttonClass:"custom-select",inheritClass:!1,buttonWidth:"auto",buttonContainer:'
',dropRight:!1,dropUp:!1,selectedClass:"active",maxHeight:null,includeSelectAllOption:!1,includeSelectAllIfMoreThan:0,selectAllText:" Select all",selectAllValue:"multiselect-all",selectAllName:!1,selectAllNumber:!0,selectAllJustVisible:!0,enableFiltering:!1,enableCaseInsensitiveFiltering:!1,enableFullValueFiltering:!1,enableClickableOptGroups:!1,enableCollapsibleOptGroups:!1,collapseOptGroupsByDefault:!1,filterPlaceholder:"Search",filterBehavior:"text",includeFilterClearBtn:!0,preventInputChangeEvent:!1,nonSelectedText:"None selected",nSelectedText:"selected",allSelectedText:"All selected",resetButtonText:"Reset",numberDisplayed:3,disableIfEmpty:!1,disabledText:"",delimiterText:", ",includeResetOption:!1,includeResetDivider:!1,resetText:"Reset",indentGroupOptions:!0,widthSynchronizationMode:"never",buttonTextAlignment:"center",enableResetButton:!1,templates:{button:'',popupContainer:'',filter:'
',buttonGroup:'
',buttonGroupReset:'',option:'',divider:'',optionGroup:'',resetButton:'
'}},constructor:Multiselect,buildContainer:function(){this.$container=$(this.options.buttonContainer),"never"!==this.options.widthSynchronizationMode?this.$container.on("show.bs.dropdown",$.proxy((function(){this.synchronizeButtonAndPopupWidth(),this.options.onDropdownShow()}),this)):this.$container.on("show.bs.dropdown",this.options.onDropdownShow),this.$container.on("hide.bs.dropdown",this.options.onDropdownHide),this.$container.on("shown.bs.dropdown",this.options.onDropdownShown),this.$container.on("hidden.bs.dropdown",this.options.onDropdownHidden)},buildButton:function(){if(this.$button=$(this.options.templates.button).addClass(this.options.buttonClass),this.$select.attr("class")&&this.options.inheritClass&&this.$button.addClass(this.$select.attr("class")),this.$select.prop("disabled")?this.disable():this.enable(),this.options.buttonWidth&&"auto"!==this.options.buttonWidth&&(this.$button.css({width:"100%"}),this.$container.css({width:this.options.buttonWidth})),this.options.buttonTextAlignment)switch(this.options.buttonTextAlignment){case"left":this.$button.addClass("text-left");break;case"center":this.$button.addClass("text-center");break;case"right":this.$button.addClass("text-right")}var tabindex=this.$select.attr("tabindex");tabindex&&this.$button.attr("tabindex",tabindex),this.$container.prepend(this.$button)},buildDropdown:function(){this.$popupContainer=$(this.options.templates.popupContainer),this.options.dropRight?this.$container.addClass("dropright"):this.options.dropUp&&this.$container.addClass("dropup"),this.options.maxHeight&&this.$popupContainer.css({"max-height":this.options.maxHeight+"px","overflow-y":"auto","overflow-x":"hidden"}),"never"!==this.options.widthSynchronizationMode&&this.$popupContainer.css("overflow-x","hidden"),this.$popupContainer.on("touchstart click",(function(e){e.stopPropagation()})),this.$container.append(this.$popupContainer)},synchronizeButtonAndPopupWidth:function(){if(this.$popupContainer&&"never"!==this.options.widthSynchronizationMode){var buttonWidth=this.$button.outerWidth();switch(this.options.widthSynchronizationMode){case"always":this.$popupContainer.css("min-width",buttonWidth),this.$popupContainer.css("max-width",buttonWidth);break;case"ifPopupIsSmaller":this.$popupContainer.css("min-width",buttonWidth);break;case"ifPopupIsWider":this.$popupContainer.css("max-width",buttonWidth)}}},buildDropdownOptions:function(){this.$select.children().each($.proxy((function(index,element){var $element=$(element),tag=$element.prop("tagName").toLowerCase();$element.prop("value")!==this.options.selectAllValue&&("optgroup"===tag?this.createOptgroup(element):"option"===tag&&("divider"===$element.data("role")?this.createDivider():this.createOptionValue(element,!1)))}),this)),$(this.$popupContainer).off("change",'> *:not(.multiselect-group) input[type="checkbox"], > *:not(.multiselect-group) input[type="radio"]'),$(this.$popupContainer).on("change",'> *:not(.multiselect-group) input[type="checkbox"], > *:not(.multiselect-group) input[type="radio"]',$.proxy((function(event){var $target=$(event.target),checked=$target.prop("checked")||!1,isSelectAllOption=$target.val()===this.options.selectAllValue;this.options.selectedClass&&(checked?$target.closest(".multiselect-option").addClass(this.options.selectedClass):$target.closest(".multiselect-option").removeClass(this.options.selectedClass));var id=$target.attr("id"),$option=this.getOptionById(id),$optionsNotThis=$("option",this.$select).not($option),$checkboxesNotThis=$("input",this.$container).not($target);if(isSelectAllOption?checked?this.selectAll(this.options.selectAllJustVisible,!0):this.deselectAll(this.options.selectAllJustVisible,!0):(checked?($option.prop("selected",!0),this.options.multiple?$option.prop("selected",!0):(this.options.selectedClass&&$($checkboxesNotThis).closest(".dropdown-item").removeClass(this.options.selectedClass),$($checkboxesNotThis).prop("checked",!1),$optionsNotThis.prop("selected",!1),this.$button.click()),"active"===this.options.selectedClass&&$optionsNotThis.closest(".dropdown-item").css("outline","")):$option.prop("selected",!1),this.options.onChange($option,checked),this.updateSelectAll(),this.options.enableClickableOptGroups&&this.options.multiple&&this.updateOptGroups()),this.$select.change(),this.updateButtonText(),this.options.preventInputChangeEvent)return!1}),this)),$(".multiselect-option",this.$popupContainer).off("mousedown"),$(".multiselect-option",this.$popupContainer).on("mousedown",(function(e){if(e.shiftKey)return!1})),$(this.$popupContainer).off("touchstart click",".multiselect-option, .multiselect-all, .multiselect-group"),$(this.$popupContainer).on("touchstart click",".multiselect-option, .multiselect-all, .multiselect-group",$.proxy((function(event){event.stopPropagation();var $target=$(event.target),$input;if(event.shiftKey&&this.options.multiple){$target.is("input")||(event.preventDefault(),($target=$target.closest(".multiselect-option").find("input")).prop("checked",!$target.prop("checked")));var checked=$target.prop("checked")||!1;if(null!==this.lastToggledInput&&this.lastToggledInput!==$target){var from=this.$popupContainer.find(".multiselect-option:visible").index($target.closest(".multiselect-option")),to=this.$popupContainer.find(".multiselect-option:visible").index(this.lastToggledInput.closest(".multiselect-option"));if(from>to){var tmp=to;to=from,from=tmp}++to;var range=this.$popupContainer.find(".multiselect-option:not(.multiselect-filter-hidden)").slice(from,to).find("input");range.prop("checked",checked),this.options.selectedClass&&range.closest(".multiselect-option").toggleClass(this.options.selectedClass,checked);for(var i=0,j=range.length;i0)!this.options.multiple&&$checkbox.prop("checked")||($checkbox.prop("checked",!$checkbox.prop("checked")),$checkbox.change());else if(this.options.enableClickableOptGroups&&this.options.multiple&&!$target.hasClass("caret-container")){var groupItem=$target;groupItem.hasClass("multiselect-group")||(groupItem=$target.closest(".multiselect-group")),($checkbox=groupItem.find(".form-check-input")).length>0&&($checkbox.prop("checked",!$checkbox.prop("checked")),$checkbox.change())}event.preventDefault()}$target.closest(".multiselect-option").find("input[type='checkbox'], input[type='radio']").length>0?this.lastToggledInput=$target:this.lastToggledInput=null,$target.blur()}),this)),this.$container.off("keydown.multiselect").on("keydown.multiselect",$.proxy((function(event){var $items=$(this.$container).find(".multiselect-option:not(.disabled), .multiselect-group:not(.disabled), .multiselect-all").filter(":visible"),index=$items.index($items.filter(":focus")),$search=$(".multiselect-search",this.$container);if(9===event.keyCode&&this.$container.hasClass("show"))this.$button.click();else if(13==event.keyCode){var $current=$items.eq(index);setTimeout((function(){$current.focus()}),1)}else if(38==event.keyCode)0!=index||$search.is(":focus")||setTimeout((function(){$search.focus()}),1);else if(40==event.keyCode)if($search.is(":focus")){var $first=$items.eq(0);setTimeout((function(){$search.blur(),$first.focus()}),1)}else-1==index&&setTimeout((function(){$search.focus()}),1)}),this)),this.options.enableClickableOptGroups&&this.options.multiple&&($(".multiselect-group input",this.$popupContainer).off("change"),$(".multiselect-group input",this.$popupContainer).on("change",$.proxy((function(event){event.stopPropagation();var $target,checked=$(event.target).prop("checked")||!1,$item=$(event.target).closest(".dropdown-item"),$group,$inputs=$item.nextUntil(".multiselect-group").not(".multiselect-filter-hidden").not(".disabled").find("input"),$options=[];this.options.selectedClass&&(checked?$item.addClass(this.options.selectedClass):$item.removeClass(this.options.selectedClass)),$.each($inputs,$.proxy((function(index,input){var $input=$(input),id=$input.attr("id"),$option=this.getOptionById(id);checked?($input.prop("checked",!0),$input.closest(".dropdown-item").addClass(this.options.selectedClass),$option.prop("selected",!0)):($input.prop("checked",!1),$input.closest(".dropdown-item").removeClass(this.options.selectedClass),$option.prop("selected",!1)),$options.push($option)}),this)),this.options.onChange($options,checked),this.$select.change(),this.updateButtonText(),this.updateSelectAll()}),this))),this.options.enableCollapsibleOptGroups&&($(".multiselect-group .caret-container",this.$popupContainer).off("click"),$(".multiselect-group .caret-container",this.$popupContainer).on("click",$.proxy((function(event){var $group,$inputs=$(event.target).closest(".multiselect-group").nextUntil(".multiselect-group").not(".multiselect-filter-hidden"),visible=!0;$inputs.each((function(){visible=visible&&!$(this).hasClass("multiselect-collapsible-hidden")})),visible?$inputs.hide().addClass("multiselect-collapsible-hidden"):$inputs.show().removeClass("multiselect-collapsible-hidden")}),this)))},createCheckbox:function($item,labelContent,name,value,title,inputType,internalId){var $wrapper=$("");$wrapper.addClass("form-check");var $checkboxLabel=$('