cubex-multiselect-dropdown
Version:
2 lines • 29.7 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/common"),require("@angular/platform-browser/animations"),require("@angular/forms"),require("@angular/core")):"function"==typeof define&&define.amd?define("cubex-multiselect-dropdown",["exports","@angular/common","@angular/platform-browser/animations","@angular/forms","@angular/core"],e):e(t["cubex-multiselect-dropdown"]={},t.ng.common,t.ng.platformBrowser.animations,t.ng.forms,t.ng.core)}(this,function(t,e,o,i,n){"use strict";var s=function(){function t(t){this.eRef=t,this.filterText="",this.selectionLabel="Select",this.optionList=[],this.open=!1,this.selectedOptions=[],this.displayNameKey="",this.toggleSelectionKey="",this.selectionTextWidth=11,this.componentWidth=250,this.componentHeight=400,this.selectedOptionsSet=[],this.selectionChange=new n.EventEmitter,this.selectedAll=!1,this.isSelectedOptionsArayString=!1,this.isoptionListArayString=!1,this.tooltipBoxWidth=150,this.searchError=!1,this.listOptionColorKey=""}return t.prototype.ngOnInit=function(){this.selectedOptions||(this.selectedOptions=[]),this.currentStyles={width:this.componentWidth<250?"250px":this.componentWidth+"px","max-height":this.componentHeight+"px"},this.noOption={"padding-left":this.componentWidth/2-75+"px",color:"gainsboro"},this.tooltipTextWidth={width:this.tooltipBoxWidth<=150?"150px":this.tooltipBoxWidth+"px"},this.tooltipTopUnshift={top:""!==this.selectionLabel?"25px":"7px"},this.errorAlert={border:1==this.searchError?"1px solid red":"1px solid #dfdfdf"}},t.prototype.ngOnChanges=function(t){var o=this;for(var e in this.errorAlert={border:1==this.searchError?"1px solid red":"1px solid #dfdfdf"},t)"selectionSet"===e&&(this.isoptionListArayString="string"==typeof this.optionList[0],this.selectedOptions=t[e].currentValue,this.isoptionListArayString?(this.selectedOptionsSet=[],this.optionList.filter(function(t){var e=o.selectedOptions.indexOf(t);return-1<e&&(o.selectedOptionsSet[e]=t,!0)}),this.filterText=0<this.selectedOptions.length&&!1===this.open?this.selectedOptions[0].length<this.selectionTextWidth+1?this.selectedOptions[0]:this.selectedOptions[0].substring(0,this.selectionTextWidth)+"..":""):(this.selectedOptionsSet=[],this.optionList.filter(function(e){var t=o.selectedOptions.findIndex(function(t){return t[o.displayNameKey]===e[o.toggleSelectionKey]});return-1<t&&(o.selectedOptionsSet[t]=e,!0)}),console.log("selectedOptionsSet --\x3e",this.selectedOptionsSet),this.filterText=0<this.selectedOptions.length&&!1===this.open?this.selectedOptions[0][this.toggleSelectionKey].length<this.selectionTextWidth+1?this.selectedOptions[0][this.toggleSelectionKey]:this.selectedOptions[0][this.toggleSelectionKey].substring(0,this.selectionTextWidth)+"..":""),this.selectedAll=this.optionList.length===this.selectedOptionsSet.length)},t.prototype.toggleOption=function(e){var o=this;this.filterText="";var t=0;this.isoptionListArayString?(t=this.selectedOptions.indexOf(e))<0?(this.selectedOptions.push(e),this.selectedOptionsSet.push(e)):(this.selectedOptions.splice(t,1),this.selectedOptionsSet.splice(t,1)):(t=this.selectedOptions.findIndex(function(t){return t[o.toggleSelectionKey]===e[o.toggleSelectionKey]}))<0?(this.selectedOptions.push(e),this.selectedOptionsSet.push(e)):(this.selectedOptions.splice(t,1),this.selectedOptionsSet.splice(t,1)),this.optionList.length===this.selectedOptions.length?this.selectedAll=!0:this.selectedAll=!1,this.selectionChange.emit(this.selectedOptionsSet)},t.prototype.selectAll=function(t){t.stopPropagation(),this.filterText="",this.selectedAll=!0;var e=this.toggleSelectionKey;this.isoptionListArayString?this.selectedOptions=this.optionList.map(function(t){return t[e]}):this.selectedOptions=this.optionList.map(function(t){return t}),this.selectedOptionsSet=this.optionList,this.selectionChange.emit(this.selectedOptionsSet)},t.prototype.reset=function(t){t.stopPropagation(),this.selectedAll=!1,this.selectedOptions=[],this.selectedOptionsSet=[],this.filterText="",this.selectionChange.emit(this.selectedOptionsSet)},t.prototype.isOptionSelected=function(e){var t,o=this;this.isoptionListArayString?t=-1<this.selectedOptions.indexOf(e):t=-1<this.selectedOptions.findIndex(function(t){return t[o.toggleSelectionKey]===e[o.toggleSelectionKey]});return t},t.prototype.closeDropdown=function(){this.open=!1,this.isoptionListArayString?this.filterText=this.selectedOptions[0]?this.selectedOptions[0].length<this.selectionTextWidth+1?this.selectedOptions[0]:this.selectedOptions[0].substring(0,this.selectionTextWidth)+"..":"":this.filterText=0<this.selectedOptions.length&&!1===this.open?this.selectedOptions[0][this.toggleSelectionKey].length<this.selectionTextWidth+1?this.selectedOptions[0][this.toggleSelectionKey]:this.selectedOptions[0][this.toggleSelectionKey].substring(0,this.selectionTextWidth)+"..":""},t.prototype.toggleDropdown=function(){this.open=!this.open,this.open?this.filterText="":this.isoptionListArayString?this.filterText=this.selectedOptions[0]?this.selectedOptions[0].length<this.selectionTextWidth+1?this.selectedOptions[0]:this.selectedOptions[0].substring(0,this.selectionTextWidth)+"..":"":this.filterText=0<this.selectedOptions.length&&!1===this.open?this.selectedOptions[0][this.toggleSelectionKey].length<this.selectionTextWidth+1?this.selectedOptions[0][this.toggleSelectionKey]:this.selectedOptions[0][this.toggleSelectionKey].substring(0,this.selectionTextWidth)+"..":""},t.prototype.openDropdown=function(){this.open=!0,this.filterText=""},t.prototype.clickout=function(t){this.eRef.nativeElement.contains(t.target)||(this.open=!1,this.isoptionListArayString?this.filterText=this.selectedOptions[0]?this.selectedOptions[0].length<this.selectionTextWidth+1?this.selectedOptions[0]:this.selectedOptions[0].substring(0,this.selectionTextWidth)+"..":"":this.filterText=0<this.selectedOptions.length&&!1===this.open?this.selectedOptions[0][this.toggleSelectionKey].length<this.selectionTextWidth+1?this.selectedOptions[0][this.toggleSelectionKey]:this.selectedOptions[0][this.toggleSelectionKey].substring(0,this.selectionTextWidth)+"..":"")},t.decorators=[{type:n.Component,args:[{selector:"cubex-multiselect-dropdown",template:'<div *ngIf="!isoptionListArayString" style="position: relative !important;">\n <span class="tooltip" *ngIf="!open" [ngStyle]="tooltipTopUnshift">\n <small *ngIf="selectedOptions.length>1">+{{selectedOptions.length-1}} selected</small>\n <span class="tooltiptextparent">\n <span class="tooltiptext" [ngStyle]="tooltipTextWidth">\n <ng-template ngFor let-selectedOption let-index="index" [ngForOf]="selectedOptions.slice(1)">\n <span class="bullet"></span>\n <span>{{selectedOption[displayNameKey]}}</span>\n <br>\n </ng-template>\n </span>\n </span>\n </span>\n\n <div class="form-group proto-select" (clickOutside)="closeDropdown()">\n <div class="form-group__text">\n <input class="text-small text-vibrant" type="text" (click)="openDropdown()" [(ngModel)]="filterText"\n placeholder="{{selectedOptions.length <1?selectionPlaceholder: \'\'}}" [ngStyle]="errorAlert" />\n <label>{{selectionLabel}}</label>\n <i class="proto-select-chevron" [ngClass]="[ open ? \'icon-chevron-up\' : \'icon-chevron-down\' ]"\n (click)="toggleDropdown()"></i>\n </div>\n\n <div class="panel panel--raised proto-select-dropdown" *ngIf="open">\n <div class="text-small text-muted text-noselect qtr-padding" *ngIf="optionList.length == 0">\n No option available\n </div>\n \x3c!-- Select All & Clear --\x3e\n <div class="flex flex-center-vertical dropdown-header clearfix" *ngIf="optionList.length > 0">\n <div class="form-group">\n <label class="checkbox">\n <input type="checkbox" *ngIf="!selectedAll" (click)="selectAll($event)">\n <input type="checkbox" *ngIf="selectedAll" checked (click)="reset($event)">\n <span class="checkbox__input"></span>\n <span class="checkbox__label text-small text-blue"> All</span>\n </label>\n </div>\n <span class="flex-fluid"></span>\n <span class="text-small text-warning qtr-padding half-padding-right clickable pull-right"\n (click)="reset($event)">Clear</span>\n </div>\n\n \x3c!-- <div class="panel no-padding" *ngFor="let item of optionList | filterObjectsByKey : displayNameKey : filterText | arraySort: displayNameKey"> --\x3e\n <div class="panel no-padding" *ngFor="let item of optionList | filterObjectsByKey : displayNameKey : filterText">\n\n <div class="form-group">\n <label class="checkbox">\n <input type="checkbox" (click)="toggleOption(item)" name=item[displayNameKey]\n value=item[displayNameKey] [checked]="isOptionSelected(item)">\n <span class="checkbox__input"></span>\n <span class="checkbox__label text-small"\n [ngStyle]="{\'color\': ((item[listOptionColorKey] !== \'\')?item[listOptionColorKey]: \'#58585b\')}">\n {{item[displayNameKey]|uppercase }}</span>\n </label>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<div *ngIf="isoptionListArayString" style="position: relative !important;">\n <span class="tooltip" *ngIf="!open" [ngStyle]="tooltipTopUnshift">\n <small *ngIf="selectedOptions.length>1">+{{selectedOptions.length-1}} selected</small>\n <span class="tooltiptextparent">\n <span class="tooltiptext" [ngStyle]="tooltipTextWidth">\n <ng-template ngFor let-selectedOption let-index="index" [ngForOf]="selectedOptions.slice(1)">\n <span class="bullet"></span>\n <span>{{selectedOption}}</span>\n <br>\n </ng-template>\n </span>\n </span>\n </span>\n\n <div class="form-group proto-select" (clickOutside)="closeDropdown()">\n <div class="form-group__text">\n <input class="text-small text-vibrant" type="text" (click)="openDropdown()" [(ngModel)]="filterText"\n placeholder="{{selectedOptions.length <1?selectionPlaceholder: \'\'}}" [ngStyle]="errorAlert" />\n <label>{{selectionLabel}}</label>\n <i class="proto-select-chevron" [ngClass]="[ open ? \'icon-chevron-up\' : \'icon-chevron-down\' ]"\n (click)="toggleDropdown()"></i>\n </div>\n\n <div class="panel panel--raised proto-select-dropdown" *ngIf="open">\n <div class="text-small text-muted text-noselect qtr-padding" *ngIf="optionList.length == 0">\n No option available\n </div>\n \x3c!-- Select All & Clear --\x3e\n <div class="flex flex-center-vertical dropdown-header clearfix" *ngIf="optionList.length > 0">\n <div class="form-group">\n <label class="checkbox">\n <input type="checkbox" *ngIf="!selectedAll" (click)="selectAll($event)">\n <input type="checkbox" *ngIf="selectedAll" checked (click)="reset($event)">\n <span class="checkbox__input"></span>\n <span class="checkbox__label text-small text-blue"> All</span>\n </label>\n </div>\n <span class="flex-fluid"></span>\n <span class="text-small text-warning qtr-padding half-padding-right clickable pull-right"\n (click)="reset($event)">Clear</span>\n </div>\n\n <div class="panel no-padding" *ngFor="let item of optionList | filterStrings : filterText">\n <div class="form-group">\n <label class="checkbox">\n <input type="checkbox" (click)="toggleOption(item)" name=item value=item\n [checked]="isOptionSelected(item)">\n <span class="checkbox__input"></span>\n <span class="checkbox__label text-small" [ngStyle]="{\'color\': ((item !== \'\')?item: \'#58585b\')}">\n {{item|uppercase }}</span>\n </label>\n </div>\n </div>\n\n </div>\n </div>\n</div>',styles:['.overlayAnchor{display:inline-block;min-width:250px}.link{text-decoration:underline;cursor:pointer;color:#007493;padding-left:8px}.noOption{padding-top:5px}.tooltip{position:absolute;right:40px;top:25px;z-index:1;display:inline-block}.tooltip .tooltiptext{visibility:hidden;min-width:120px;background-color:#555;color:#fff;text-align:center;padding:5px 0;border-radius:6px;max-height:460px;overflow:scroll;position:absolute;z-index:1;top:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity .3s}.tooltip .tooltiptextparent{visibility:hidden;opacity:0;transition:opacity .3s}.tooltip .tooltiptextparent::after{content:"";position:absolute;top:15px;left:15px;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #555}.tooltip:hover .tooltiptext,.tooltip:hover .tooltiptextparent{visibility:visible;opacity:1}.bullet{height:5px;width:5px;background-color:#fff;border-radius:50%;display:inline-block;margin-bottom:3px}.inputBox{border-bottom:1px solid #ddd;border-top:none;border-left:none;border-right:none;width:-webkit-fill-available;width:-moz-available;width:stretch}.dropdown-expanded{border:1px solid #d3d3d3;padding-left:9px;min-width:171px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overflow:scroll;float:left}.customInput{outline:0;padding-left:6px;padding-top:3px}.customInput:hover{outline:#ccc solid 1px}.inlineBox{display:block;cursor:pointer;position:relative;padding-left:28px;padding-bottom:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:5px 0;border-bottom:1px solid #ccc;word-wrap:break-word}.inlineBox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:22px;width:22px;background-color:#eee;border-radius:5px}.checkmarkText{position:relative;top:3px}.inlineBox:hover input~.checkmark{background-color:#ccc}.inlineBox input:checked~.checkmark{background-color:#ddd}.checkmark:after{content:"";position:absolute;display:none}.inlineBox input:checked~.checkmark:after{display:block}.inlineBox .checkmark:after{left:4px;top:4px;width:14px;height:14px;background:#00beed;border-radius:5px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar:horizontal{height:6px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#666}.proto-select .proto-select-backdrop{position:fixed;top:0;bottom:0;right:0;left:0;z-index:99}.proto-select .proto-select-chevron{position:absolute;bottom:0;right:0;padding:5px 8px;color:gray}.proto-select .proto-select-dropdown{position:absolute;z-index:999;border:1px solid #f1f1f1;overflow-y:auto;padding:0;top:100%;left:0;right:0;max-height:215px}.proto-select .proto-select-dropdown .dropdown-header{position:-webkit-sticky;position:sticky;top:0;z-index:99;width:100%;background-color:#fff;border-bottom:1px solid #f1f1f1}.proto-select .proto-select-dropdown .form-group{padding:6px 10px;margin:0}.proto-select .proto-select-dropdown .form-group .checkbox__label{padding-top:2px}.proto-select .proto-select-dropdown .form-group.selected,.proto-select .proto-select-dropdown .form-group.selected:hover{background-color:#00bceb!important;color:#fff}.proto-select .proto-select-dropdown .form-group.selected .checkbox__label,.proto-select .proto-select-dropdown .form-group.selected:hover .checkbox__label{color:#fff!important}.proto-select .proto-select-dropdown .form-group:hover{background-color:#f1f1f1}']}]}],t.ctorParameters=function(){return[{type:n.ElementRef}]},t.propDecorators={selectionLabel:[{type:n.Input,args:["label"]}],optionList:[{type:n.Input,args:["data"]}],selectionSet:[{type:n.Input,args:["checkedOptions"]}],open:[{type:n.Input,args:["isOpen"]}],displayNameKey:[{type:n.Input,args:["displayKey"]}],toggleSelectionKey:[{type:n.Input,args:["toggleKey"]}],selectionPlaceholder:[{type:n.Input,args:["placeholder"]}],selectionTextWidth:[{type:n.Input,args:["selectionWidth"]}],componentWidth:[{type:n.Input,args:["width"]}],componentHeight:[{type:n.Input,args:["height"]}],selectionChange:[{type:n.Output,args:["onChange"]}],tooltipBoxWidth:[{type:n.Input,args:["tooltipWidth"]}],searchError:[{type:n.Input,args:["error"]}],listOptionColorKey:[{type:n.Input,args:["optionColorKey"]}],clickout:[{type:n.HostListener,args:["document:click",["$event"]]}]},t}(),l=function(){function t(t){this.eRef=t,this.selectionLabel="Select",this.optionList=[],this.open=!1,this.displayNameKey="",this.toggleSelectionKey="",this.selectionTextWidth=11,this.selectionChange=new n.EventEmitter,this.onSearchChange=new n.EventEmitter,this.isoptionListArayString=!1}return t.prototype.ngOnInit=function(){this.currentStyles={width:"100%",height:"auto","max-height":this.componentHeight+"px"},this.noOption={"padding-left":this.componentWidth/2-75+"px",color:"gainsboro"},this.isoptionListArayString="string"==typeof this.optionList[0],console.log(this.isoptionListArayString,this.optionList),this.selectedOptions||(this.selectedOptions=this.isoptionListArayString?"":[]),this.isoptionListArayString&&(this.filterText=this.selectedOptions)},t.prototype.ngOnChanges=function(t){for(var e in t){if("selectedOptions"===e){if(t[e].currentValue===undefined)return;if(0===Object.getOwnPropertyNames(this.selectedOptions).length){this.filterText="";continue}this.isoptionListArayString?"undefined"!=typeof this.selectedOptions&&(this.filterText=this.selectedOptions.length<this.selectionTextWidth+1?this.selectedOptions:this.selectedOptions.substring(0,this.selectionTextWidth)+".."):"undefined"!=typeof this.selectedOptions[this.displayNameKey]&&(this.filterText=this.selectedOptions[this.displayNameKey].length<this.selectionTextWidth+1?this.selectedOptions[this.displayNameKey]:this.selectedOptions[this.displayNameKey].substring(0,this.selectionTextWidth)+"..")}"optionList"===e&&(this.optionList=t[e].currentValue)}},t.prototype.selectOption=function(t){this.isoptionListArayString?(this.selectedOptions=t,this.selectionChange.emit(this.selectedOptions),this.closeDropdown(),this.filterText=this.selectedOptions.length<this.selectionTextWidth+1?this.selectedOptions:this.selectedOptions.substring(0,this.selectionTextWidth)+".."):(this.selectedOptions=t,this.selectionChange.emit(this.selectedOptions),this.closeDropdown(),this.filterText=this.selectedOptions[this.displayNameKey].length<this.selectionTextWidth+1?this.selectedOptions[this.displayNameKey]:this.selectedOptions[this.displayNameKey].substring(0,this.selectionTextWidth)+"..")},t.prototype.closeDropdown=function(){this.open=!1,this.isoptionListArayString?this.filterText=this.selectedOptions:this.filterText=this.selectedOptions[this.displayNameKey]},t.prototype.toggleDropdown=function(){this.open=!this.open,open&&(this.filterText="")},t.prototype.clickout=function(t){this.eRef.nativeElement.contains(t.target)||(this.open=!1,this.isoptionListArayString?this.filterText=this.selectedOptions:this.filterText=this.selectedOptions[this.displayNameKey])},t.decorators=[{type:n.Component,args:[{selector:"cubex-singleselect-dropdown",template:'<div *ngIf="!isoptionListArayString" style="position: relative !important;">\n <div class="form-group proto-select" (clickOutside)="closeDropdown()">\n <div class="form-group__text">\n <input class="text-small text-vibrant Search" type = \'search\' (click)="toggleDropdown()" [(ngModel)]="filterText" placeholder="{{selectionPlaceholder}}" autocomplete="nope" (input)="onSearchChange.emit($event.target.value)"/>\n <label>{{selectionLabel}}</label>\n <i class="proto-select-chevron" (click)="toggleDropdown()"[ngClass]="[ open ? \'icon-chevron-up\' : \'icon-chevron-down\' ]"></i>\n </div>\n <div class="proto-select-backdrop" (click)="toggleDropdown()" *ngIf="open"></div>\n\n <div class="panel panel--raised proto-select-dropdown" *ngIf="open" [ngClass]="{\'topClass\': selectionLabel == \'\' || selectionLabel == null || selectionLabel == undefined }">\n <div class="text-small text-muted text-noselect qtr-padding" *ngIf="optionList.length == 0">\n No option available\n </div>\n\n <div *ngIf="open" class="singleselect_hover wordbreak" [ngStyle]="currentStyles" >\n \x3c!-- <div class="panel panel--compressed" *ngFor="let item of optionList | filterObjectsByKey : displayNameKey : filterText | arraySort: displayNameKey"> --\x3e\n <div class="panel panel--compressed" *ngFor="let item of optionList | filterObjectsByKey : displayNameKey : filterText"> \n <div class="hover-cursor" (click)="selectOption(item)" [ngClass]="{\'bgColor\': selectedOptions[displayNameKey] == item[displayNameKey] }">\n <div>{{item[displayNameKey] }}</div>\n <div > <i class="icon-check icon-right" *ngIf="selectedOptions[displayNameKey] == item[displayNameKey]"></i></div> \n </div>\n \n \x3c!-- <i class="icon-check " [ngClass]="{\'bgColor\': selectedOptions.name == item.name }" ></i> --\x3e\n \n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<div *ngIf="isoptionListArayString" style="position: relative !important;">\n <div class="form-group proto-select" (clickOutside)="closeDropdown()">\n <div class="form-group__text">\n <input class="text-small text-vibrant Search" type = \'search\' (click)="toggleDropdown()" [(ngModel)]="filterText" placeholder="{{selectionPlaceholder}}" autocomplete="nope" (input)="onSearchChange.emit($event.target.value)"/>\n <label>{{selectionLabel}}</label>\n <i class="proto-select-chevron" (click)="toggleDropdown()"[ngClass]="[ open ? \'icon-chevron-up\' : \'icon-chevron-down\' ]"></i>\n </div>\n <div class="proto-select-backdrop" (click)="toggleDropdown()" *ngIf="open"></div>\n\n <div class="panel panel--raised proto-select-dropdown bdr" *ngIf="open" [ngClass]="{\'topClass\': selectionLabel == \'\' || selectionLabel == null || selectionLabel == undefined }" [ngStyle]="currentStyles">\n <div class="text-small text-muted text-noselect qtr-padding" *ngIf="optionList.length == 0">\n No option available\n </div>\n\n <div *ngIf="open" class="singleselect_hover wordbreak" [ngStyle]="currentStyles" >\n <div class="panel panel--compressed" *ngFor="let item of optionList | filterStrings : filterText"> \n <div class="hover-cursor" (click)="selectOption(item)" [ngClass]="{\'bgColor\': selectedOptions == item }">\n <div>{{item }}</div>\n <div > <i class="icon-check icon-right" *ngIf="selectedOptions == item"></i></div> \n </div>\n \n \x3c!-- <i class="icon-check " [ngClass]="{\'bgColor\': selectedOptions.name == item.name }" ></i> --\x3e\n \n </div>\n </div>\n\n </div>\n </div>\n</div>',styles:['.overlayAnchor{display:inline-block;min-width:250px}.link{text-decoration:underline;cursor:pointer;color:#007493;padding-left:8px}.noOption{padding-top:5px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000}.tooltip .tooltiptext{visibility:hidden;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:120px;background-color:#555;color:#fff;text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;top:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity .3s}.tooltip .tooltiptext::after{content:"";position:absolute;top:-10px;left:45px;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #555}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.bullet{height:5px;width:5px;background-color:#fff;border-radius:50%;display:inline-block;margin-bottom:3px}.inputBox{border-bottom:1px solid #ddd;border-top:none;border-left:none;border-right:none;width:-webkit-fill-available;width:-moz-available;width:stretch}.dropdown-expanded{border:1px solid #d3d3d3;padding-left:9px;min-width:171px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overflow:scroll;float:left}.customInput{outline:0;padding-left:6px;padding-top:3px}.customInput:hover{outline:#ccc solid 1px}.inlineBox{display:block;cursor:pointer;position:relative;padding-left:28px;padding-bottom:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:5px 0;border-bottom:1px solid #ccc;word-wrap:break-word}.inlineBox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:22px;width:22px;background-color:#eee;border-radius:5px}.checkmarkText{position:relative;top:3px}.inlineBox:hover input~.checkmark{background-color:#ccc}.inlineBox input:checked~.checkmark{background-color:#ddd}.checkmark:after{content:"";position:absolute;display:none}.inlineBox input:checked~.checkmark:after{display:block}.inlineBox .checkmark:after{left:4px;top:4px;width:14px;height:14px;background:#00beed;border-radius:5px}.proto-select .proto-select-backdrop{position:fixed;top:0;bottom:0;right:0;left:0;z-index:99}.proto-select .proto-select-chevron{position:absolute;bottom:0;right:0;padding:5px 8px;color:gray}.proto-select .proto-select-dropdown{position:absolute;z-index:999;border:1px solid #f1f1f1;overflow-y:auto;padding:0;top:100%;left:0;right:0}.proto-select .proto-select-dropdown .dropdown-header{position:-webkit-sticky;position:sticky;top:0;z-index:99;width:100%;background-color:#fff;border-bottom:1px solid #f1f1f1}.proto-select .proto-select-dropdown .form-group{padding:6px 10px;margin:0}.proto-select .proto-select-dropdown .form-group .checkbox__label{padding-top:2px}.proto-select .proto-select-dropdown .form-group.selected,.proto-select .proto-select-dropdown .form-group.selected:hover{background-color:#00bceb!important;color:#fff}.proto-select .proto-select-dropdown .form-group.selected .checkbox__label,.proto-select .proto-select-dropdown .form-group.selected:hover .checkbox__label{color:#fff!important}.proto-select .proto-select-dropdown .form-group:hover{background-color:#f1f1f1}.singleselect_hover>div>span{display:inline-block!important;width:100%}.singleselect_hover>.panel:hover{background-color:#f1f1f1}.wordbreak{word-break:break-word}.hover-cursor{cursor:pointer;position:relative;padding:5px}.bgColor{background:#00bceb;color:#fff}.icon-right{position:absolute;top:5px;right:5px}.panel--compressed{padding:0!important}.topClass{position:absolute;z-index:999;border:1px solid #f1f1f1;overflow-y:auto;padding:0;top:30px!important;left:0;right:0}.Search::-webkit-search-cancel-button{position:relative;right:20px}']}]}],t.ctorParameters=function(){return[{type:n.ElementRef}]},t.propDecorators={selectionLabel:[{type:n.Input,args:["label"]}],optionList:[{type:n.Input,args:["data"]}],open:[{type:n.Input,args:["isOpen"]}],selectedOptions:[{type:n.Input,args:["checkedOption"]}],displayNameKey:[{type:n.Input,args:["displayKey"]}],toggleSelectionKey:[{type:n.Input,args:["toggleKey"]}],selectionPlaceholder:[{type:n.Input,args:["placeholder"]}],selectionTextWidth:[{type:n.Input,args:["selectionWidth"]}],componentWidth:[{type:n.Input,args:["width"]}],componentHeight:[{type:n.Input,args:["height"]}],selectionChange:[{type:n.Output,args:["onChange"]}],onSearchChange:[{type:n.Output}],clickout:[{type:n.HostListener,args:["document:click",["$event"]]}]},t}(),p=function(){function t(){}return t.prototype.transform=function(t,e){return t?e?(e=e.toLowerCase(),t.filter(function(t){return t.toLowerCase().includes(e)})):t:[]},t.decorators=[{type:n.Pipe,args:[{name:"filterStrings"}]}],t}(),r=function(){function t(){}return t.prototype.transform=function(t,e,o){return t.filter(function(t){return-1<t[e].toUpperCase().indexOf(o.toUpperCase())})},t.decorators=[{type:n.Pipe,args:[{name:"filterObjectsByKey"}]}],t}(),c=function(){function t(){}return t.prototype.transform=function(t,o){return t.sort(function(t,e){return t[o].toUpperCase()<e[o].toUpperCase()?-1:t[o].toUpperCase()>e[o].toUpperCase()?1:0}),t},t.decorators=[{type:n.Pipe,args:[{name:"arraySort"}]}],t}(),d=function(){function t(){}return t.decorators=[{type:n.NgModule,args:[{imports:[e.CommonModule,o.BrowserAnimationsModule,i.FormsModule],declarations:[s,l,c,r,p],exports:[s,l]}]}],t}(),a=function(){function t(){}return t.decorators=[{type:n.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=n.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}();t.MultiselectDropdownModule=d,t.MultiselectDropdownComponent=s,t.SingleselectDropdownComponent=l,t.MultiselectDropdownService=a,t.ArraySortPipe=c,t.FilterObjectsByKeyPipe=r,t.FilterStringsPipe=p,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=cubex-multiselect-dropdown.umd.min.js.map