multiple-options-select-dropdown
Version:
A simple component which allows to select mutliple options from dropdown
59 lines • 11.3 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
let MultiSelectDropdownComponent = class MultiSelectDropdownComponent {
constructor() {
this.isOpen = false;
this.datasource = [];
}
ngOnChanges(change) {
this.config.selectedItems = this.formatDatasouce(this.config.selectedItems, true);
this.datasource = this.formatDatasouce(this.config.data, false);
// set items selected
const items = this.datasource.filter(x => this.config.selectedItems.some(y => y.data[this.config.valueField] ===
x.data[this.config.valueField]));
items.forEach((item) => item.checked = true);
}
onSelect(item, value) {
if (value) {
if (!this.config.selectedItems) {
this.config.selectedItems = [];
}
this.config.selectedItems.push(item);
}
else {
this.remove(item);
}
}
remove(item) {
const indx = this.config.selectedItems.findIndex((x) => x.data[this.config.valueField] ===
item.data[this.config.valueField]);
const datasoureItem = this.datasource.find((x) => x.data[this.config.valueField] === item.data[this.config.valueField]);
if (indx !== -1) {
this.config.selectedItems.splice(indx, 1);
}
if (datasoureItem) {
datasoureItem.checked = false;
}
}
formatDatasouce(data, checkedValue) {
return data.map(x => {
const 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);
export { MultiSelectDropdownComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGktc2VsZWN0LWRyb3Bkb3duLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL211bHRpcGxlLW9wdGlvbnMtc2VsZWN0LWRyb3Bkb3duLyIsInNvdXJjZXMiOlsibGliL211bHRpLXNlbGVjdC1kcm9wZG93bi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQVEzRSxJQUFhLDRCQUE0QixHQUF6QyxNQUFhLDRCQUE0QjtJQUt2QztRQUhPLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFDZixlQUFVLEdBQWlCLEVBQUUsQ0FBQztJQUVyQixDQUFDO0lBRWpCLFdBQVcsQ0FBQyxNQUFxQjtRQUMvQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQ2xGLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQztRQUNoRSxxQkFBcUI7UUFFckIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDO1lBQzFHLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDbkMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsQ0FBQztJQUMvQyxDQUFDO0lBRU0sUUFBUSxDQUFDLElBQVMsRUFBRSxLQUFjO1FBQ3ZDLElBQUksS0FBSyxFQUFFO1lBQ1QsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxFQUFFO2dCQUM5QixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsR0FBRyxFQUFFLENBQUM7YUFDaEM7WUFDRCxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDdEM7YUFBTTtZQUNMLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDbkI7SUFDSCxDQUFDO0lBRU0sTUFBTSxDQUFDLElBQUk7UUFDaEIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBYSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDO1lBQ2hHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDO1FBQ3JDLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBYSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUM7UUFFcEksSUFBSSxJQUFJLEtBQUssQ0FBQyxDQUFDLEVBQUU7WUFDZixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1NBQzNDO1FBQ0QsSUFBSSxhQUFhLEVBQUU7WUFDakIsYUFBYSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7U0FDL0I7SUFDSCxDQUFDO0lBRU8sZUFBZSxDQUFDLElBQVcsRUFBRSxZQUFxQjtRQUN4RCxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDbEIsTUFBTSxHQUFHLEdBQWU7Z0JBQ3RCLElBQUksRUFBRSxDQUFDO2dCQUNQLE9BQU8sRUFBRSxZQUFZO2FBQ3RCLENBQUM7WUFFRixPQUFPLEdBQUcsQ0FBQztRQUNiLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztDQUNGLENBQUE7QUFsRFU7SUFBUixLQUFLLEVBQUU7NERBQW1DO0FBRGhDLDRCQUE0QjtJQUx4QyxTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsMkJBQTJCO1FBQ3JDLGtuR0FBbUQ7O0tBRXBELENBQUM7R0FDVyw0QkFBNEIsQ0FtRHhDO1NBbkRZLDRCQUE0QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSU11bHRpU2VsZWN0Q29uZmlnLCBJRGF0YU1vZGVsIH0gZnJvbSAnLi9jb25maWcnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItbXVsdGktc2VsZWN0LWRyb3Bkb3duJyxcbiAgdGVtcGxhdGVVcmw6ICdtdWx0aS1zZWxlY3QtZHJvcGRvd24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnbXVsdGktc2VsZWN0LWRyb3Bkb3duLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTXVsdGlTZWxlY3REcm9wZG93bkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIHB1YmxpYyBjb25maWc6IElNdWx0aVNlbGVjdENvbmZpZztcbiAgcHVibGljIGlzT3BlbiA9IGZhbHNlO1xuICBwdWJsaWMgZGF0YXNvdXJjZTogSURhdGFNb2RlbFtdID0gW107XG4gIHB1YmxpYyBmaWx0ZXI6IHN0cmluZztcbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2U6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICB0aGlzLmNvbmZpZy5zZWxlY3RlZEl0ZW1zID0gdGhpcy5mb3JtYXREYXRhc291Y2UodGhpcy5jb25maWcuc2VsZWN0ZWRJdGVtcywgdHJ1ZSk7XG4gICAgdGhpcy5kYXRhc291cmNlID0gdGhpcy5mb3JtYXREYXRhc291Y2UodGhpcy5jb25maWcuZGF0YSwgZmFsc2UpO1xuICAgIC8vIHNldCBpdGVtcyBzZWxlY3RlZFxuXG4gICAgY29uc3QgaXRlbXMgPSB0aGlzLmRhdGFzb3VyY2UuZmlsdGVyKHggPT4gdGhpcy5jb25maWcuc2VsZWN0ZWRJdGVtcy5zb21lKHkgPT4geS5kYXRhW3RoaXMuY29uZmlnLnZhbHVlRmllbGRdID09PVxuICAgICAgeC5kYXRhW3RoaXMuY29uZmlnLnZhbHVlRmllbGRdKSk7XG4gICAgaXRlbXMuZm9yRWFjaCgoaXRlbSkgPT4gaXRlbS5jaGVja2VkID0gdHJ1ZSk7XG4gIH1cblxuICBwdWJsaWMgb25TZWxlY3QoaXRlbTogYW55LCB2YWx1ZTogYm9vbGVhbik6IHZvaWQge1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgaWYgKCF0aGlzLmNvbmZpZy5zZWxlY3RlZEl0ZW1zKSB7XG4gICAgICAgIHRoaXMuY29uZmlnLnNlbGVjdGVkSXRlbXMgPSBbXTtcbiAgICAgIH1cbiAgICAgIHRoaXMuY29uZmlnLnNlbGVjdGVkSXRlbXMucHVzaChpdGVtKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yZW1vdmUoaXRlbSk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIHJlbW92ZShpdGVtKTogdm9pZCB7XG4gICAgY29uc3QgaW5keCA9IHRoaXMuY29uZmlnLnNlbGVjdGVkSXRlbXMuZmluZEluZGV4KCh4OiBJRGF0YU1vZGVsKSA9PiB4LmRhdGFbdGhpcy5jb25maWcudmFsdWVGaWVsZF0gPT09XG4gICAgICBpdGVtLmRhdGFbdGhpcy5jb25maWcudmFsdWVGaWVsZF0pO1xuICAgIGNvbnN0IGRhdGFzb3VyZUl0ZW0gPSB0aGlzLmRhdGFzb3VyY2UuZmluZCgoeDogSURhdGFNb2RlbCkgPT4geC5kYXRhW3RoaXMuY29uZmlnLnZhbHVlRmllbGRdID09PSBpdGVtLmRhdGFbdGhpcy5jb25maWcudmFsdWVGaWVsZF0pO1xuXG4gICAgaWYgKGluZHggIT09IC0xKSB7XG4gICAgICB0aGlzLmNvbmZpZy5zZWxlY3RlZEl0ZW1zLnNwbGljZShpbmR4LCAxKTtcbiAgICB9XG4gICAgaWYgKGRhdGFzb3VyZUl0ZW0pIHtcbiAgICAgIGRhdGFzb3VyZUl0ZW0uY2hlY2tlZCA9IGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZm9ybWF0RGF0YXNvdWNlKGRhdGE6IGFueVtdLCBjaGVja2VkVmFsdWU6IGJvb2xlYW4pOiBhbnlbXSB7XG4gICAgcmV0dXJuIGRhdGEubWFwKHggPT4ge1xuICAgICAgY29uc3QgdmFsOiBJRGF0YU1vZGVsID0ge1xuICAgICAgICBkYXRhOiB4LFxuICAgICAgICBjaGVja2VkOiBjaGVja2VkVmFsdWVcbiAgICAgIH07XG5cbiAgICAgIHJldHVybiB2YWw7XG4gICAgfSk7XG4gIH1cbn1cbiJdfQ==