Socket
Socket
Sign inDemoInstall

ngx-select-dropdown

Package Overview
Dependencies
8
Maintainers
1
Versions
51
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.7.0 to 0.7.1

dist/pipes/filter-by.pipe.d.ts
dist/pipes/filter-by.pipe.js
dist/pipes/filter-by.pipe.js.map
dist/pipes/filter-by.pipe.metadata.json

1

dist/components/ngx-select-dropdown-component/ngx-select-dropdown.component.d.ts

@@ -119,3 +119,2 @@ import { OnInit, EventEmitter, OnChanges, SimpleChanges, ElementRef, QueryList } from "@angular/core";

*/
search(): void;
/**

@@ -122,0 +121,0 @@ * initialize the config and other properties

66

dist/components/ngx-select-dropdown-component/ngx-select-dropdown.component.js

@@ -69,3 +69,3 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {

_this.searchText = searchText;
_this.search();
// this.search();
});

@@ -152,2 +152,4 @@ }

}
this.selectedItems = this.selectedItems.slice();
this.availableItems = this.availableItems.slice();
this.valueChanged();

@@ -171,2 +173,4 @@ this.resetArrowKeyActiveElement();

this.selectedItems.push(item);
this.selectedItems = this.selectedItems.slice();
this.availableItems = this.availableItems.slice();
this.selectedItems.sort(this.config.customComparator);

@@ -197,32 +201,30 @@ this.availableItems.sort(this.config.customComparator);

*/
SelectDropDownComponent.prototype.search = function () {
var _this = this;
var searchResults = [];
if (this.searchText === "") {
this.availableItems = this.options;
// exclude selectedItems from availableItems
this.availableItems = this.availableItems.filter(function (item) { return !_this.selectedItems.includes(item); });
return;
}
for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
var item = _a[_i];
if (typeof item !== "object") {
if (item.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
searchResults.push(item);
}
continue;
}
for (var key in item) {
if (item[key] && item[key].toString().toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
if (!searchResults.includes(item)) {
// item is duplicated upon finding the same search text in the same object fields
searchResults.push(item);
}
}
}
}
this.availableItems = searchResults;
// exclude selectedItems from availableItems
this.availableItems = this.availableItems.filter(function (item) { return !_this.selectedItems.includes(item); });
};
// public search() {
// const searchResults: any = [];
// if (this.searchText === "") {
// this.availableItems = this.options;
// // exclude selectedItems from availableItems
// this.availableItems = this.availableItems.filter((item: any) => !this.selectedItems.includes(item));
// return;
// }
// for (const item of this.options) {
// if (typeof item !== "object") {
// if (item.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
// searchResults.push(item);
// }
// continue;
// }
// for (const key in item) {
// if (item[key] && item[key].toString().toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
// if (!searchResults.includes(item)) {
// // item is duplicated upon finding the same search text in the same object fields
// searchResults.push(item);
// }
// }
// }
// }
// this.availableItems = searchResults;
// // exclude selectedItems from availableItems
// this.availableItems = this.availableItems.filter((item: any) => !this.selectedItems.includes(item));
// }
/**

@@ -317,3 +319,3 @@ * initialize the config and other properties

selector: "ngx-select-dropdown",
template: "\n <div class=\"ngx-dorpdown-container\">\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span>\n <span class=\"nsdicon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n <label [ngClass]=\"{'active': searchText}\">\n <span class=\"nsdicon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n </li>\n </ul>\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n <ul class=\"available-items\">\n <li #availableOption *ngFor=\"let item of availableItems| limitTo : config.limitTo;let i = index\" tabindex=\"-1\" [ngClass]=\"{'active': focusedItemIndex == i}\"\n (click)=\"selectItem(item,i)\">\n {{item[config.displayKey] || item}}</li>\n </ul>\n </div>\n </div>\n ",
template: "\n <div class=\"ngx-dorpdown-container\">\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span>\n <span class=\"nsdicon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n <label [ngClass]=\"{'active': searchText}\">\n <span class=\"nsdicon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n </li>\n </ul>\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n <ul class=\"available-items\">\n <li #availableOption *ngFor=\"let item of availableItems| filterBy: searchText | limitTo : config.limitTo;let i = index\" tabindex=\"-1\"\n [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\n {{item[config.displayKey] || item}}</li>\n </ul>\n </div>\n </div>\n ",
styles: ["\n .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);overflow-y:auto}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n "],

@@ -320,0 +322,0 @@ },] },

2

dist/components/ngx-select-dropdown-component/ngx-select-dropdown.component.metadata.json

@@ -1,1 +0,1 @@

[{"__symbolic":"module","version":3,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n <div class=\"ngx-dorpdown-container\">\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span>\n <span class=\"nsdicon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n <label [ngClass]=\"{'active': searchText}\">\n <span class=\"nsdicon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n </li>\n </ul>\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n <ul class=\"available-items\">\n <li #availableOption *ngFor=\"let item of availableItems| limitTo : config.limitTo;let i = index\" tabindex=\"-1\" [ngClass]=\"{'active': focusedItemIndex == i}\"\n (click)=\"selectItem(item,i)\">\n {{item[config.displayKey] || item}}</li>\n </ul>\n </div>\n </div>\n ","styles":["\n .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);overflow-y:auto}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"availableOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["availableOption"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}],"onArrowKeyUp":[{"__symbolic":"method"}],"onArrowKeyDown":[{"__symbolic":"method"}],"onArrowKey":[{"__symbolic":"method"}],"resetArrowKeyActiveElement":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n <div class=\"ngx-dorpdown-container\">\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span>\n <span class=\"nsdicon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n <label [ngClass]=\"{'active': searchText}\">\n <span class=\"nsdicon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n </li>\n </ul>\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n <ul class=\"available-items\">\n <li #availableOption *ngFor=\"let item of availableItems| limitTo : config.limitTo;let i = index\" tabindex=\"-1\" [ngClass]=\"{'active': focusedItemIndex == i}\"\n (click)=\"selectItem(item,i)\">\n {{item[config.displayKey] || item}}</li>\n </ul>\n </div>\n </div>\n ","styles":["\n .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);overflow-y:auto}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"availableOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["availableOption"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}],"onArrowKeyUp":[{"__symbolic":"method"}],"onArrowKeyDown":[{"__symbolic":"method"}],"onArrowKey":[{"__symbolic":"method"}],"resetArrowKeyActiveElement":[{"__symbolic":"method"}]}}}}]
[{"__symbolic":"module","version":3,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n <div class=\"ngx-dorpdown-container\">\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span>\n <span class=\"nsdicon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n <label [ngClass]=\"{'active': searchText}\">\n <span class=\"nsdicon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n </li>\n </ul>\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n <ul class=\"available-items\">\n <li #availableOption *ngFor=\"let item of availableItems| filterBy: searchText | limitTo : config.limitTo;let i = index\" tabindex=\"-1\"\n [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\n {{item[config.displayKey] || item}}</li>\n </ul>\n </div>\n </div>\n ","styles":["\n .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);overflow-y:auto}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"availableOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["availableOption"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}],"onArrowKeyUp":[{"__symbolic":"method"}],"onArrowKeyDown":[{"__symbolic":"method"}],"onArrowKey":[{"__symbolic":"method"}],"resetArrowKeyActiveElement":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n <div class=\"ngx-dorpdown-container\">\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span>\n <span class=\"nsdicon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n <label [ngClass]=\"{'active': searchText}\">\n <span class=\"nsdicon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n </li>\n </ul>\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n <ul class=\"available-items\">\n <li #availableOption *ngFor=\"let item of availableItems| filterBy: searchText | limitTo : config.limitTo;let i = index\" tabindex=\"-1\"\n [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\n {{item[config.displayKey] || item}}</li>\n </ul>\n </div>\n </div>\n ","styles":["\n .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);overflow-y:auto}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"availableOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["availableOption"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}],"onArrowKeyUp":[{"__symbolic":"method"}],"onArrowKeyDown":[{"__symbolic":"method"}],"onArrowKey":[{"__symbolic":"method"}],"resetArrowKeyActiveElement":[{"__symbolic":"method"}]}}}}]

145

dist/index.umd.js
/**
* ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module.
* @version v0.7.0
* @version v0.7.1
* @author Manish Kumar

@@ -17,3 +17,3 @@ * @link https://github.com/manishjanky/ngx-select-dropdown#readme

root["ticktock"] = factory(root["ng"]["core"], root["Rx"], root["Rx"], root["ng"]["common"], root["ng"]["forms"]);
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__) {
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_15__) {
return /******/ (function(modules) { // webpackBootstrap

@@ -174,3 +174,3 @@ /******/ // The module cache

_this.searchText = searchText;
_this.search();
// this.search();
});

