angular-2-dropdown-multiselect - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

bundles/dropdown.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common')) :
-	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
-	(factory((global.dropdown = global.dropdown || {}),global.ng.core,global.ng.forms,global.ng.common));
-}(this, (function (exports,_angular_core,_angular_forms,_angular_common) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs/Rx'), require('@angular/common')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/forms', 'rxjs/Rx', '@angular/common'], factory) :
+	(factory((global.dropdown = global.dropdown || {}),global.ng.core,global.ng.forms,global.Rx,global.ng.common));
+}(this, (function (exports,_angular_core,_angular_forms,rxjs_Rx,_angular_common) { 'use strict';
 
@@ -40,4 +40,5 @@ var MultiSelectSearchFilter = (function () {
 var MultiselectDropdown = (function () {
-    function MultiselectDropdown(element, differs) {
+    function MultiselectDropdown(element, fb, differs) {
         this.element = element;
+        this.fb = fb;
         this.disabled = false;
@@ -49,8 +50,11 @@ this.selectionLimitReached = new _angular_core.EventEmitter();
         this.onRemoved = new _angular_core.EventEmitter();
+        this.destroyed$ = new rxjs_Rx.Subject();
         this.numSelected = 0;
         this.isVisible = false;
-        this.searchFilterText = '';
+        this.renderItems = true;
         this.defaultSettings = {
             pullRight: false,
             enableSearch: false,
+            searchRenderLimit: 0,
+            searchRenderAfter: 3,
             checkedStyle: 'checkboxes',
@@ -74,9 +78,10 @@ buttonClasses: 'btn btn-default btn-secondary',
             searchPlaceholder: 'Search...',
+            saerchEmptyResult: 'Nothing found...',
+            searchNoRenderText: 'Type in search box to see results...',
             defaultTitle: 'Select',
             allSelected: 'All selected',
         };
-        this.onModelChange = function (_) {
-        };
-        this.onModelTouched = function () {
-        };
+        this.filterControl = this.fb.control('');
+        this.onModelChange = function (_) { };
+        this.onModelTouched = function () { };
         this.differ = differs.find([]).create(null);
@@ -99,2 +104,23 @@ }
     };
+    Object.defineProperty(MultiselectDropdown.prototype, "searchLimit", {
+        get: function () {
+            return this.settings.searchRenderLimit;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiselectDropdown.prototype, "searchRenderAfter", {
+        get: function () {
+            return this.settings.searchRenderAfter;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiselectDropdown.prototype, "searchLimitApplied", {
+        get: function () {
+            return this.searchLimit > 0 && this.options.length > this.searchLimit;
+        },
+        enumerable: true,
+        configurable: true
+    });
     MultiselectDropdown.prototype.getItemStyle = function (option) {
@@ -111,5 +137,9 @@ if (!option.isLabel) {
     MultiselectDropdown.prototype.ngOnInit = function () {
+        var _this = this;
         this.settings = Object.assign(this.defaultSettings, this.settings);
         this.texts = Object.assign(this.defaultTexts, this.texts);
         this.title = this.texts.defaultTitle || '';
+        this.filterControl.valueChanges
+            .takeUntil(this.destroyed$)
+            .subscribe(function () { return _this.updateRenderItems(); });
     };
@@ -122,3 +152,6 @@ MultiselectDropdown.prototype.ngOnChanges = function (changes) {
                 .map(function (option) { return option.parentId; });
-            this.updateTitle();
+            this.updateRenderItems();
+            if (this.texts) {
+                this.updateTitle();
+            }
         }
@@ -129,2 +162,8 @@ if (changes['texts'] && !changes['texts'].isFirstChange()) {
     };
+    MultiselectDropdown.prototype.ngOnDestroy = function () {
+        this.destroyed$.next();
+    };
+    MultiselectDropdown.prototype.updateRenderItems = function () {
+        this.renderItems = !this.searchLimitApplied || this.filterControl.value.length >= this.searchRenderAfter;
+    };
     MultiselectDropdown.prototype.writeValue = function (value) {
@@ -166,3 +205,3 @@ if (value !== undefined && value !== null) {
         event.stopPropagation();
-        this.searchFilterText = '';
+        this.filterControl.setValue('');
     };
@@ -245,6 +284,6 @@ MultiselectDropdown.prototype.toggleDropdown = function () {
         if (this.numSelected === 0 || this.settings.fixedTitle) {
-            this.title = this.texts.defaultTitle || '';
+            this.title = (this.texts) ? this.texts.defaultTitle : '';
         }
         else if (this.settings.displayAllSelectedText && this.model.length === this.options.length) {
-            this.title = this.texts.allSelected || '';
+            this.title = (this.texts) ? this.texts.allSelected : '';
         }
@@ -266,3 +305,3 @@ else if (this.settings.dynamicTitleMaxItems && this.settings.dynamicTitleMaxItems >= this.numSelected) {
     MultiselectDropdown.prototype.searchFilterApplied = function () {
-        return this.settings.enableSearch && this.searchFilterText && this.searchFilterText.length > 0;
+        return this.settings.enableSearch && this.filterControl.value && this.filterControl.value.length > 0;
     };
@@ -273,3 +312,3 @@ MultiselectDropdown.prototype.checkAll = function () {
             var checkedOptions = (!this.searchFilterApplied() ? this.options :
-                (new MultiSelectSearchFilter()).transform(this.options, this.searchFilterText))
+                (new MultiSelectSearchFilter()).transform(this.options, this.filterControl.value))
                 .filter(function (option) {
@@ -291,3 +330,3 @@ if (_this.model.indexOf(option.id) === -1) {
             var unCheckedOptions_1 = (!this.searchFilterApplied() ? this.model
-                : (new MultiSelectSearchFilter()).transform(this.options, this.searchFilterText).map(function (option) { return option.id; }));
+                : (new MultiSelectSearchFilter()).transform(this.options, this.filterControl.value).map(function (option) { return option.id; }));
             this.model = this.model.filter(function (id) {
@@ -321,3 +360,3 @@ if (unCheckedOptions_1.indexOf(id) < 0) {
                 selector: 'ss-multiselect-dropdown',
-                template: '<div class="dropdown" [ngClass]="settings.containerClasses" [class.open]="isVisible"><button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()" [disabled]="disabled">{{ title }}<span class="caret"></span></button><ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight" [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto"><li class="dropdown-item search" *ngIf="settings.enableSearch"><div class="input-group input-group-sm"><span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [(ngModel)]="searchFilterText" [ngModelOptions]="{standalone: true}" autofocus> <span class="input-group-btn" *ngIf="searchFilterText.length > 0"><button class="btn btn-default btn-secondary" type="button" (click)="clearSearch($event)"><i class="fa fa-times"></i></button></span></div></li><li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li><li class="dropdown-item check-control check-control-check" *ngIf="settings.showCheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-ok\': settings.checkedStyle !== \'fontawesome\',\'fa fa-check\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.checkAll }}</a></li><li class="dropdown-item check-control check-control-uncheck" *ngIf="settings.showUncheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-remove\': settings.checkedStyle !== \'fontawesome\',\'fa fa-times\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.uncheckAll }}</a></li><li *ngIf="(settings.showCheckAll || settings.showUncheckAll) && !disabledSelection" class="dropdown-divider divider"></li><li class="dropdown-item" [ngStyle]="getItemStyle(option)" *ngFor="let option of options | searchFilter:searchFilterText" (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel"><ng-template [ngIf]="option.isLabel">{{ option.name }}</ng-template><a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-left]="parents.length>0&&parents.indexOf(option.id)<0&&\'30px\'" [ngStyle]="getItemStyleSelectionDisabled()"><input *ngIf="settings.checkedStyle === \'checkboxes\'" type="checkbox" [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)" [disabled]="isCheckboxDisabled()" [ngStyle]="getItemStyleSelectionDisabled()"> <span *ngIf="settings.checkedStyle === \'glyphicon\'" style="width: 16px" class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span> <span *ngIf="settings.checkedStyle === \'fontawesome\'" style="width: 16px;display: inline-block"><i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i> </span><span [ngClass]="settings.itemClasses" [style.font-weight]="parents.indexOf(option.id)>=0?\'bold\':\'normal\'">{{ option.name }}</span></a></li></ul></div>',
+                template: '<div class="dropdown" [ngClass]="settings.containerClasses" [class.open]="isVisible"><button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()" [disabled]="disabled">{{ title }}<span class="caret"></span></button><ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight" [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto"><li class="dropdown-item search" *ngIf="settings.enableSearch"><div class="input-group input-group-sm"><span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [formControl]="filterControl" autofocus> <span class="input-group-btn" *ngIf="filterControl.value.length > 0"><button class="btn btn-default btn-secondary" type="button" (click)="clearSearch($event)"><i class="fa fa-times"></i></button></span></div></li><li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li><li class="dropdown-item check-control check-control-check" *ngIf="settings.showCheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-ok\': settings.checkedStyle !== \'fontawesome\',\'fa fa-check\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.checkAll }}</a></li><li class="dropdown-item check-control check-control-uncheck" *ngIf="settings.showUncheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-remove\': settings.checkedStyle !== \'fontawesome\',\'fa fa-times\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.uncheckAll }}</a></li><li *ngIf="settings.showCheckAll || settings.showUncheckAll" class="dropdown-divider divider"></li><ng-template [ngIf]="renderItems" [ngIfElse]="noRenderBlock"><ng-template [ngIf]="options | searchFilter:filterControl.value" let-filteredOptions><li *ngIf="!filteredOptions.length" class="dropdown-item empty">{{ texts.saerchEmptyResult }}</li><li class="dropdown-item" [ngStyle]="getItemStyle(option)" *ngFor="let option of filteredOptions" (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel"><ng-template [ngIf]="option.isLabel">{{ option.name }}</ng-template><a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-left]="this.parents.length>0&&this.parents.indexOf(option.id)<0&&\'30px\'" [ngStyle]="getItemStyleSelectionDisabled()"><input *ngIf="settings.checkedStyle === \'checkboxes\'" type="checkbox" [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)" [disabled]="isCheckboxDisabled()" [ngStyle]="getItemStyleSelectionDisabled()"> <span *ngIf="settings.checkedStyle === \'glyphicon\'" style="width: 16px" class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span> <span *ngIf="settings.checkedStyle === \'fontawesome\'" style="width: 16px;display: inline-block"><i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i> </span><span [ngClass]="settings.itemClasses" [style.font-weight]="this.parents.indexOf(option.id)>=0?\'bold\':\'normal\'">{{ option.name }}</span></a></li></ng-template></ng-template><ng-template #noRenderBlock><li class="dropdown-item empty">{{ texts.searchNoRenderText }}</li></ng-template></ul></div>',
                 styles: ['a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}'],
@@ -330,2 +369,3 @@ providers: [MULTISELECT_VALUE_ACCESSOR]
     { type: _angular_core.ElementRef, },
+    { type: _angular_forms.FormBuilder, },
     { type: _angular_core.IterableDiffers, },
@@ -354,3 +394,3 @@ ]; };
     { type: _angular_core.NgModule, args: [{
-                imports: [_angular_common.CommonModule, _angular_forms.FormsModule],
+                imports: [_angular_common.CommonModule, _angular_forms.ReactiveFormsModule],
                 exports: [MultiselectDropdown, MultiSelectSearchFilter],
@@ -357,0 +397,0 @@ declarations: [MultiselectDropdown, MultiSelectSearchFilter],

bundles/dropdown.umd.min.js

@@ -1,1 +0,1 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/common"],factory):factory(global.dropdown=global.dropdown||{},global.ng.core,global.ng.forms,global.ng.common)}(this,function(exports,_angular_core,_angular_forms,_angular_common){"use strict";var MultiSelectSearchFilter=function(){function MultiSelectSearchFilter(){}return MultiSelectSearchFilter.prototype.transform=function(options,args){var matchPredicate=function(option){return option.name.toLowerCase().indexOf((args||"").toLowerCase())>-1},getChildren=function(option){return options.filter(function(child){return child.parentId===option.id})},getParent=function(option){return options.find(function(parent){return option.parentId===parent.id})};return options.filter(function(option){return matchPredicate(option)||"undefined"==typeof option.parentId&&getChildren(option).some(matchPredicate)||"undefined"!=typeof option.parentId&&matchPredicate(getParent(option))})},MultiSelectSearchFilter}();MultiSelectSearchFilter.decorators=[{type:_angular_core.Pipe,args:[{name:"searchFilter"}]}],MultiSelectSearchFilter.ctorParameters=function(){return[]};var MULTISELECT_VALUE_ACCESSOR={provide:_angular_forms.NG_VALUE_ACCESSOR,useExisting:_angular_core.forwardRef(function(){return MultiselectDropdown}),multi:!0},MultiselectDropdown=function(){function MultiselectDropdown(element,differs){this.element=element,this.disabled=!1,this.selectionLimitReached=new _angular_core.EventEmitter,this.dropdownClosed=new _angular_core.EventEmitter,this.dropdownOpened=new _angular_core.EventEmitter,this.onAdded=new _angular_core.EventEmitter,this.onRemoved=new _angular_core.EventEmitter,this.numSelected=0,this.isVisible=!1,this.searchFilterText="",this.defaultSettings={pullRight:!1,enableSearch:!1,checkedStyle:"checkboxes",buttonClasses:"btn btn-default btn-secondary",containerClasses:"dropdown-inline",selectionLimit:0,closeOnSelect:!1,autoUnselect:!1,showCheckAll:!1,showUncheckAll:!1,fixedTitle:!1,dynamicTitleMaxItems:3,maxHeight:"300px"},this.defaultTexts={checkAll:"Check all",uncheckAll:"Uncheck all",checked:"checked",checkedPlural:"checked",searchPlaceholder:"Search...",defaultTitle:"Select",allSelected:"All selected"},this.onModelChange=function(){},this.onModelTouched=function(){},this.differ=differs.find([]).create(null)}return MultiselectDropdown.prototype.onClick=function(target){if(this.isVisible){for(var parentFound=!1;null!=target&&!parentFound;)target===this.element.nativeElement&&(parentFound=!0),target=target.parentElement;parentFound||(this.isVisible=!1,this.dropdownClosed.emit())}},MultiselectDropdown.prototype.getItemStyle=function(option){return option.isLabel?void 0:{cursor:"pointer"}},MultiselectDropdown.prototype.getItemStyleSelectionDisabled=function(){return this.disabledSelection?{cursor:"default"}:void 0},MultiselectDropdown.prototype.ngOnInit=function(){this.settings=Object.assign(this.defaultSettings,this.settings),this.texts=Object.assign(this.defaultTexts,this.texts),this.title=this.texts.defaultTitle||""},MultiselectDropdown.prototype.ngOnChanges=function(changes){changes.options&&(this.options=this.options||[],this.parents=this.options.filter(function(option){return"number"==typeof option.parentId}).map(function(option){return option.parentId}),this.updateTitle()),changes.texts&&!changes.texts.isFirstChange()&&this.updateTitle()},MultiselectDropdown.prototype.writeValue=function(value){this.model=void 0!==value&&null!==value?value:[]},MultiselectDropdown.prototype.registerOnChange=function(fn){this.onModelChange=fn},MultiselectDropdown.prototype.registerOnTouched=function(fn){this.onModelTouched=fn},MultiselectDropdown.prototype.setDisabledState=function(isDisabled){this.disabled=isDisabled},MultiselectDropdown.prototype.ngDoCheck=function(){var changes=this.differ.diff(this.model);changes&&(this.updateNumSelected(),this.updateTitle())},MultiselectDropdown.prototype.validate=function(){return this.model&&this.model.length?null:{required:{valid:!1}}},MultiselectDropdown.prototype.registerOnValidatorChange=function(){throw new Error("Method not implemented.")},MultiselectDropdown.prototype.clearSearch=function(event){event.stopPropagation(),this.searchFilterText=""},MultiselectDropdown.prototype.toggleDropdown=function(){this.isVisible=!this.isVisible,this.isVisible?this.dropdownOpened.emit():this.dropdownClosed.emit()},MultiselectDropdown.prototype.isSelected=function(option){return this.model&&this.model.indexOf(option.id)>-1},MultiselectDropdown.prototype.setSelected=function(_event,option){var _this=this;if(!this.disabledSelection){_event.stopPropagation(),this.model||(this.model=[]);var index=this.model.indexOf(option.id);if(index>-1){this.model.splice(index,1),this.onRemoved.emit(option.id);var parentIndex=option.parentId&&this.model.indexOf(option.parentId);if(parentIndex>=0)this.model.splice(parentIndex,1),this.onRemoved.emit(option.parentId);else if(this.parents.indexOf(option.id)>-1){var childIds_1=this.options.filter(function(child){return _this.model.indexOf(child.id)>-1&&child.parentId==option.id}).map(function(child){return child.id});this.model=this.model.filter(function(id){return childIds_1.indexOf(id)<0}),childIds_1.forEach(function(childId){return _this.onRemoved.emit(childId)})}}else if(0===this.settings.selectionLimit||this.settings.selectionLimit&&this.model.length<this.settings.selectionLimit){if(this.model.push(option.id),this.onAdded.emit(option.id),option.parentId){var children=this.options.filter(function(child){return child.id!==option.id&&child.parentId==option.parentId});children.every(function(child){return _this.model.indexOf(child.id)>-1})&&(this.model.push(option.parentId),this.onAdded.emit(option.parentId))}else if(this.parents.indexOf(option.id)>-1){var children=this.options.filter(function(child){return _this.model.indexOf(child.id)<0&&child.parentId==option.id});children.forEach(function(child){_this.model.push(child.id),_this.onAdded.emit(child.id)})}}else{if(!this.settings.autoUnselect)return void this.selectionLimitReached.emit(this.model.length);this.model.push(option.id),this.onAdded.emit(option.id);var removedOption=this.model.shift();this.onRemoved.emit(removedOption)}this.settings.closeOnSelect&&this.toggleDropdown(),this.model=this.model.slice(),this.onModelChange(this.model),this.onModelTouched()}},MultiselectDropdown.prototype.updateNumSelected=function(){var _this=this;this.numSelected=this.model&&this.model.filter(function(id){return _this.parents.indexOf(id)<0}).length||0},MultiselectDropdown.prototype.updateTitle=function(){var _this=this;this.title=0===this.numSelected||this.settings.fixedTitle?this.texts.defaultTitle||"":this.settings.displayAllSelectedText&&this.model.length===this.options.length?this.texts.allSelected||"":this.settings.dynamicTitleMaxItems&&this.settings.dynamicTitleMaxItems>=this.numSelected?this.options.filter(function(option){return _this.model&&_this.model.indexOf(option.id)>-1}).map(function(option){return option.name}).join(", "):this.numSelected+" "+(1===this.numSelected?this.texts.checked:this.texts.checkedPlural)},MultiselectDropdown.prototype.searchFilterApplied=function(){return this.settings.enableSearch&&this.searchFilterText&&this.searchFilterText.length>0},MultiselectDropdown.prototype.checkAll=function(){var _this=this;if(!this.disabledSelection){var checkedOptions=(this.searchFilterApplied()?(new MultiSelectSearchFilter).transform(this.options,this.searchFilterText):this.options).filter(function(option){return-1===_this.model.indexOf(option.id)?(_this.onAdded.emit(option.id),!0):!1}).map(function(option){return option.id});this.model=this.model.concat(checkedOptions),this.onModelChange(this.model),this.onModelTouched()}},MultiselectDropdown.prototype.uncheckAll=function(){var _this=this;if(!this.disabledSelection){var unCheckedOptions_1=this.searchFilterApplied()?(new MultiSelectSearchFilter).transform(this.options,this.searchFilterText).map(function(option){return option.id}):this.model;this.model=this.model.filter(function(id){return unCheckedOptions_1.indexOf(id)<0?!0:(_this.onRemoved.emit(id),!1)}),this.onModelChange(this.model),this.onModelTouched()}},MultiselectDropdown.prototype.preventCheckboxCheck=function(event,option){this.settings.selectionLimit&&!this.settings.autoUnselect&&this.model.length>=this.settings.selectionLimit&&-1===this.model.indexOf(option.id)&&event.preventDefault()},MultiselectDropdown.prototype.isCheckboxDisabled=function(){return this.disabledSelection},MultiselectDropdown}();MultiselectDropdown.decorators=[{type:_angular_core.Component,args:[{selector:"ss-multiselect-dropdown",template:'<div class="dropdown" [ngClass]="settings.containerClasses" [class.open]="isVisible"><button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()" [disabled]="disabled">{{ title }}<span class="caret"></span></button><ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight" [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto"><li class="dropdown-item search" *ngIf="settings.enableSearch"><div class="input-group input-group-sm"><span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [(ngModel)]="searchFilterText" [ngModelOptions]="{standalone: true}" autofocus> <span class="input-group-btn" *ngIf="searchFilterText.length > 0"><button class="btn btn-default btn-secondary" type="button" (click)="clearSearch($event)"><i class="fa fa-times"></i></button></span></div></li><li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li><li class="dropdown-item check-control check-control-check" *ngIf="settings.showCheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-ok\': settings.checkedStyle !== \'fontawesome\',\'fa fa-check\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.checkAll }}</a></li><li class="dropdown-item check-control check-control-uncheck" *ngIf="settings.showUncheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-remove\': settings.checkedStyle !== \'fontawesome\',\'fa fa-times\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.uncheckAll }}</a></li><li *ngIf="(settings.showCheckAll || settings.showUncheckAll) && !disabledSelection" class="dropdown-divider divider"></li><li class="dropdown-item" [ngStyle]="getItemStyle(option)" *ngFor="let option of options | searchFilter:searchFilterText" (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel"><ng-template [ngIf]="option.isLabel">{{ option.name }}</ng-template><a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-left]="parents.length>0&&parents.indexOf(option.id)<0&&\'30px\'" [ngStyle]="getItemStyleSelectionDisabled()"><input *ngIf="settings.checkedStyle === \'checkboxes\'" type="checkbox" [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)" [disabled]="isCheckboxDisabled()" [ngStyle]="getItemStyleSelectionDisabled()"> <span *ngIf="settings.checkedStyle === \'glyphicon\'" style="width: 16px" class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span> <span *ngIf="settings.checkedStyle === \'fontawesome\'" style="width: 16px;display: inline-block"><i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i> </span><span [ngClass]="settings.itemClasses" [style.font-weight]="parents.indexOf(option.id)>=0?\'bold\':\'normal\'">{{ option.name }}</span></a></li></ul></div>',styles:["a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}"],providers:[MULTISELECT_VALUE_ACCESSOR]}]}],MultiselectDropdown.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:_angular_core.IterableDiffers}]},MultiselectDropdown.propDecorators={options:[{type:_angular_core.Input}],settings:[{type:_angular_core.Input}],texts:[{type:_angular_core.Input}],disabled:[{type:_angular_core.Input}],disabledSelection:[{type:_angular_core.Input}],selectionLimitReached:[{type:_angular_core.Output}],dropdownClosed:[{type:_angular_core.Output}],dropdownOpened:[{type:_angular_core.Output}],onAdded:[{type:_angular_core.Output}],onRemoved:[{type:_angular_core.Output}],onClick:[{type:_angular_core.HostListener,args:["document: click",["$event.target"]]}]};var MultiselectDropdownModule=function(){function MultiselectDropdownModule(){}return MultiselectDropdownModule}();MultiselectDropdownModule.decorators=[{type:_angular_core.NgModule,args:[{imports:[_angular_common.CommonModule,_angular_forms.FormsModule],exports:[MultiselectDropdown,MultiSelectSearchFilter],declarations:[MultiselectDropdown,MultiSelectSearchFilter]}]}],MultiselectDropdownModule.ctorParameters=function(){return[]},exports.MultiSelectSearchFilter=MultiSelectSearchFilter,exports.MultiselectDropdownModule=MultiselectDropdownModule,exports.MultiselectDropdown=MultiselectDropdown,Object.defineProperty(exports,"__esModule",{value:!0})});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("@angular/forms"),require("rxjs/Rx"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","rxjs/Rx","@angular/common"],factory):factory(global.dropdown=global.dropdown||{},global.ng.core,global.ng.forms,global.Rx,global.ng.common)}(this,function(exports,_angular_core,_angular_forms,rxjs_Rx,_angular_common){"use strict";var MultiSelectSearchFilter=function(){function MultiSelectSearchFilter(){}return MultiSelectSearchFilter.prototype.transform=function(options,args){var matchPredicate=function(option){return option.name.toLowerCase().indexOf((args||"").toLowerCase())>-1},getChildren=function(option){return options.filter(function(child){return child.parentId===option.id})},getParent=function(option){return options.find(function(parent){return option.parentId===parent.id})};return options.filter(function(option){return matchPredicate(option)||"undefined"==typeof option.parentId&&getChildren(option).some(matchPredicate)||"undefined"!=typeof option.parentId&&matchPredicate(getParent(option))})},MultiSelectSearchFilter}();MultiSelectSearchFilter.decorators=[{type:_angular_core.Pipe,args:[{name:"searchFilter"}]}],MultiSelectSearchFilter.ctorParameters=function(){return[]};var MULTISELECT_VALUE_ACCESSOR={provide:_angular_forms.NG_VALUE_ACCESSOR,useExisting:_angular_core.forwardRef(function(){return MultiselectDropdown}),multi:!0},MultiselectDropdown=function(){function MultiselectDropdown(element,fb,differs){this.element=element,this.fb=fb,this.disabled=!1,this.selectionLimitReached=new _angular_core.EventEmitter,this.dropdownClosed=new _angular_core.EventEmitter,this.dropdownOpened=new _angular_core.EventEmitter,this.onAdded=new _angular_core.EventEmitter,this.onRemoved=new _angular_core.EventEmitter,this.destroyed$=new rxjs_Rx.Subject,this.numSelected=0,this.isVisible=!1,this.renderItems=!0,this.defaultSettings={pullRight:!1,enableSearch:!1,searchRenderLimit:0,searchRenderAfter:3,checkedStyle:"checkboxes",buttonClasses:"btn btn-default btn-secondary",containerClasses:"dropdown-inline",selectionLimit:0,closeOnSelect:!1,autoUnselect:!1,showCheckAll:!1,showUncheckAll:!1,fixedTitle:!1,dynamicTitleMaxItems:3,maxHeight:"300px"},this.defaultTexts={checkAll:"Check all",uncheckAll:"Uncheck all",checked:"checked",checkedPlural:"checked",searchPlaceholder:"Search...",saerchEmptyResult:"Nothing found...",searchNoRenderText:"Type in search box to see results...",defaultTitle:"Select",allSelected:"All selected"},this.filterControl=this.fb.control(""),this.onModelChange=function(){},this.onModelTouched=function(){},this.differ=differs.find([]).create(null)}return MultiselectDropdown.prototype.onClick=function(target){if(this.isVisible){for(var parentFound=!1;null!=target&&!parentFound;)target===this.element.nativeElement&&(parentFound=!0),target=target.parentElement;parentFound||(this.isVisible=!1,this.dropdownClosed.emit())}},Object.defineProperty(MultiselectDropdown.prototype,"searchLimit",{get:function(){return this.settings.searchRenderLimit},enumerable:!0,configurable:!0}),Object.defineProperty(MultiselectDropdown.prototype,"searchRenderAfter",{get:function(){return this.settings.searchRenderAfter},enumerable:!0,configurable:!0}),Object.defineProperty(MultiselectDropdown.prototype,"searchLimitApplied",{get:function(){return this.searchLimit>0&&this.options.length>this.searchLimit},enumerable:!0,configurable:!0}),MultiselectDropdown.prototype.getItemStyle=function(option){return option.isLabel?void 0:{cursor:"pointer"}},MultiselectDropdown.prototype.getItemStyleSelectionDisabled=function(){return this.disabledSelection?{cursor:"default"}:void 0},MultiselectDropdown.prototype.ngOnInit=function(){var _this=this;this.settings=Object.assign(this.defaultSettings,this.settings),this.texts=Object.assign(this.defaultTexts,this.texts),this.title=this.texts.defaultTitle||"",this.filterControl.valueChanges.takeUntil(this.destroyed$).subscribe(function(){return _this.updateRenderItems()})},MultiselectDropdown.prototype.ngOnChanges=function(changes){changes.options&&(this.options=this.options||[],this.parents=this.options.filter(function(option){return"number"==typeof option.parentId}).map(function(option){return option.parentId}),this.updateRenderItems(),this.texts&&this.updateTitle()),changes.texts&&!changes.texts.isFirstChange()&&this.updateTitle()},MultiselectDropdown.prototype.ngOnDestroy=function(){this.destroyed$.next()},MultiselectDropdown.prototype.updateRenderItems=function(){this.renderItems=!this.searchLimitApplied||this.filterControl.value.length>=this.searchRenderAfter},MultiselectDropdown.prototype.writeValue=function(value){this.model=void 0!==value&&null!==value?value:[]},MultiselectDropdown.prototype.registerOnChange=function(fn){this.onModelChange=fn},MultiselectDropdown.prototype.registerOnTouched=function(fn){this.onModelTouched=fn},MultiselectDropdown.prototype.setDisabledState=function(isDisabled){this.disabled=isDisabled},MultiselectDropdown.prototype.ngDoCheck=function(){var changes=this.differ.diff(this.model);changes&&(this.updateNumSelected(),this.updateTitle())},MultiselectDropdown.prototype.validate=function(){return this.model&&this.model.length?null:{required:{valid:!1}}},MultiselectDropdown.prototype.registerOnValidatorChange=function(){throw new Error("Method not implemented.")},MultiselectDropdown.prototype.clearSearch=function(event){event.stopPropagation(),this.filterControl.setValue("")},MultiselectDropdown.prototype.toggleDropdown=function(){this.isVisible=!this.isVisible,this.isVisible?this.dropdownOpened.emit():this.dropdownClosed.emit()},MultiselectDropdown.prototype.isSelected=function(option){return this.model&&this.model.indexOf(option.id)>-1},MultiselectDropdown.prototype.setSelected=function(_event,option){var _this=this;if(!this.disabledSelection){_event.stopPropagation(),this.model||(this.model=[]);var index=this.model.indexOf(option.id);if(index>-1){this.model.splice(index,1),this.onRemoved.emit(option.id);var parentIndex=option.parentId&&this.model.indexOf(option.parentId);if(parentIndex>=0)this.model.splice(parentIndex,1),this.onRemoved.emit(option.parentId);else if(this.parents.indexOf(option.id)>-1){var childIds_1=this.options.filter(function(child){return _this.model.indexOf(child.id)>-1&&child.parentId==option.id}).map(function(child){return child.id});this.model=this.model.filter(function(id){return childIds_1.indexOf(id)<0}),childIds_1.forEach(function(childId){return _this.onRemoved.emit(childId)})}}else if(0===this.settings.selectionLimit||this.settings.selectionLimit&&this.model.length<this.settings.selectionLimit){if(this.model.push(option.id),this.onAdded.emit(option.id),option.parentId){var children=this.options.filter(function(child){return child.id!==option.id&&child.parentId==option.parentId});children.every(function(child){return _this.model.indexOf(child.id)>-1})&&(this.model.push(option.parentId),this.onAdded.emit(option.parentId))}else if(this.parents.indexOf(option.id)>-1){var children=this.options.filter(function(child){return _this.model.indexOf(child.id)<0&&child.parentId==option.id});children.forEach(function(child){_this.model.push(child.id),_this.onAdded.emit(child.id)})}}else{if(!this.settings.autoUnselect)return void this.selectionLimitReached.emit(this.model.length);this.model.push(option.id),this.onAdded.emit(option.id);var removedOption=this.model.shift();this.onRemoved.emit(removedOption)}this.settings.closeOnSelect&&this.toggleDropdown(),this.model=this.model.slice(),this.onModelChange(this.model),this.onModelTouched()}},MultiselectDropdown.prototype.updateNumSelected=function(){var _this=this;this.numSelected=this.model&&this.model.filter(function(id){return _this.parents.indexOf(id)<0}).length||0},MultiselectDropdown.prototype.updateTitle=function(){var _this=this;this.title=0===this.numSelected||this.settings.fixedTitle?this.texts?this.texts.defaultTitle:"":this.settings.displayAllSelectedText&&this.model.length===this.options.length?this.texts?this.texts.allSelected:"":this.settings.dynamicTitleMaxItems&&this.settings.dynamicTitleMaxItems>=this.numSelected?this.options.filter(function(option){return _this.model&&_this.model.indexOf(option.id)>-1}).map(function(option){return option.name}).join(", "):this.numSelected+" "+(1===this.numSelected?this.texts.checked:this.texts.checkedPlural)},MultiselectDropdown.prototype.searchFilterApplied=function(){return this.settings.enableSearch&&this.filterControl.value&&this.filterControl.value.length>0},MultiselectDropdown.prototype.checkAll=function(){var _this=this;if(!this.disabledSelection){var checkedOptions=(this.searchFilterApplied()?(new MultiSelectSearchFilter).transform(this.options,this.filterControl.value):this.options).filter(function(option){return-1===_this.model.indexOf(option.id)?(_this.onAdded.emit(option.id),!0):!1}).map(function(option){return option.id});this.model=this.model.concat(checkedOptions),this.onModelChange(this.model),this.onModelTouched()}},MultiselectDropdown.prototype.uncheckAll=function(){var _this=this;if(!this.disabledSelection){var unCheckedOptions_1=this.searchFilterApplied()?(new MultiSelectSearchFilter).transform(this.options,this.filterControl.value).map(function(option){return option.id}):this.model;this.model=this.model.filter(function(id){return unCheckedOptions_1.indexOf(id)<0?!0:(_this.onRemoved.emit(id),!1)}),this.onModelChange(this.model),this.onModelTouched()}},MultiselectDropdown.prototype.preventCheckboxCheck=function(event,option){this.settings.selectionLimit&&!this.settings.autoUnselect&&this.model.length>=this.settings.selectionLimit&&-1===this.model.indexOf(option.id)&&event.preventDefault()},MultiselectDropdown.prototype.isCheckboxDisabled=function(){return this.disabledSelection},MultiselectDropdown}();MultiselectDropdown.decorators=[{type:_angular_core.Component,args:[{selector:"ss-multiselect-dropdown",template:'<div class="dropdown" [ngClass]="settings.containerClasses" [class.open]="isVisible"><button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()" [disabled]="disabled">{{ title }}<span class="caret"></span></button><ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight" [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto"><li class="dropdown-item search" *ngIf="settings.enableSearch"><div class="input-group input-group-sm"><span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [formControl]="filterControl" autofocus> <span class="input-group-btn" *ngIf="filterControl.value.length > 0"><button class="btn btn-default btn-secondary" type="button" (click)="clearSearch($event)"><i class="fa fa-times"></i></button></span></div></li><li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li><li class="dropdown-item check-control check-control-check" *ngIf="settings.showCheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-ok\': settings.checkedStyle !== \'fontawesome\',\'fa fa-check\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.checkAll }}</a></li><li class="dropdown-item check-control check-control-uncheck" *ngIf="settings.showUncheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-remove\': settings.checkedStyle !== \'fontawesome\',\'fa fa-times\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.uncheckAll }}</a></li><li *ngIf="settings.showCheckAll || settings.showUncheckAll" class="dropdown-divider divider"></li><ng-template [ngIf]="renderItems" [ngIfElse]="noRenderBlock"><ng-template [ngIf]="options | searchFilter:filterControl.value" let-filteredOptions><li *ngIf="!filteredOptions.length" class="dropdown-item empty">{{ texts.saerchEmptyResult }}</li><li class="dropdown-item" [ngStyle]="getItemStyle(option)" *ngFor="let option of filteredOptions" (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel"><ng-template [ngIf]="option.isLabel">{{ option.name }}</ng-template><a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-left]="this.parents.length>0&&this.parents.indexOf(option.id)<0&&\'30px\'" [ngStyle]="getItemStyleSelectionDisabled()"><input *ngIf="settings.checkedStyle === \'checkboxes\'" type="checkbox" [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)" [disabled]="isCheckboxDisabled()" [ngStyle]="getItemStyleSelectionDisabled()"> <span *ngIf="settings.checkedStyle === \'glyphicon\'" style="width: 16px" class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span> <span *ngIf="settings.checkedStyle === \'fontawesome\'" style="width: 16px;display: inline-block"><i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i> </span><span [ngClass]="settings.itemClasses" [style.font-weight]="this.parents.indexOf(option.id)>=0?\'bold\':\'normal\'">{{ option.name }}</span></a></li></ng-template></ng-template><ng-template #noRenderBlock><li class="dropdown-item empty">{{ texts.searchNoRenderText }}</li></ng-template></ul></div>',styles:["a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}"],providers:[MULTISELECT_VALUE_ACCESSOR]}]}],MultiselectDropdown.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:_angular_forms.FormBuilder},{type:_angular_core.IterableDiffers}]},MultiselectDropdown.propDecorators={options:[{type:_angular_core.Input}],settings:[{type:_angular_core.Input}],texts:[{type:_angular_core.Input}],disabled:[{type:_angular_core.Input}],disabledSelection:[{type:_angular_core.Input}],selectionLimitReached:[{type:_angular_core.Output}],dropdownClosed:[{type:_angular_core.Output}],dropdownOpened:[{type:_angular_core.Output}],onAdded:[{type:_angular_core.Output}],onRemoved:[{type:_angular_core.Output}],onClick:[{type:_angular_core.HostListener,args:["document: click",["$event.target"]]}]};var MultiselectDropdownModule=function(){function MultiselectDropdownModule(){}return MultiselectDropdownModule}();MultiselectDropdownModule.decorators=[{type:_angular_core.NgModule,args:[{imports:[_angular_common.CommonModule,_angular_forms.ReactiveFormsModule],exports:[MultiselectDropdown,MultiSelectSearchFilter],declarations:[MultiselectDropdown,MultiSelectSearchFilter]}]}],MultiselectDropdownModule.ctorParameters=function(){return[]},exports.MultiSelectSearchFilter=MultiSelectSearchFilter,exports.MultiselectDropdownModule=MultiselectDropdownModule,exports.MultiselectDropdown=MultiselectDropdown,Object.defineProperty(exports,"__esModule",{value:!0})});

dropdown/dropdown.component.d.ts

 import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from './types';
-import { DoCheck, ElementRef, EventEmitter, IterableDiffers, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
-export declare class MultiselectDropdown implements OnInit, OnChanges, DoCheck, ControlValueAccessor, Validator {
+import { DoCheck, ElementRef, EventEmitter, IterableDiffers, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormBuilder, Validator, FormControl } from '@angular/forms';
+import { Subject } from 'rxjs/Rx';
+export declare class MultiselectDropdown implements OnInit, OnChanges, DoCheck, OnDestroy, ControlValueAccessor, Validator {
     private element;
+    private fb;
     options: Array<IMultiSelectOption>;
@@ -17,2 +19,3 @@ settings: IMultiSelectSettings;
     onClick(target: HTMLElement): void;
+    destroyed$: Subject<void>;
     model: any[];
@@ -24,6 +27,10 @@ parents: any[];
     isVisible: boolean;
-    searchFilterText: string;
+    renderItems: boolean;
     defaultSettings: IMultiSelectSettings;
     defaultTexts: IMultiSelectTexts;
-    constructor(element: ElementRef, differs: IterableDiffers);
+    filterControl: FormControl;
+    readonly searchLimit: number;
+    readonly searchRenderAfter: number;
+    readonly searchLimitApplied: boolean;
+    constructor(element: ElementRef, fb: FormBuilder, differs: IterableDiffers);
     getItemStyle(option: IMultiSelectOption): any;
@@ -33,2 +40,4 @@ getItemStyleSelectionDisabled(): any;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    updateRenderItems(): void;
     onModelChange: Function;
@@ -35,0 +44,0 @@ onModelTouched: Function;

dropdown/dropdown.component.js

@@ -8,4 +8,5 @@ /*
 import { MultiSelectSearchFilter } from './search-filter.pipe';
-import { Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, IterableDiffers, Output } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, IterableDiffers, Output, } from '@angular/core';
+import { FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject } from 'rxjs/Rx';
 var MULTISELECT_VALUE_ACCESSOR = {
@@ -17,4 +18,5 @@ provide: NG_VALUE_ACCESSOR,
 var MultiselectDropdown = (function () {
-    function MultiselectDropdown(element, differs) {
+    function MultiselectDropdown(element, fb, differs) {
         this.element = element;
+        this.fb = fb;
         this.disabled = false;
@@ -26,8 +28,11 @@ this.selectionLimitReached = new EventEmitter();
         this.onRemoved = new EventEmitter();
+        this.destroyed$ = new Subject();
         this.numSelected = 0;
         this.isVisible = false;
-        this.searchFilterText = '';
+        this.renderItems = true;
         this.defaultSettings = {
             pullRight: false,
             enableSearch: false,
+            searchRenderLimit: 0,
+            searchRenderAfter: 3,
             checkedStyle: 'checkboxes',
@@ -51,9 +56,10 @@ buttonClasses: 'btn btn-default btn-secondary',
             searchPlaceholder: 'Search...',
+            saerchEmptyResult: 'Nothing found...',
+            searchNoRenderText: 'Type in search box to see results...',
             defaultTitle: 'Select',
             allSelected: 'All selected',
         };
-        this.onModelChange = function (_) {
-        };
-        this.onModelTouched = function () {
-        };
+        this.filterControl = this.fb.control('');
+        this.onModelChange = function (_) { };
+        this.onModelTouched = function () { };
         this.differ = differs.find([]).create(null);
@@ -76,2 +82,23 @@ }
     };
+    Object.defineProperty(MultiselectDropdown.prototype, "searchLimit", {
+        get: function () {
+            return this.settings.searchRenderLimit;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiselectDropdown.prototype, "searchRenderAfter", {
+        get: function () {
+            return this.settings.searchRenderAfter;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiselectDropdown.prototype, "searchLimitApplied", {
+        get: function () {
+            return this.searchLimit > 0 && this.options.length > this.searchLimit;
+        },
+        enumerable: true,
+        configurable: true
+    });
     MultiselectDropdown.prototype.getItemStyle = function (option) {
@@ -88,5 +115,9 @@ if (!option.isLabel) {
     MultiselectDropdown.prototype.ngOnInit = function () {
+        var _this = this;
         this.settings = Object.assign(this.defaultSettings, this.settings);
         this.texts = Object.assign(this.defaultTexts, this.texts);
         this.title = this.texts.defaultTitle || '';
+        this.filterControl.valueChanges
+            .takeUntil(this.destroyed$)
+            .subscribe(function () { return _this.updateRenderItems(); });
     };
@@ -99,3 +130,6 @@ MultiselectDropdown.prototype.ngOnChanges = function (changes) {
                 .map(function (option) { return option.parentId; });
-            this.updateTitle();
+            this.updateRenderItems();
+            if (this.texts) {
+                this.updateTitle();
+            }
         }
@@ -106,2 +140,8 @@ if (changes['texts'] && !changes['texts'].isFirstChange()) {
     };
+    MultiselectDropdown.prototype.ngOnDestroy = function () {
+        this.destroyed$.next();
+    };
+    MultiselectDropdown.prototype.updateRenderItems = function () {
+        this.renderItems = !this.searchLimitApplied || this.filterControl.value.length >= this.searchRenderAfter;
+    };
     MultiselectDropdown.prototype.writeValue = function (value) {
@@ -143,3 +183,3 @@ if (value !== undefined && value !== null) {
         event.stopPropagation();
-        this.searchFilterText = '';
+        this.filterControl.setValue('');
     };
@@ -222,6 +262,6 @@ MultiselectDropdown.prototype.toggleDropdown = function () {
         if (this.numSelected === 0 || this.settings.fixedTitle) {
-            this.title = this.texts.defaultTitle || '';
+            this.title = (this.texts) ? this.texts.defaultTitle : '';
         }
         else if (this.settings.displayAllSelectedText && this.model.length === this.options.length) {
-            this.title = this.texts.allSelected || '';
+            this.title = (this.texts) ? this.texts.allSelected : '';
         }
@@ -243,3 +283,3 @@ else if (this.settings.dynamicTitleMaxItems && this.settings.dynamicTitleMaxItems >= this.numSelected) {
     MultiselectDropdown.prototype.searchFilterApplied = function () {
-        return this.settings.enableSearch && this.searchFilterText && this.searchFilterText.length > 0;
+        return this.settings.enableSearch && this.filterControl.value && this.filterControl.value.length > 0;
     };
@@ -250,3 +290,3 @@ MultiselectDropdown.prototype.checkAll = function () {
             var checkedOptions = (!this.searchFilterApplied() ? this.options :
-                (new MultiSelectSearchFilter()).transform(this.options, this.searchFilterText))
+                (new MultiSelectSearchFilter()).transform(this.options, this.filterControl.value))
                 .filter(function (option) {
@@ -268,3 +308,3 @@ if (_this.model.indexOf(option.id) === -1) {
             var unCheckedOptions_1 = (!this.searchFilterApplied() ? this.model
-                : (new MultiSelectSearchFilter()).transform(this.options, this.searchFilterText).map(function (option) { return option.id; }));
+                : (new MultiSelectSearchFilter()).transform(this.options, this.filterControl.value).map(function (option) { return option.id; }));
             this.model = this.model.filter(function (id) {
@@ -299,3 +339,3 @@ if (unCheckedOptions_1.indexOf(id) < 0) {
                 selector: 'ss-multiselect-dropdown',
-                template: '<div class="dropdown" [ngClass]="settings.containerClasses" [class.open]="isVisible"><button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()" [disabled]="disabled">{{ title }}<span class="caret"></span></button><ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight" [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto"><li class="dropdown-item search" *ngIf="settings.enableSearch"><div class="input-group input-group-sm"><span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [(ngModel)]="searchFilterText" [ngModelOptions]="{standalone: true}" autofocus> <span class="input-group-btn" *ngIf="searchFilterText.length > 0"><button class="btn btn-default btn-secondary" type="button" (click)="clearSearch($event)"><i class="fa fa-times"></i></button></span></div></li><li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li><li class="dropdown-item check-control check-control-check" *ngIf="settings.showCheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-ok\': settings.checkedStyle !== \'fontawesome\',\'fa fa-check\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.checkAll }}</a></li><li class="dropdown-item check-control check-control-uncheck" *ngIf="settings.showUncheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-remove\': settings.checkedStyle !== \'fontawesome\',\'fa fa-times\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.uncheckAll }}</a></li><li *ngIf="(settings.showCheckAll || settings.showUncheckAll) && !disabledSelection" class="dropdown-divider divider"></li><li class="dropdown-item" [ngStyle]="getItemStyle(option)" *ngFor="let option of options | searchFilter:searchFilterText" (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel"><ng-template [ngIf]="option.isLabel">{{ option.name }}</ng-template><a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-left]="parents.length>0&&parents.indexOf(option.id)<0&&\'30px\'" [ngStyle]="getItemStyleSelectionDisabled()"><input *ngIf="settings.checkedStyle === \'checkboxes\'" type="checkbox" [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)" [disabled]="isCheckboxDisabled()" [ngStyle]="getItemStyleSelectionDisabled()"> <span *ngIf="settings.checkedStyle === \'glyphicon\'" style="width: 16px" class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span> <span *ngIf="settings.checkedStyle === \'fontawesome\'" style="width: 16px;display: inline-block"><i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i> </span><span [ngClass]="settings.itemClasses" [style.font-weight]="parents.indexOf(option.id)>=0?\'bold\':\'normal\'">{{ option.name }}</span></a></li></ul></div>',
+                template: '<div class="dropdown" [ngClass]="settings.containerClasses" [class.open]="isVisible"><button type="button" class="dropdown-toggle" [ngClass]="settings.buttonClasses" (click)="toggleDropdown()" [disabled]="disabled">{{ title }}<span class="caret"></span></button><ul *ngIf="isVisible" class="dropdown-menu" [class.pull-right]="settings.pullRight" [class.dropdown-menu-right]="settings.pullRight" [style.max-height]="settings.maxHeight" style="display: block; height: auto; overflow-y: auto"><li class="dropdown-item search" *ngIf="settings.enableSearch"><div class="input-group input-group-sm"><span class="input-group-addon" id="sizing-addon3"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="{{ texts.searchPlaceholder }}" aria-describedby="sizing-addon3" [formControl]="filterControl" autofocus> <span class="input-group-btn" *ngIf="filterControl.value.length > 0"><button class="btn btn-default btn-secondary" type="button" (click)="clearSearch($event)"><i class="fa fa-times"></i></button></span></div></li><li class="dropdown-divider divider" *ngIf="settings.enableSearch"></li><li class="dropdown-item check-control check-control-check" *ngIf="settings.showCheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="checkAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-ok\': settings.checkedStyle !== \'fontawesome\',\'fa fa-check\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.checkAll }}</a></li><li class="dropdown-item check-control check-control-uncheck" *ngIf="settings.showUncheckAll && !disabledSelection"><a href="javascript:;" role="menuitem" tabindex="-1" (click)="uncheckAll()"><span style="width: 16px" [ngClass]="{\'glyphicon glyphicon-remove\': settings.checkedStyle !== \'fontawesome\',\'fa fa-times\': settings.checkedStyle === \'fontawesome\'}"></span> {{ texts.uncheckAll }}</a></li><li *ngIf="settings.showCheckAll || settings.showUncheckAll" class="dropdown-divider divider"></li><ng-template [ngIf]="renderItems" [ngIfElse]="noRenderBlock"><ng-template [ngIf]="options | searchFilter:filterControl.value" let-filteredOptions><li *ngIf="!filteredOptions.length" class="dropdown-item empty">{{ texts.saerchEmptyResult }}</li><li class="dropdown-item" [ngStyle]="getItemStyle(option)" *ngFor="let option of filteredOptions" (click)="!option.isLabel && setSelected($event, option)" [class.dropdown-header]="option.isLabel"><ng-template [ngIf]="option.isLabel">{{ option.name }}</ng-template><a *ngIf="!option.isLabel" href="javascript:;" role="menuitem" tabindex="-1" [style.padding-left]="this.parents.length>0&&this.parents.indexOf(option.id)<0&&\'30px\'" [ngStyle]="getItemStyleSelectionDisabled()"><input *ngIf="settings.checkedStyle === \'checkboxes\'" type="checkbox" [checked]="isSelected(option)" (click)="preventCheckboxCheck($event, option)" [disabled]="isCheckboxDisabled()" [ngStyle]="getItemStyleSelectionDisabled()"> <span *ngIf="settings.checkedStyle === \'glyphicon\'" style="width: 16px" class="glyphicon" [class.glyphicon-ok]="isSelected(option)"></span> <span *ngIf="settings.checkedStyle === \'fontawesome\'" style="width: 16px;display: inline-block"><i *ngIf="isSelected(option)" class="fa fa-check" aria-hidden="true"></i> </span><span [ngClass]="settings.itemClasses" [style.font-weight]="this.parents.indexOf(option.id)>=0?\'bold\':\'normal\'">{{ option.name }}</span></a></li></ng-template></ng-template><ng-template #noRenderBlock><li class="dropdown-item empty">{{ texts.searchNoRenderText }}</li></ng-template></ul></div>',
                 styles: ['a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}'],
@@ -308,2 +348,3 @@ providers: [MULTISELECT_VALUE_ACCESSOR]
     { type: ElementRef, },
+    { type: FormBuilder, },
     { type: IterableDiffers, },
@@ -310,0 +351,0 @@ ]; };

dropdown/dropdown.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MultiselectDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ss-multiselect-dropdown","template":"<div class=\"dropdown\" [ngClass]=\"settings.containerClasses\" [class.open]=\"isVisible\"><button type=\"button\" class=\"dropdown-toggle\" [ngClass]=\"settings.buttonClasses\" (click)=\"toggleDropdown()\" [disabled]=\"disabled\">{{ title }}<span class=\"caret\"></span></button><ul *ngIf=\"isVisible\" class=\"dropdown-menu\" [class.pull-right]=\"settings.pullRight\" [class.dropdown-menu-right]=\"settings.pullRight\" [style.max-height]=\"settings.maxHeight\" style=\"display: block; height: auto; overflow-y: auto\"><li class=\"dropdown-item search\" *ngIf=\"settings.enableSearch\"><div class=\"input-group input-group-sm\"><span class=\"input-group-addon\" id=\"sizing-addon3\"><i class=\"fa fa-search\"></i></span> <input type=\"text\" class=\"form-control\" placeholder=\"{{ texts.searchPlaceholder }}\" aria-describedby=\"sizing-addon3\" [(ngModel)]=\"searchFilterText\" [ngModelOptions]=\"{standalone: true}\" autofocus> <span class=\"input-group-btn\" *ngIf=\"searchFilterText.length > 0\"><button class=\"btn btn-default btn-secondary\" type=\"button\" (click)=\"clearSearch($event)\"><i class=\"fa fa-times\"></i></button></span></div></li><li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li><li class=\"dropdown-item check-control check-control-check\" *ngIf=\"settings.showCheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"checkAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-ok': settings.checkedStyle !== 'fontawesome','fa fa-check': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.checkAll }}</a></li><li class=\"dropdown-item check-control check-control-uncheck\" *ngIf=\"settings.showUncheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"uncheckAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-remove': settings.checkedStyle !== 'fontawesome','fa fa-times': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.uncheckAll }}</a></li><li *ngIf=\"(settings.showCheckAll || settings.showUncheckAll) && !disabledSelection\" class=\"dropdown-divider divider\"></li><li class=\"dropdown-item\" [ngStyle]=\"getItemStyle(option)\" *ngFor=\"let option of options | searchFilter:searchFilterText\" (click)=\"!option.isLabel && setSelected($event, option)\" [class.dropdown-header]=\"option.isLabel\"><ng-template [ngIf]=\"option.isLabel\">{{ option.name }}</ng-template><a *ngIf=\"!option.isLabel\" href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" [style.padding-left]=\"parents.length>0&&parents.indexOf(option.id)<0&&'30px'\" [ngStyle]=\"getItemStyleSelectionDisabled()\"><input *ngIf=\"settings.checkedStyle === 'checkboxes'\" type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"preventCheckboxCheck($event, option)\" [disabled]=\"isCheckboxDisabled()\" [ngStyle]=\"getItemStyleSelectionDisabled()\"> <span *ngIf=\"settings.checkedStyle === 'glyphicon'\" style=\"width: 16px\" class=\"glyphicon\" [class.glyphicon-ok]=\"isSelected(option)\"></span> <span *ngIf=\"settings.checkedStyle === 'fontawesome'\" style=\"width: 16px;display: inline-block\"><i *ngIf=\"isSelected(option)\" class=\"fa fa-check\" aria-hidden=\"true\"></i> </span><span [ngClass]=\"settings.itemClasses\" [style.font-weight]=\"parents.indexOf(option.id)>=0?'bold':'normal'\">{{ option.name }}</span></a></li></ul></div>","styles":["a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiselectDropdown"},"multi":true}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabledSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectionLimitReached":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAdded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document: click",["$event.target"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers"}]}],"getItemStyle":[{"__symbolic":"method"}],"getItemStyleSelectionDisabled":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"registerOnValidatorChange":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"setSelected":[{"__symbolic":"method"}],"updateNumSelected":[{"__symbolic":"method"}],"updateTitle":[{"__symbolic":"method"}],"searchFilterApplied":[{"__symbolic":"method"}],"checkAll":[{"__symbolic":"method"}],"uncheckAll":[{"__symbolic":"method"}],"preventCheckboxCheck":[{"__symbolic":"method"}],"isCheckboxDisabled":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MultiselectDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ss-multiselect-dropdown","template":"<div class=\"dropdown\" [ngClass]=\"settings.containerClasses\" [class.open]=\"isVisible\"><button type=\"button\" class=\"dropdown-toggle\" [ngClass]=\"settings.buttonClasses\" (click)=\"toggleDropdown()\" [disabled]=\"disabled\">{{ title }}<span class=\"caret\"></span></button><ul *ngIf=\"isVisible\" class=\"dropdown-menu\" [class.pull-right]=\"settings.pullRight\" [class.dropdown-menu-right]=\"settings.pullRight\" [style.max-height]=\"settings.maxHeight\" style=\"display: block; height: auto; overflow-y: auto\"><li class=\"dropdown-item search\" *ngIf=\"settings.enableSearch\"><div class=\"input-group input-group-sm\"><span class=\"input-group-addon\" id=\"sizing-addon3\"><i class=\"fa fa-search\"></i></span> <input type=\"text\" class=\"form-control\" placeholder=\"{{ texts.searchPlaceholder }}\" aria-describedby=\"sizing-addon3\" [(ngModel)]=\"searchFilterText\" [ngModelOptions]=\"{standalone: true}\" autofocus> <span class=\"input-group-btn\" *ngIf=\"searchFilterText.length > 0\"><button class=\"btn btn-default btn-secondary\" type=\"button\" (click)=\"clearSearch($event)\"><i class=\"fa fa-times\"></i></button></span></div></li><li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li><li class=\"dropdown-item check-control check-control-check\" *ngIf=\"settings.showCheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"checkAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-ok': settings.checkedStyle !== 'fontawesome','fa fa-check': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.checkAll }}</a></li><li class=\"dropdown-item check-control check-control-uncheck\" *ngIf=\"settings.showUncheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"uncheckAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-remove': settings.checkedStyle !== 'fontawesome','fa fa-times': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.uncheckAll }}</a></li><li *ngIf=\"(settings.showCheckAll || settings.showUncheckAll) && !disabledSelection\" class=\"dropdown-divider divider\"></li><li class=\"dropdown-item\" [ngStyle]=\"getItemStyle(option)\" *ngFor=\"let option of options | searchFilter:searchFilterText\" (click)=\"!option.isLabel && setSelected($event, option)\" [class.dropdown-header]=\"option.isLabel\"><ng-template [ngIf]=\"option.isLabel\">{{ option.name }}</ng-template><a *ngIf=\"!option.isLabel\" href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" [style.padding-left]=\"parents.length>0&&parents.indexOf(option.id)<0&&'30px'\" [ngStyle]=\"getItemStyleSelectionDisabled()\"><input *ngIf=\"settings.checkedStyle === 'checkboxes'\" type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"preventCheckboxCheck($event, option)\" [disabled]=\"isCheckboxDisabled()\" [ngStyle]=\"getItemStyleSelectionDisabled()\"> <span *ngIf=\"settings.checkedStyle === 'glyphicon'\" style=\"width: 16px\" class=\"glyphicon\" [class.glyphicon-ok]=\"isSelected(option)\"></span> <span *ngIf=\"settings.checkedStyle === 'fontawesome'\" style=\"width: 16px;display: inline-block\"><i *ngIf=\"isSelected(option)\" class=\"fa fa-check\" aria-hidden=\"true\"></i> </span><span [ngClass]=\"settings.itemClasses\" [style.font-weight]=\"parents.indexOf(option.id)>=0?'bold':'normal'\">{{ option.name }}</span></a></li></ul></div>","styles":["a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiselectDropdown"},"multi":true}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabledSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectionLimitReached":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAdded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document: click",["$event.target"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers"}]}],"getItemStyle":[{"__symbolic":"method"}],"getItemStyleSelectionDisabled":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"registerOnValidatorChange":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"setSelected":[{"__symbolic":"method"}],"updateNumSelected":[{"__symbolic":"method"}],"updateTitle":[{"__symbolic":"method"}],"searchFilterApplied":[{"__symbolic":"method"}],"checkAll":[{"__symbolic":"method"}],"uncheckAll":[{"__symbolic":"method"}],"preventCheckboxCheck":[{"__symbolic":"method"}],"isCheckboxDisabled":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MultiselectDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ss-multiselect-dropdown","template":"<div class=\"dropdown\" [ngClass]=\"settings.containerClasses\" [class.open]=\"isVisible\"><button type=\"button\" class=\"dropdown-toggle\" [ngClass]=\"settings.buttonClasses\" (click)=\"toggleDropdown()\" [disabled]=\"disabled\">{{ title }}<span class=\"caret\"></span></button><ul *ngIf=\"isVisible\" class=\"dropdown-menu\" [class.pull-right]=\"settings.pullRight\" [class.dropdown-menu-right]=\"settings.pullRight\" [style.max-height]=\"settings.maxHeight\" style=\"display: block; height: auto; overflow-y: auto\"><li class=\"dropdown-item search\" *ngIf=\"settings.enableSearch\"><div class=\"input-group input-group-sm\"><span class=\"input-group-addon\" id=\"sizing-addon3\"><i class=\"fa fa-search\"></i></span> <input type=\"text\" class=\"form-control\" placeholder=\"{{ texts.searchPlaceholder }}\" aria-describedby=\"sizing-addon3\" [formControl]=\"filterControl\" autofocus> <span class=\"input-group-btn\" *ngIf=\"filterControl.value.length > 0\"><button class=\"btn btn-default btn-secondary\" type=\"button\" (click)=\"clearSearch($event)\"><i class=\"fa fa-times\"></i></button></span></div></li><li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li><li class=\"dropdown-item check-control check-control-check\" *ngIf=\"settings.showCheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"checkAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-ok': settings.checkedStyle !== 'fontawesome','fa fa-check': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.checkAll }}</a></li><li class=\"dropdown-item check-control check-control-uncheck\" *ngIf=\"settings.showUncheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"uncheckAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-remove': settings.checkedStyle !== 'fontawesome','fa fa-times': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.uncheckAll }}</a></li><li *ngIf=\"settings.showCheckAll || settings.showUncheckAll\" class=\"dropdown-divider divider\"></li><ng-template [ngIf]=\"renderItems\" [ngIfElse]=\"noRenderBlock\"><ng-template [ngIf]=\"options | searchFilter:filterControl.value\" let-filteredOptions><li *ngIf=\"!filteredOptions.length\" class=\"dropdown-item empty\">{{ texts.saerchEmptyResult }}</li><li class=\"dropdown-item\" [ngStyle]=\"getItemStyle(option)\" *ngFor=\"let option of filteredOptions\" (click)=\"!option.isLabel && setSelected($event, option)\" [class.dropdown-header]=\"option.isLabel\"><ng-template [ngIf]=\"option.isLabel\">{{ option.name }}</ng-template><a *ngIf=\"!option.isLabel\" href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" [style.padding-left]=\"this.parents.length>0&&this.parents.indexOf(option.id)<0&&'30px'\" [ngStyle]=\"getItemStyleSelectionDisabled()\"><input *ngIf=\"settings.checkedStyle === 'checkboxes'\" type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"preventCheckboxCheck($event, option)\" [disabled]=\"isCheckboxDisabled()\" [ngStyle]=\"getItemStyleSelectionDisabled()\"> <span *ngIf=\"settings.checkedStyle === 'glyphicon'\" style=\"width: 16px\" class=\"glyphicon\" [class.glyphicon-ok]=\"isSelected(option)\"></span> <span *ngIf=\"settings.checkedStyle === 'fontawesome'\" style=\"width: 16px;display: inline-block\"><i *ngIf=\"isSelected(option)\" class=\"fa fa-check\" aria-hidden=\"true\"></i> </span><span [ngClass]=\"settings.itemClasses\" [style.font-weight]=\"this.parents.indexOf(option.id)>=0?'bold':'normal'\">{{ option.name }}</span></a></li></ng-template></ng-template><ng-template #noRenderBlock><li class=\"dropdown-item empty\">{{ texts.searchNoRenderText }}</li></ng-template></ul></div>","styles":["a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiselectDropdown"},"multi":true}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabledSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectionLimitReached":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAdded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document: click",["$event.target"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers"}]}],"getItemStyle":[{"__symbolic":"method"}],"getItemStyleSelectionDisabled":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateRenderItems":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"registerOnValidatorChange":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"setSelected":[{"__symbolic":"method"}],"updateNumSelected":[{"__symbolic":"method"}],"updateTitle":[{"__symbolic":"method"}],"searchFilterApplied":[{"__symbolic":"method"}],"checkAll":[{"__symbolic":"method"}],"uncheckAll":[{"__symbolic":"method"}],"preventCheckboxCheck":[{"__symbolic":"method"}],"isCheckboxDisabled":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MultiselectDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ss-multiselect-dropdown","template":"<div class=\"dropdown\" [ngClass]=\"settings.containerClasses\" [class.open]=\"isVisible\"><button type=\"button\" class=\"dropdown-toggle\" [ngClass]=\"settings.buttonClasses\" (click)=\"toggleDropdown()\" [disabled]=\"disabled\">{{ title }}<span class=\"caret\"></span></button><ul *ngIf=\"isVisible\" class=\"dropdown-menu\" [class.pull-right]=\"settings.pullRight\" [class.dropdown-menu-right]=\"settings.pullRight\" [style.max-height]=\"settings.maxHeight\" style=\"display: block; height: auto; overflow-y: auto\"><li class=\"dropdown-item search\" *ngIf=\"settings.enableSearch\"><div class=\"input-group input-group-sm\"><span class=\"input-group-addon\" id=\"sizing-addon3\"><i class=\"fa fa-search\"></i></span> <input type=\"text\" class=\"form-control\" placeholder=\"{{ texts.searchPlaceholder }}\" aria-describedby=\"sizing-addon3\" [formControl]=\"filterControl\" autofocus> <span class=\"input-group-btn\" *ngIf=\"filterControl.value.length > 0\"><button class=\"btn btn-default btn-secondary\" type=\"button\" (click)=\"clearSearch($event)\"><i class=\"fa fa-times\"></i></button></span></div></li><li class=\"dropdown-divider divider\" *ngIf=\"settings.enableSearch\"></li><li class=\"dropdown-item check-control check-control-check\" *ngIf=\"settings.showCheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"checkAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-ok': settings.checkedStyle !== 'fontawesome','fa fa-check': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.checkAll }}</a></li><li class=\"dropdown-item check-control check-control-uncheck\" *ngIf=\"settings.showUncheckAll && !disabledSelection\"><a href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" (click)=\"uncheckAll()\"><span style=\"width: 16px\" [ngClass]=\"{'glyphicon glyphicon-remove': settings.checkedStyle !== 'fontawesome','fa fa-times': settings.checkedStyle === 'fontawesome'}\"></span> {{ texts.uncheckAll }}</a></li><li *ngIf=\"settings.showCheckAll || settings.showUncheckAll\" class=\"dropdown-divider divider\"></li><ng-template [ngIf]=\"renderItems\" [ngIfElse]=\"noRenderBlock\"><ng-template [ngIf]=\"options | searchFilter:filterControl.value\" let-filteredOptions><li *ngIf=\"!filteredOptions.length\" class=\"dropdown-item empty\">{{ texts.saerchEmptyResult }}</li><li class=\"dropdown-item\" [ngStyle]=\"getItemStyle(option)\" *ngFor=\"let option of filteredOptions\" (click)=\"!option.isLabel && setSelected($event, option)\" [class.dropdown-header]=\"option.isLabel\"><ng-template [ngIf]=\"option.isLabel\">{{ option.name }}</ng-template><a *ngIf=\"!option.isLabel\" href=\"javascript:;\" role=\"menuitem\" tabindex=\"-1\" [style.padding-left]=\"this.parents.length>0&&this.parents.indexOf(option.id)<0&&'30px'\" [ngStyle]=\"getItemStyleSelectionDisabled()\"><input *ngIf=\"settings.checkedStyle === 'checkboxes'\" type=\"checkbox\" [checked]=\"isSelected(option)\" (click)=\"preventCheckboxCheck($event, option)\" [disabled]=\"isCheckboxDisabled()\" [ngStyle]=\"getItemStyleSelectionDisabled()\"> <span *ngIf=\"settings.checkedStyle === 'glyphicon'\" style=\"width: 16px\" class=\"glyphicon\" [class.glyphicon-ok]=\"isSelected(option)\"></span> <span *ngIf=\"settings.checkedStyle === 'fontawesome'\" style=\"width: 16px;display: inline-block\"><i *ngIf=\"isSelected(option)\" class=\"fa fa-check\" aria-hidden=\"true\"></i> </span><span [ngClass]=\"settings.itemClasses\" [style.font-weight]=\"this.parents.indexOf(option.id)>=0?'bold':'normal'\">{{ option.name }}</span></a></li></ng-template></ng-template><ng-template #noRenderBlock><li class=\"dropdown-item empty\">{{ texts.searchNoRenderText }}</li></ng-template></ul></div>","styles":["a {  outline: none !important;}.dropdown-inline {  display: inline-block;}.dropdown-toggle .caret {  margin-left: 4px;  white-space: nowrap;  display: inline-block;}"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiselectDropdown"},"multi":true}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabledSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectionLimitReached":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onAdded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document: click",["$event.target"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers"}]}],"getItemStyle":[{"__symbolic":"method"}],"getItemStyleSelectionDisabled":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateRenderItems":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"registerOnValidatorChange":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"setSelected":[{"__symbolic":"method"}],"updateNumSelected":[{"__symbolic":"method"}],"updateTitle":[{"__symbolic":"method"}],"searchFilterApplied":[{"__symbolic":"method"}],"checkAll":[{"__symbolic":"method"}],"uncheckAll":[{"__symbolic":"method"}],"preventCheckboxCheck":[{"__symbolic":"method"}],"isCheckboxDisabled":[{"__symbolic":"method"}]}}}}]

dropdown/dropdown.module.js

@@ -5,3 +5,3 @@ import { MultiselectDropdown } from './dropdown.component';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 var MultiselectDropdownModule = (function () {
@@ -15,3 +15,3 @@ function MultiselectDropdownModule() {
     { type: NgModule, args: [{
-                imports: [CommonModule, FormsModule],
+                imports: [CommonModule, ReactiveFormsModule],
                 exports: [MultiselectDropdown, MultiSelectSearchFilter],
@@ -18,0 +18,0 @@ declarations: [MultiselectDropdown, MultiSelectSearchFilter],

dropdown/dropdown.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MultiselectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}],"declarations":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"MultiselectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}],"declarations":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MultiselectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"exports":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}],"declarations":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"MultiselectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"exports":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}],"declarations":[{"__symbolic":"reference","module":"./dropdown.component","name":"MultiselectDropdown"},{"__symbolic":"reference","module":"./search-filter.pipe","name":"MultiSelectSearchFilter"}]}]}]}}}]

dropdown/types.d.ts

@@ -11,2 +11,12 @@ export interface IMultiSelectOption {
     enableSearch?: boolean;
+    /**
+     * 0 - By default
+     * If `enableSearch=true` and total amount of items more then `searchRenderLimit` (0 - No limit)
+     * then render items only when user typed more then or equal `searchRenderAfter` charachters
+     */
+    searchRenderLimit?: number;
+    /**
+     * 3 - By default
+     */
+    searchRenderAfter?: number;
     checkedStyle?: 'checkboxes' | 'glyphicon' | 'fontawesome';
@@ -32,4 +42,6 @@ buttonClasses?: string;
     searchPlaceholder?: string;
+    saerchEmptyResult?: string;
+    searchNoRenderText?: string;
     defaultTitle?: string;
     allSelected?: string;
 }

package.json

 {
   "name": "angular-2-dropdown-multiselect",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Customizable dropdown multiselect in Angular 2 with bootstrap css.",
@@ -5,0 +5,0 @@ "main": "bundles/dropdown.umd.js",

README.md

@@ -125,2 +125,5 @@ # AngularX Dropdown Multiselect for Bootstrap CSS
 | maxHeight            | The maximum height for the dropdown (including unit)               | '300px'           |
+| displayAllSelectedText | Display the `allSelected` text when all options are selected    | false             |
+| searchRenderLimit    | If `enableSearch=true` and total amount of items more then `searchRenderLimit` (0 - No limit) then render items only when user typed more then or equal `searchRenderAfter` charachters    | 0             |
+| searchRenderAfter    | Amount of characters to trigger rendering of items                 | 3                 |
 | displayAllSelectedText | Display the `allSelected` text when all options are selected     | false             |
@@ -138,2 +141,4 @@
 | allSelected           | Text displayed when all items are selected (must be enabled in options) | 'All selected' |
+| saerchEmptyResult     | Text displayed when no items are rendered  | 'Nothing found...' |
+| searchNoRenderText    | Text displayed when items rendering disabled by the `searchRenderLimit` option | 'Type in search box to see results...' |
 
@@ -140,0 +145,0 @@ ## Other examples

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

172025

increased by5.67%

Lines of code

928

increased by12.62%

Number of lines in readme file

194

increased by2.65%

No dependency changes