items-text-box/items-text-box.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"ItemTextBoxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":13,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"item-text-box","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":13},"multi":true,"useExisting":{"__symbolic":"reference","name":"ɵa"}},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":12,"character":13},"multi":true,"useExisting":{"__symbolic":"reference","name":"ɵa"}}],"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","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:\"×\";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}"]}]}],"members":{"removeItem":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onEnter":[{"__symbolic":"method"}],"removeLast":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnValidatorChange":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"copyAndEmit":[{"__symbolic":"method"}]}}},"origins":{"ItemTextBoxModule":"./src/app/modules/item-text-box/item-text-box.module","ɵa":"./src/app/modules/item-text-box/item-text-box.component"},"importAs":"items-text-box"}