multiple-options-select-dropdown
Version:
A simple component which allows to select mutliple options from dropdown
62 lines • 11.9 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
var MultiSelectDropdownComponent = /** @class */ (function () {
function MultiSelectDropdownComponent() {
this.isOpen = false;
this.datasource = [];
}
MultiSelectDropdownComponent.prototype.ngOnChanges = function (change) {
var _this = this;
this.config.selectedItems = this.formatDatasouce(this.config.selectedItems, true);
this.datasource = this.formatDatasouce(this.config.data, false);
// set items selected
var items = this.datasource.filter(function (x) { return _this.config.selectedItems.some(function (y) { return y.data[_this.config.valueField] ===
x.data[_this.config.valueField]; }); });
items.forEach(function (item) { return item.checked = true; });
};
MultiSelectDropdownComponent.prototype.onSelect = function (item, value) {
if (value) {
if (!this.config.selectedItems) {
this.config.selectedItems = [];
}
this.config.selectedItems.push(item);
}
else {
this.remove(item);
}
};
MultiSelectDropdownComponent.prototype.remove = function (item) {
var _this = this;
var indx = this.config.selectedItems.findIndex(function (x) { return x.data[_this.config.valueField] ===
item.data[_this.config.valueField]; });
var datasoureItem = this.datasource.find(function (x) { return x.data[_this.config.valueField] === item.data[_this.config.valueField]; });
if (indx !== -1) {
this.config.selectedItems.splice(indx, 1);
}
if (datasoureItem) {
datasoureItem.checked = false;
}
};
MultiSelectDropdownComponent.prototype.formatDatasouce = function (data, checkedValue) {
return data.map(function (x) {
var val = {
data: x,
checked: checkedValue
};
return val;
});
};
__decorate([
Input()
], MultiSelectDropdownComponent.prototype, "config", void 0);
MultiSelectDropdownComponent = __decorate([
Component({
selector: 'lib-multi-select-dropdown',
template: "<div class=\"container-fluid\" [attr.disabled]=\"config.disabled ? true : null\"\r\n (click)=\"config.disabled ? $event.stopPropagation() : null; config.disabled ? false : null\"\r\n [class.isDisabled]=\"config.disabled\">\r\n <!-- input field -->\r\n <div class=\"div-design\">\r\n <div class=\"w-100\">\r\n <div *ngIf=\"config.data.length && config.valueField\">\r\n <div class=\"pill\" *ngFor=\"let option of config.selectedItems|slice:0:config.selectionLimit;let i=index;\">\r\n <span class=\"mr-1 user-select-none\">{{option.data[config.valueField]}}</span>\r\n <span class=\"cursor-pointer\" (click)=\"remove(option)\">\r\n <ng-container *ngTemplateOutlet=\"close\"></ng-container>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <ng-container *ngIf=\"!isOpen;then downArrow else upArrow\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- list items -->\r\n <div *ngIf=\"isOpen\">\r\n <div *ngIf=\"config.showFilter\" class=\"filter-div\">\r\n <input type=\"text\" class=\"form-control\" [placeholder]=\"config.filterPlaceholder?config.filterPlaceholder:''\"\r\n [(ngModel)]=\"filter\">\r\n </div>\r\n <div class=\"list-group scroll\">\r\n <a href=\"#\" *ngFor=\"let option of datasource|filter:filter:config.valueField; let i=index;\"\r\n class=\"list-group-item list-group-item-action list-item-padding\">\r\n <div class=\"custom-control custom-checkbox\">\r\n <input type=\"checkbox\" class=\"custom-control-input\" [(ngModel)]=\"option.checked\"\r\n (change)=\"onSelect(option,$event.target.checked)\" id=\"customCheck_{{i}}\">\r\n <label class=\"custom-control-label\" for=\"customCheck_{{i}}\">{{option.data[config.valueField]}}</label>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #close>\r\n <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" class=\"bi bi-x\" fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" d=\"M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z\" />\r\n <path fill-rule=\"evenodd\" d=\"M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z\" />\r\n </svg>\r\n</ng-template>\r\n<ng-template #upArrow>\r\n <svg (click)=\"config.disabled?null:isOpen=!isOpen;\" width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\"\r\n class=\"bi bi-caret-up-fill mr-2\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z\" />\r\n </svg>\r\n</ng-template>\r\n<ng-template #downArrow>\r\n <svg (click)=\"config.disabled?null:isOpen=!isOpen;\" width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\"\r\n class=\"bi bi-caret-down-fill mr-2\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\" />\r\n </svg>\r\n</ng-template>\r\n",
styles: [".div-design{border:1px solid #d3d3d3;border-radius:5px;padding:5px;display:flex}.scroll{height:300px;overflow:auto}.list-item-padding{padding:.5rem 1rem!important}.pill{margin:.2rem .1rem;display:inline-block;border:1px solid #d3d3d3;padding:0 8px;font-size:.9rem;border-radius:1rem;background:#d3d3d3;font-weight:600}.filter-div{margin:1px 0}.scroll::-webkit-scrollbar{width:10px}.scroll::-webkit-scrollbar-track{background:#f1f1f1;border-radius:5px}.scroll::-webkit-scrollbar-thumb{background:#888}.scroll::-webkit-scrollbar-thumb:hover{background:#555}"]
})
], MultiSelectDropdownComponent);
return MultiSelectDropdownComponent;
}());
export { MultiSelectDropdownComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGktc2VsZWN0LWRyb3Bkb3duLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL211bHRpcGxlLW9wdGlvbnMtc2VsZWN0LWRyb3Bkb3duLyIsInNvdXJjZXMiOlsibGliL211bHRpLXNlbGVjdC1kcm9wZG93bi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQVEzRTtJQUtFO1FBSE8sV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLGVBQVUsR0FBaUIsRUFBRSxDQUFDO0lBRXJCLENBQUM7SUFFakIsa0RBQVcsR0FBWCxVQUFZLE1BQXFCO1FBQWpDLGlCQVFDO1FBUEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsQ0FBQztRQUNsRixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDaEUscUJBQXFCO1FBRXJCLElBQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLFVBQUEsQ0FBQyxJQUFJLE9BQUEsS0FBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFVBQUEsQ0FBQyxJQUFJLE9BQUEsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQztZQUMxRyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLEVBRDhDLENBQzlDLENBQUMsRUFEUyxDQUNULENBQUMsQ0FBQztRQUNuQyxLQUFLLENBQUMsT0FBTyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLEVBQW5CLENBQW1CLENBQUMsQ0FBQztJQUMvQyxDQUFDO0lBRU0sK0NBQVEsR0FBZixVQUFnQixJQUFTLEVBQUUsS0FBYztRQUN2QyxJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsRUFBRTtnQkFDOUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLEdBQUcsRUFBRSxDQUFDO2FBQ2hDO1lBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQ3RDO2FBQU07WUFDTCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUVNLDZDQUFNLEdBQWIsVUFBYyxJQUFJO1FBQWxCLGlCQVdDO1FBVkMsSUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLFVBQUMsQ0FBYSxJQUFLLE9BQUEsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQztZQUNoRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLEVBRGlDLENBQ2pDLENBQUMsQ0FBQztRQUNyQyxJQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxVQUFDLENBQWEsSUFBSyxPQUFBLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLEVBQXBFLENBQW9FLENBQUMsQ0FBQztRQUVwSSxJQUFJLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRTtZQUNmLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7U0FDM0M7UUFDRCxJQUFJLGFBQWEsRUFBRTtZQUNqQixhQUFhLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztTQUMvQjtJQUNILENBQUM7SUFFTyxzREFBZSxHQUF2QixVQUF3QixJQUFXLEVBQUUsWUFBcUI7UUFDeEQsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLFVBQUEsQ0FBQztZQUNmLElBQU0sR0FBRyxHQUFlO2dCQUN0QixJQUFJLEVBQUUsQ0FBQztnQkFDUCxPQUFPLEVBQUUsWUFBWTthQUN0QixDQUFDO1lBRUYsT0FBTyxHQUFHLENBQUM7UUFDYixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFqRFE7UUFBUixLQUFLLEVBQUU7Z0VBQW1DO0lBRGhDLDRCQUE0QjtRQUx4QyxTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsMkJBQTJCO1lBQ3JDLGtuR0FBbUQ7O1NBRXBELENBQUM7T0FDVyw0QkFBNEIsQ0FtRHhDO0lBQUQsbUNBQUM7Q0FBQSxBQW5ERCxJQW1EQztTQW5EWSw0QkFBNEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElNdWx0aVNlbGVjdENvbmZpZywgSURhdGFNb2RlbCB9IGZyb20gJy4vY29uZmlnJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLW11bHRpLXNlbGVjdC1kcm9wZG93bicsXG4gIHRlbXBsYXRlVXJsOiAnbXVsdGktc2VsZWN0LWRyb3Bkb3duLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ211bHRpLXNlbGVjdC1kcm9wZG93bi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE11bHRpU2VsZWN0RHJvcGRvd25Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBwdWJsaWMgY29uZmlnOiBJTXVsdGlTZWxlY3RDb25maWc7XG4gIHB1YmxpYyBpc09wZW4gPSBmYWxzZTtcbiAgcHVibGljIGRhdGFzb3VyY2U6IElEYXRhTW9kZWxbXSA9IFtdO1xuICBwdWJsaWMgZmlsdGVyOiBzdHJpbmc7XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgdGhpcy5jb25maWcuc2VsZWN0ZWRJdGVtcyA9IHRoaXMuZm9ybWF0RGF0YXNvdWNlKHRoaXMuY29uZmlnLnNlbGVjdGVkSXRlbXMsIHRydWUpO1xuICAgIHRoaXMuZGF0YXNvdXJjZSA9IHRoaXMuZm9ybWF0RGF0YXNvdWNlKHRoaXMuY29uZmlnLmRhdGEsIGZhbHNlKTtcbiAgICAvLyBzZXQgaXRlbXMgc2VsZWN0ZWRcblxuICAgIGNvbnN0IGl0ZW1zID0gdGhpcy5kYXRhc291cmNlLmZpbHRlcih4ID0+IHRoaXMuY29uZmlnLnNlbGVjdGVkSXRlbXMuc29tZSh5ID0+IHkuZGF0YVt0aGlzLmNvbmZpZy52YWx1ZUZpZWxkXSA9PT1cbiAgICAgIHguZGF0YVt0aGlzLmNvbmZpZy52YWx1ZUZpZWxkXSkpO1xuICAgIGl0ZW1zLmZvckVhY2goKGl0ZW0pID0+IGl0ZW0uY2hlY2tlZCA9IHRydWUpO1xuICB9XG5cbiAgcHVibGljIG9uU2VsZWN0KGl0ZW06IGFueSwgdmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIGlmICghdGhpcy5jb25maWcuc2VsZWN0ZWRJdGVtcykge1xuICAgICAgICB0aGlzLmNvbmZpZy5zZWxlY3RlZEl0ZW1zID0gW107XG4gICAgICB9XG4gICAgICB0aGlzLmNvbmZpZy5zZWxlY3RlZEl0ZW1zLnB1c2goaXRlbSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucmVtb3ZlKGl0ZW0pO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByZW1vdmUoaXRlbSk6IHZvaWQge1xuICAgIGNvbnN0IGluZHggPSB0aGlzLmNvbmZpZy5zZWxlY3RlZEl0ZW1zLmZpbmRJbmRleCgoeDogSURhdGFNb2RlbCkgPT4geC5kYXRhW3RoaXMuY29uZmlnLnZhbHVlRmllbGRdID09PVxuICAgICAgaXRlbS5kYXRhW3RoaXMuY29uZmlnLnZhbHVlRmllbGRdKTtcbiAgICBjb25zdCBkYXRhc291cmVJdGVtID0gdGhpcy5kYXRhc291cmNlLmZpbmQoKHg6IElEYXRhTW9kZWwpID0+IHguZGF0YVt0aGlzLmNvbmZpZy52YWx1ZUZpZWxkXSA9PT0gaXRlbS5kYXRhW3RoaXMuY29uZmlnLnZhbHVlRmllbGRdKTtcblxuICAgIGlmIChpbmR4ICE9PSAtMSkge1xuICAgICAgdGhpcy5jb25maWcuc2VsZWN0ZWRJdGVtcy5zcGxpY2UoaW5keCwgMSk7XG4gICAgfVxuICAgIGlmIChkYXRhc291cmVJdGVtKSB7XG4gICAgICBkYXRhc291cmVJdGVtLmNoZWNrZWQgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGZvcm1hdERhdGFzb3VjZShkYXRhOiBhbnlbXSwgY2hlY2tlZFZhbHVlOiBib29sZWFuKTogYW55W10ge1xuICAgIHJldHVybiBkYXRhLm1hcCh4ID0+IHtcbiAgICAgIGNvbnN0IHZhbDogSURhdGFNb2RlbCA9IHtcbiAgICAgICAgZGF0YTogeCxcbiAgICAgICAgY2hlY2tlZDogY2hlY2tlZFZhbHVlXG4gICAgICB9O1xuXG4gICAgICByZXR1cm4gdmFsO1xuICAgIH0pO1xuICB9XG59XG4iXX0=