ngx-select-dropdown
Advanced tools
Comparing version 0.3.1 to 0.3.2
@@ -53,4 +53,18 @@ import { OnInit, EventEmitter, OnChanges, SimpleChanges } from "@angular/core"; | ||
searchTextChanged: Subject<string>; | ||
/** | ||
* variable to track if clicked inside or outside of component | ||
*/ | ||
clickedInside: boolean; | ||
constructor(); | ||
/** | ||
* click listener for host inside this component i.e | ||
* if many instances are there, this detects if clicked inside | ||
* this instance | ||
*/ | ||
clickInsideComponent(): void; | ||
/** | ||
* click handler on documnent to hide the open dropdown if clicked outside | ||
*/ | ||
clickOutsideComponent(): void; | ||
/** | ||
* Component onInit | ||
@@ -88,6 +102,2 @@ */ | ||
/** | ||
* Avoid closing the dropdown list when selecting items | ||
*/ | ||
clickHandler($event: any): void; | ||
/** | ||
* initialize the config and other properties | ||
@@ -97,6 +107,2 @@ */ | ||
/** | ||
* Close the dropdown on click on the document | ||
*/ | ||
private onClick($event); | ||
/** | ||
* set the text to be displayed | ||
@@ -103,0 +109,0 @@ */ |
@@ -1,2 +0,2 @@ | ||
import { Component, Input, EventEmitter, Output } from "@angular/core"; | ||
import { Component, Input, EventEmitter, Output, HostListener } from "@angular/core"; | ||
import { Subject } from "rxjs/Subject"; | ||
@@ -39,2 +39,6 @@ import "rxjs/Rx"; | ||
this.searchTextChanged = new Subject(); | ||
/** | ||
* variable to track if clicked inside or outside of component | ||
*/ | ||
this.clickedInside = false; | ||
this.multiple = false; | ||
@@ -50,2 +54,19 @@ this.searchTextChanged | ||
/** | ||
* click listener for host inside this component i.e | ||
* if many instances are there, this detects if clicked inside | ||
* this instance | ||
*/ | ||
SelectDropDownComponent.prototype.clickInsideComponent = function () { | ||
this.clickedInside = true; | ||
}; | ||
/** | ||
* click handler on documnent to hide the open dropdown if clicked outside | ||
*/ | ||
SelectDropDownComponent.prototype.clickOutsideComponent = function () { | ||
if (!this.clickedInside) { | ||
this.toggleDropdown = false; | ||
} | ||
this.clickedInside = false; | ||
}; | ||
/** | ||
* Component onInit | ||
@@ -113,3 +134,2 @@ */ | ||
this.setSelectedDisplayText(); | ||
$event.stopPropagation(); | ||
}; | ||
@@ -121,3 +141,2 @@ /** | ||
this.toggleDropdown = !this.toggleDropdown; | ||
$event.stopPropagation(); | ||
}; | ||
@@ -158,8 +177,2 @@ /** | ||
/** | ||
* Avoid closing the dropdown list when selecting items | ||
*/ | ||
SelectDropDownComponent.prototype.clickHandler = function ($event) { | ||
$event.stopPropagation(); | ||
}; | ||
/** | ||
* initialize the config and other properties | ||
@@ -183,8 +196,2 @@ */ | ||
/** | ||
* Close the dropdown on click on the document | ||
*/ | ||
SelectDropDownComponent.prototype.onClick = function ($event) { | ||
this.toggleDropdown = false; | ||
}; | ||
/** | ||
* set the text to be displayed | ||
@@ -208,7 +215,4 @@ */ | ||
selector: "ngx-select-dropdown", | ||
template: "\n <div class=\"ngx-dorpdown-container\" (click)=\"clickHandler($event)\">\n <button class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\"/>\n <label [ngClass]=\"{'active': searchText}\"><span class=\"icon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{item[config.displayKey] || item}}</li>\n </ul>\n </div>\n </div>\n ", | ||
template: "\n <div class=\"ngx-dorpdown-container\">\n <button class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\"/>\n <label [ngClass]=\"{'active': searchText}\"><span class=\"icon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{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 .icon-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)}.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 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}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\n "], | ||
host: { | ||
"(document:click)": "onClick($event)" | ||
} | ||
},] }, | ||
@@ -225,2 +229,4 @@ ]; | ||
'change': [{ type: Output },], | ||
'clickInsideComponent': [{ type: HostListener, args: ['click',] },], | ||
'clickOutsideComponent': [{ type: HostListener, args: ['document:click',] },], | ||
}; | ||
@@ -227,0 +233,0 @@ return SelectDropDownComponent; |
@@ -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\" (click)=\"clickHandler($event)\">\n <button class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\"/>\n <label [ngClass]=\"{'active': searchText}\"><span class=\"icon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{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 .icon-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)}.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 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}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\n "],"host":{"(document:click)":"onClick($event)","$quoted$":["(document:click)"]}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__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\" (click)=\"clickHandler($event)\">\n <button class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\"/>\n <label [ngClass]=\"{'active': searchText}\"><span class=\"icon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{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 .icon-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)}.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 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}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\n "],"host":{"(document:click)":"onClick($event)"}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__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 class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\"/>\n <label [ngClass]=\"{'active': searchText}\"><span class=\"icon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{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 .icon-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)}.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 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}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\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"}}]}],"__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"]}]}],"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"}]}}}},{"__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 class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\n </button>\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n <div class=\"search-container\" *ngIf=\"config.search\">\n <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\"/>\n <label [ngClass]=\"{'active': searchText}\"><span class=\"icon-search\"></span> Search</label>\n </div>\n <ul class=\"selected-items\">\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{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 .icon-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)}.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 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}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\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"}}]}],"__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"]}]}],"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"}]}}}}] |
/** | ||
* ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module. | ||
* @version v0.3.1 | ||
* @version v0.3.2 | ||
* @author Manish Kumar | ||
@@ -137,2 +137,6 @@ * @link https://github.com/manishjanky/ngx-select-dropdown#readme | ||
this.searchTextChanged = new Subject_1.Subject(); | ||
/** | ||
* variable to track if clicked inside or outside of component | ||
*/ | ||
this.clickedInside = false; | ||
this.multiple = false; | ||
@@ -148,2 +152,19 @@ this.searchTextChanged | ||
/** | ||
* click listener for host inside this component i.e | ||
* if many instances are there, this detects if clicked inside | ||
* this instance | ||
*/ | ||
SelectDropDownComponent.prototype.clickInsideComponent = function () { | ||
this.clickedInside = true; | ||
}; | ||
/** | ||
* click handler on documnent to hide the open dropdown if clicked outside | ||
*/ | ||
SelectDropDownComponent.prototype.clickOutsideComponent = function () { | ||
if (!this.clickedInside) { | ||
this.toggleDropdown = false; | ||
} | ||
this.clickedInside = false; | ||
}; | ||
/** | ||
* Component onInit | ||
@@ -211,3 +232,2 @@ */ | ||
this.setSelectedDisplayText(); | ||
$event.stopPropagation(); | ||
}; | ||
@@ -219,3 +239,2 @@ /** | ||
this.toggleDropdown = !this.toggleDropdown; | ||
$event.stopPropagation(); | ||
}; | ||
@@ -256,8 +275,2 @@ /** | ||
/** | ||
* Avoid closing the dropdown list when selecting items | ||
*/ | ||
SelectDropDownComponent.prototype.clickHandler = function ($event) { | ||
$event.stopPropagation(); | ||
}; | ||
/** | ||
* initialize the config and other properties | ||
@@ -281,8 +294,2 @@ */ | ||
/** | ||
* Close the dropdown on click on the document | ||
*/ | ||
SelectDropDownComponent.prototype.onClick = function ($event) { | ||
this.toggleDropdown = false; | ||
}; | ||
/** | ||
* set the text to be displayed | ||
@@ -327,2 +334,14 @@ */ | ||
], SelectDropDownComponent.prototype, "change", void 0); | ||
__decorate([ | ||
core_1.HostListener('click'), | ||
__metadata("design:type", Function), | ||
__metadata("design:paramtypes", []), | ||
__metadata("design:returntype", void 0) | ||
], SelectDropDownComponent.prototype, "clickInsideComponent", null); | ||
__decorate([ | ||
core_1.HostListener('document:click'), | ||
__metadata("design:type", Function), | ||
__metadata("design:paramtypes", []), | ||
__metadata("design:returntype", void 0) | ||
], SelectDropDownComponent.prototype, "clickOutsideComponent", null); | ||
SelectDropDownComponent = __decorate([ | ||
@@ -333,5 +352,2 @@ core_1.Component({ | ||
styles: [__webpack_require__(8)], | ||
host: { | ||
"(document:click)": "onClick($event)" | ||
} | ||
}), | ||
@@ -406,3 +422,3 @@ __metadata("design:paramtypes", []) | ||
module.exports = "<div class=\"ngx-dorpdown-container\" (click)=\"clickHandler($event)\">\r\n <button class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\r\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\r\n </button>\r\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\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}\"><span class=\"icon-search\"></span> Search</label>\r\n </div>\r\n <ul class=\"selected-items\">\r\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\r\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{item[config.displayKey] || item}}</li>\r\n </ul>\r\n </div>\r\n</div>" | ||
module.exports = "<div class=\"ngx-dorpdown-container\">\r\n <button class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\r\n <span>{{selectedDisplayText}} </span><span class=\"icon-angle-down\"></span>\r\n </button>\r\n <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\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}\"><span class=\"icon-search\"></span> Search</label>\r\n </div>\r\n <ul class=\"selected-items\">\r\n <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\r\n <span class=\"icon-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 *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{item[config.displayKey] || item}}</li>\r\n </ul>\r\n </div>\r\n</div>" | ||
@@ -409,0 +425,0 @@ /***/ }), |
/** | ||
* ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module. | ||
* @version v0.3.1 | ||
* @version v0.3.2 | ||
* @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(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},i=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 r=n(1),s=n(5);n(6);var a=function(){function e(){var e=this;this.multiple=!1,this.valueChange=new r.EventEmitter,this.change=new r.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.searchTextChanged=new s.Subject,this.multiple=!1,this.searchTextChanged.debounceTime(300).distinctUntilChanged().subscribe(function(t){e.searchText=t,e.search()})}return e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=JSON.parse(JSON.stringify(this.options.sort())),this.initDropdownValuesAndOptions())},e.prototype.ngOnChanges=function(e){e.value&&!e.value.firstChange||(this.selectedItems=[],this.searchText=null,this.availableItems=JSON.parse(JSON.stringify(this.options.sort())),this.initDropdownValuesAndOptions())},e.prototype.changed=function(e){this.searchTextChanged.next(e)},e.prototype.deselectItem=function(e,t,n){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort()),this.valueChanged(n)},e.prototype.selectItem=function(e,t,n){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.availableItems.sort(),this.valueChanged(n)},e.prototype.valueChanged=function(e){this.value=this.selectedItems,this.valueChange.emit(this.value),this.change.emit({value:this.value}),this.setSelectedDisplayText(),e.stopPropagation()},e.prototype.toggleSelectDropdown=function(e){this.toggleDropdown=!this.toggleDropdown,e.stopPropagation()},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().indexOf(this.searchText)>-1&&(t.includes(i)||t.push(i));else i.indexOf(this.searchText)>-1&&t.push(i)}this.availableItems=t,this.availableItems=this.availableItems.filter(function(t){return!e.selectedItems.includes(t)})},e.prototype.clickHandler=function(e){e.stopPropagation()},e.prototype.initDropdownValuesAndOptions=function(){var e=this;void 0===this.config&&(this.config={displayKey:"description"}),""!==this.value&&void 0!==this.value&&(this.selectedItems=this.value,this.value.forEach(function(t){e.availableItems.splice(e.availableItems.indexOf(t),1)}),this.setSelectedDisplayText())},e.prototype.onClick=function(e){this.toggleDropdown=!1},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?"Select":e},o([r.Input(),i("design:type",Object)],e.prototype,"options",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"config",void 0),o([r.Input(),i("design:type",Boolean)],e.prototype,"multiple",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"value",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"valueChange",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"change",void 0),e=o([r.Component({selector:"ngx-select-dropdown",template:n(7),styles:[n(8)],host:{"(document:click)":"onClick($event)"}}),i("design:paramtypes",[])],e)}();t.SelectDropDownComponent=a},function(t,n){t.exports=e},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(0))},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports='<div class="ngx-dorpdown-container" (click)="clickHandler($event)">\r\n <button class="ngx-dropdown-button" (click)="toggleSelectDropdown($event)">\r\n <span>{{selectedDisplayText}} </span><span class="icon-angle-down"></span>\r\n </button>\r\n <div class="ngx-dropdown-list-container" *ngIf="toggleDropdown">\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}"><span class="icon-search"></span> Search</label>\r\n </div>\r\n <ul class="selected-items">\r\n <li *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i,$event)">\r\n <span class="icon-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 *ngFor="let item of availableItems;let i = index" (click)="selectItem(item,i,$event)"> {{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 .icon-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 .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 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 .ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before {\n vertical-align: middle; }\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(1),r=n(12),s=n(13),a=n(0),l=function(){function e(){}return e=o([i.NgModule({declarations:[a.SelectDropDownComponent],imports:[r.CommonModule,s.FormsModule],exports:[a.SelectDropDownComponent],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=l},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(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},i=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 r=n(1),s=n(5);n(6);var a=function(){function e(){var e=this;this.multiple=!1,this.valueChange=new r.EventEmitter,this.change=new r.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.searchTextChanged=new s.Subject,this.clickedInside=!1,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.clickedInside=!1},e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=JSON.parse(JSON.stringify(this.options.sort())),this.initDropdownValuesAndOptions())},e.prototype.ngOnChanges=function(e){e.value&&!e.value.firstChange||(this.selectedItems=[],this.searchText=null,this.availableItems=JSON.parse(JSON.stringify(this.options.sort())),this.initDropdownValuesAndOptions())},e.prototype.changed=function(e){this.searchTextChanged.next(e)},e.prototype.deselectItem=function(e,t,n){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort()),this.valueChanged(n)},e.prototype.selectItem=function(e,t,n){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.availableItems.sort(),this.valueChanged(n)},e.prototype.valueChanged=function(e){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},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().indexOf(this.searchText)>-1&&(t.includes(i)||t.push(i));else i.indexOf(this.searchText)>-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;void 0===this.config&&(this.config={displayKey:"description"}),""!==this.value&&void 0!==this.value&&(this.selectedItems=this.value,this.value.forEach(function(t){e.availableItems.splice(e.availableItems.indexOf(t),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?"Select":e},o([r.Input(),i("design:type",Object)],e.prototype,"options",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"config",void 0),o([r.Input(),i("design:type",Boolean)],e.prototype,"multiple",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"value",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"valueChange",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"change",void 0),o([r.HostListener("click"),i("design:type",Function),i("design:paramtypes",[]),i("design:returntype",void 0)],e.prototype,"clickInsideComponent",null),o([r.HostListener("document:click"),i("design:type",Function),i("design:paramtypes",[]),i("design:returntype",void 0)],e.prototype,"clickOutsideComponent",null),e=o([r.Component({selector:"ngx-select-dropdown",template:n(7),styles:[n(8)]}),i("design:paramtypes",[])],e)}();t.SelectDropDownComponent=a},function(t,n){t.exports=e},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(0))},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 class="ngx-dropdown-button" (click)="toggleSelectDropdown($event)">\r\n <span>{{selectedDisplayText}} </span><span class="icon-angle-down"></span>\r\n </button>\r\n <div class="ngx-dropdown-list-container" *ngIf="toggleDropdown">\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}"><span class="icon-search"></span> Search</label>\r\n </div>\r\n <ul class="selected-items">\r\n <li *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i,$event)">\r\n <span class="icon-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 *ngFor="let item of availableItems;let i = index" (click)="selectItem(item,i,$event)"> {{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 .icon-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 .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 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 .ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before {\n vertical-align: middle; }\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(1),r=n(12),s=n(13),a=n(0),l=function(){function e(){}return e=o([i.NgModule({declarations:[a.SelectDropDownComponent],imports:[r.CommonModule,s.FormsModule],exports:[a.SelectDropDownComponent],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=l},function(e,t){e.exports=o},function(e,t){e.exports=i}])}); | ||
//# sourceMappingURL=index.umd.min.js.map |
{ | ||
"name": "ngx-select-dropdown", | ||
"version": "0.3.1", | ||
"version": "0.3.2", | ||
"description": "A angular(4+) selct dropdown for single selct or multiselct module.", | ||
@@ -5,0 +5,0 @@ "main": "./dist/index.umd.js", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
194732
1167