ng-multiselect-dropdown.umd.min.js 17 KB

12345678910111213141516
  1. !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-multiselect-dropdown",["exports","@angular/core","@angular/forms","@angular/common"],t):t((e=e||self)["ng-multiselect-dropdown"]={},e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,t,i,o){"use strict";
  2. /*! *****************************************************************************
  3. Copyright (c) Microsoft Corporation.
  4. Permission to use, copy, modify, and/or distribute this software for any
  5. purpose with or without fee is hereby granted.
  6. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  7. REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  8. AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  9. INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  10. LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  11. OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  12. PERFORMANCE OF THIS SOFTWARE.
  13. ***************************************************************************** */function n(e,t,i,o){var n,l=arguments.length,s=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var r=e.length-1;r>=0;r--)(n=e[r])&&(s=(l<3?n(s):l>3?n(t,i,s):n(t,i))||s);return l>3&&s&&Object.defineProperty(t,i,s),s}var l=function(e){"string"!=typeof e&&"number"!=typeof e||(this.id=this.text=e,this.isDisabled=!1),"object"==typeof e&&(this.id=e.id,this.text=e.text,this.tooltip=e.tooltip,this.isDisabled=e.isDisabled)},s=function(){function e(){}return e.prototype.transform=function(e,t){var i=this;return e&&t?e.filter((function(e){return i.applyFilter(e,t)})):e},e.prototype.applyFilter=function(e,t){return"string"==typeof e.text&&"string"==typeof t.text?!(t.text&&e.text&&-1===e.text.toLowerCase().indexOf(t.text.toLowerCase())):!(t.text&&e.text&&-1===e.text.toString().toLowerCase().indexOf(t.text.toString().toLowerCase()))},e=n([t.Pipe({name:"multiSelectFilter",pure:!1})],e)}(),r={provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return a})),multi:!0},c=function(){},a=function(){function e(e,i){this.listFilterPipe=e,this.cdr=i,this._data=[],this.selectedItems=[],this.isDropdownOpen=!0,this._placeholder="Select",this._sourceDataType=null,this._sourceDataFields=[],this.filter=new l(this.data),this.defaultSettings={singleSelection:!1,idField:"id",textField:"text",tooltipField:"tooltip",disabledField:"isDisabled",enableCheckAll:!0,selectAllText:"Select All",unSelectAllText:"UnSelect All",allowSearchFilter:!1,limitSelection:-1,clearSearchFilter:!0,maxHeight:197,itemsShowLimit:999999999999,searchPlaceholderText:"Search",noDataAvailablePlaceholderText:"No data available",noFilteredDataAvailablePlaceholderText:"No filtered data available",closeDropDownOnSelection:!1,showSelectedItemsAtTop:!1,defaultOpen:!1,allowRemoteDataSearch:!1},this.disabled=!1,this.onFilterChange=new t.EventEmitter,this.onDropDownClose=new t.EventEmitter,this.onSelect=new t.EventEmitter,this.onDeSelect=new t.EventEmitter,this.onSelectAll=new t.EventEmitter,this.onDeSelectAll=new t.EventEmitter,this.onTouchedCallback=c,this.onChangeCallback=c}return Object.defineProperty(e.prototype,"placeholder",{set:function(e){this._placeholder=e||"Select"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"settings",{set:function(e){this._settings=e?Object.assign(this.defaultSettings,e):Object.assign(this.defaultSettings)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"data",{set:function(e){var t=this;if(e){var i=e[0];this._sourceDataType=typeof i,this._sourceDataFields=this.getFields(i),this._data=e.map((function(e){return t.deobjectify(e)}))}else this._data=[]},enumerable:!0,configurable:!0}),e.prototype.onFilterTextChange=function(e){this.onFilterChange.emit(e)},e.prototype.onItemClick=function(e,t){if(this.disabled||t.isDisabled)return!1;var i=this.isSelected(t),o=-1===this._settings.limitSelection||this._settings.limitSelection>0&&this.selectedItems.length<this._settings.limitSelection;i?this.removeSelected(t):o&&this.addSelected(t),this._settings.singleSelection&&this._settings.closeDropDownOnSelection&&this.closeDropdown()},e.prototype.writeValue=function(e){var t=this;if(null!=e&&e.length>0)if(this._settings.singleSelection)try{e.length>=1&&(this.selectedItems=[this.deobjectify(e[0])])}catch(e){}else{var i=e.map((function(e){return t.deobjectify(e)}));this._settings.limitSelection>0?this.selectedItems=i.splice(0,this._settings.limitSelection):this.selectedItems=i}else this.selectedItems=[];this.onChangeCallback(e),this.cdr.markForCheck()},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.onTouched=function(){this.onTouchedCallback()},e.prototype.trackByFn=function(e,t){return t.id},e.prototype.isSelected=function(e){var t=!1;return this.selectedItems.forEach((function(i){e.id===i.id&&(t=!0)})),t},e.prototype.isLimitSelectionReached=function(){return this._settings.limitSelection===this.selectedItems.length},e.prototype.isAllItemsSelected=function(){var e=this.listFilterPipe.transform(this._data,this.filter),t=e.filter((function(e){return e.isDisabled})).length;return!((!this.data||0===this.data.length)&&this._settings.allowRemoteDataSearch)&&e.length===this.selectedItems.length+t},e.prototype.showButton=function(){return!this._settings.singleSelection&&!(this._settings.limitSelection>0)},e.prototype.itemShowRemaining=function(){return this.selectedItems.length-this._settings.itemsShowLimit},e.prototype.addSelected=function(e){this._settings.singleSelection?(this.selectedItems=[],this.selectedItems.push(e)):this.selectedItems.push(e),this.onChangeCallback(this.emittedValue(this.selectedItems)),this.onSelect.emit(this.emittedValue(e))},e.prototype.removeSelected=function(e){var t=this;this.selectedItems.forEach((function(i){e.id===i.id&&t.selectedItems.splice(t.selectedItems.indexOf(i),1)})),this.onChangeCallback(this.emittedValue(this.selectedItems)),this.onDeSelect.emit(this.emittedValue(e))},e.prototype.emittedValue=function(e){var t=this,i=[];if(Array.isArray(e))e.map((function(e){i.push(t.objectify(e))}));else if(e)return this.objectify(e);return i},e.prototype.objectify=function(e){if("object"===this._sourceDataType){var t={};return t[this._settings.idField]=e.id,t[this._settings.textField]=e.text,this._sourceDataFields.includes(this._settings.disabledField)&&(t[this._settings.disabledField]=e.isDisabled),this._sourceDataFields.includes(this._settings.tooltipField)&&(t[this._settings.tooltipField]=e.tooltip),t}return"number"===this._sourceDataType?Number(e.id):e.text},e.prototype.deobjectify=function(e){return new l("string"==typeof e||"number"==typeof e?e:{id:e[this._settings.idField],text:e[this._settings.textField],tooltip:e[this._settings.tooltipField],isDisabled:e[this._settings.disabledField]})},e.prototype.toggleDropdown=function(e){e.preventDefault(),this.disabled&&this._settings.singleSelection||(this._settings.defaultOpen=!this._settings.defaultOpen,this._settings.defaultOpen||this.onDropDownClose.emit())},e.prototype.closeDropdown=function(){this._settings.defaultOpen=!1,this._settings.clearSearchFilter&&(this.filter.text=""),this.onDropDownClose.emit()},e.prototype.toggleSelectAll=function(){if(this.disabled)return!1;this.isAllItemsSelected()?(this.selectedItems=[],this.onDeSelectAll.emit(this.emittedValue(this.selectedItems))):(this.selectedItems=this.listFilterPipe.transform(this._data,this.filter).filter((function(e){return!e.isDisabled})).slice(),this.onSelectAll.emit(this.emittedValue(this.selectedItems))),this.onChangeCallback(this.emittedValue(this.selectedItems))},e.prototype.getFields=function(e){var t=[];if("object"!=typeof e)return t;for(var i in e)t.push(i);return t},e.ctorParameters=function(){return[{type:s},{type:t.ChangeDetectorRef}]},n([t.Input()],e.prototype,"placeholder",null),n([t.Input()],e.prototype,"disabled",void 0),n([t.Input()],e.prototype,"settings",null),n([t.Input()],e.prototype,"data",null),n([t.Output("onFilterChange")],e.prototype,"onFilterChange",void 0),n([t.Output("onDropDownClose")],e.prototype,"onDropDownClose",void 0),n([t.Output("onSelect")],e.prototype,"onSelect",void 0),n([t.Output("onDeSelect")],e.prototype,"onDeSelect",void 0),n([t.Output("onSelectAll")],e.prototype,"onSelectAll",void 0),n([t.Output("onDeSelectAll")],e.prototype,"onDeSelectAll",void 0),n([t.HostListener("blur")],e.prototype,"onTouched",null),e=n([t.Component({selector:"ng-multiselect-dropdown",template:'<div tabindex="0" (blur)="onTouched()" class="multiselect-dropdown" (clickOutside)="closeDropdown()">\n <div [class.disabled]="disabled">\n <span tabindex="-1" class="dropdown-btn" (click)="toggleDropdown($event)">\n <span *ngIf="selectedItems.length == 0">{{_placeholder}}</span>\n <span *ngFor="let item of selectedItems; trackBy: trackByFn;let k = index" class="selected-item-container" >\n <span class="selected-item" [hidden]="k > (this._settings.itemsShowLimit-1)" [attr.title]="item.tooltip">\n <span >{{item.text}}&nbsp;</span>\n <a style="padding-left:2px;color:white" (click)="onItemClick($event,item)">x</a>\n </span>\n\n </span>\n <span [ngClass]="{ \'dropdown-multiselect--active\': _settings.defaultOpen }" style="float:right !important;padding-right:4px">\n <span style="padding-right: 15px;" *ngIf="itemShowRemaining()>0">+{{itemShowRemaining()}}</span>\n <span class="dropdown-multiselect__caret"></span>\n </span>\n </span>\n </div>\n <div class="dropdown-list" [hidden]="!_settings.defaultOpen">\n <ul class="item1">\n <li (click)="toggleSelectAll()" *ngIf="(_data.length > 0 || _settings.allowRemoteDataSearch) && !_settings.singleSelection && _settings.enableCheckAll && _settings.limitSelection===-1" class="multiselect-item-checkbox" style="border-bottom: 1px solid #ccc;padding:10px">\n <input type="checkbox" aria-label="multiselect-select-all" [checked]="isAllItemsSelected()" [disabled]="disabled || isLimitSelectionReached()" />\n <div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>\n </li>\n <li class="filter-textbox" *ngIf="(_data.length>0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter">\n <input type="text" aria-label="multiselect-search" [readOnly]="disabled" [placeholder]="_settings.searchPlaceholderText" [(ngModel)]="filter.text" (ngModelChange)="onFilterTextChange($event)">\n </li>\n </ul>\n <ul class="item2" [style.maxHeight]="_settings.maxHeight+\'px\'">\n <li *ngFor="let item of _data | multiSelectFilter:filter; let i = index;" (click)="onItemClick($event,item)" class="multiselect-item-checkbox" [attr.title]="item.tooltip">\n <input type="checkbox" [attr.aria-label]="item.text" [checked]="isSelected(item)" [disabled]="disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled" />\n <div>{{item.text}}</div>\n </li>\n <li class=\'no-filtered-data\' *ngIf="_data.length != 0 && (_data | multiSelectFilter:filter).length == 0 && !_settings.allowRemoteDataSearch">\n <h5>{{_settings.noFilteredDataAvailablePlaceholderText}}</h5>\n </li>\n <li class=\'no-data\' *ngIf="_data.length == 0 && !_settings.allowRemoteDataSearch">\n <h5>{{_settings.noDataAvailablePlaceholderText}}</h5>\n </li>\n </ul>\n </div>\n</div>\n',providers:[r],changeDetection:t.ChangeDetectionStrategy.OnPush,styles:['.multiselect-dropdown{position:relative;width:100%;font-size:inherit;font-family:inherit}.multiselect-dropdown .dropdown-btn{display:inline-block;border:1px solid #adadad;width:100%;padding:6px 12px;margin-bottom:0;font-weight:400;line-height:1.52857143;text-align:left;vertical-align:middle;cursor:pointer;background-image:none;border-radius:4px}.multiselect-dropdown .dropdown-btn .selected-item-container{display:flex;float:left;max-width:93%}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item{border:1px solid #337ab7;margin-right:4px;margin-bottom:4px;background:#337ab7;padding:0 5px;color:#fff;border-radius:2px;float:left}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item span{overflow:hidden;text-overflow:ellipsis}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item a{text-decoration:none}.multiselect-dropdown .dropdown-btn .selected-item:hover{box-shadow:1px 1px #959595}.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret{line-height:16px;display:block;position:absolute;box-sizing:border-box;width:40px;height:38px;right:1px;top:0;padding:4px 8px;margin:0;text-decoration:none;text-align:center;cursor:pointer;transition:transform .2s}.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-style:solid;border-width:8px 8px 0;border-color:#999 transparent;content:""}.multiselect-dropdown .dropdown-btn .dropdown-multiselect--active .dropdown-multiselect__caret{transform:rotateZ(180deg)}.multiselect-dropdown .disabled>span{background-color:#eceeef}.dropdown-list{position:absolute;padding-top:6px;width:100%;z-index:9999;border:1px solid #ccc;border-radius:3px;background:#fff;margin-top:10px;box-shadow:0 1px 5px #959595}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list li{padding:6px 10px;cursor:pointer;text-align:left}.dropdown-list .filter-textbox{border-bottom:1px solid #ccc;position:relative;padding:10px}.dropdown-list .filter-textbox input{border:0;width:100%;padding:0 0 0 26px}.dropdown-list .filter-textbox input:focus{outline:0}.multiselect-item-checkbox:hover{background-color:#e4e3e3}.multiselect-item-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.multiselect-item-checkbox input[type=checkbox]:focus+div:before,.multiselect-item-checkbox input[type=checkbox]:hover+div:before{border-color:#337ab7;background-color:#f2f2f2}.multiselect-item-checkbox input[type=checkbox]:active+div:before{transition-duration:0s}.multiselect-item-checkbox input[type=checkbox]+div{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000}.multiselect-item-checkbox input[type=checkbox]+div:before{box-sizing:content-box;content:"";color:#337ab7;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #337ab7;text-align:center;transition:.4s}.multiselect-item-checkbox input[type=checkbox]+div:after{box-sizing:content-box;content:"";position:absolute;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out;background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;-o-border-image:none;border-image:none;transform:rotate(-45deg) scale(0)}.multiselect-item-checkbox input[type=checkbox]:disabled+div:before{border-color:#ccc}.multiselect-item-checkbox input[type=checkbox]:disabled:focus+div:before .multiselect-item-checkbox input[type=checkbox]:disabled:hover+div:before{background-color:inherit}.multiselect-item-checkbox input[type=checkbox]:disabled:checked+div:before{background-color:#ccc}.multiselect-item-checkbox input[type=checkbox]:checked+div:after{content:"";transition:transform .2s ease-out;transform:rotate(-45deg) scale(1)}.multiselect-item-checkbox input[type=checkbox]:checked+div:before{-webkit-animation:.2s ease-in borderscale;animation:.2s ease-in borderscale;background:#337ab7}@-webkit-keyframes borderscale{50%{box-shadow:0 0 0 2px #337ab7}}@keyframes borderscale{50%{box-shadow:0 0 0 2px #337ab7}}']})],e)}(),d=function(){function e(e){this._elementRef=e,this.clickOutside=new t.EventEmitter}return e.prototype.onClick=function(e,t){t&&(this._elementRef.nativeElement.contains(t)||this.clickOutside.emit(e))},e.ctorParameters=function(){return[{type:t.ElementRef}]},n([t.Output()],e.prototype,"clickOutside",void 0),n([t.HostListener("document:click",["$event","$event.target"])],e.prototype,"onClick",null),e=n([t.Directive({selector:"[clickOutside]"})],e)}(),p=function(){function e(){}var l;return l=e,e.forRoot=function(){return{ngModule:l}},e=l=n([t.NgModule({imports:[o.CommonModule,i.FormsModule],declarations:[a,d,s],providers:[s],exports:[a]})],e)}();e.MultiSelectComponent=a,e.NgMultiSelectDropDownModule=p,e.ɵa=r,e.ɵb=s,e.ɵc=d,Object.defineProperty(e,"__esModule",{value:!0})}));
  14. //# sourceMappingURL=ng-multiselect-dropdown.umd.min.js.map