ngx-mat-tag-input/bundles/ngx-mat-tag-input.umd.min.js

Angular tags-input based on Material Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/cdk/keycodes"),require("rxjs/operators"),require("@angular/common"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/material/menu"),require("@angular/material/icon"),require("@angular/material/chips"),require("@angular/material/autocomplete"),require("@angular/material/progress-spinner"),require("@angular/material/button")):"function"==typeof define&&define.amd?define("ngx-mat-tag-input",["exports","@angular/core","@angular/forms","@angular/cdk/keycodes","rxjs/operators","@angular/common","@angular/material/form-field","@angular/material/input","@angular/material/menu","@angular/material/icon","@angular/material/chips","@angular/material/autocomplete","@angular/material/progress-spinner","@angular/material/button"],t):t((e=e||self)["ngx-mat-tag-input"]={},e.ng.core,e.ng.forms,e.ng.cdk.keycodes,e.rxjs.operators,e.ng.common,e.ng.material.formField,e.ng.material.input,e.ng.material.menu,e.ng.material.icon,e.ng.material.chips,e.ng.material.autocomplete,e.ng.material.progressSpinner,e.ng.material.button)}(this,(function(e,t,n,o,r,a,i,s,l,u,p,c,m,d){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function h(e,t,n,o){var r,a=arguments.length,i=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(i=(a<3?r(i):a>3?r(t,n,i):r(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i}var g=function(){function e(){this.items=[],this.selectedTags=[],this.reset=new t.EventEmitter,this.ngModelChange=new t.EventEmitter,this.change=new t.EventEmitter,this.focus=new t.EventEmitter,this.select=new t.EventEmitter,this.touched=new t.EventEmitter,this.separatorKeysCodes=[o.ENTER,o.COMMA],this.searchControl=new n.FormControl,this.onChange=function(){},this.onTouched=function(){}}var a;return a=e,Object.defineProperty(e.prototype,"value",{get:function(){return this.selectedTags},set:function(e){this.selectedTags=e,this.onChange(e),this._change(e),this.onTouched()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;this.filteredItems=this.searchControl.valueChanges.pipe(r.startWith(null),r.map((function(t){return t?e._filter(t):e.items.slice()})))},e.prototype.writeValue=function(e){e&&(this.value=e),null===e&&(this.value=[])},e.prototype.registerOnChange=function(e){this.change.emit(e),this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e,this.touched.emit(e)},e.prototype.setDisabledState=function(e){this.searchControl.disable()},e.prototype._modelChange=function(e){this.ngModelChange.emit(e)},e.prototype._change=function(e){this.change.emit(e)},e.prototype._focus=function(e){this.focus.emit(e)},e.prototype.add=function(e){var t=e.input,n=e.value;(n||"").trim()&&this.selectedTags.push(n.trim()),t&&(t.value=""),this.searchControl.setValue(null),this._change(this.selectedTags)},e.prototype.remove=function(e){var t=this.selectedTags.indexOf(e);t>=0&&this.selectedTags.splice(t,1),this._change(this.selectedTags)},e.prototype.selected=function(e){this.pushTag(e.option.value),this.tagsInput.nativeElement.value="",this.searchControl.setValue(null),this.select.emit(e.option.value)},e.prototype.clear=function(){this.selectedTags=[]},e.prototype.pushTag=function(e){this.selectedTags.includes(e)||(this.selectedTags.push(e),this._change(this.selectedTags))},e.prototype._filter=function(e){var t=this,n=(this.displayBy&&e[this.displayBy]?e[this.displayBy]:e).toLowerCase();return this.displayBy?this.items.filter((function(e){return e[t.displayBy].toLowerCase().includes(n)})):this.items.filter((function(e){return e.toLowerCase().includes(n)}))},h([t.Input()],e.prototype,"appearance",void 0),h([t.Input()],e.prototype,"readonly",void 0),h([t.Input()],e.prototype,"items",void 0),h([t.Input()],e.prototype,"placeholder",void 0),h([t.Input()],e.prototype,"displayBy",void 0),h([t.Input()],e.prototype,"isLoading",void 0),h([t.Input()],e.prototype,"selectedTags",void 0),h([t.Output()],e.prototype,"reset",void 0),h([t.Output()],e.prototype,"ngModelChange",void 0),h([t.Output()],e.prototype,"change",void 0),h([t.Output()],e.prototype,"focus",void 0),h([t.Output()],e.prototype,"select",void 0),h([t.Output()],e.prototype,"touched",void 0),h([t.ViewChild("tagsInput")],e.prototype,"tagsInput",void 0),e=a=h([t.Component({selector:"ngx-mat-tag-input",template:'<mat-form-field [appearance]="appearance" class="mat-tag-input-container">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip (removed)="remove(item)" *ngFor="let item of selectedTags" [removable]="true" [selectable]="true">\r\n      {{displayBy ? item[displayBy] : item}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    <input #tagsInput\r\n           (focus)="_focus($event)" (matChipInputTokenEnd)="add($event)" (ngModelChange)="_modelChange($event)"\r\n           [formControl]="searchControl" [matAutocomplete]="auto" [matChipInputFor]="chipList"\r\n           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\r\n           [placeholder]="placeholder">\r\n  </mat-chip-list>\r\n  <button (click)="clear()" *ngIf="selectedTags.length !== 0" mat-button mat-icon-button\r\n          matSuffix>\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">\r\n    <mat-option *ngIf="isLoading" class="centered">\r\n      <mat-spinner diameter="40"></mat-spinner>\r\n    </mat-option>\r\n    <mat-option *ngFor="let item of filteredItems | async" [value]="item">\r\n      {{displayBy ? item[displayBy] : item}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n</mat-form-field>\r\n',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return a})),multi:!0}],styles:[".mat-tag-input-container{width:100%}.centered{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}.centered mat-spinner{left:45%}"]})],e)}(),f=function(){function e(){}return e=h([t.NgModule({declarations:[g],imports:[a.CommonModule,i.MatFormFieldModule,u.MatIconModule,n.FormsModule,s.MatInputModule,n.ReactiveFormsModule,l.MatMenuModule,p.MatChipsModule,c.MatAutocompleteModule,m.MatProgressSpinnerModule,d.MatButtonModule],exports:[g]})],e)}();e.NgxMatTagInputComponent=g,e.NgxMatTagInputModule=f,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-mat-tag-input.umd.min.js.map