multiple-options-select-dropdown
Version:
A simple component which allows to select mutliple options from dropdown
115 lines (107 loc) • 7.44 kB
JavaScript
import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, Input, Component, Pipe, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
let MultiSelectDropdownService = class MultiSelectDropdownService {
constructor() { }
};
MultiSelectDropdownService.ɵprov = ɵɵdefineInjectable({ factory: function MultiSelectDropdownService_Factory() { return new MultiSelectDropdownService(); }, token: MultiSelectDropdownService, providedIn: "root" });
MultiSelectDropdownService = __decorate([
Injectable({
providedIn: 'root'
})
], MultiSelectDropdownService);
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);
let FilterPipe = class FilterPipe {
transform(items, filterBy, valueField) {
if (!items || !filterBy) {
return items;
}
return items.filter(item => String(item.data[valueField]).toLowerCase().indexOf(filterBy.toLowerCase()) !== -1);
}
};
FilterPipe = __decorate([
Pipe({
name: 'filter',
pure: false
})
], FilterPipe);
let MultiSelectDropdownModule = class MultiSelectDropdownModule {
};
MultiSelectDropdownModule = __decorate([
NgModule({
declarations: [
MultiSelectDropdownComponent,
FilterPipe
],
imports: [
CommonModule, FormsModule
],
exports: [
MultiSelectDropdownComponent,
FilterPipe
]
})
], MultiSelectDropdownModule);
/*
* Public API Surface of multi-select-dropdown
*/
/**
* Generated bundle index. Do not edit.
*/
export { FilterPipe, MultiSelectDropdownComponent, MultiSelectDropdownModule, MultiSelectDropdownService };
//# sourceMappingURL=multiple-options-select-dropdown.js.map