@@ -257,2 +257,4 @@ }

}
this.selectedItems = this.selectedItems.slice();
this.availableItems = this.availableItems.slice();
this.valueChanged();

@@ -276,2 +278,4 @@ this.resetArrowKeyActiveElement();

this.selectedItems.push(item);
this.selectedItems = this.selectedItems.slice();
this.availableItems = this.availableItems.slice();
this.selectedItems.sort(this.config.customComparator);

@@ -302,32 +306,30 @@ this.availableItems.sort(this.config.customComparator);

*/
SelectDropDownComponent.prototype.search = function () {
var _this = this;
var searchResults = [];
if (this.searchText === "") {
this.availableItems = this.options;
// exclude selectedItems from availableItems
this.availableItems = this.availableItems.filter(function (item) { return !_this.selectedItems.includes(item); });
return;
}
for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
var item = _a[_i];
if (typeof item !== "object") {
if (item.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
searchResults.push(item);
}
continue;
}
for (var key in item) {
if (item[key] && item[key].toString().toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
if (!searchResults.includes(item)) {
// item is duplicated upon finding the same search text in the same object fields
searchResults.push(item);
}
}
}
}
this.availableItems = searchResults;
// exclude selectedItems from availableItems
this.availableItems = this.availableItems.filter(function (item) { return !_this.selectedItems.includes(item); });
};
// public search() {
// const searchResults: any = [];
// if (this.searchText === "") {
// this.availableItems = this.options;
// // exclude selectedItems from availableItems
// this.availableItems = this.availableItems.filter((item: any) => !this.selectedItems.includes(item));
// return;
// }
// for (const item of this.options) {
// if (typeof item !== "object") {
// if (item.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
// searchResults.push(item);
// }
// continue;
// }
// for (const key in item) {
// if (item[key] && item[key].toString().toLowerCase().indexOf(this.searchText.toLowerCase()) > -1) {
// if (!searchResults.includes(item)) {
// // item is duplicated upon finding the same search text in the same object fields
// searchResults.push(item);
// }
// }
// }
// }
// this.availableItems = searchResults;
// // exclude selectedItems from availableItems
// this.availableItems = this.availableItems.filter((item: any) => !this.selectedItems.includes(item));
// }
/**

@@ -533,3 +535,3 @@ * initialize the config and other properties

module.exports = "<div class=\"ngx-dorpdown-container\">\r\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\r\n <span>{{selectedDisplayText}} </span>\r\n <span class=\"nsdicon-angle-down\"></span>\r\n </button>\r\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\r\n <div class=\"search-container\" *ngIf=\"config.search\">\r\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\r\n <label [ngClass]=\"{'active': searchText}\">\r\n <span class=\"nsdicon-search\"></span> Search</label>\r\n </div>\r\n <ul class=\"selected-items\">\r\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\r\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\r\n </li>\r\n </ul>\r\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\r\n <ul class=\"available-items\">\r\n <li #availableOption *ngFor=\"let item of availableItems| limitTo : config.limitTo;let i = index\" tabindex=\"-1\" [ngClass]=\"{'active': focusedItemIndex == i}\"\r\n (click)=\"selectItem(item,i)\">\r\n {{item[config.displayKey] || item}}</li>\r\n </ul>\r\n </div>\r\n</div>"
module.exports = "<div class=\"ngx-dorpdown-container\">\r\n <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\r\n <span>{{selectedDisplayText}} </span>\r\n <span class=\"nsdicon-angle-down\"></span>\r\n </button>\r\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\" [style.maxHeight]=\"config.height\">\r\n <div class=\"search-container\" *ngIf=\"config.search\">\r\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\r\n <label [ngClass]=\"{'active': searchText}\">\r\n <span class=\"nsdicon-search\"></span> Search</label>\r\n </div>\r\n <ul class=\"selected-items\">\r\n <li tabindex=\"-1\" *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\r\n <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\r\n </li>\r\n </ul>\r\n <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\r\n <ul class=\"available-items\">\r\n <li #availableOption *ngFor=\"let item of availableItems| filterBy: searchText | limitTo : config.limitTo;let i = index\" tabindex=\"-1\"\r\n [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\r\n {{item[config.displayKey] || item}}</li>\r\n </ul>\r\n </div>\r\n</div>"

@@ -659,6 +661,7 @@ /***/ }),

