ngx-multi-tagsinput
Version:
Multiple tags input element
2 lines • 4.03 kB
JavaScript
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ngx-multi-tagsinput",["exports","@angular/core","@angular/forms","@angular/common","@angular/platform-browser"],t):t(n["ngx-multi-tagsinput"]={},n.ng.core,n.ng.forms,n.ng.common,n.ng.platformBrowser)}(this,function(n,t,e,r,a){"use strict";var o=function(){function n(){}return n.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],n.ctorParameters=function(){return[]},n.ngInjectableDef=t.defineInjectable({factory:function(){return new n},token:n,providedIn:"root"}),n}(),i=function(){function n(){this.output=new t.EventEmitter,this.tags=[],this.errorMessage="Tags must not be empty.",this.label="Enter Tags",this.placeholder="Enter tags",this.requiredState=this.required}return n.prototype.ngOnInit=function(){},n.prototype.clearTags=function(){this.tags=[]},n.prototype.removeTag=function(n){var t=this.tags.indexOf(n);-1!==t&&this.tags.splice(t,1),this.output.emit(this.tags)},n.prototype.inputTag=function(n){"Enter"!==n.key&&"13"!==n.key||(""!==n.target.value?(this.tags.push(n.target.value),n.target.value=""):this.requiredState=!0,0!==this.tags.length?(this.requiredState=!1,this.output.emit(this.tags)):this.requiredState=!0)},n.decorators=[{type:t.Component,args:[{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 }"]}]}],n.ctorParameters=function(){return[]},n.propDecorators={label:[{type:t.Input}],placeholder:[{type:t.Input}],"class":[{type:t.Input}],required:[{type:t.Input}],errorMessage:[{type:t.Input}],output:[{type:t.Output}]},n}(),s=function(){function n(){}return n.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,a.BrowserModule,e.FormsModule,e.ReactiveFormsModule],declarations:[i],exports:[i]}]}],n}();n.NgxMultiTagsInputService=o,n.NgxMultiTagsInputComponent=i,n.NgxMultiTagsInputModule=s,Object.defineProperty(n,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-multi-tagsinput.umd.min.js.map