UNPKG

material2-extensions

Version:

A component library of custom extensions to [Angular Material 2](https://material.angular.io/).

3 lines (2 loc) 3.92 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/material"),require("@angular/cdk/keycodes"),require("rxjs/operators"),require("@angular/platform-browser/animations"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/material","@angular/cdk/keycodes","rxjs/operators","@angular/platform-browser/animations","@angular/platform-browser"],e):e(t["material2-extensions"]={},t.ng.core,t.ng.forms,t.ng.material,t.ng.cdk.keycodes,t.Rx.Observable.prototype,t.ng.platformBrowser.animations,t.ng.platformBrowser)}(this,function(t,e,o,n,i,r,a,s){"use strict";var p=function(){function t(){this.visible=!0,this.selectable=!0,this.removable=!0,this.addOnBlur=!0,this.separatorKeysCodes=[i.ENTER,i.COMMA],this.placeholder="",this.options=[],this.isOptionsFilter=!0,this.onIllegalInput=new e.EventEmitter,this.inputValue="",this.chips=[],this.onValueChange=new e.EventEmitter,this.myControl=new o.FormControl}return t.prototype.add=function(t){0===this.inputValue.length||this.options.indexOf(this.inputValue)<0?0<this.inputValue.length&&(console.log("error, not an option",this.inputValue),this.onIllegalInput.emit("You can only add items from the list")):(this.chips.push(this.inputValue.trim()),this.onValueChange.emit(this.chips),this.options.splice(this.options.indexOf(this.inputValue),1),this.inputValue="",t.input.value="")},t.prototype.remove=function(t){var e=this.chips.indexOf(t);0<=e&&(this.options.push(t),this.chips.splice(e,1),this.onValueChange.emit(this.chips))},t.prototype.chooseFirstOption=function(t){"ArrowDown"!==t.key&&"ArrowUp"!==t.key&&this.matAutocomplete._keyManager.setFirstItemActive()},t.prototype.filter=function(e){var o=this;return this.options.filter(function(t){return""!==o.inputValue&&(!o.isOptionsFilter||0===t.toLowerCase().indexOf(e.toLowerCase()))})},t.prototype.ngOnInit=function(){var e=this;this.filteredOptions=this.myControl.valueChanges.pipe(r.startWith(""),r.map(function(t){return e.filter(t)}))},t}();p.decorators=[{type:e.Component,args:[{selector:"mat-chip-input",styles:[":host .mat-form-field{display:block}"],template:'<mat-form-field>\n <mat-chip-list #chipList>\n <mat-chip *ngFor="let chip of chips" [selectable]="selectable"\n [removable]="removable" (remove)="remove(chip)">\n {{chip}}\n <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>\n </mat-chip>\n <input matInput placeholder="{{placeholder}}"\n [matChipInputFor]="chipList"\n [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n [matChipInputAddOnBlur]="addOnBlur"\n (matChipInputTokenEnd)="add($event)"\n [formControl]="myControl" [matAutocomplete]="auto"\n [(ngModel)]="inputValue"\n (keyup)="chooseFirstOption($event)"\n >\n <mat-autocomplete #auto="matAutocomplete">\n <mat-option *ngFor="let option of filteredOptions | async" [value]="option">\n {{ option }}\n </mat-option>\n </mat-autocomplete>\n </mat-chip-list>\n</mat-form-field>\n'}]}],p.ctorParameters=function(){return[]},p.propDecorators={placeholder:[{type:e.Input}],options:[{type:e.Input}],isOptionsFilter:[{type:e.Input}],onIllegalInput:[{type:e.Output}],chips:[{type:e.Input}],onValueChange:[{type:e.Output}],matAutocomplete:[{type:e.ViewChild,args:[n.MatAutocomplete]}]};var l=function(){};l.decorators=[{type:e.NgModule,args:[{imports:[s.BrowserModule,a.BrowserAnimationsModule,o.FormsModule,o.ReactiveFormsModule,n.MatIconModule,n.MatChipsModule,n.MatFormFieldModule,n.MatAutocompleteModule],providers:[],declarations:[p],exports:[p]}]}],l.ctorParameters=function(){return[]},t.MatChipInputModule=l,t.ɵa=p,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=material2-extensions.umd.min.js.map