ngx-multi-tagsinput
Version:
Multiple tags input element
1 lines • 4.94 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgxMultiTagsInputService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"NgxMultiTagsInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ngxMultiTagsInput","template":"\n <div>\n <div class=\"ngx-inputcontainer\">\n <label class=\"ngx-tagslabel\" for=\"tagsInput\">{{label}} <span class=\"error\" *ngIf=\"required\">*</span></label>\n <input type=\"text\" id=\"tagsInput\" name=\"tagsInput\" \n class=\"ngx-tagsinput\" autocomplete=\"off\" placeholder=\"{{placeholder}}\" (keydown)=\"inputTag($event)\"\n />\n <small class=\"error\" *ngIf=\"requiredState\">\n {{errorMessage}}\n </small>\n</div>\n <div class=\"ngx-tagscontainer\">\n <span class=\"ngx-tag\" *ngFor=\"let each of tags;\">{{each}}\n <svg xmlns=\"http://www.w3.org/2000/svg\" (click)=\"removeTag(each)\" width=\"20px\" height=\"20px\" viewBox=\"0 0 20 20\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/><path d=\"M0 0h20v20H0z\" fill=\"none\"/></svg>\n </span>\n </div>\n ","styles":["\n * {\n -webkit-font-smoothing: antialiased;\n font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif!important;\n }\n .ngx-tagscontainer{\n width: 100%;\n max-width: 100%;\n }\n \n .ngx-tag {\n color: #4a4a4a;\n background-color: #efefef;\n border: 2px solid #efefef;\n padding: 3px 8px;\n font-size: 16px;\n margin-right: 5px;\n border-radius: 2px;\n vertical-align: middle;\n }\n\n .ngx-tag svg {\n height: 15px;\n cursor: pointer;\n color: #6b6b6b;\n }\n \n .error {\n color: red;\n }\n \n .ngx-inputcontainer{\n margin: 10px 0px;\n }\n \n .ngx-tagslabel{\n margin-bottom: 5px;\n display: inline-block;\n }\n \n .ngx-tagsinput{\n all: unset;\n display: block;\n width: 100%;\n max-width: 100%;\n margin: 0px;\n height: 42px;\n border: 1px solid #cccccc;\n background-color: #ffffff;\n padding: 0px 15px;\n border-radius: 2px;\n }\n \n .ngx-tagsinput::placeholder{\n color: #6b6b6b;\n }"]}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"errorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"output":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":90,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"clearTags":[{"__symbolic":"method"}],"removeTag":[{"__symbolic":"method"}],"inputTag":[{"__symbolic":"method"}]}},"NgxMultiTagsInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":11,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgxMultiTagsInputComponent"}],"exports":[{"__symbolic":"reference","name":"NgxMultiTagsInputComponent"}]}]}],"members":{}}},"origins":{"NgxMultiTagsInputService":"./lib/ngx-tags-input.service","NgxMultiTagsInputComponent":"./lib/ngx-tags-input.component","NgxMultiTagsInputModule":"./lib/ngx-tags-input.module"},"importAs":"ngx-multi-tagsinput"}