multiple-options-select-dropdown/bundles/multiple-options-select-dropdown.umd.min.js

A simple component which allows to select mutliple options from dropdown

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("multiple-options-select-dropdown",["exports","@angular/core","@angular/common","@angular/forms"],n):n((e=e||self)["multiple-options-select-dropdown"]={},e.ng.core,e.ng.common,e.ng.forms)}(this,(function(e,n,t,r){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */function o(e,n,t,r){var o,i=arguments.length,l=i<3?n:null===r?r=Object.getOwnPropertyDescriptor(n,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,n,t,r);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(l=(i<3?o(l):i>3?o(n,t,l):o(n,t))||l);return i>3&&l&&Object.defineProperty(n,t,l),l}var i=function(){function e(){}return e.ɵprov=n.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e=o([n.Injectable({providedIn:"root"})],e)}(),l=function(){function e(){this.isOpen=!1,this.datasource=[]}return e.prototype.ngOnChanges=function(e){var n=this;this.config.selectedItems=this.formatDatasouce(this.config.selectedItems,!0),this.datasource=this.formatDatasouce(this.config.data,!1),this.datasource.filter((function(e){return n.config.selectedItems.some((function(t){return t.data[n.config.valueField]===e.data[n.config.valueField]}))})).forEach((function(e){return e.checked=!0}))},e.prototype.onSelect=function(e,n){n?(this.config.selectedItems||(this.config.selectedItems=[]),this.config.selectedItems.push(e)):this.remove(e)},e.prototype.remove=function(e){var n=this,t=this.config.selectedItems.findIndex((function(t){return t.data[n.config.valueField]===e.data[n.config.valueField]})),r=this.datasource.find((function(t){return t.data[n.config.valueField]===e.data[n.config.valueField]}));-1!==t&&this.config.selectedItems.splice(t,1),r&&(r.checked=!1)},e.prototype.formatDatasouce=function(e,n){return e.map((function(e){return{data:e,checked:n}}))},o([n.Input()],e.prototype,"config",void 0),e=o([n.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  \x3c!-- input field --\x3e\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  \x3c!-- list items --\x3e\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}"]})],e)}(),c=function(){function e(){}return e.prototype.transform=function(e,n,t){return e&&n?e.filter((function(e){return-1!==String(e.data[t]).toLowerCase().indexOf(n.toLowerCase())})):e},e=o([n.Pipe({name:"filter",pure:!1})],e)}(),s=function(){function e(){}return e=o([n.NgModule({declarations:[l,c],imports:[t.CommonModule,r.FormsModule],exports:[l,c]})],e)}();e.FilterPipe=c,e.MultiSelectDropdownComponent=l,e.MultiSelectDropdownModule=s,e.MultiSelectDropdownService=i,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=multiple-options-select-dropdown.umd.min.js.map