items-text-box/fesm2015/items-text-box.js

This is an Angular component of a textbox which allows users to input an array of text, and is compatible with Angular Reactive Forms. This component is exactly like the Chips component in Angular Material, as such this component is created for demonstrat

import { Component, forwardRef, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';

class ItemTextBoxComponent {
    constructor() {
        this.items = [];
        this.text = '';
        this.touched = false;
        this.disabled = false;
        this.onChange = (items) => { };
        this.onTouched = () => { this.touched = true; };
    }
    removeItem(item) {
        if (this.disabled) {
            return;
        }
        this.items.splice(item, 1);
        this.copyAndEmit();
    }
    ngOnInit() {
    }
    onEnter(value) {
        if (this.disabled) {
            return;
        }
        this.items.push(value);
        this.text = '';
        this.copyAndEmit();
    }
    removeLast() {
        if (this.disabled) {
            return;
        }
        if (this.text.length === 0) {
            this.items.pop();
            this.copyAndEmit();
        }
    }
    registerOnChange(onChange) {
        this.onChange = onChange;
    }
    registerOnTouched(onTouched) {
        this.onTouched = onTouched;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    writeValue(items) {
        if (!this.disabled) {
            this.onTouched();
            this.items = items ? items : [];
            this.copyAndEmit();
        }
    }
    registerOnValidatorChange(fn) {
    }
    validate(control) {
        return null;
    }
    copyAndEmit() {
        this.items = this.items.slice(0);
        this.onChange(this.items);
        this.onTouched();
    }
}
ItemTextBoxComponent.decorators = [
    { type: Component, args: [{
                selector: 'item-text-box',
                template: "<div>\n  <ul>\n    <li *ngFor=\"let item of items; let i = index\" (click)=\"removeItem(i)\">\n      {{item}}\n    </li>\n  </ul>\n  <input type='text' value=\"hi\" #input (keyup.enter)=\"onEnter(input.value)\" (keydown)=\"onTouched()\" (keydown.backspace)=\"removeLast()\" [(ngModel)]=\"text\" />\n</div>\n",
                providers: [{
                        provide: NG_VALUE_ACCESSOR,
                        multi: true,
                        useExisting: forwardRef(() => ItemTextBoxComponent)
                    }, {
                        provide: NG_VALIDATORS,
                        multi: true,
                        useExisting: forwardRef(() => ItemTextBoxComponent)
                    }],
                styles: ["div{cursor:text;display:flex;padding:1px;position:relative;overflow:hidden;border:1px inset #767676;border-radius:3px;line-height:1em}input{flex-grow:1;outline:0;border:0;margin:1px}ul{padding:0;margin:0}li,ul{display:flex}li{list-style:none;border-radius:3px;border:1px solid #000;margin:0 3px;padding:0 3px;align-items:center}li:after{content:\"\u00D7\";background-color:#303030;color:#fff;font-family:sans-serif;border-radius:50%;margin-left:3px;cursor:pointer;font-size:x-small;box-sizing:border-box;width:1.2em;height:1.2em;text-align:center;line-height:1.1}"]
            },] }
];

class ItemTextBoxModule {
}
ItemTextBoxModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ItemTextBoxComponent
                ],
                imports: [
                    CommonModule,
                    FormsModule
                ],
                exports: [
                    ItemTextBoxComponent
                ]
            },] }
];

/**
 * Generated bundle index. Do not edit.
 */

export { ItemTextBoxModule, ItemTextBoxComponent as ɵa };
//# sourceMappingURL=items-text-box.js.map