ngx-multi-tagsinput
Version:
Multiple tags input element
150 lines (143 loc) • 6.6 kB
JavaScript
import { Injectable, Component, Output, Input, EventEmitter, NgModule, defineInjectable } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var NgxMultiTagsInputService = /** @class */ (function () {
function NgxMultiTagsInputService() {
}
NgxMultiTagsInputService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxMultiTagsInputService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxMultiTagsInputService.ngInjectableDef = defineInjectable({ factory: function NgxMultiTagsInputService_Factory() { return new NgxMultiTagsInputService(); }, token: NgxMultiTagsInputService, providedIn: "root" });
return NgxMultiTagsInputService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var NgxMultiTagsInputComponent = /** @class */ (function () {
function NgxMultiTagsInputComponent() {
this.output = new EventEmitter();
this.tags = [];
this.errorMessage = 'Tags must not be empty.';
this.label = 'Enter Tags';
this.placeholder = 'Enter tags';
this.requiredState = this.required;
}
/**
* @return {?}
*/
NgxMultiTagsInputComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
NgxMultiTagsInputComponent.prototype.clearTags = /**
* @return {?}
*/
function () {
this.tags = [];
};
/**
* @param {?} value
* @return {?}
*/
NgxMultiTagsInputComponent.prototype.removeTag = /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var index = this.tags.indexOf(value);
if (index !== -1) {
this.tags.splice(index, 1);
}
this.output.emit(this.tags);
};
/**
* @param {?} event
* @return {?}
*/
NgxMultiTagsInputComponent.prototype.inputTag = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.key === 'Enter' || event.key === '13') {
if (event.target.value !== '') {
this.tags.push(event.target.value);
event.target.value = '';
}
else {
this.requiredState = true;
}
if (this.tags.length !== 0) {
this.requiredState = false;
this.output.emit(this.tags);
}
else {
this.requiredState = true;
}
}
};
NgxMultiTagsInputComponent.decorators = [
{ type: 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 }"]
}] }
];
/** @nocollapse */
NgxMultiTagsInputComponent.ctorParameters = function () { return []; };
NgxMultiTagsInputComponent.propDecorators = {
label: [{ type: Input }],
placeholder: [{ type: Input }],
class: [{ type: Input }],
required: [{ type: Input }],
errorMessage: [{ type: Input }],
output: [{ type: Output }]
};
return NgxMultiTagsInputComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var NgxMultiTagsInputModule = /** @class */ (function () {
function NgxMultiTagsInputModule() {
}
NgxMultiTagsInputModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
BrowserModule,
FormsModule,
ReactiveFormsModule
],
declarations: [NgxMultiTagsInputComponent],
exports: [NgxMultiTagsInputComponent]
},] }
];
return NgxMultiTagsInputModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
export { NgxMultiTagsInputService, NgxMultiTagsInputComponent, NgxMultiTagsInputModule };
//# sourceMappingURL=ngx-multi-tagsinput.js.map