material2-extensions/esm2015/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';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class ChipInputComponent {
    constructor() {
        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();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    add(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 {
            // Add our chip
            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 = '';
        }
    }
    /**
     * @param {?} chip
     * @return {?}
     */
    remove(chip) {
        let /** @type {?} */ index = this.chips.indexOf(chip);
        if (index >= 0) {
            this.options.push(chip);
            this.chips.splice(index, 1);
            this.onValueChange.emit(this.chips);
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    chooseFirstOption(event) {
        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
            return;
        }
        this.matAutocomplete._keyManager.setFirstItemActive();
    }
    /**
     * @param {?} val
     * @return {?}
     */
    filter(val) {
        return this.options.filter(option => {
            if (this.inputValue === '')
                return false;
            if (this.isOptionsFilter) {
                return option.toLowerCase().indexOf(val.toLowerCase()) === 0;
            }
            else {
                return true;
            }
        });
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.filteredOptions = this.myControl.valueChanges
            .pipe(startWith(''), map((val) => this.filter(val)));
    }
}
ChipInputComponent.decorators = [
    { type: Component, args: [{
                selector: 'mat-chip-input',
                styles: [`:host .mat-form-field{display:block}`],
                template: `<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let chip of chips" [selectable]="selectable"
              [removable]="removable" (remove)="remove(chip)">
      {{chip}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input matInput placeholder="{{placeholder}}"
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)"
           [formControl]="myControl" [matAutocomplete]="auto"
           [(ngModel)]="inputValue"
           (keyup)="chooseFirstOption($event)"
    >
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-chip-list>
</mat-form-field>
`,
            },] },
];
/** @nocollapse */
ChipInputComponent.ctorParameters = () => [];
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,] },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class MatChipInputModule {
}
MatChipInputModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    BrowserModule,
                    BrowserAnimationsModule,
                    FormsModule,
                    ReactiveFormsModule,
                    MatIconModule,
                    MatChipsModule,
                    MatFormFieldModule,
                    MatAutocompleteModule,
                ],
                providers: [],
                declarations: [
                    ChipInputComponent,
                ],
                exports: [
                    ChipInputComponent,
                ]
            },] },
];
/** @nocollapse */
MatChipInputModule.ctorParameters = () => [];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
/**
 * Generated bundle index. Do not edit.
 */

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