angular2-multiselect-dropdown
Advanced tools
angular2-multiselect-dropdown - npm Package Compare versions
Comparing version 1.2.3 to 1.2.4
@@ -1,5 +0,4 @@ | ||
| /** | ||
| * Generated bundle index. Do not edit. | ||
| */ | ||
| export * from './index'; | ||
| export { DROPDOWN_CONTROL_VALUE_ACCESSOR as ɵa } from './src/angular2-multiselect-dropdown/multiselect.component'; | ||
| export { AngularMultiSelect } from './angular2-multiselect-dropdown/multiselect.component'; | ||
| export { ClickOutsideDirective } from './angular2-multiselect-dropdown/clickOutside'; | ||
| export { ListFilterPipe } from './angular2-multiselect-dropdown/list-filter'; | ||
| export { AngularMultiSelectModule } from './angular2-multiselect-dropdown/multiselect.component'; |
@@ -1,346 +0,5 @@ | ||
| import { Component, Directive, ElementRef, EventEmitter, HostListener, Input, NgModule, Output, Pipe, forwardRef } from '@angular/core'; | ||
| import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; | ||
| import { CommonModule } from '@angular/common'; | ||
| class ListItem { | ||
| } | ||
| class MyException { | ||
| /** | ||
| * @param {?} status | ||
| * @param {?} body | ||
| */ | ||
| constructor(status, body) { | ||
| this.status = status; | ||
| this.body = body; | ||
| } | ||
| } | ||
| class ClickOutsideDirective { | ||
| /** | ||
| * @param {?} _elementRef | ||
| */ | ||
| constructor(_elementRef) { | ||
| this._elementRef = _elementRef; | ||
| this.clickOutside = new EventEmitter(); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} targetElement | ||
| * @return {?} | ||
| */ | ||
| onClick(event, targetElement) { | ||
| if (!targetElement) { | ||
| return; | ||
| } | ||
| const /** @type {?} */ clickedInside = this._elementRef.nativeElement.contains(targetElement); | ||
| if (!clickedInside) { | ||
| this.clickOutside.emit(event); | ||
| } | ||
| } | ||
| } | ||
| ClickOutsideDirective.decorators = [ | ||
| { type: Directive, args: [{ | ||
| selector: '[clickOutside]' | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| ClickOutsideDirective.ctorParameters = () => [ | ||
| { type: ElementRef, }, | ||
| ]; | ||
| ClickOutsideDirective.propDecorators = { | ||
| 'clickOutside': [{ type: Output },], | ||
| 'onClick': [{ type: HostListener, args: ['document:click', ['$event', '$event.target'],] },], | ||
| }; | ||
| class ListFilterPipe { | ||
| /** | ||
| * @param {?} items | ||
| * @param {?} filter | ||
| * @return {?} | ||
| */ | ||
| transform(items, filter) { | ||
| if (!items || !filter) { | ||
| return items; | ||
| } | ||
| // filter items array, items which match and return true will be kept, false will be filtered out | ||
| return items.filter((item) => this.applyFilter(item, filter)); | ||
| } | ||
| /** | ||
| * Perform the filtering. | ||
| \@param {Book} book The book to compare to the filter. | ||
| \@param {Book} filter The filter to apply. | ||
| \@return {boolean} True if book satisfies filters, false if not. | ||
| * @param {?} item | ||
| * @param {?} filter | ||
| * @return {?} | ||
| */ | ||
| applyFilter(item, filter) { | ||
| return !(filter.itemName && item.itemName && item.itemName.toLowerCase().indexOf(filter.itemName.toLowerCase()) === -1); | ||
| } | ||
| } | ||
| ListFilterPipe.decorators = [ | ||
| { type: Pipe, args: [{ | ||
| name: 'listFilter', | ||
| pure: false | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| ListFilterPipe.ctorParameters = () => []; | ||
| const DROPDOWN_CONTROL_VALUE_ACCESSOR = { | ||
| provide: NG_VALUE_ACCESSOR, | ||
| useExisting: forwardRef(() => AngularMultiSelect), | ||
| multi: true | ||
| }; | ||
| const noop = () => { | ||
| }; | ||
| class AngularMultiSelect { | ||
| constructor() { | ||
| this.onSelect = new EventEmitter(); | ||
| this.onDeSelect = new EventEmitter(); | ||
| this.onSelectAll = new EventEmitter(); | ||
| this.onDeSelectAll = new EventEmitter(); | ||
| this.isActive = false; | ||
| this.isSelectAll = false; | ||
| this.filter = new ListItem(); | ||
| this.defaultSettings = { | ||
| singleSelection: false, | ||
| text: 'Select', | ||
| enableCheckAll: true, | ||
| selectAllText: 'Select All', | ||
| unSelectAllText: 'UnSelect All', | ||
| enableSearchFilter: false, | ||
| maxHeight: 300, | ||
| badgeShowLimit: 999999999999, | ||
| classes: '', | ||
| disabled: false, | ||
| searchPlaceholderText: 'Search' | ||
| }; | ||
| this.onTouchedCallback = noop; | ||
| this.onChangeCallback = noop; | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| ngOnInit() { | ||
| this.settings = Object.assign(this.defaultSettings, this.settings); | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| ngDoCheck() { | ||
| if (this.selectedItems) { | ||
| if (this.selectedItems.length == 0 || this.data.length == 0 || this.selectedItems.length < this.data.length) { | ||
| this.isSelectAll = false; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * @param {?} item | ||
| * @param {?} index | ||
| * @return {?} | ||
| */ | ||
| onItemClick(item, index) { | ||
| if (this.settings.disabled) { | ||
| return false; | ||
| } | ||
| let /** @type {?} */ found = this.isSelected(item); | ||
| let /** @type {?} */ limit = this.selectedItems.length < this.settings.limitSelection ? true : false; | ||
| if (!found) { | ||
| if (this.settings.limitSelection) { | ||
| if (limit) { | ||
| this.addSelected(item); | ||
| this.onSelect.emit(item); | ||
| } | ||
| } | ||
| else { | ||
| this.addSelected(item); | ||
| this.onSelect.emit(item); | ||
| } | ||
| } | ||
| else { | ||
| this.removeSelected(item); | ||
| this.onDeSelect.emit(item); | ||
| } | ||
| if (this.isSelectAll || this.data.length > this.selectedItems.length) { | ||
| this.isSelectAll = false; | ||
| } | ||
| if (this.data.length == this.selectedItems.length) { | ||
| this.isSelectAll = true; | ||
| } | ||
| } | ||
| /** | ||
| * @param {?} value | ||
| * @return {?} | ||
| */ | ||
| writeValue(value) { | ||
| if (value !== undefined && value !== null) { | ||
| if (this.settings.singleSelection) { | ||
| try { | ||
| if (value.length > 1) { | ||
| this.selectedItems = [value[0]]; | ||
| throw new MyException(404, { "msg": "Single Selection Mode, Selected Items cannot have more than one item." }); | ||
| } | ||
| else { | ||
| this.selectedItems = value; | ||
| } | ||
| } | ||
| catch (e) { | ||
| console.error(e.body.msg); | ||
| } | ||
| } | ||
| else { | ||
| if (this.settings.limitSelection) { | ||
| this.selectedItems = value.splice(0, this.settings.limitSelection); | ||
| } | ||
| else { | ||
| this.selectedItems = value; | ||
| } | ||
| if (this.selectedItems.length === this.data.length && this.data.length > 0) { | ||
| this.isSelectAll = true; | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| this.selectedItems = []; | ||
| } | ||
| } | ||
| /** | ||
| * @param {?} fn | ||
| * @return {?} | ||
| */ | ||
| registerOnChange(fn) { | ||
| this.onChangeCallback = fn; | ||
| } | ||
| /** | ||
| * @param {?} fn | ||
| * @return {?} | ||
| */ | ||
| registerOnTouched(fn) { | ||
| this.onTouchedCallback = fn; | ||
| } | ||
| /** | ||
| * @param {?} index | ||
| * @param {?} item | ||
| * @return {?} | ||
| */ | ||
| trackByFn(index, item) { | ||
| return item.id; | ||
| } | ||
| /** | ||
| * @param {?} clickedItem | ||
| * @return {?} | ||
| */ | ||
| isSelected(clickedItem) { | ||
| let /** @type {?} */ found = false; | ||
| this.selectedItems && this.selectedItems.forEach(item => { | ||
| if (clickedItem.id === item.id) { | ||
| found = true; | ||
| } | ||
| }); | ||
| return found; | ||
| } | ||
| /** | ||
| * @param {?} item | ||
| * @return {?} | ||
| */ | ||
| addSelected(item) { | ||
| if (this.settings.singleSelection) { | ||
| this.selectedItems = []; | ||
| this.selectedItems.push(item); | ||
| } | ||
| else | ||
| this.selectedItems.push(item); | ||
| this.onChangeCallback(this.selectedItems); | ||
| } | ||
| /** | ||
| * @param {?} clickedItem | ||
| * @return {?} | ||
| */ | ||
| removeSelected(clickedItem) { | ||
| this.selectedItems && this.selectedItems.forEach(item => { | ||
| if (clickedItem.id === item.id) { | ||
| this.selectedItems.splice(this.selectedItems.indexOf(item), 1); | ||
| } | ||
| }); | ||
| this.onChangeCallback(this.selectedItems); | ||
| } | ||
| /** | ||
| * @param {?} evt | ||
| * @return {?} | ||
| */ | ||
| toggleDropdown(evt) { | ||
| this.isActive = !this.isActive; | ||
| evt.preventDefault(); | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| closeDropdown() { | ||
| this.isActive = false; | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| toggleSelectAll() { | ||
| if (!this.isSelectAll) { | ||
| this.selectedItems = []; | ||
| this.selectedItems = this.data.slice(); | ||
| this.isSelectAll = true; | ||
| this.onChangeCallback(this.selectedItems); | ||
| this.onSelectAll.emit(this.selectedItems); | ||
| } | ||
| else { | ||
| this.selectedItems = []; | ||
| this.isSelectAll = false; | ||
| this.onChangeCallback(this.selectedItems); | ||
| this.onDeSelectAll.emit(this.selectedItems); | ||
| } | ||
| } | ||
| } | ||
| AngularMultiSelect.decorators = [ | ||
| { type: Component, args: [{ | ||
| selector: 'angular2-multiselect', | ||
| template: "<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\"> <div class=\"selected-list\"> <button class=\"c-btn\" (click)=\"toggleDropdown($event)\" [disabled]=\"settings.disabled\" [ngClass]=\"{'disabled': settings.disabled}\"> <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span> <span *ngIf=\"settings.singleSelection\"> <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\"> {{item.itemName}} </span> </span> <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\"> <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\"> <span class=\"c-label\">{{item.itemName}}</span> <span class=\"fa fa-remove\" (click)=\"onItemClick(item)\" disabled=\"true\"></span> </div> </div> <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span> <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span> </button> </div> <div class=\"dropdown-list\" [hidden]=\"!isActive\"> <div class=\"arrow-up\"></div> <div class=\"list-area\"> <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\"> <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/> <label> <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span> <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span> </label> </div> <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\"> <span class=\"fa fa-search\"></span> <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\"> </div> <ul [style.maxHeight] = \"settings.maxHeight+'px'\"> <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i)\" class=\"pure-checkbox\"> <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/> <label>{{item.itemName}}</label> </li> </ul> <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5> </div> </div> </div>", | ||
| host: { '[class]': 'defaultSettings.classes' }, | ||
| styles: [".cuppa-dropdown { position: relative; } .c-btn { display: inline-block; background: #fff; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; color: #333; } .c-btn.disabled { background: #ccc; } .c-btn:focus { outline: none; } .selected-list .c-list { float: left; padding: 0px; margin: 0px; } .selected-list .c-list .c-token { list-style: none; padding: 0px 5px; background: #0079FE; color: #fff; border-radius: 2px; margin-right: 4px; float: left; } .selected-list .c-list .c-token .c-label { display: block; float: left; /*width: 50px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;*/ } .selected-list .c-list .c-token .fa-remove { margin-left: 1px; font-size: 12px; } .selected-list .fa-angle-down, .selected-list .fa-angle-up { font-size: 15pt; position: absolute; right: 10px; top: 25%; } .selected-list button { width: 100%; box-shadow: 0px 1px 5px #959595; padding: 10px; } .dropdown-list { position: absolute; padding-top: 14px; width: 100%; z-index: 9999; } .dropdown-list ul { padding: 0px; list-style: none; overflow: auto; margin: 0px; } .dropdown-list ul li { padding: 10px 10px; cursor: pointer; text-align: left; } .dropdown-list ul li:first-child { padding-top: 10px; } .dropdown-list ul li:last-child { padding-bottom: 10px; } .dropdown-list ul li:hover { background: #f5f5f5; } .dropdown-list ul::-webkit-scrollbar { width: 8px; } .dropdown-list ul::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 5px; } .dropdown-list ul::-webkit-scrollbar-track { background: #f2f2f2; } .arrow-up { width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 15px solid #fff; margin-left: 15px; position: absolute; top: 0; } .list-area { border: 1px solid #ccc; border-radius: 3px; background: #fff; margin: 0px; box-shadow: 0px 1px 5px #959595; } .select-all { padding: 10px; border-bottom: 1px solid #ccc; text-align: left; } .list-filter { border-bottom: 1px solid #ccc; position: relative; } .list-filter input { border: 0px; width: 100%; height: 35px; padding: 0px 0px 0px 35px; } .list-filter input:focus { outline: none; } .list-filter .fa { position: absolute; top: 10px; left: 13px; color: #888; } .pure-checkbox input[type=\"checkbox\"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .pure-checkbox input[type=\"checkbox\"]:focus + label:before, .pure-checkbox input[type=\"checkbox\"]:hover + label:before { border-color: #0079FE; background-color: #f2f2f2; } .pure-checkbox input[type=\"checkbox\"]:active + label:before { transition-duration: 0s; } .pure-checkbox input[type=\"checkbox\"] + label { position: relative; padding-left: 2em; vertical-align: middle; user-select: none; cursor: pointer; margin: 0px; color: #000; } .pure-checkbox input[type=\"checkbox\"] + label:before { box-sizing: content-box; content: ''; color: #0079FE; position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -9px; border: 2px solid #0079FE; text-align: center; transition: all 0.4s ease; } .pure-checkbox input[type=\"checkbox\"] + label:after { box-sizing: content-box; content: ''; background-color: #0079FE; position: absolute; top: 50%; left: 4px; width: 10px; height: 10px; margin-top: -5px; transform: scale(0); transform-origin: 50%; transition: transform 200ms ease-out; } .pure-checkbox input[type=\"checkbox\"]:disabled + label:before { border-color: #cccccc; } .pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before { background-color: inherit; } .pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before { background-color: #cccccc; } .pure-checkbox input[type=\"checkbox\"] + label:after { background-color: transparent; top: 50%; left: 4px; width: 8px; height: 3px; margin-top: -4px; border-style: solid; border-color: #ffffff; border-width: 0 0 3px 3px; border-image: none; transform: rotate(-45deg) scale(0); } .pure-checkbox input[type=\"checkbox\"]:checked + label:after { content: ''; transform: rotate(-45deg) scale(1); transition: transform 200ms ease-out; } .pure-checkbox input[type=\"radio\"]:checked + label:before { animation: borderscale 300ms ease-in; background-color: white; } .pure-checkbox input[type=\"radio\"]:checked + label:after { transform: scale(1); } .pure-checkbox input[type=\"radio\"] + label:before { border-radius: 50%; } .pure-checkbox input[type=\"checkbox\"]:checked + label:before { animation: borderscale 200ms ease-in; background: #0079FE; } .pure-checkbox input[type=\"checkbox\"]:checked + label:after { transform: rotate(-45deg) scale(1); } @keyframes borderscale { 50% { box-shadow: 0 0 0 2px #0079FE; } } .list-message { text-align: center; } "], | ||
| providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR] | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| AngularMultiSelect.ctorParameters = () => []; | ||
| AngularMultiSelect.propDecorators = { | ||
| 'data': [{ type: Input },], | ||
| 'settings': [{ type: Input },], | ||
| 'onSelect': [{ type: Output, args: ['onSelect',] },], | ||
| 'onDeSelect': [{ type: Output, args: ['onDeSelect',] },], | ||
| 'onSelectAll': [{ type: Output, args: ['onSelectAll',] },], | ||
| 'onDeSelectAll': [{ type: Output, args: ['onDeSelectAll',] },], | ||
| }; | ||
| class AngularMultiSelectModule { | ||
| } | ||
| AngularMultiSelectModule.decorators = [ | ||
| { type: NgModule, args: [{ | ||
| imports: [CommonModule, FormsModule], | ||
| declarations: [AngularMultiSelect, ClickOutsideDirective, ListFilterPipe], | ||
| exports: [AngularMultiSelect, ClickOutsideDirective, ListFilterPipe] | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| AngularMultiSelectModule.ctorParameters = () => []; | ||
| /** | ||
| * Generated bundle index. Do not edit. | ||
| */ | ||
| export { AngularMultiSelect, ClickOutsideDirective, ListFilterPipe, AngularMultiSelectModule, DROPDOWN_CONTROL_VALUE_ACCESSOR as ɵa }; | ||
| //# sourceMappingURL=angular2-multiselect-dropdown.js.map | ||
| export { AngularMultiSelect } from './angular2-multiselect-dropdown/multiselect.component'; | ||
| export { ClickOutsideDirective } from './angular2-multiselect-dropdown/clickOutside'; | ||
| export { ListFilterPipe } from './angular2-multiselect-dropdown/list-filter'; | ||
| export { AngularMultiSelectModule } from './angular2-multiselect-dropdown/multiselect.component'; | ||
| //# sourceMappingURL=angular2-multiselect-dropdown.js.map |
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":3,"metadata":{"ɵa":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMultiSelect"},"multi":true},"AngularMultiSelect":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular2-multiselect","template":"<div class=\"cuppa-dropdown\" (clickOutside)=\"closeDropdown()\"> <div class=\"selected-list\"> <button class=\"c-btn\" (click)=\"toggleDropdown($event)\" [disabled]=\"settings.disabled\" [ngClass]=\"{'disabled': settings.disabled}\"> <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span> <span *ngIf=\"settings.singleSelection\"> <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\"> {{item.itemName}} </span> </span> <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\"> <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\"> <span class=\"c-label\">{{item.itemName}}</span> <span class=\"fa fa-remove\" (click)=\"onItemClick(item)\" disabled=\"true\"></span> </div> </div> <span *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span> <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span> </button> </div> <div class=\"dropdown-list\" [hidden]=\"!isActive\"> <div class=\"arrow-up\"></div> <div class=\"list-area\"> <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\"> <input type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/> <label> <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span> <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span> </label> </div> <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter\"> <span class=\"fa fa-search\"></span> <input type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter.itemName\"> </div> <ul [style.maxHeight] = \"settings.maxHeight+'px'\"> <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i)\" class=\"pure-checkbox\"> <input type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/> <label>{{item.itemName}}</label> </li> </ul> <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">No Data Available</h5> </div> </div> </div>","host":{"[class]":"defaultSettings.classes"},"styles":[".cuppa-dropdown { position: relative; } .c-btn { display: inline-block; background: #fff; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; color: #333; } .c-btn.disabled { background: #ccc; } .c-btn:focus { outline: none; } .selected-list .c-list { float: left; padding: 0px; margin: 0px; } .selected-list .c-list .c-token { list-style: none; padding: 0px 5px; background: #0079FE; color: #fff; border-radius: 2px; margin-right: 4px; float: left; } .selected-list .c-list .c-token .c-label { display: block; float: left; /*width: 50px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;*/ } .selected-list .c-list .c-token .fa-remove { margin-left: 1px; font-size: 12px; } .selected-list .fa-angle-down, .selected-list .fa-angle-up { font-size: 15pt; position: absolute; right: 10px; top: 25%; } .selected-list button { width: 100%; box-shadow: 0px 1px 5px #959595; padding: 10px; } .dropdown-list { position: absolute; padding-top: 14px; width: 100%; z-index: 9999; } .dropdown-list ul { padding: 0px; list-style: none; overflow: auto; margin: 0px; } .dropdown-list ul li { padding: 10px 10px; cursor: pointer; text-align: left; } .dropdown-list ul li:first-child { padding-top: 10px; } .dropdown-list ul li:last-child { padding-bottom: 10px; } .dropdown-list ul li:hover { background: #f5f5f5; } .dropdown-list ul::-webkit-scrollbar { width: 8px; } .dropdown-list ul::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 5px; } .dropdown-list ul::-webkit-scrollbar-track { background: #f2f2f2; } .arrow-up { width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 15px solid #fff; margin-left: 15px; position: absolute; top: 0; } .list-area { border: 1px solid #ccc; border-radius: 3px; background: #fff; margin: 0px; box-shadow: 0px 1px 5px #959595; } .select-all { padding: 10px; border-bottom: 1px solid #ccc; text-align: left; } .list-filter { border-bottom: 1px solid #ccc; position: relative; } .list-filter input { border: 0px; width: 100%; height: 35px; padding: 0px 0px 0px 35px; } .list-filter input:focus { outline: none; } .list-filter .fa { position: absolute; top: 10px; left: 13px; color: #888; } .pure-checkbox input[type=\"checkbox\"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .pure-checkbox input[type=\"checkbox\"]:focus + label:before, .pure-checkbox input[type=\"checkbox\"]:hover + label:before { border-color: #0079FE; background-color: #f2f2f2; } .pure-checkbox input[type=\"checkbox\"]:active + label:before { transition-duration: 0s; } .pure-checkbox input[type=\"checkbox\"] + label { position: relative; padding-left: 2em; vertical-align: middle; user-select: none; cursor: pointer; margin: 0px; color: #000; } .pure-checkbox input[type=\"checkbox\"] + label:before { box-sizing: content-box; content: ''; color: #0079FE; position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -9px; border: 2px solid #0079FE; text-align: center; transition: all 0.4s ease; } .pure-checkbox input[type=\"checkbox\"] + label:after { box-sizing: content-box; content: ''; background-color: #0079FE; position: absolute; top: 50%; left: 4px; width: 10px; height: 10px; margin-top: -5px; transform: scale(0); transform-origin: 50%; transition: transform 200ms ease-out; } .pure-checkbox input[type=\"checkbox\"]:disabled + label:before { border-color: #cccccc; } .pure-checkbox input[type=\"checkbox\"]:disabled:focus + label:before .pure-checkbox input[type=\"checkbox\"]:disabled:hover + label:before { background-color: inherit; } .pure-checkbox input[type=\"checkbox\"]:disabled:checked + label:before { background-color: #cccccc; } .pure-checkbox input[type=\"checkbox\"] + label:after { background-color: transparent; top: 50%; left: 4px; width: 8px; height: 3px; margin-top: -4px; border-style: solid; border-color: #ffffff; border-width: 0 0 3px 3px; border-image: none; transform: rotate(-45deg) scale(0); } .pure-checkbox input[type=\"checkbox\"]:checked + label:after { content: ''; transform: rotate(-45deg) scale(1); transition: transform 200ms ease-out; } .pure-checkbox input[type=\"radio\"]:checked + label:before { animation: borderscale 300ms ease-in; background-color: white; } .pure-checkbox input[type=\"radio\"]:checked + label:after { transform: scale(1); } .pure-checkbox input[type=\"radio\"] + label:before { border-radius: 50%; } .pure-checkbox input[type=\"checkbox\"]:checked + label:before { animation: borderscale 200ms ease-in; background: #0079FE; } .pure-checkbox input[type=\"checkbox\"]:checked + label:after { transform: rotate(-45deg) scale(1); } @keyframes borderscale { 50% { box-shadow: 0 0 0 2px #0079FE; } } .list-message { text-align: center; } "],"providers":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelect"]}]}],"onDeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelect"]}]}],"onSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onSelectAll"]}]}],"onDeSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDeSelectAll"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByFn":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"addSelected":[{"__symbolic":"method"}],"removeSelected":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"toggleSelectAll":[{"__symbolic":"method"}]}},"ClickOutsideDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event","$event.target"]]}]}]}},"ListFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"listFilter","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}]}},"AngularMultiSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","name":"ClickOutsideDirective"},{"__symbolic":"reference","name":"ListFilterPipe"}],"exports":[{"__symbolic":"reference","name":"AngularMultiSelect"},{"__symbolic":"reference","name":"ClickOutsideDirective"},{"__symbolic":"reference","name":"ListFilterPipe"}]}]}],"members":{}}},"origins":{"ɵa":"./src/angular2-multiselect-dropdown/multiselect.component","AngularMultiSelect":"./src/angular2-multiselect-dropdown/multiselect.component","ClickOutsideDirective":"./src/angular2-multiselect-dropdown/clickOutside","ListFilterPipe":"./src/angular2-multiselect-dropdown/list-filter","AngularMultiSelectModule":"./src/angular2-multiselect-dropdown/multiselect.component"},"importAs":"angular2-multiselect-dropdown"} | ||
| [{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelect"]},{"from":"./angular2-multiselect-dropdown/clickOutside","export":["ClickOutsideDirective"]},{"from":"./angular2-multiselect-dropdown/list-filter","export":["ListFilterPipe"]},{"from":"./angular2-multiselect-dropdown/multiselect.component","export":["AngularMultiSelectModule"]}]}] |
@@ -1,4 +0,4 @@ | ||
| export { AngularMultiSelect } from './src/angular2-multiselect-dropdown/multiselect.component'; | ||
| export { ClickOutsideDirective } from './src/angular2-multiselect-dropdown/clickOutside'; | ||
| export { ListFilterPipe } from './src/angular2-multiselect-dropdown/list-filter'; | ||
| export { AngularMultiSelectModule } from './src/angular2-multiselect-dropdown/multiselect.component'; | ||
| export { AngularMultiSelect } from './angular2-multiselect-dropdown/multiselect.component'; | ||
| export { ClickOutsideDirective } from './angular2-multiselect-dropdown/clickOutside'; | ||
| export { ListFilterPipe } from './angular2-multiselect-dropdown/list-filter'; | ||
| export { AngularMultiSelectModule } from './angular2-multiselect-dropdown/multiselect.component'; |
111
package.json
| { | ||
| "name": "angular2-multiselect-dropdown", | ||
| "version": "1.2.3", | ||
| "version": "1.2.4", | ||
| "license": "MIT", | ||
| "angular-cli": {}, | ||
| "author":"Pradeep Terli", | ||
| "scripts": { | ||
| "ng": "ng", | ||
| "start": "ng serve", | ||
| "test": "ng test", | ||
| "lint": "ng lint", | ||
| "e2e": "ng e2e" | ||
| "e2e": "ng e2e", | ||
| "build": "npm run build:esm && npm run build:umd && gulp copy", | ||
| "build:esm": "gulp inline-templates && npm run ngcompile", | ||
| "build:esm:watch": "gulp build:esm:watch", | ||
| "build:umd": "webpack --config webpack-umd.config.ts", | ||
| "build:umd:watch": "npm run build:umd -- --watch", | ||
| "build:watch": "concurrently --raw \"npm run build:umd:watch\" \"npm run build:esm:watch\"", | ||
| "ci": "npm run lint && npm run test && npm run build && npm run docs", | ||
| "clean:all": "npm run clean:tmp && rimraf node_modules", | ||
| "clean:tmp": "rimraf coverage dist tmp docs", | ||
| "codecov": "cat coverage/lcov.info | codecov", | ||
| "docs": "compodoc -p tsconfig.json -d docs --disableCoverage --disablePrivateOrInternalSupport", | ||
| "explorer": "source-map-explorer ./dist/index.umd.js", | ||
| "gh-pages": "rimraf docs && npm run docs && gh-pages -d docs", | ||
| "lint": "npm run tslint 'src/**/*.ts'", | ||
| "ngcompile": "node_modules/.bin/ngc -p tsconfig-aot.json", | ||
| "postversion": "git push && git push --tags", | ||
| "prebuild": "rimraf dist tmp", | ||
| "prebuild:watch": "rimraf dist tmp", | ||
| "prepublishOnly": "npm run ci", | ||
| "preversion": "npm run ci", | ||
| "test": "karma start", | ||
| "test:watch": "karma start --auto-watch --no-single-run", | ||
| "tslint": "tslint", | ||
| "github-pages":"ng build --base-href /angular2-multiselect-dropdown/" | ||
| }, | ||
@@ -19,43 +42,51 @@ "private": false, | ||
| "devDependencies": { | ||
| "@angular/common": "^4.0.0", | ||
| "@angular/common": "^4.0.0", | ||
| "@angular/compiler": "^4.0.0", | ||
| "@angular/compiler-cli": "^4.0.0", | ||
| "@angular/cli": "^1.2.0", | ||
| "@angular/core": "^4.0.0", | ||
| "@angular/forms": "^4.0.0", | ||
| "@angular/http": "^4.0.0", | ||
| "@angular/forms": "^4.0.0", | ||
| "@angular/platform-browser": "^4.0.0", | ||
| "@angular/platform-browser-dynamic": "^4.0.0", | ||
| "@angular/router": "^4.0.0", | ||
| "@angular/cli": "*", | ||
| "@angular/compiler-cli": "^4.0.0", | ||
| "@types/jasmine": "2.5.38", | ||
| "@types/node": "~6.0.60", | ||
| "camelcase": "^4.0.0", | ||
| "concurrently": "3.4.0", | ||
| "core-js": "^2.4.1", | ||
| "glob": "^7.1.1", | ||
| "codelyzer": "~2.0.0", | ||
| "jasmine-core": "~2.5.2", | ||
| "jasmine-spec-reporter": "~3.2.0", | ||
| "karma": "~1.4.1", | ||
| "karma-chrome-launcher": "~2.0.0", | ||
| "karma-cli": "~1.0.1", | ||
| "karma-jasmine": "~1.1.0", | ||
| "karma-jasmine-html-reporter": "^0.2.2", | ||
| "karma-coverage-istanbul-reporter": "^0.2.0", | ||
| "lite-server": "^2.2.2", | ||
| "protractor": "~5.1.0", | ||
| "rimraf": "^2.6.1", | ||
| "rollup": "^0.42.0", | ||
| "rollup-plugin-sourcemaps": "^0.4.1", | ||
| "rollup-plugin-uglify": "^2.0.1", | ||
| "rollup-plugin-commonjs": "^8.0.2", | ||
| "rollup-plugin-node-resolve": "^3.0.0", | ||
| "rxjs": "^5.0.1", | ||
| "standard-version": "^4.0.0", | ||
| "systemjs": "^0.19.40", | ||
| "ts-node": "~2.0.0", | ||
| "tslint": "~4.5.0", | ||
| "typescript": "~2.2.0", | ||
| "zone.js": "^0.8.4" | ||
| "@compodoc/compodoc": "^1.0.0-beta.9", | ||
| "@types/jasmine": "^2.5.47", | ||
| "@types/karma": "^0.13.35", | ||
| "@types/node": "^7.0.18", | ||
| "@types/webpack": "^2.2.15", | ||
| "@types/webpack-env": "^1.13.0", | ||
| "angular2-template-loader": "^0.6.2", | ||
| "awesome-typescript-loader": "^3.1.3", | ||
| "codecov": "^2.2.0", | ||
| "codelyzer": "^3.0.1", | ||
| "concurrently": "^3.4.0", | ||
| "css-loader": "^0.28.1", | ||
| "gh-pages": "^1.0.0", | ||
| "gulp": "^3.9.1", | ||
| "gulp-copy":"^1.0.1", | ||
| "gulp-inline-ng2-template": "^4.0.0", | ||
| "istanbul-instrumenter-loader": "^2.0.0", | ||
| "jasmine-core": "^2.6.1", | ||
| "json-loader": "^0.5.4", | ||
| "karma": "^1.7.0", | ||
| "karma-chrome-launcher": "^2.1.1", | ||
| "karma-coverage-istanbul-reporter": "^1.2.1", | ||
| "karma-jasmine": "^1.1.0", | ||
| "karma-mocha-reporter": "^2.2.3", | ||
| "karma-sourcemap-loader": "^0.3.7", | ||
| "karma-webpack": "^2.0.3", | ||
| "node-sass": "^4.5.2", | ||
| "raw-loader": "^0.5.1", | ||
| "rimraf": "2.6.1", | ||
| "rxjs": "^5.3.1", | ||
| "sass-loader": "^6.0.5", | ||
| "source-map-explorer": "^1.3.3", | ||
| "to-string-loader": "^1.1.5", | ||
| "ts-node": "^3.0.4", | ||
| "tslint": "^5.2.0", | ||
| "typescript": "^2.3.2", | ||
| "webpack": "^2.5.1", | ||
| "webpack-angular-externals": "^1.0.2", | ||
| "webpack-rxjs-externals": "^1.0.0", | ||
| "zone.js": "^0.8.10" | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by86.81%
385319
- Number of package files
- increased by105.26%
39
- Lines of code
- increased by34.39%
1692
- Number of low maintenance alerts
- decreased by-50%
1
Worsened metrics
- Dev dependency count
- increased by20%
48
- Number of low quality alerts
- increased by50%
3
- Number of low supply chain risk alerts
- increased by22.22%
11
No dependency changes