ngu-multiselect-dropdown
Version:
Angular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source and custom filter.
741 lines (732 loc) • 29.8 kB
JavaScript
import { Pipe, forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, HostListener, Directive, ElementRef, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: lib/multiselect-dropdown.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function IDropdownSettings() { }
if (false) {
/** @type {?|undefined} */
IDropdownSettings.prototype.singleSelection;
/** @type {?|undefined} */
IDropdownSettings.prototype.idField;
/** @type {?|undefined} */
IDropdownSettings.prototype.textField;
/** @type {?|undefined} */
IDropdownSettings.prototype.disabledField;
/** @type {?|undefined} */
IDropdownSettings.prototype.enableCheckAll;
/** @type {?|undefined} */
IDropdownSettings.prototype.selectAllText;
/** @type {?|undefined} */
IDropdownSettings.prototype.unSelectAllText;
/** @type {?|undefined} */
IDropdownSettings.prototype.allowSearchFilter;
/** @type {?|undefined} */
IDropdownSettings.prototype.clearSearchFilter;
/** @type {?|undefined} */
IDropdownSettings.prototype.maxHeight;
/** @type {?|undefined} */
IDropdownSettings.prototype.itemsShowLimit;
/** @type {?|undefined} */
IDropdownSettings.prototype.limitSelection;
/** @type {?|undefined} */
IDropdownSettings.prototype.searchPlaceholderText;
/** @type {?|undefined} */
IDropdownSettings.prototype.noDataAvailablePlaceholderText;
/** @type {?|undefined} */
IDropdownSettings.prototype.closeDropDownOnSelection;
/** @type {?|undefined} */
IDropdownSettings.prototype.showSelectedItemsAtTop;
/** @type {?|undefined} */
IDropdownSettings.prototype.defaultOpen;
/** @type {?|undefined} */
IDropdownSettings.prototype.allowRemoteDataSearch;
}
class ListItem {
/**
* @param {?} source
*/
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;
}
}
}
if (false) {
/** @type {?} */
ListItem.prototype.id;
/** @type {?} */
ListItem.prototype.text;
/** @type {?} */
ListItem.prototype.isDisabled;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/list-filter.pipe.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ListFilterPipe {
/**
* @param {?} items
* @param {?} filter
* @return {?}
*/
transform(items, filter) {
if (!items || !filter) {
return items;
}
return items.filter((/**
* @param {?} item
* @return {?}
*/
(item) => this.applyFilter(item, filter)));
}
/**
* @param {?} item
* @param {?} filter
* @return {?}
*/
applyFilter(item, filter) {
if (typeof item.text === 'string' && typeof filter.text === 'string') {
if (item.text == "Others") {
return true;
}
else {
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);
}
}
}
ListFilterPipe.decorators = [
{ type: Pipe, args: [{
name: 'multiSelectFilter',
pure: false
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/multiselect-dropdown.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DROPDOWN_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => MultiselectDropdownComponent)),
multi: true
};
/** @type {?} */
const noop = (/**
* @return {?}
*/
() => { });
const ɵ0 = noop;
class MultiselectDropdownComponent {
/**
* @param {?} cdr
* @param {?} listFilterPipe
*/
constructor(cdr, listFilterPipe) {
this.cdr = cdr;
this.listFilterPipe = listFilterPipe;
this._data = [];
this.selectedItems = [];
this.isDropdownOpen = true;
this._placeholder = "Select";
this._sourceDataType = null; // to keep note of the source data type. could be array of string/number/object
// to keep note of the source data type. could be array of string/number/object
this._sourceDataFields = []; // store source data fields names
// store source data fields names
this.filter = new ListItem(this.data);
this.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",
closeDropDownOnSelection: false,
showSelectedItemsAtTop: false,
defaultOpen: false,
allowRemoteDataSearch: false,
};
this.disabled = false;
this.onFilterChange = new EventEmitter();
this.onDropDownClose = new EventEmitter();
this.onSelect = new EventEmitter();
this.onDeSelect = new EventEmitter();
this.onSelectAll = new EventEmitter();
this.onDeSelectAll = new EventEmitter();
this.onTouchedCallback = noop;
this.onChangeCallback = noop;
}
/**
* @param {?} value
* @return {?}
*/
set placeholder(value) {
if (value) {
this._placeholder = value;
}
else {
this._placeholder = "Select";
}
}
/**
* @param {?} value
* @return {?}
*/
set settings(value) {
if (value) {
this._settings = Object.assign(this.defaultSettings, value);
}
else {
this._settings = Object.assign(this.defaultSettings);
}
}
/**
* @param {?} value
* @return {?}
*/
set data(value) {
if (!value) {
this._data = [];
}
else {
/** @type {?} */
const firstItem = value[0];
this._sourceDataType = typeof firstItem;
this._sourceDataFields = this.getFields(firstItem);
this._data = value.map((/**
* @param {?} item
* @return {?}
*/
(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]
})));
}
}
/**
* @param {?} $event
* @return {?}
*/
onFilterTextChange($event) {
this.onFilterChange.emit($event);
}
/**
* @param {?} $event
* @param {?} item
* @return {?}
*/
onItemClick($event, item) {
if (this.disabled || item.isDisabled) {
return false;
}
/** @type {?} */
const found = this.isSelected(item);
/** @type {?} */
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();
}
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value !== undefined && value !== null && value.length > 0) {
if (this._settings.singleSelection) {
try {
if (value.length >= 1) {
/** @type {?} */
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 {
/** @type {?} */
const _data = value.map((/**
* @param {?} item
* @return {?}
*/
(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);
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
// Set touched on blur
/**
* @return {?}
*/
onTouched() {
this.closeDropdown();
this.onTouchedCallback();
}
/**
* @param {?} index
* @param {?} item
* @return {?}
*/
trackByFn(index, item) {
return item.id;
}
/**
* @param {?} clickedItem
* @return {?}
*/
isSelected(clickedItem) {
/** @type {?} */
let found = false;
this.selectedItems.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (clickedItem.id === item.id) {
found = true;
}
}));
return found;
}
/**
* @return {?}
*/
isLimitSelectionReached() {
return this._settings.limitSelection === this.selectedItems.length;
}
/**
* @return {?}
*/
isAllItemsSelected() {
// get disabld item count
/** @type {?} */
let filteredItems = this.listFilterPipe.transform(this._data, this.filter);
/** @type {?} */
const itemDisabledCount = filteredItems.filter((/**
* @param {?} item
* @return {?}
*/
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;
}
/**
* @return {?}
*/
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;
}
}
/**
* @return {?}
*/
itemShowRemaining() {
return this.selectedItems.length - this._settings.itemsShowLimit;
}
/**
* @param {?} item
* @return {?}
*/
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));
}
/**
* @param {?} itemSel
* @return {?}
*/
removeSelected(itemSel) {
this.selectedItems.forEach((/**
* @param {?} item
* @return {?}
*/
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));
}
/**
* @param {?} val
* @return {?}
*/
emittedValue(val) {
/** @type {?} */
const selected = [];
if (Array.isArray(val)) {
val.map((/**
* @param {?} item
* @return {?}
*/
item => {
selected.push(this.objectify(item));
}));
}
else {
if (val) {
return this.objectify(val);
}
}
return selected;
}
/**
* @param {?} val
* @return {?}
*/
objectify(val) {
if (this._sourceDataType === 'object') {
/** @type {?} */
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;
}
}
/**
* @param {?} evt
* @return {?}
*/
toggleDropdown(evt) {
evt.preventDefault();
if (this.disabled && this._settings.singleSelection) {
return;
}
this._settings.defaultOpen = !this._settings.defaultOpen;
if (!this._settings.defaultOpen) {
this.onDropDownClose.emit();
}
}
/**
* @return {?}
*/
closeDropdown() {
this._settings.defaultOpen = false;
// clear search text
if (this._settings.clearSearchFilter) {
this.filter.text = "";
}
this.onDropDownClose.emit();
}
/**
* @return {?}
*/
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((/**
* @param {?} item
* @return {?}
*/
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));
}
/**
* @param {?} inputData
* @return {?}
*/
getFields(inputData) {
/** @type {?} */
const fields = [];
if (typeof inputData !== "object") {
return fields;
}
// tslint:disable-next-line:forin
for (const prop in inputData) {
fields.push(prop);
}
return fields;
}
}
MultiselectDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'nu-multiselect-dropdown',
template: "<div tabindex=\"=0\" (blur)=\"onTouched()\" class=\"multiselect-dropdown\" (clickOutside)=\"closeDropdown()\">\r\n <div [class.disabled]=\"disabled\">\r\n <span tabindex=\"-1\" class=\"dropdown-btn\" (click)=\"toggleDropdown($event)\">\r\n <span *ngIf=\"selectedItems.length == 0\">{{_placeholder}}</span>\r\n <span class=\"selected-item\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > _settings.itemsShowLimit-1\">\r\n {{item.text}}\r\n <a style=\"padding-top:2px;padding-left:2px;color:white\" (click)=\"onItemClick($event,item)\">x</a>\r\n </span>\r\n <span style=\"float:right !important;padding-right:4px\">\r\n <span style=\"padding-right: 6px;\" *ngIf=\"itemShowRemaining()>0\">+{{itemShowRemaining()}}</span>\r\n <span [ngClass]=\"_settings.defaultOpen ? 'dropdown-up' : 'dropdown-down'\"></span>\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"dropdown-list\" [hidden]=\"!_settings.defaultOpen\">\r\n <ul class=\"item1\">\r\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\">\r\n <input type=\"checkbox\" aria-label=\"multiselect-select-all\" [checked]=\"isAllItemsSelected()\" [disabled]=\"disabled || isLimitSelectionReached()\" />\r\n <div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>\r\n </li>\r\n <li class=\"filter-textbox\" *ngIf=\"(_data.length>0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter\">\r\n <input type=\"text\" aria-label=\"multiselect-search\" [readOnly]=\"disabled\" [placeholder]=\"_settings.searchPlaceholderText\" [(ngModel)]=\"filter.text\" (ngModelChange)=\"onFilterTextChange($event)\">\r\n </li>\r\n </ul>\r\n <ul class=\"item2\" [style.maxHeight]=\"_settings.maxHeight+'px'\">\r\n <li *ngFor=\"let item of _data | multiSelectFilter:filter; let i = index;\" (click)=\"onItemClick($event,item)\" class=\"multiselect-item-checkbox\">\r\n <input type=\"checkbox\" aria-label=\"multiselect-item\" [checked]=\"isSelected(item)\" [disabled]=\"disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled\" />\r\n <div>{{item.text}}</div>\r\n </li>\r\n <li class='no-data' *ngIf=\"_data.length == 0 && !_settings.allowRemoteDataSearch\">\r\n <h5>{{_settings.noDataAvailablePlaceholderText}}</h5>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n ",
providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR],
changeDetection: ChangeDetectionStrategy.OnPush,
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{border:1px solid #337ab7;margin-right:4px;background:#337ab7;padding:0 5px;color:#fff;border-radius:2px;float:left}.multiselect-dropdown .dropdown-btn .selected-item a{text-decoration:none}.multiselect-dropdown .dropdown-btn .selected-item:hover{box-shadow:1px 1px #959595}.multiselect-dropdown .dropdown-btn .dropdown-down{display:inline-block;top:10px;width:0;height:0;border-top:10px solid #adadad;border-left:10px solid transparent;border-right:10px solid transparent}.multiselect-dropdown .dropdown-btn .dropdown-up{display:inline-block;width:0;height:0;border-bottom:10px solid #adadad;border-left:10px solid transparent;border-right:10px solid transparent}.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:0;width:100%;padding:0 0 0 26px}.dropdown-list .filter-textbox input:focus{outline:0}.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;-moz-user-select:none;-ms-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:.4s}.multiselect-item-checkbox input[type=checkbox]+div:after{box-sizing:content-box;content:\"\";position:absolute;transform:scale(0);transform-origin:50%;transition:transform .2s ease-out;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;-o-border-image:none;border-image:none;transform:rotate(-45deg) scale(0)}.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]:checked+div:after{content:\"\";transition:transform .2s ease-out;transform:rotate(-45deg) scale(1)}.multiselect-item-checkbox input[type=checkbox]:checked+div:before{-webkit-animation:.2s ease-in borderscale;animation:.2s ease-in borderscale;background:#337ab7}@-webkit-keyframes borderscale{50%{box-shadow:0 0 0 2px #337ab7}}@keyframes borderscale{50%{box-shadow:0 0 0 2px #337ab7}}"]
}] }
];
/** @nocollapse */
MultiselectDropdownComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ListFilterPipe }
];
MultiselectDropdownComponent.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",] }]
};
if (false) {
/** @type {?} */
MultiselectDropdownComponent.prototype._settings;
/** @type {?} */
MultiselectDropdownComponent.prototype._data;
/** @type {?} */
MultiselectDropdownComponent.prototype.selectedItems;
/** @type {?} */
MultiselectDropdownComponent.prototype.isDropdownOpen;
/** @type {?} */
MultiselectDropdownComponent.prototype._placeholder;
/**
* @type {?}
* @private
*/
MultiselectDropdownComponent.prototype._sourceDataType;
/**
* @type {?}
* @private
*/
MultiselectDropdownComponent.prototype._sourceDataFields;
/** @type {?} */
MultiselectDropdownComponent.prototype.filter;
/** @type {?} */
MultiselectDropdownComponent.prototype.defaultSettings;
/** @type {?} */
MultiselectDropdownComponent.prototype.disabled;
/** @type {?} */
MultiselectDropdownComponent.prototype.onFilterChange;
/** @type {?} */
MultiselectDropdownComponent.prototype.onDropDownClose;
/** @type {?} */
MultiselectDropdownComponent.prototype.onSelect;
/** @type {?} */
MultiselectDropdownComponent.prototype.onDeSelect;
/** @type {?} */
MultiselectDropdownComponent.prototype.onSelectAll;
/** @type {?} */
MultiselectDropdownComponent.prototype.onDeSelectAll;
/**
* @type {?}
* @private
*/
MultiselectDropdownComponent.prototype.onTouchedCallback;
/**
* @type {?}
* @private
*/
MultiselectDropdownComponent.prototype.onChangeCallback;
/**
* @type {?}
* @private
*/
MultiselectDropdownComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
MultiselectDropdownComponent.prototype.listFilterPipe;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/click-outside.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ClickOutsideDirective {
/**
* @param {?} _elementRef
*/
constructor(_elementRef) {
this._elementRef = _elementRef;
this.clickOutside = new EventEmitter();
}
/**
* @param {?} event
* @param {?} targetElement
* @return {?}
*/
onClick(event, targetElement) {
if (!targetElement) {
return;
}
/** @type {?} */
const 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'],] }]
};
if (false) {
/** @type {?} */
ClickOutsideDirective.prototype.clickOutside;
/**
* @type {?}
* @private
*/
ClickOutsideDirective.prototype._elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/nu-multiselect-dropdown.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NuMultiSelectDropDownModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: NuMultiSelectDropDownModule
};
}
}
NuMultiSelectDropDownModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
declarations: [MultiselectDropdownComponent, ClickOutsideDirective, ListFilterPipe],
providers: [ListFilterPipe],
exports: [MultiselectDropdownComponent]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngu-multiselect-dropdown.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { MultiselectDropdownComponent, NuMultiSelectDropDownModule, DROPDOWN_CONTROL_VALUE_ACCESSOR as ɵa, ListFilterPipe as ɵb, ClickOutsideDirective as ɵc };
//# sourceMappingURL=ngu-multiselect-dropdown.js.map