material2-extensions/esm5/material2-extensions.js

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

import { Component, EventEmitter, Input, Output, ViewChild, NgModule } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatIconModule } from '@angular/material';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { map, startWith } from 'rxjs/operators';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

var ChipInputComponent = /** @class */ (function () {
    function ChipInputComponent() {
        this.visible = true;
        this.selectable = true;
        this.removable = true;
        this.addOnBlur = true;
        this.separatorKeysCodes = [ENTER, COMMA];
        this.placeholder = '';
        this.options = [];
        this.isOptionsFilter = true;
        this.onIllegalInput = new EventEmitter();
        this.inputValue = '';
        this.chips = [];
        this.onValueChange = new EventEmitter();
        this.myControl = new 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(startWith(''), map(function (val) { return _this.filter(val); }));
    };
    return ChipInputComponent;
}());
ChipInputComponent.decorators = [
    { type: 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: Input },],
    "options": [{ type: Input },],
    "isOptionsFilter": [{ type: Input },],
    "onIllegalInput": [{ type: Output },],
    "chips": [{ type: Input },],
    "onValueChange": [{ type: Output },],
    "matAutocomplete": [{ type: ViewChild, args: [MatAutocomplete,] },],
};
var MatChipInputModule = /** @class */ (function () {
    function MatChipInputModule() {
    }
    return MatChipInputModule;
}());
MatChipInputModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    BrowserModule,
                    BrowserAnimationsModule,
                    FormsModule,
                    ReactiveFormsModule,
                    MatIconModule,
                    MatChipsModule,
                    MatFormFieldModule,
                    MatAutocompleteModule,
                ],
                providers: [],
                declarations: [
                    ChipInputComponent,
                ],
                exports: [
                    ChipInputComponent,
                ]
            },] },
];
MatChipInputModule.ctorParameters = function () { return []; };

export { MatChipInputModule, ChipInputComponent as ɵa };
//# sourceMappingURL=material2-extensions.js.map