ngx-bootstrap-multiselect-dropdown
Version:
Simple multiselect dropdown based on bootstrap 4 dropdown component.
437 lines (430 loc) • 20.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-bootstrap-multiselect-dropdown', ['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
(global = global || self, factory(global['ngx-bootstrap-multiselect-dropdown'] = {}, global.ng.core, global.ng.forms, global.ng.common));
}(this, function (exports, core, forms, common) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DropdownSettings = /** @class */ (function () {
function DropdownSettings(settings) {
this.dropdownHeight = 'auto';
this.btnWidth = 'auto';
this.noneSelectedBtnText = 'None selected';
this.dataIdProperty = 'id';
this.dataNameProperty = 'name';
this.deselectAllBtnText = 'Deselect all';
this.enableFilter = false;
this.selectAllBtnText = 'Select all';
this.dropdownClasses = null;
this.headerText = null;
this.selectionLimit = null;
this.showDeselectAllBtn = null;
this.showSelectAllBtn = null;
this.btnClasses = null;
if (!settings)
return;
this.noneSelectedBtnText = settings.noneSelectedBtnText || this.noneSelectedBtnText;
this.dataIdProperty = settings.dataIdProperty || this.dataIdProperty;
this.dataNameProperty = settings.dataNameProperty || this.dataNameProperty;
this.deselectAllBtnText = settings.deselectAllBtnText || this.deselectAllBtnText;
this.enableFilter = settings.enableFilter;
this.selectAllBtnText = settings.selectAllBtnText || this.selectAllBtnText;
this.dropdownClasses = settings.dropdownClasses;
this.headerText = settings.headerText;
this.selectionLimit = settings.selectionLimit;
this.showDeselectAllBtn = settings.showDeselectAllBtn;
this.showSelectAllBtn = settings.showSelectAllBtn;
this.btnWidth = settings.btnWidth || this.btnWidth;
this.dropdownHeight = settings.dropdownHeight || this.dropdownHeight;
this.btnClasses = settings.btnClasses;
}
return DropdownSettings;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DROPDOWN_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return NgxBootstrapMultiselectDropdownComponent; })),
multi: true
};
var NgxBootstrapMultiselectDropdownComponent = /** @class */ (function () {
function NgxBootstrapMultiselectDropdownComponent() {
this.items = [];
this.onDataSelect = new core.EventEmitter();
this.onDataOperationSelect = new core.EventEmitter();
this.onSelectAllData = new core.EventEmitter();
this.onDeselectAllData = new core.EventEmitter();
this.filteredItems = [];
this.filterValue = '';
this.isVisible = false;
this.selectedItems = []; // Used to keep track if items currently selected. Dropdown item ids are stored
// ControlValueAccessor methods
this.onChange = (/**
* @param {?} selectedObject
* @return {?}
*/
function (selectedObject) { });
this.onTouched = (/**
* @return {?}
*/
function () { });
}
// Close dropdown when clicking outside component
// Used to keep track if items currently selected. Dropdown item ids are stored
// Close dropdown when clicking outside component
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.clickOutsideComponent =
// Used to keep track if items currently selected. Dropdown item ids are stored
// Close dropdown when clicking outside component
/**
* @return {?}
*/
function () {
if (this.isVisible)
this.isVisible = false;
};
// Prevent event reaching clickOutsideComponent
// Prevent event reaching clickOutsideComponent
/**
* @param {?} event
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.handleComponentClick =
// Prevent event reaching clickOutsideComponent
/**
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
};
// Return selected items by filtering items array based on values in selectedItems array
// Return selected items by filtering items array based on values in selectedItems array
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.getSelectedItems =
// Return selected items by filtering items array based on values in selectedItems array
/**
* @return {?}
*/
function () {
var _this = this;
this.setSelectedText();
return this.items
.filter((/**
* @param {?} _
* @return {?}
*/
function (_) { return _this.selectedItems.findIndex((/**
* @param {?} x
* @return {?}
*/
function (x) { return x === _[_this.innerSettings.dataIdProperty]; })) > -1; })) // Return only items with id values in selectedItems
.slice();
};
// Set text when selecting item from dropdown
// Set text when selecting item from dropdown
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.setSelectedText =
// Set text when selecting item from dropdown
/**
* @return {?}
*/
function () {
this.selectedText = this.selectedItems.length
? this.selectedItems.length + " item" + (this.selectedItems.length > 1 ? 's' : '') + " selected"
: this.innerSettings.noneSelectedBtnText;
};
// Toggle dropdown visibility
// Toggle dropdown visibility
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.showDropdown =
// Toggle dropdown visibility
/**
* @return {?}
*/
function () {
this.isVisible = this.isVisible ? false : true;
};
// Filter items based on item name property value
// Filter items based on item name property value
/**
* @param {?} value
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.onFilterSearch =
// Filter items based on item name property value
/**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
this.filterValue = value; // Save filter value so it appears when toggling dropdown
this.filteredItems = this.items.filter((/**
* @param {?} _
* @return {?}
*/
function (_) { return _[_this.innerSettings.dataNameProperty] && _[_this.innerSettings.dataNameProperty].toLowerCase().startsWith(value); }));
};
// Set selected dropdown item as active. Activated on dropdown item click
// Set selected dropdown item as active. Activated on dropdown item click
/**
* @param {?} selectedObject
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.onSelect =
// Set selected dropdown item as active. Activated on dropdown item click
/**
* @param {?} selectedObject
* @return {?}
*/
function (selectedObject) {
if (this.disabled)
return;
this.onTouched();
this.writeValue(selectedObject);
this.onDataSelect.emit(selectedObject);
};
// Set all dropdown items as active. Activated on select all button item click
// Set all dropdown items as active. Activated on select all button item click
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.onSelectAll =
// Set all dropdown items as active. Activated on select all button item click
/**
* @return {?}
*/
function () {
var _this = this;
if (this.disabled)
return;
this.onTouched();
this.selectedItems = this.items.map((/**
* @param {?} _
* @return {?}
*/
function (_) { return _[_this.innerSettings.dataIdProperty]; }));
this.writeValue(this.selectedItems);
this.onSelectAllData.emit();
};
// Remove active from all dropdown items. Activated on deselect all button item click
// Remove active from all dropdown items. Activated on deselect all button item click
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.onDeselectAll =
// Remove active from all dropdown items. Activated on deselect all button item click
/**
* @return {?}
*/
function () {
if (this.disabled)
return;
this.onTouched();
this.selectedItems = [];
this.writeValue([]);
this.onDeselectAllData.emit();
};
// Check if number of selected items is equal or greater than limit
// Check if number of selected items is equal or greater than limit
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.isSelectionLimitReached =
// Check if number of selected items is equal or greater than limit
/**
* @return {?}
*/
function () {
return this.innerSettings.selectionLimit && this.innerSettings.selectionLimit <= this.selectedItems.length;
};
// Check if drowdown item is active
// Check if drowdown item is active
/**
* @param {?} item
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.isActive =
// Check if drowdown item is active
/**
* @param {?} item
* @return {?}
*/
function (item) {
var _this = this;
return this.selectedItems.findIndex((/**
* @param {?} x
* @return {?}
*/
function (x) { return x === item[_this.innerSettings.dataIdProperty]; })) > -1;
};
// Check if input values exist in selectedItems array. If item exists remove from array, else add
// Check if input values exist in selectedItems array. If item exists remove from array, else add
/**
* @param {?} selectedObject
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.writeValue =
// Check if input values exist in selectedItems array. If item exists remove from array, else add
/**
* @param {?} selectedObject
* @return {?}
*/
function (selectedObject) {
var _this = this;
if (selectedObject) {
/** @type {?} */
var tempArray_1 = Array.isArray(selectedObject) ? (/** @type {?} */ (selectedObject)) : [selectedObject];
/** @type {?} */
var beforeLength = this.selectedItems.length;
if (tempArray_1.length === 0) {
this.selectedItems = [];
}
else {
this.items = this.items.map((/**
* @param {?} _
* @return {?}
*/
function (_) {
/** @type {?} */
var index = tempArray_1.findIndex((/**
* @param {?} x
* @return {?}
*/
function (x) { return _[_this.innerSettings.dataIdProperty] === x[_this.innerSettings.dataIdProperty]; }));
if (index > -1) {
/** @type {?} */
var index_1 = _this.selectedItems.findIndex((/**
* @param {?} x
* @return {?}
*/
function (x) { return x === _[_this.innerSettings.dataIdProperty]; }));
if (index_1 > -1) {
_this.selectedItems.splice(index_1, 1);
}
else {
if (!_this.isSelectionLimitReached()) {
_this.selectedItems.push(_[_this.innerSettings.dataIdProperty]);
}
}
}
return _;
})).slice();
}
/** @type {?} */
var afterLength = this.selectedItems.length;
if (afterLength > beforeLength) {
this.onDataOperationSelect.emit({ operation: "added", item: selectedObject, selectedCount: this.selectedItems.length });
}
else if (afterLength < beforeLength) {
this.onDataOperationSelect.emit({ operation: "removed", item: selectedObject, selectedCount: this.selectedItems.length });
}
}
this.onChange(this.getSelectedItems());
};
/**
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.innerSettings = new DropdownSettings(this.settings); // Set initial setting values
this.filteredItems = this.items; // Set initial filtered values
this.setSelectedText(); // Set initial button text
};
/**
* @param {?} isDisabled
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* @param {?} fn
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
NgxBootstrapMultiselectDropdownComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
NgxBootstrapMultiselectDropdownComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-bootstrap-multiselect',
template: "\n <div class=\"dropdown\" (click)=\"handleComponentClick($event)\" >\n <button style=\"text-align: right\"\n [disabled]=\"disabled\"\n type=\"button\" \n (click)=\"showDropdown()\"\n [ngClass]=\"innerSettings.btnClasses\"\n [style.width]=\"innerSettings.btnWidth\">\n <span style=\"float: left\">{{selectedText}}</span>\n \n </button>\n <div *ngIf=\"isVisible\" class=\"dropdown-menu pointer\" [ngClass]=\"innerSettings.dropdownClasses\" aria-labelledby=\"triggerId\" style=\"display: inline-block\">\n <div class=\"dropdown-header\" *ngIf=\"innerSettings.headerText\">{{innerSettings.headerText}}</div>\n <div *ngIf=\"innerSettings.showSelectAllBtn && !innerSettings.selectionLimit\" class=\"dropdown-item\" (click)=\"onSelectAll()\">{{innerSettings.selectAllBtnText}}</div>\n <div *ngIf=\"innerSettings.showDeselectAllBtn\" class=\"dropdown-item\" (click)=\"onDeselectAll()\">{{innerSettings.deselectAllBtnText}}</div>\n <div *ngIf=\"innerSettings.enableFilter\" class=\"p-2\"><input autocomplete=\"off\" list=\"autocompleteOff\" type=\"text\" placeholder=\"Filter values\" [value]=\"filterValue\" (keyup)=\"onFilterSearch($event?.target?.value)\" class=\"form-control form-control-sm\" /></div>\n <div class=\"dropdown-divider\" *ngIf=\"innerSettings.showSelectAllBtn || innerSettings.showDeselectAllBtn || innerSettings.enableFilter\"></div>\n <div [style.height]=\"innerSettings.dropdownHeight\" style=\"overflow: auto\" >\n <div *ngFor=\"let item of filteredItems; let i=index\" (click)=\"onSelect(item)\" class=\"dropdown-item\" [ngClass]=\"{'active': isActive(item), 'disabled': disabled }\">\n {{item[innerSettings.dataNameProperty]}} \n </div> \n </div> \n </div>\n </div>\n ",
providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR],
styles: ['.pointer > .dropdown-item { curson: pointer; }']
}] }
];
NgxBootstrapMultiselectDropdownComponent.propDecorators = {
disabled: [{ type: core.Input }],
items: [{ type: core.Input }],
settings: [{ type: core.Input }],
onDataSelect: [{ type: core.Output }],
onDataOperationSelect: [{ type: core.Output }],
onSelectAllData: [{ type: core.Output }],
onDeselectAllData: [{ type: core.Output }],
clickOutsideComponent: [{ type: core.HostListener, args: ['document:click',] }]
};
return NgxBootstrapMultiselectDropdownComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxBootstrapMultiselectDropdownModule = /** @class */ (function () {
function NgxBootstrapMultiselectDropdownModule() {
}
NgxBootstrapMultiselectDropdownModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [NgxBootstrapMultiselectDropdownComponent],
imports: [
common.CommonModule,
forms.FormsModule
],
exports: [NgxBootstrapMultiselectDropdownComponent]
},] }
];
return NgxBootstrapMultiselectDropdownModule;
}());
exports.DROPDOWN_CONTROL_VALUE_ACCESSOR = DROPDOWN_CONTROL_VALUE_ACCESSOR;
exports.NgxBootstrapMultiselectDropdownComponent = NgxBootstrapMultiselectDropdownComponent;
exports.NgxBootstrapMultiselectDropdownModule = NgxBootstrapMultiselectDropdownModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-bootstrap-multiselect-dropdown.umd.js.map