items-text-box
Version:
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
81 lines • 8.65 kB
JavaScript
import { Component, forwardRef } from '@angular/core';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
export 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}"]
},] }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXRlbS10ZXh0LWJveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL21vZHVsZXMvaXRlbS10ZXh0LWJveC9pdGVtLXRleHQtYm94LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBZ0IsTUFBTSxlQUFlLENBQUM7QUFDbkUsT0FBTyxFQUF3QyxhQUFhLEVBQUUsaUJBQWlCLEVBQThCLE1BQU0sZ0JBQWdCLENBQUM7QUFnQnBJLE1BQU0sT0FBTyxvQkFBb0I7SUFkakM7UUFnQkUsVUFBSyxHQUFhLEVBQUUsQ0FBQztRQUNyQixTQUFJLEdBQUcsRUFBRSxDQUFDO1FBQ1YsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCLGFBQVEsR0FBRyxDQUFDLEtBQWUsRUFBRSxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ25DLGNBQVMsR0FBRyxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQTJEN0MsQ0FBQztJQXpEQyxVQUFVLENBQUMsSUFBWTtRQUNyQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFBRSxPQUFPO1NBQUU7UUFDOUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQzNCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsUUFBUTtJQUNSLENBQUM7SUFFRCxPQUFPLENBQUMsS0FBYTtRQUNuQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFBRSxPQUFPO1NBQUU7UUFDOUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsSUFBSSxDQUFDLElBQUksR0FBRyxFQUFFLENBQUM7UUFDZixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFBRSxPQUFPO1NBQUU7UUFDOUIsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUU7WUFDMUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNqQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDcEI7SUFDSCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsUUFBYTtRQUM1QixJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztJQUMzQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsU0FBYztRQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQztJQUM3QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFlO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNqQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDaEMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUVELHlCQUF5QixDQUFDLEVBQWM7SUFDeEMsQ0FBQztJQUVELFFBQVEsQ0FBQyxPQUF3QjtRQUMvQixPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFFTyxXQUFXO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDakMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7OztZQS9FRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGVBQWU7Z0JBQ3pCLCtUQUE2QztnQkFFN0MsU0FBUyxFQUFFLENBQUM7d0JBQ1YsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsS0FBSyxFQUFFLElBQUk7d0JBQ1gsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztxQkFDcEQsRUFBRTt3QkFDRCxPQUFPLEVBQUUsYUFBYTt3QkFDdEIsS0FBSyxFQUFFLElBQUk7d0JBQ1gsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztxQkFDcEQsQ0FBQzs7YUFDSCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgT25Jbml0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7QWJzdHJhY3RDb250cm9sLCBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMSURBVE9SUywgTkdfVkFMVUVfQUNDRVNTT1IsIFZhbGlkYXRpb25FcnJvcnMsIFZhbGlkYXRvcn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpdGVtLXRleHQtYm94JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2l0ZW0tdGV4dC1ib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pdGVtLXRleHQtYm94LmNvbXBvbmVudC5jc3MnXSxcbiAgcHJvdmlkZXJzOiBbe1xuICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgIG11bHRpOiB0cnVlLFxuICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEl0ZW1UZXh0Qm94Q29tcG9uZW50KVxuICB9LCB7XG4gICAgcHJvdmlkZTogTkdfVkFMSURBVE9SUyxcbiAgICBtdWx0aTogdHJ1ZSxcbiAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBJdGVtVGV4dEJveENvbXBvbmVudClcbiAgfV1cbn0pXG5leHBvcnQgY2xhc3MgSXRlbVRleHRCb3hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBWYWxpZGF0b3IgIHtcblxuICBpdGVtczogc3RyaW5nW10gPSBbXTtcbiAgdGV4dCA9ICcnO1xuICB0b3VjaGVkID0gZmFsc2U7XG4gIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgb25DaGFuZ2UgPSAoaXRlbXM6IHN0cmluZ1tdKSA9PiB7fTtcbiAgb25Ub3VjaGVkID0gKCkgPT4geyB0aGlzLnRvdWNoZWQgPSB0cnVlOyB9O1xuXG4gIHJlbW92ZUl0ZW0oaXRlbTogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHsgcmV0dXJuOyB9XG4gICAgdGhpcy5pdGVtcy5zcGxpY2UoaXRlbSwgMSk7XG4gICAgdGhpcy5jb3B5QW5kRW1pdCgpO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICBvbkVudGVyKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkgeyByZXR1cm47IH1cbiAgICB0aGlzLml0ZW1zLnB1c2godmFsdWUpO1xuICAgIHRoaXMudGV4dCA9ICcnO1xuICAgIHRoaXMuY29weUFuZEVtaXQoKTtcbiAgfVxuXG4gIHJlbW92ZUxhc3QoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHsgcmV0dXJuOyB9XG4gICAgaWYgKHRoaXMudGV4dC5sZW5ndGggPT09IDApIHtcbiAgICAgIHRoaXMuaXRlbXMucG9wKCk7XG4gICAgICB0aGlzLmNvcHlBbmRFbWl0KCk7XG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShvbkNoYW5nZTogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IG9uQ2hhbmdlO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQob25Ub3VjaGVkOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IG9uVG91Y2hlZDtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICB9XG5cbiAgd3JpdGVWYWx1ZShpdGVtczogc3RyaW5nW10pOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gICAgICB0aGlzLml0ZW1zID0gaXRlbXMgPyBpdGVtcyA6IFtdO1xuICAgICAgdGhpcy5jb3B5QW5kRW1pdCgpO1xuICAgIH1cbiAgfVxuXG4gIHJlZ2lzdGVyT25WYWxpZGF0b3JDaGFuZ2UoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgfVxuXG4gIHZhbGlkYXRlKGNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCk6IFZhbGlkYXRpb25FcnJvcnMgfCBudWxsIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIHByaXZhdGUgY29weUFuZEVtaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pdGVtcyA9IHRoaXMuaXRlbXMuc2xpY2UoMCk7XG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLml0ZW1zKTtcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICB9XG5cbn1cbiJdfQ==