ng-multiselect-dropdown
Version:
Angular Multi-Select Dropdown
441 lines (433 loc) • 33.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Pipe, EventEmitter, Directive, Output, HostListener, forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class ListItem {
id;
text;
isDisabled;
constructor(source) {
if (typeof source === 'string' || typeof source === 'number') {
this.id = this.text = source;
this.isDisabled = false;
}
if (typeof source === 'object') {
this.id = source.id;
this.text = source.text;
this.isDisabled = source.isDisabled;
}
}
}
class ListFilterPipe {
transform(items, filter) {
if (!items || !filter) {
return items;
}
return items.filter((item) => this.applyFilter(item, filter));
}
applyFilter(item, filter) {
if (typeof item.text === 'string' && typeof filter.text === 'string') {
return !(filter.text && item.text && item.text.toLowerCase().indexOf(filter.text.toLowerCase()) === -1);
}
else {
return !(filter.text && item.text && item.text.toString().toLowerCase().indexOf(filter.text.toString().toLowerCase()) === -1);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ListFilterPipe, name: "multiSelectFilter", pure: false });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ListFilterPipe, decorators: [{
type: Pipe,
args: [{
name: 'multiSelectFilter',
pure: false
}]
}] });
class ClickOutsideDirective {
_elementRef;
constructor(_elementRef) {
this._elementRef = _elementRef;
}
clickOutside = new EventEmitter();
onClick(event, targetElement) {
if (!targetElement) {
return;
}
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(event);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event,$event.target)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ClickOutsideDirective, decorators: [{
type: Directive,
args: [{
selector: '[clickOutside]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['document:click', ['$event', '$event.target']]
}] } });
const DROPDOWN_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MultiSelectComponent),
multi: true
};
const noop = () => { };
class MultiSelectComponent {
listFilterPipe;
cdr;
_settings;
_data = [];
selectedItems = [];
isDropdownOpen = true;
_placeholder = "Select";
_sourceDataType = null; // to keep note of the source data type. could be array of string/number/object
_sourceDataFields = []; // store source data fields names
filter = new ListItem(this.data);
defaultSettings = {
singleSelection: false,
idField: "id",
textField: "text",
disabledField: "isDisabled",
enableCheckAll: true,
selectAllText: "Select All",
unSelectAllText: "UnSelect All",
allowSearchFilter: false,
limitSelection: -1,
clearSearchFilter: true,
maxHeight: 197,
itemsShowLimit: 999999999999,
searchPlaceholderText: "Search",
noDataAvailablePlaceholderText: "No data available",
noFilteredDataAvailablePlaceholderText: "No filtered data available",
closeDropDownOnSelection: false,
showSelectedItemsAtTop: false,
defaultOpen: false,
allowRemoteDataSearch: false
};
set placeholder(value) {
if (value) {
this._placeholder = value;
}
else {
this._placeholder = "Select";
}
}
disabled = false;
set settings(value) {
if (value) {
this._settings = Object.assign(this.defaultSettings, value);
}
else {
this._settings = Object.assign(this.defaultSettings);
}
}
set data(value) {
if (!value) {
this._data = [];
}
else {
const firstItem = value[0];
this._sourceDataType = typeof firstItem;
this._sourceDataFields = this.getFields(firstItem);
this._data = value.map((item) => typeof item === "string" || typeof item === "number"
? new ListItem(item)
: new ListItem({
id: item[this._settings.idField],
text: item[this._settings.textField],
isDisabled: item[this._settings.disabledField]
}));
}
}
onFilterChange = new EventEmitter();
onDropDownClose = new EventEmitter();
onSelect = new EventEmitter();
onDeSelect = new EventEmitter();
onSelectAll = new EventEmitter();
onDeSelectAll = new EventEmitter();
onTouchedCallback = noop;
onChangeCallback = noop;
onFilterTextChange($event) {
this.onFilterChange.emit($event);
}
constructor(listFilterPipe, cdr) {
this.listFilterPipe = listFilterPipe;
this.cdr = cdr;
}
onItemClick($event, item) {
if (this.disabled || item.isDisabled) {
return false;
}
const found = this.isSelected(item);
const allowAdd = this._settings.limitSelection === -1 || (this._settings.limitSelection > 0 && this.selectedItems.length < this._settings.limitSelection);
if (!found) {
if (allowAdd) {
this.addSelected(item);
}
}
else {
this.removeSelected(item);
}
if (this._settings.singleSelection && this._settings.closeDropDownOnSelection) {
this.closeDropdown();
}
}
writeValue(value) {
if (value !== undefined && value !== null && value.length > 0) {
if (this._settings.singleSelection) {
try {
if (value.length >= 1) {
const firstItem = value[0];
this.selectedItems = [
typeof firstItem === "string" || typeof firstItem === "number"
? new ListItem(firstItem)
: new ListItem({
id: firstItem[this._settings.idField],
text: firstItem[this._settings.textField],
isDisabled: firstItem[this._settings.disabledField]
})
];
}
}
catch (e) {
// console.error(e.body.msg);
}
}
else {
const _data = value.map((item) => typeof item === "string" || typeof item === "number"
? new ListItem(item)
: new ListItem({
id: item[this._settings.idField],
text: item[this._settings.textField],
isDisabled: item[this._settings.disabledField]
}));
if (this._settings.limitSelection > 0) {
this.selectedItems = _data.splice(0, this._settings.limitSelection);
}
else {
this.selectedItems = _data;
}
}
}
else {
this.selectedItems = [];
}
this.onChangeCallback(value);
this.cdr.markForCheck();
}
// From ControlValueAccessor interface
registerOnChange(fn) {
this.onChangeCallback = fn;
}
// From ControlValueAccessor interface
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
// Set touched on blur
onTouched() {
// this.closeDropdown();
this.onTouchedCallback();
}
trackByFn(index, item) {
return item.id;
}
isSelected(clickedItem) {
let found = false;
this.selectedItems.forEach(item => {
if (clickedItem.id === item.id) {
found = true;
}
});
return found;
}
isLimitSelectionReached() {
return this._settings.limitSelection === this.selectedItems.length;
}
isAllItemsSelected() {
// get disabld item count
let filteredItems = this.listFilterPipe.transform(this._data, this.filter);
const itemDisabledCount = filteredItems.filter(item => item.isDisabled).length;
// take disabled items into consideration when checking
if ((!this.data || this.data.length === 0) && this._settings.allowRemoteDataSearch) {
return false;
}
return filteredItems.length === this.selectedItems.length + itemDisabledCount;
}
showButton() {
if (!this._settings.singleSelection) {
if (this._settings.limitSelection > 0) {
return false;
}
// this._settings.enableCheckAll = this._settings.limitSelection === -1 ? true : false;
return true; // !this._settings.singleSelection && this._settings.enableCheckAll && this._data.length > 0;
}
else {
// should be disabled in single selection mode
return false;
}
}
itemShowRemaining() {
return this.selectedItems.length - this._settings.itemsShowLimit;
}
addSelected(item) {
if (this._settings.singleSelection) {
this.selectedItems = [];
this.selectedItems.push(item);
}
else {
this.selectedItems.push(item);
}
this.onChangeCallback(this.emittedValue(this.selectedItems));
this.onSelect.emit(this.emittedValue(item));
}
removeSelected(itemSel) {
this.selectedItems.forEach(item => {
if (itemSel.id === item.id) {
this.selectedItems.splice(this.selectedItems.indexOf(item), 1);
}
});
this.onChangeCallback(this.emittedValue(this.selectedItems));
this.onDeSelect.emit(this.emittedValue(itemSel));
}
emittedValue(val) {
const selected = [];
if (Array.isArray(val)) {
val.map(item => {
selected.push(this.objectify(item));
});
}
else {
if (val) {
return this.objectify(val);
}
}
return selected;
}
objectify(val) {
if (this._sourceDataType === 'object') {
const obj = {};
obj[this._settings.idField] = val.id;
obj[this._settings.textField] = val.text;
if (this._sourceDataFields.includes(this._settings.disabledField)) {
obj[this._settings.disabledField] = val.isDisabled;
}
return obj;
}
if (this._sourceDataType === 'number') {
return Number(val.id);
}
else {
return val.text;
}
}
toggleDropdown(evt) {
evt.preventDefault();
if (this.disabled && this._settings.singleSelection) {
return;
}
this._settings.defaultOpen = !this._settings.defaultOpen;
if (!this._settings.defaultOpen) {
this.onDropDownClose.emit();
}
}
closeDropdown() {
this._settings.defaultOpen = false;
// clear search text
if (this._settings.clearSearchFilter) {
this.filter.text = "";
}
this.onDropDownClose.emit();
}
toggleSelectAll() {
if (this.disabled) {
return false;
}
if (!this.isAllItemsSelected()) {
// filter out disabled item first before slicing
this.selectedItems = this.listFilterPipe.transform(this._data, this.filter).filter(item => !item.isDisabled).slice();
this.onSelectAll.emit(this.emittedValue(this.selectedItems));
}
else {
this.selectedItems = [];
this.onDeSelectAll.emit(this.emittedValue(this.selectedItems));
}
this.onChangeCallback(this.emittedValue(this.selectedItems));
}
getFields(inputData) {
const fields = [];
if (typeof inputData !== "object") {
return fields;
}
// tslint:disable-next-line:forin
for (const prop in inputData) {
fields.push(prop);
}
return fields;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MultiSelectComponent, deps: [{ token: ListFilterPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MultiSelectComponent, selector: "ng-multiselect-dropdown", inputs: { placeholder: "placeholder", disabled: "disabled", settings: "settings", data: "data" }, outputs: { onFilterChange: "onFilterChange", onDropDownClose: "onDropDownClose", onSelect: "onSelect", onDeSelect: "onDeSelect", onSelectAll: "onSelectAll", onDeSelectAll: "onDeSelectAll" }, host: { listeners: { "blur": "onTouched()" } }, providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div tabindex=\"0\" (blur)=\"onTouched()\" class=\"multiselect-dropdown\" (clickOutside)=\"closeDropdown()\">\n <div [class.disabled]=\"disabled\">\n <span tabindex=\"-1\" class=\"dropdown-btn\" (click)=\"toggleDropdown($event)\">\n <span *ngIf=\"selectedItems.length == 0\">{{_placeholder}}</span>\n <span *ngFor=\"let item of selectedItems; trackBy: trackByFn;let k = index\" class=\"selected-item-container\" >\n <span class=\"selected-item\" [hidden]=\"k > (this._settings.itemsShowLimit-1)\">\n <span >{{item.text}} </span>\n <a style=\"padding-left:2px;color:white\" (click)=\"onItemClick($event,item)\">x</a>\n </span>\n \n </span>\n <span [ngClass]=\"{ 'dropdown-multiselect--active': _settings.defaultOpen }\" style=\"float:right !important;padding-right:4px\">\n <span style=\"padding-right: 15px;\" *ngIf=\"itemShowRemaining()>0\">+{{itemShowRemaining()}}</span>\n <span class=\"dropdown-multiselect__caret\"></span>\n </span>\n </span>\n </div>\n <div class=\"dropdown-list\" [hidden]=\"!_settings.defaultOpen\">\n <ul class=\"item1\">\n <li (click)=\"toggleSelectAll()\" *ngIf=\"(_data.length > 0 || _settings.allowRemoteDataSearch) && !_settings.singleSelection && _settings.enableCheckAll && _settings.limitSelection===-1\" class=\"multiselect-item-checkbox\" style=\"border-bottom: 1px solid #ccc;padding:10px\">\n <input type=\"checkbox\" aria-label=\"multiselect-select-all\" [checked]=\"isAllItemsSelected()\" [disabled]=\"disabled || isLimitSelectionReached()\" />\n <div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>\n </li>\n <li class=\"filter-textbox\" *ngIf=\"(_data.length>0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter\">\n <input type=\"text\" aria-label=\"multiselect-search\" [readOnly]=\"disabled\" [placeholder]=\"_settings.searchPlaceholderText\" [(ngModel)]=\"filter.text\" (ngModelChange)=\"onFilterTextChange($event)\">\n </li>\n </ul>\n <ul class=\"item2\" [style.maxHeight]=\"_settings.maxHeight+'px'\">\n <li *ngFor=\"let item of _data | multiSelectFilter:filter; let i = index;\" (click)=\"onItemClick($event,item)\" class=\"multiselect-item-checkbox\">\n <input type=\"checkbox\" [attr.aria-label]=\"item.text\" [checked]=\"isSelected(item)\" [disabled]=\"disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled\" />\n <div>{{item.text}}</div>\n </li>\n <li class='no-filtered-data' *ngIf=\"_data.length != 0 && (_data | multiSelectFilter:filter).length == 0 && !_settings.allowRemoteDataSearch\">\n <h5>{{_settings.noFilteredDataAvailablePlaceholderText}}</h5>\n </li>\n <li class='no-data' *ngIf=\"_data.length == 0 && !_settings.allowRemoteDataSearch\">\n <h5>{{_settings.noDataAvailablePlaceholderText}}</h5>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".multiselect-dropdown{position:relative;width:100%;font-size:inherit;font-family:inherit}.multiselect-dropdown .dropdown-btn{display:inline-block;border:1px solid #adadad;width:100%;padding:6px 12px;margin-bottom:0;font-weight:400;line-height:1.52857143;text-align:left;vertical-align:middle;cursor:pointer;background-image:none;border-radius:4px}.multiselect-dropdown .dropdown-btn .selected-item-container{display:flex;float:left}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item{border:1px solid #337ab7;margin-right:4px;background:#337ab7;padding:0 5px;color:#fff;border-radius:2px;float:left;max-width:100px}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item span{overflow:hidden;text-overflow:ellipsis}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item a{text-decoration:none}.multiselect-dropdown .dropdown-btn .selected-item:hover{box-shadow:1px 1px #959595}.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret{line-height:16px;display:block;position:absolute;box-sizing:border-box;width:40px;height:38px;right:1px;top:0;padding:4px 8px;margin:0;text-decoration:none;text-align:center;cursor:pointer;transition:transform .2s ease}.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-style:solid;border-width:8px 8px 0 8px;border-color:#999999 transparent;content:\"\"}.multiselect-dropdown .dropdown-btn .dropdown-multiselect--active .dropdown-multiselect__caret{transform:rotate(180deg)}.multiselect-dropdown .disabled>span{background-color:#eceeef}.dropdown-list{position:absolute;padding-top:6px;width:100%;z-index:9999;border:1px solid #ccc;border-radius:3px;background:#fff;margin-top:10px;box-shadow:0 1px 5px #959595}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list li{padding:6px 10px;cursor:pointer;text-align:left}.dropdown-list .filter-textbox{border-bottom:1px solid #ccc;position:relative;padding:10px}.dropdown-list .filter-textbox input{border:0px;width:100%;padding:0 0 0 26px}.dropdown-list .filter-textbox input:focus{outline:none}.multiselect-item-checkbox:hover{background-color:#e4e3e3}.multiselect-item-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.multiselect-item-checkbox input[type=checkbox]:focus+div:before,.multiselect-item-checkbox input[type=checkbox]:hover+div:before{border-color:#337ab7;background-color:#f2f2f2}.multiselect-item-checkbox input[type=checkbox]:active+div:before{transition-duration:0s}.multiselect-item-checkbox input[type=checkbox]+div{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000}.multiselect-item-checkbox input[type=checkbox]+div:before{box-sizing:content-box;content:\"\";color:#337ab7;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #337ab7;text-align:center;transition:all .4s ease}.multiselect-item-checkbox input[type=checkbox]+div:after{box-sizing:content-box;content:\"\";background-color:#337ab7;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.multiselect-item-checkbox input[type=checkbox]:disabled+div:before{border-color:#ccc}.multiselect-item-checkbox input[type=checkbox]:disabled:focus+div:before .multiselect-item-checkbox input[type=checkbox]:disabled:hover+div:before{background-color:inherit}.multiselect-item-checkbox input[type=checkbox]:disabled:checked+div:before{background-color:#ccc}.multiselect-item-checkbox input[type=checkbox]+div:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.multiselect-item-checkbox input[type=checkbox]:checked+div:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.multiselect-item-checkbox input[type=checkbox]:checked+div:before{animation:borderscale .2s ease-in;background:#337ab7}.multiselect-item-checkbox input[type=checkbox]:checked+div:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #337ab7}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: ListFilterPipe, name: "multiSelectFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MultiSelectComponent, decorators: [{
type: Component,
args: [{ selector: "ng-multiselect-dropdown", providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div tabindex=\"0\" (blur)=\"onTouched()\" class=\"multiselect-dropdown\" (clickOutside)=\"closeDropdown()\">\n <div [class.disabled]=\"disabled\">\n <span tabindex=\"-1\" class=\"dropdown-btn\" (click)=\"toggleDropdown($event)\">\n <span *ngIf=\"selectedItems.length == 0\">{{_placeholder}}</span>\n <span *ngFor=\"let item of selectedItems; trackBy: trackByFn;let k = index\" class=\"selected-item-container\" >\n <span class=\"selected-item\" [hidden]=\"k > (this._settings.itemsShowLimit-1)\">\n <span >{{item.text}} </span>\n <a style=\"padding-left:2px;color:white\" (click)=\"onItemClick($event,item)\">x</a>\n </span>\n \n </span>\n <span [ngClass]=\"{ 'dropdown-multiselect--active': _settings.defaultOpen }\" style=\"float:right !important;padding-right:4px\">\n <span style=\"padding-right: 15px;\" *ngIf=\"itemShowRemaining()>0\">+{{itemShowRemaining()}}</span>\n <span class=\"dropdown-multiselect__caret\"></span>\n </span>\n </span>\n </div>\n <div class=\"dropdown-list\" [hidden]=\"!_settings.defaultOpen\">\n <ul class=\"item1\">\n <li (click)=\"toggleSelectAll()\" *ngIf=\"(_data.length > 0 || _settings.allowRemoteDataSearch) && !_settings.singleSelection && _settings.enableCheckAll && _settings.limitSelection===-1\" class=\"multiselect-item-checkbox\" style=\"border-bottom: 1px solid #ccc;padding:10px\">\n <input type=\"checkbox\" aria-label=\"multiselect-select-all\" [checked]=\"isAllItemsSelected()\" [disabled]=\"disabled || isLimitSelectionReached()\" />\n <div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>\n </li>\n <li class=\"filter-textbox\" *ngIf=\"(_data.length>0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter\">\n <input type=\"text\" aria-label=\"multiselect-search\" [readOnly]=\"disabled\" [placeholder]=\"_settings.searchPlaceholderText\" [(ngModel)]=\"filter.text\" (ngModelChange)=\"onFilterTextChange($event)\">\n </li>\n </ul>\n <ul class=\"item2\" [style.maxHeight]=\"_settings.maxHeight+'px'\">\n <li *ngFor=\"let item of _data | multiSelectFilter:filter; let i = index;\" (click)=\"onItemClick($event,item)\" class=\"multiselect-item-checkbox\">\n <input type=\"checkbox\" [attr.aria-label]=\"item.text\" [checked]=\"isSelected(item)\" [disabled]=\"disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled\" />\n <div>{{item.text}}</div>\n </li>\n <li class='no-filtered-data' *ngIf=\"_data.length != 0 && (_data | multiSelectFilter:filter).length == 0 && !_settings.allowRemoteDataSearch\">\n <h5>{{_settings.noFilteredDataAvailablePlaceholderText}}</h5>\n </li>\n <li class='no-data' *ngIf=\"_data.length == 0 && !_settings.allowRemoteDataSearch\">\n <h5>{{_settings.noDataAvailablePlaceholderText}}</h5>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".multiselect-dropdown{position:relative;width:100%;font-size:inherit;font-family:inherit}.multiselect-dropdown .dropdown-btn{display:inline-block;border:1px solid #adadad;width:100%;padding:6px 12px;margin-bottom:0;font-weight:400;line-height:1.52857143;text-align:left;vertical-align:middle;cursor:pointer;background-image:none;border-radius:4px}.multiselect-dropdown .dropdown-btn .selected-item-container{display:flex;float:left}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item{border:1px solid #337ab7;margin-right:4px;background:#337ab7;padding:0 5px;color:#fff;border-radius:2px;float:left;max-width:100px}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item span{overflow:hidden;text-overflow:ellipsis}.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item a{text-decoration:none}.multiselect-dropdown .dropdown-btn .selected-item:hover{box-shadow:1px 1px #959595}.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret{line-height:16px;display:block;position:absolute;box-sizing:border-box;width:40px;height:38px;right:1px;top:0;padding:4px 8px;margin:0;text-decoration:none;text-align:center;cursor:pointer;transition:transform .2s ease}.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-style:solid;border-width:8px 8px 0 8px;border-color:#999999 transparent;content:\"\"}.multiselect-dropdown .dropdown-btn .dropdown-multiselect--active .dropdown-multiselect__caret{transform:rotate(180deg)}.multiselect-dropdown .disabled>span{background-color:#eceeef}.dropdown-list{position:absolute;padding-top:6px;width:100%;z-index:9999;border:1px solid #ccc;border-radius:3px;background:#fff;margin-top:10px;box-shadow:0 1px 5px #959595}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list li{padding:6px 10px;cursor:pointer;text-align:left}.dropdown-list .filter-textbox{border-bottom:1px solid #ccc;position:relative;padding:10px}.dropdown-list .filter-textbox input{border:0px;width:100%;padding:0 0 0 26px}.dropdown-list .filter-textbox input:focus{outline:none}.multiselect-item-checkbox:hover{background-color:#e4e3e3}.multiselect-item-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.multiselect-item-checkbox input[type=checkbox]:focus+div:before,.multiselect-item-checkbox input[type=checkbox]:hover+div:before{border-color:#337ab7;background-color:#f2f2f2}.multiselect-item-checkbox input[type=checkbox]:active+div:before{transition-duration:0s}.multiselect-item-checkbox input[type=checkbox]+div{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;user-select:none;cursor:pointer;margin:0;color:#000}.multiselect-item-checkbox input[type=checkbox]+div:before{box-sizing:content-box;content:\"\";color:#337ab7;position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-9px;border:2px solid #337ab7;text-align:center;transition:all .4s ease}.multiselect-item-checkbox input[type=checkbox]+div:after{box-sizing:content-box;content:\"\";background-color:#337ab7;position:absolute;top:50%;left:4px;width:10px;height:10px;margin-top:-5px;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out}.multiselect-item-checkbox input[type=checkbox]:disabled+div:before{border-color:#ccc}.multiselect-item-checkbox input[type=checkbox]:disabled:focus+div:before .multiselect-item-checkbox input[type=checkbox]:disabled:hover+div:before{background-color:inherit}.multiselect-item-checkbox input[type=checkbox]:disabled:checked+div:before{background-color:#ccc}.multiselect-item-checkbox input[type=checkbox]+div:after{background-color:transparent;top:50%;left:4px;width:8px;height:3px;margin-top:-4px;border-style:solid;border-color:#fff;border-width:0 0 3px 3px;border-image:none;transform:rotate(-45deg) scale(0)}.multiselect-item-checkbox input[type=checkbox]:checked+div:after{content:\"\";transform:rotate(-45deg) scale(1);transition:transform .2s ease-out}.multiselect-item-checkbox input[type=checkbox]:checked+div:before{animation:borderscale .2s ease-in;background:#337ab7}.multiselect-item-checkbox input[type=checkbox]:checked+div:after{transform:rotate(-45deg) scale(1)}@keyframes borderscale{50%{box-shadow:0 0 0 2px #337ab7}}\n"] }]
}], ctorParameters: function () { return [{ type: ListFilterPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
type: Input
}], disabled: [{
type: Input
}], settings: [{
type: Input
}], data: [{
type: Input
}], onFilterChange: [{
type: Output,
args: ["onFilterChange"]
}], onDropDownClose: [{
type: Output,
args: ["onDropDownClose"]
}], onSelect: [{
type: Output,
args: ["onSelect"]
}], onDeSelect: [{
type: Output,
args: ["onDeSelect"]
}], onSelectAll: [{
type: Output,
args: ["onSelectAll"]
}], onDeSelectAll: [{
type: Output,
args: ["onDeSelectAll"]
}], onTouched: [{
type: HostListener,
args: ["blur"]
}] } });
class NgMultiSelectDropDownModule {
static forRoot() {
return {
ngModule: NgMultiSelectDropDownModule
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgMultiSelectDropDownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: NgMultiSelectDropDownModule, declarations: [MultiSelectComponent, ClickOutsideDirective, ListFilterPipe], imports: [CommonModule, FormsModule], exports: [MultiSelectComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgMultiSelectDropDownModule, providers: [ListFilterPipe], imports: [CommonModule, FormsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgMultiSelectDropDownModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule],
declarations: [MultiSelectComponent, ClickOutsideDirective, ListFilterPipe],
providers: [ListFilterPipe],
exports: [MultiSelectComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MultiSelectComponent, NgMultiSelectDropDownModule };
//# sourceMappingURL=ng-multiselect-dropdown.mjs.map