Object.defineProperty(exports, "__esModule", { value: true });
var limit_to_pipe_1 = __webpack_require__(12);
var filter_by_pipe_1 = __webpack_require__(12);
var limit_to_pipe_1 = __webpack_require__(13);
var core_1 = __webpack_require__(0);
var common_1 = __webpack_require__(13);
var forms_1 = __webpack_require__(14);
var common_1 = __webpack_require__(14);
var forms_1 = __webpack_require__(15);
var ngx_select_dropdown_component_1 = __webpack_require__(1);

@@ -670,3 +673,3 @@ var SelectDropDownModule = /** @class */ (function () {

core_1.NgModule({
declarations: [ngx_select_dropdown_component_1.SelectDropDownComponent, limit_to_pipe_1.LimitToPipe],
declarations: [ngx_select_dropdown_component_1.SelectDropDownComponent, limit_to_pipe_1.LimitToPipe, filter_by_pipe_1.ArrayFilterPipe],
imports: [common_1.CommonModule, forms_1.FormsModule],

@@ -697,2 +700,60 @@ exports: [ngx_select_dropdown_component_1.SelectDropDownComponent, limit_to_pipe_1.LimitToPipe],

var core_1 = __webpack_require__(0);
/**
* filters an array based on searctext
*/
var ArrayFilterPipe = /** @class */ (function () {
function ArrayFilterPipe() {
}
ArrayFilterPipe.prototype.transform = function (array, searchText, keyName) {
if (!array || !searchText || !Array.isArray(array)) {
return array;
}
if (typeof array[0] === 'string') {
return array.filter(function (item) { return item.indexOf(searchText) > -1; });
}
// filter array, items which match and return true will be
// kept, false will be filtered out
if (!keyName) {
return array.filter(function (item) {
for (var key in item) {
if (typeof item[key] !== "object" && item[key].toString().toLowerCase().indexOf(searchText.toLowerCase()) > -1) {
return true;
}
}
return false;
});
}
else {
return array.filter(function (item) {
if (typeof item[keyName] !== "object" && item[keyName].toString().toLowerCase().indexOf(searchText.toLowerCase()) > -1) {
return true;
}
return false;
});
}
};
ArrayFilterPipe = __decorate([
core_1.Pipe({
name: "filterBy"
})
], ArrayFilterPipe);
return ArrayFilterPipe;
}());
exports.ArrayFilterPipe = ArrayFilterPipe;
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(0);
var LimitToPipe = /** @class */ (function () {

@@ -719,12 +780,12 @@ function LimitToPipe() {

/***/ }),
/* 13 */
/* 14 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_13__;
module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
/***/ }),
/* 14 */
/* 15 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
module.exports = __WEBPACK_EXTERNAL_MODULE_15__;

@@ -731,0 +792,0 @@ /***/ })

4

dist/index.umd.min.js
/**
* ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module.
* @version v0.7.0
* @version v0.7.1
* @author Manish Kumar

@@ -8,3 +8,3 @@ * @link https://github.com/manishjanky/ngx-select-dropdown#readme

*/
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/Subject","rxjs/Rx","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.Rx,e.Rx,e.ng.common,e.ng.forms)}("undefined"!=typeof self?self:this,function(e,t,n,o,i){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(t,n){t.exports=e},function(e,t,n){"use strict";var o=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++){t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},i=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s},r=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var s=n(0),a=n(5);n(6);var c=function(){function e(){var e=this;this.options=[],this.config={},this.multiple=!1,this.valueChange=new s.EventEmitter,this.change=new s.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.searchTextChanged=new a.Subject,this.clickedInside=!1,this.focusedItemIndex=null,this.multiple=!1,this.searchTextChanged.debounceTime(300).distinctUntilChanged().subscribe(function(t){e.searchText=t,e.search()})}return e.prototype.clickInsideComponent=function(){this.clickedInside=!0},e.prototype.clickOutsideComponent=function(){this.clickedInside||(this.toggleDropdown=!1,this.resetArrowKeyActiveElement()),this.clickedInside=!1},e.prototype.handleKeyboardEvent=function(e){var t=this.availableOptions.toArray();if("ArrowDown"===e.code&&t.length>0&&(this.onArrowKeyDown(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),"ArrowUp"===e.code&&t.length&&(this.onArrowKeyUp(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),"Enter"===e.code&&null!==this.focusedItemIndex)return this.selectItem(this.availableItems[this.focusedItemIndex],this.focusedItemIndex),!1},e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=this.options.sort(this.config.customComparator).slice(),this.initDropdownValuesAndOptions())},e.prototype.ngOnChanges=function(e){this.selectedItems=[],this.searchText=null,this.options=this.options||[],e.options&&(this.availableItems=this.options.sort(this.config.customComparator).slice()),this.initDropdownValuesAndOptions()},e.prototype.changed=function(e){this.searchTextChanged.next(e)},e.prototype.deselectItem=function(e,t){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort(this.config.customComparator)),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.selectItem=function(e,t){this.multiple||(this.selectedItems.length>0&&this.availableItems.push(this.selectedItems[0]),this.selectedItems=[],this.toggleDropdown=!1),this.availableItems.splice(t,1),this.selectedItems.push(e),this.selectedItems.sort(this.config.customComparator),this.availableItems.sort(this.config.customComparator),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.valueChanged=function(){this.value=this.selectedItems,this.valueChange.emit(this.value),this.change.emit({value:this.value}),this.setSelectedDisplayText()},e.prototype.toggleSelectDropdown=function(e){this.toggleDropdown=!this.toggleDropdown,this.resetArrowKeyActiveElement()},e.prototype.search=function(){var e=this,t=[];if(""===this.searchText)return this.availableItems=this.options,void(this.availableItems=this.availableItems.filter(function(t){return!e.selectedItems.includes(t)}));for(var n=0,o=this.options;n<o.length;n++){var i=o[n];if("object"==typeof i)for(var r in i)i[r]&&i[r].toString().toLowerCase().indexOf(this.searchText.toLowerCase())>-1&&(t.includes(i)||t.push(i));else i.toLowerCase().indexOf(this.searchText.toLowerCase())>-1&&t.push(i)}this.availableItems=t,this.availableItems=this.availableItems.filter(function(t){return!e.selectedItems.includes(t)})},e.prototype.initDropdownValuesAndOptions=function(){var e=this,t={displayKey:"description",height:"auto",search:!1,placeholder:"Select",limitTo:this.options.length,customComparator:void 0};"undefined"!==this.config&&0!==Object.keys(this.config).length||(this.config=o({},t));for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];this.config[r]=this.config[r]?this.config[r]:t[r]}this.selectedDisplayText=this.config.placeholder,""!==this.value&&void 0!==this.value&&(this.selectedItems=this.value,this.value.forEach(function(t){var n=e.availableItems.indexOf(t);-1!==n&&e.availableItems.splice(n,1)}),this.setSelectedDisplayText())},e.prototype.setSelectedDisplayText=function(){var e=this.selectedItems[0];"object"==typeof this.selectedItems[0]&&(e=this.selectedItems[0][this.config.displayKey]),this.multiple&&this.selectedItems.length>0?this.selectedDisplayText=1===this.selectedItems.length?e:e+" + "+(this.selectedItems.length-1)+" more":this.selectedDisplayText=0===this.selectedItems.length?this.config.placeholder:e},e.prototype.onArrowKeyUp=function(){if(0===this.focusedItemIndex)return void(this.focusedItemIndex=this.availableItems.length-1);this.onArrowKey()&&this.focusedItemIndex--},e.prototype.onArrowKeyDown=function(){if(this.focusedItemIndex===this.availableItems.length-1)return void(this.focusedItemIndex=0);this.onArrowKey()&&this.focusedItemIndex++},e.prototype.onArrowKey=function(){return null!==this.focusedItemIndex||(this.focusedItemIndex=0,!1)},e.prototype.resetArrowKeyActiveElement=function(){this.focusedItemIndex=null},i([s.Input(),r("design:type",Object)],e.prototype,"options",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"config",void 0),i([s.Input(),r("design:type",Boolean)],e.prototype,"multiple",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"value",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"valueChange",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"change",void 0),i([s.ViewChildren("availableOption"),r("design:type",s.QueryList)],e.prototype,"availableOptions",void 0),i([s.HostListener("click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickInsideComponent",null),i([s.HostListener("document:click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickOutsideComponent",null),i([s.HostListener("document:keydown",["$event"]),r("design:type",Function),r("design:paramtypes",[KeyboardEvent]),r("design:returntype",void 0)],e.prototype,"handleKeyboardEvent",null),e=i([s.Component({selector:"ngx-select-dropdown",template:n(7),styles:[n(8)]}),r("design:paramtypes",[])],e)}();t.SelectDropDownComponent=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(3);t.SelectDropDownComponent=o.SelectDropDownComponent;var i=n(11);t.SelectDropDownModule=i.SelectDropDownModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(4))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(1))},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports='<div class="ngx-dorpdown-container">\r\n <button type="button" class="ngx-dropdown-button" (click)="toggleSelectDropdown($event)">\r\n <span>{{selectedDisplayText}} </span>\r\n <span class="nsdicon-angle-down"></span>\r\n </button>\r\n <div class="ngx-dropdown-list-container" *ngIf="toggleDropdown" [style.maxHeight]="config.height">\r\n <div class="search-container" *ngIf="config.search">\r\n <input name="search" (ngModelChange)=\'changed($event)\' [(ngModel)]="searchText" />\r\n <label [ngClass]="{\'active\': searchText}">\r\n <span class="nsdicon-search"></span> Search</label>\r\n </div>\r\n <ul class="selected-items">\r\n <li tabindex="-1" *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i)">\r\n <span class="nsdicon-close"> {{selected[config.displayKey] || selected}}</span>\r\n </li>\r\n </ul>\r\n <hr *ngIf="selectedItems.length > 0 && availableItems.length > 0" />\r\n <ul class="available-items">\r\n <li #availableOption *ngFor="let item of availableItems| limitTo : config.limitTo;let i = index" tabindex="-1" [ngClass]="{\'active\': focusedItemIndex == i}"\r\n (click)="selectItem(item,i)">\r\n {{item[config.displayKey] || item}}</li>\r\n </ul>\r\n </div>\r\n</div>'},function(e,t,n){var o=n(9);e.exports="string"==typeof o?o:o.toString()},function(e,t,n){t=e.exports=n(10)(!1),t.push([e.i,".ngx-dorpdown-container {\n width: 100%;\n position: relative; }\n .ngx-dorpdown-container button {\n display: inline-block;\n margin-bottom: 0;\n font-weight: 400;\n line-height: 1.42857143;\n vertical-align: middle;\n touch-action: manipulation;\n cursor: pointer;\n user-select: none;\n border: 1px solid #ccc;\n border-radius: 4px;\n color: #333;\n background-color: #fff;\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis; }\n .ngx-dorpdown-container button span {\n vertical-align: middle;\n float: left; }\n .ngx-dorpdown-container button .nsdicon-angle-down {\n position: relative;\n font-size: large;\n float: right; }\n .ngx-dorpdown-container .ngx-dropdown-button {\n width: 100%;\n min-height: 30px;\n padding: 5px 10px 5px 10px;\n background-color: white; }\n .ngx-dorpdown-container .ngx-dropdown-list-container {\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding-left: 10px;\n padding-right: 10px;\n z-index: 999999999;\n width: 100%;\n background-clip: padding-box;\n background: white;\n position: absolute;\n -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n overflow-y: auto; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container {\n position: relative;\n padding-top: 10px;\n margin-top: 5px; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input {\n background-color: transparent;\n border: none;\n border-bottom: 1px solid #9e9e9e;\n border-radius: 0;\n outline: none;\n height: 2rem;\n width: 100%;\n font-size: 13px;\n margin: 0;\n padding: 0;\n box-shadow: none;\n box-sizing: content-box;\n transition: all 0.3s; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus {\n border-bottom: 1px solid #26a69a; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n transform: translateY(-2px) scale(0.8);\n transform-origin: 0 0; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label {\n color: #9e9e9e;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n font-size: 1rem;\n cursor: text;\n -webkit-transition: -webkit-transform 0.2s ease-out;\n transition: -webkit-transform 0.2s ease-out;\n transition: transform 0.2s ease-out;\n transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;\n -webkit-transform-origin: 0% 100%;\n transform-origin: 0% 100%;\n text-align: initial;\n transform: translateY(12px);\n pointer-events: none; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active {\n transform: translateY(-2px) scale(0.8);\n transform-origin: 0 0; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul {\n margin-top: 1rem;\n margin-bottom: 1rem;\n list-style-type: none;\n padding-left: 0px; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li {\n background-color: #337ab7;\n color: white;\n margin-bottom: 2px; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active {\n background-color: #337ab7;\n color: #ffff; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul li {\n font-size: inherit;\n cursor: pointer;\n display: block;\n padding: 3px 20px;\n clear: both;\n font-weight: 400;\n line-height: 1.42857143;\n color: #333;\n white-space: normal; }\n",""])},function(e,t){function n(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var r=o(i);return[n].concat(i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"})).concat([r]).join("\n")}return[n].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o=n(t,e);return t[2]?"@media "+t[2]+"{"+o+"}":o}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<e.length;i++){var s=e[i];"number"==typeof s[0]&&o[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),r=n(0),s=n(13),a=n(14),c=n(1),l=function(){function e(){}return e=o([r.NgModule({declarations:[c.SelectDropDownComponent,i.LimitToPipe],imports:[s.CommonModule,a.FormsModule],exports:[c.SelectDropDownComponent,i.LimitToPipe],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=l},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),r=function(){function e(){}return e.prototype.transform=function(e,t,n){return void 0===n&&(n=0),Array.isArray(e)?e.slice(n,n+t):e},e=o([i.Pipe({name:"limitTo"})],e)}();t.LimitToPipe=r},function(e,t){e.exports=o},function(e,t){e.exports=i}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/Subject","rxjs/Rx","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.Rx,e.Rx,e.ng.common,e.ng.forms)}("undefined"!=typeof self?self:this,function(e,t,n,o,i){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(t,n){t.exports=e},function(e,t,n){"use strict";var o=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++){t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},i=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s},r=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var s=n(0),a=n(5);n(6);var c=function(){function e(){var e=this;this.options=[],this.config={},this.multiple=!1,this.valueChange=new s.EventEmitter,this.change=new s.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.searchTextChanged=new a.Subject,this.clickedInside=!1,this.focusedItemIndex=null,this.multiple=!1,this.searchTextChanged.debounceTime(300).distinctUntilChanged().subscribe(function(t){e.searchText=t})}return e.prototype.clickInsideComponent=function(){this.clickedInside=!0},e.prototype.clickOutsideComponent=function(){this.clickedInside||(this.toggleDropdown=!1,this.resetArrowKeyActiveElement()),this.clickedInside=!1},e.prototype.handleKeyboardEvent=function(e){var t=this.availableOptions.toArray();if("ArrowDown"===e.code&&t.length>0&&(this.onArrowKeyDown(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),"ArrowUp"===e.code&&t.length&&(this.onArrowKeyUp(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),"Enter"===e.code&&null!==this.focusedItemIndex)return this.selectItem(this.availableItems[this.focusedItemIndex],this.focusedItemIndex),!1},e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=this.options.sort(this.config.customComparator).slice(),this.initDropdownValuesAndOptions())},e.prototype.ngOnChanges=function(e){this.selectedItems=[],this.searchText=null,this.options=this.options||[],e.options&&(this.availableItems=this.options.sort(this.config.customComparator).slice()),this.initDropdownValuesAndOptions()},e.prototype.changed=function(e){this.searchTextChanged.next(e)},e.prototype.deselectItem=function(e,t){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort(this.config.customComparator)),this.selectedItems=this.selectedItems.slice(),this.availableItems=this.availableItems.slice(),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.selectItem=function(e,t){this.multiple||(this.selectedItems.length>0&&this.availableItems.push(this.selectedItems[0]),this.selectedItems=[],this.toggleDropdown=!1),this.availableItems.splice(t,1),this.selectedItems.push(e),this.selectedItems=this.selectedItems.slice(),this.availableItems=this.availableItems.slice(),this.selectedItems.sort(this.config.customComparator),this.availableItems.sort(this.config.customComparator),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.valueChanged=function(){this.value=this.selectedItems,this.valueChange.emit(this.value),this.change.emit({value:this.value}),this.setSelectedDisplayText()},e.prototype.toggleSelectDropdown=function(e){this.toggleDropdown=!this.toggleDropdown,this.resetArrowKeyActiveElement()},e.prototype.initDropdownValuesAndOptions=function(){var e=this,t={displayKey:"description",height:"auto",search:!1,placeholder:"Select",limitTo:this.options.length,customComparator:void 0};"undefined"!==this.config&&0!==Object.keys(this.config).length||(this.config=o({},t));for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];this.config[r]=this.config[r]?this.config[r]:t[r]}this.selectedDisplayText=this.config.placeholder,""!==this.value&&void 0!==this.value&&(this.selectedItems=this.value,this.value.forEach(function(t){var n=e.availableItems.indexOf(t);-1!==n&&e.availableItems.splice(n,1)}),this.setSelectedDisplayText())},e.prototype.setSelectedDisplayText=function(){var e=this.selectedItems[0];"object"==typeof this.selectedItems[0]&&(e=this.selectedItems[0][this.config.displayKey]),this.multiple&&this.selectedItems.length>0?this.selectedDisplayText=1===this.selectedItems.length?e:e+" + "+(this.selectedItems.length-1)+" more":this.selectedDisplayText=0===this.selectedItems.length?this.config.placeholder:e},e.prototype.onArrowKeyUp=function(){if(0===this.focusedItemIndex)return void(this.focusedItemIndex=this.availableItems.length-1);this.onArrowKey()&&this.focusedItemIndex--},e.prototype.onArrowKeyDown=function(){if(this.focusedItemIndex===this.availableItems.length-1)return void(this.focusedItemIndex=0);this.onArrowKey()&&this.focusedItemIndex++},e.prototype.onArrowKey=function(){return null!==this.focusedItemIndex||(this.focusedItemIndex=0,!1)},e.prototype.resetArrowKeyActiveElement=function(){this.focusedItemIndex=null},i([s.Input(),r("design:type",Object)],e.prototype,"options",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"config",void 0),i([s.Input(),r("design:type",Boolean)],e.prototype,"multiple",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"value",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"valueChange",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"change",void 0),i([s.ViewChildren("availableOption"),r("design:type",s.QueryList)],e.prototype,"availableOptions",void 0),i([s.HostListener("click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickInsideComponent",null),i([s.HostListener("document:click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickOutsideComponent",null),i([s.HostListener("document:keydown",["$event"]),r("design:type",Function),r("design:paramtypes",[KeyboardEvent]),r("design:returntype",void 0)],e.prototype,"handleKeyboardEvent",null),e=i([s.Component({selector:"ngx-select-dropdown",template:n(7),styles:[n(8)]}),r("design:paramtypes",[])],e)}();t.SelectDropDownComponent=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(3);t.SelectDropDownComponent=o.SelectDropDownComponent;var i=n(11);t.SelectDropDownModule=i.SelectDropDownModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(4))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(1))},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports='<div class="ngx-dorpdown-container">\r\n <button type="button" class="ngx-dropdown-button" (click)="toggleSelectDropdown($event)">\r\n <span>{{selectedDisplayText}} </span>\r\n <span class="nsdicon-angle-down"></span>\r\n </button>\r\n <div class="ngx-dropdown-list-container" *ngIf="toggleDropdown" [style.maxHeight]="config.height">\r\n <div class="search-container" *ngIf="config.search">\r\n <input name="search" (ngModelChange)=\'changed($event)\' [(ngModel)]="searchText" />\r\n <label [ngClass]="{\'active\': searchText}">\r\n <span class="nsdicon-search"></span> Search</label>\r\n </div>\r\n <ul class="selected-items">\r\n <li tabindex="-1" *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i)">\r\n <span class="nsdicon-close"> {{selected[config.displayKey] || selected}}</span>\r\n </li>\r\n </ul>\r\n <hr *ngIf="selectedItems.length > 0 && availableItems.length > 0" />\r\n <ul class="available-items">\r\n <li #availableOption *ngFor="let item of availableItems| filterBy: searchText | limitTo : config.limitTo;let i = index" tabindex="-1"\r\n [ngClass]="{\'active\': focusedItemIndex == i}" (click)="selectItem(item,i)">\r\n {{item[config.displayKey] || item}}</li>\r\n </ul>\r\n </div>\r\n</div>'},function(e,t,n){var o=n(9);e.exports="string"==typeof o?o:o.toString()},function(e,t,n){t=e.exports=n(10)(!1),t.push([e.i,".ngx-dorpdown-container {\n width: 100%;\n position: relative; }\n .ngx-dorpdown-container button {\n display: inline-block;\n margin-bottom: 0;\n font-weight: 400;\n line-height: 1.42857143;\n vertical-align: middle;\n touch-action: manipulation;\n cursor: pointer;\n user-select: none;\n border: 1px solid #ccc;\n border-radius: 4px;\n color: #333;\n background-color: #fff;\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis; }\n .ngx-dorpdown-container button span {\n vertical-align: middle;\n float: left; }\n .ngx-dorpdown-container button .nsdicon-angle-down {\n position: relative;\n font-size: large;\n float: right; }\n .ngx-dorpdown-container .ngx-dropdown-button {\n width: 100%;\n min-height: 30px;\n padding: 5px 10px 5px 10px;\n background-color: white; }\n .ngx-dorpdown-container .ngx-dropdown-list-container {\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n padding-left: 10px;\n padding-right: 10px;\n z-index: 999999999;\n width: 100%;\n background-clip: padding-box;\n background: white;\n position: absolute;\n -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n overflow-y: auto; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container {\n position: relative;\n padding-top: 10px;\n margin-top: 5px; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input {\n background-color: transparent;\n border: none;\n border-bottom: 1px solid #9e9e9e;\n border-radius: 0;\n outline: none;\n height: 2rem;\n width: 100%;\n font-size: 13px;\n margin: 0;\n padding: 0;\n box-shadow: none;\n box-sizing: content-box;\n transition: all 0.3s; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus {\n border-bottom: 1px solid #26a69a; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n transform: translateY(-2px) scale(0.8);\n transform-origin: 0 0; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label {\n color: #9e9e9e;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n font-size: 1rem;\n cursor: text;\n -webkit-transition: -webkit-transform 0.2s ease-out;\n transition: -webkit-transform 0.2s ease-out;\n transition: transform 0.2s ease-out;\n transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;\n -webkit-transform-origin: 0% 100%;\n transform-origin: 0% 100%;\n text-align: initial;\n transform: translateY(12px);\n pointer-events: none; }\n .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active {\n transform: translateY(-2px) scale(0.8);\n transform-origin: 0 0; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul {\n margin-top: 1rem;\n margin-bottom: 1rem;\n list-style-type: none;\n padding-left: 0px; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li {\n background-color: #337ab7;\n color: white;\n margin-bottom: 2px; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active {\n background-color: #337ab7;\n color: #ffff; }\n .ngx-dorpdown-container .ngx-dropdown-list-container ul li {\n font-size: inherit;\n cursor: pointer;\n display: block;\n padding: 3px 20px;\n clear: both;\n font-weight: 400;\n line-height: 1.42857143;\n color: #333;\n white-space: normal; }\n",""])},function(e,t){function n(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var r=o(i);return[n].concat(i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"})).concat([r]).join("\n")}return[n].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o=n(t,e);return t[2]?"@media "+t[2]+"{"+o+"}":o}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<e.length;i++){var s=e[i];"number"==typeof s[0]&&o[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),r=n(13),s=n(0),a=n(14),c=n(15),l=n(1),p=function(){function e(){}return e=o([s.NgModule({declarations:[l.SelectDropDownComponent,r.LimitToPipe,i.ArrayFilterPipe],imports:[a.CommonModule,c.FormsModule],exports:[l.SelectDropDownComponent,r.LimitToPipe],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=p},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),r=function(){function e(){}return e.prototype.transform=function(e,t,n){return e&&t&&Array.isArray(e)?"string"==typeof e[0]?e.filter(function(e){return e.indexOf(t)>-1}):n?e.filter(function(e){return"object"!=typeof e[n]&&e[n].toString().toLowerCase().indexOf(t.toLowerCase())>-1}):e.filter(function(e){for(var n in e)if("object"!=typeof e[n]&&e[n].toString().toLowerCase().indexOf(t.toLowerCase())>-1)return!0;return!1}):e},e=o([i.Pipe({name:"filterBy"})],e)}();t.ArrayFilterPipe=r},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),r=function(){function e(){}return e.prototype.transform=function(e,t,n){return void 0===n&&(n=0),Array.isArray(e)?e.slice(n,n+t):e},e=o([i.Pipe({name:"limitTo"})],e)}();t.LimitToPipe=r},function(e,t){e.exports=o},function(e,t){e.exports=i}])});
//# sourceMappingURL=index.umd.min.js.map

3

dist/ngx-select-dropdown.module.js

@@ -0,1 +1,2 @@

import { ArrayFilterPipe } from './pipes/filter-by.pipe';
import { LimitToPipe } from './pipes/limit-to.pipe';

@@ -11,3 +12,3 @@ import { NgModule } from "@angular/core";

{ type: NgModule, args: [{
declarations: [SelectDropDownComponent, LimitToPipe],
declarations: [SelectDropDownComponent, LimitToPipe, ArrayFilterPipe],
imports: [CommonModule, FormsModule],

@@ -14,0 +15,0 @@ exports: [SelectDropDownComponent, LimitToPipe],

2

dist/ngx-select-dropdown.module.metadata.json

@@ -1,1 +0,1 @@

[{"__symbolic":"module","version":3,"metadata":{"SelectDropDownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"}],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropDownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"}],"providers":[],"bootstrap":[]}]}]}}}]
[{"__symbolic":"module","version":3,"metadata":{"SelectDropDownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"},{"__symbolic":"reference","module":"./pipes/filter-by.pipe","name":"ArrayFilterPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"}],"providers":[],"bootstrap":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropDownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"},{"__symbolic":"reference","module":"./pipes/filter-by.pipe","name":"ArrayFilterPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"exports":[{"__symbolic":"reference","module":"./components/ngx-select-dropdown-component/ngx-select-dropdown.component","name":"SelectDropDownComponent"},{"__symbolic":"reference","module":"./pipes/limit-to.pipe","name":"LimitToPipe"}],"providers":[],"bootstrap":[]}]}]}}}]

2

package.json
{
"name": "ngx-select-dropdown",
"version": "0.7.0",
"version": "0.7.1",
"description": "A angular(4+) selct dropdown for single selct or multiselct module.",

@@ -5,0 +5,0 @@ "main": "./dist/index.umd.js",

4

README.md

@@ -20,3 +20,7 @@ # ngx-select-dropdown

* search dropdown list
* arrows keys support
* limit number of items displayed in dropdown
* custom sort
## Examples

@@ -23,0 +27,0 @@ 

dist/components/ngx-select-dropdown-component/ngx-select-dropdown.component.js.map

Sorry, the diff of this file is not supported yet

dist/index.umd.js.map

Sorry, the diff of this file is not supported yet

dist/index.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/ngx-select-dropdown.module.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc