multiple-options-select-dropdown
Version:
A simple component which allows to select mutliple options from dropdown
1 lines • 6.01 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"onSelect":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"formatDatasouce":[{"__symbolic":"method"}]}},"FilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"filter","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}]}},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"},{"__symbolic":"reference","name":"FilterPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":13,"character":18}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"},{"__symbolic":"reference","name":"FilterPipe"}]}]}],"members":{}}},"origins":{"MultiSelectDropdownService":"./lib/multi-select-dropdown.service","MultiSelectDropdownComponent":"./lib/multi-select-dropdown.component","FilterPipe":"./lib/pipe/filter.pipe","MultiSelectDropdownModule":"./lib/multi-select-dropdown.module"},"importAs":"multiple-options-select-dropdown"}