ngx-multi-tagsinput
Version:
Multiple tags input element
157 lines (148 loc) • 7.87 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/forms'), require('/common'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define('ngx-multi-tagsinput', ['exports', '/core', '@angular/forms', '/common', '@angular/platform-browser'], factory) :
(factory((global['ngx-multi-tagsinput'] = {}),global.ng.core,global.ng.forms,global.ng.common,global.ng.platformBrowser));
}(this, (function (exports,i0,forms,common,platformBrowser) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var NgxMultiTagsInputService = /** @class */ (function () {
function NgxMultiTagsInputService() {
}
NgxMultiTagsInputService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxMultiTagsInputService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxMultiTagsInputService.ngInjectableDef = i0.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 i0.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: i0.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: i0.Input }],
placeholder: [{ type: i0.Input }],
class: [{ type: i0.Input }],
required: [{ type: i0.Input }],
errorMessage: [{ type: i0.Input }],
output: [{ type: i0.Output }]
};
return NgxMultiTagsInputComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var NgxMultiTagsInputModule = /** @class */ (function () {
function NgxMultiTagsInputModule() {
}
NgxMultiTagsInputModule.decorators = [
{ type: i0.NgModule, args: [{
imports: [
common.CommonModule,
platformBrowser.BrowserModule,
forms.FormsModule,
forms.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
*/
exports.NgxMultiTagsInputService = NgxMultiTagsInputService;
exports.NgxMultiTagsInputComponent = NgxMultiTagsInputComponent;
exports.NgxMultiTagsInputModule = NgxMultiTagsInputModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-multi-tagsinput.umd.js.map