material2-extensions
Version:
A component library of custom extensions to [Angular Material 2](https://material.angular.io/).
124 lines (119 loc) • 6.18 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(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')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/forms', '@angular/material', '@angular/cdk/keycodes', 'rxjs/operators', '@angular/platform-browser/animations', '@angular/platform-browser'], factory) :
(factory((global['material2-extensions'] = {}),global.ng.core,global.ng.forms,global.ng.material,global.ng.cdk.keycodes,global.Rx.Observable.prototype,global.ng.platformBrowser.animations,global.ng.platformBrowser));
}(this, (function (exports,core,forms,material,keycodes,operators,animations,platformBrowser) { 'use strict';
var ChipInputComponent = /** @class */ (function () {
function ChipInputComponent() {
this.visible = true;
this.selectable = true;
this.removable = true;
this.addOnBlur = true;
this.separatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
this.placeholder = '';
this.options = [];
this.isOptionsFilter = true;
this.onIllegalInput = new core.EventEmitter();
this.inputValue = '';
this.chips = [];
this.onValueChange = new core.EventEmitter();
this.myControl = new forms.FormControl();
}
ChipInputComponent.prototype.add = function (event) {
if (this.inputValue.length === 0 || this.options.indexOf(this.inputValue) < 0) {
if (this.inputValue.length > 0) {
console.log('error, not an option', this.inputValue);
this.onIllegalInput.emit('You can only add items from the list');
}
}
else {
this.chips.push(this.inputValue.trim());
this.onValueChange.emit(this.chips);
this.options.splice(this.options.indexOf(this.inputValue), 1);
this.inputValue = '';
event.input.value = '';
}
};
ChipInputComponent.prototype.remove = function (chip) {
var index = this.chips.indexOf(chip);
if (index >= 0) {
this.options.push(chip);
this.chips.splice(index, 1);
this.onValueChange.emit(this.chips);
}
};
ChipInputComponent.prototype.chooseFirstOption = function (event) {
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
return;
}
this.matAutocomplete._keyManager.setFirstItemActive();
};
ChipInputComponent.prototype.filter = function (val) {
var _this = this;
return this.options.filter(function (option) {
if (_this.inputValue === '')
return false;
if (_this.isOptionsFilter) {
return option.toLowerCase().indexOf(val.toLowerCase()) === 0;
}
else {
return true;
}
});
};
ChipInputComponent.prototype.ngOnInit = function () {
var _this = this;
this.filteredOptions = this.myControl.valueChanges
.pipe(operators.startWith(''), operators.map(function (val) { return _this.filter(val); }));
};
return ChipInputComponent;
}());
ChipInputComponent.decorators = [
{ type: core.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",
},] },
];
ChipInputComponent.ctorParameters = function () { return []; };
ChipInputComponent.propDecorators = {
"placeholder": [{ type: core.Input },],
"options": [{ type: core.Input },],
"isOptionsFilter": [{ type: core.Input },],
"onIllegalInput": [{ type: core.Output },],
"chips": [{ type: core.Input },],
"onValueChange": [{ type: core.Output },],
"matAutocomplete": [{ type: core.ViewChild, args: [material.MatAutocomplete,] },],
};
var MatChipInputModule = /** @class */ (function () {
function MatChipInputModule() {
}
return MatChipInputModule;
}());
MatChipInputModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
platformBrowser.BrowserModule,
animations.BrowserAnimationsModule,
forms.FormsModule,
forms.ReactiveFormsModule,
material.MatIconModule,
material.MatChipsModule,
material.MatFormFieldModule,
material.MatAutocompleteModule,
],
providers: [],
declarations: [
ChipInputComponent,
],
exports: [
ChipInputComponent,
]
},] },
];
MatChipInputModule.ctorParameters = function () { return []; };
exports.MatChipInputModule = MatChipInputModule;
exports.ɵa = ChipInputComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=material2-extensions.umd.js.map