ngx-multi-tagsinput
Version:
Multiple tags input element
113 lines (112 loc) • 11.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, Output, Input, EventEmitter } from '@angular/core';
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;
}());
export { NgxMultiTagsInputComponent };
if (false) {
/** @type {?} */
NgxMultiTagsInputComponent.prototype.tags;
/** @type {?} */
NgxMultiTagsInputComponent.prototype.label;
/** @type {?} */
NgxMultiTagsInputComponent.prototype.placeholder;
/** @type {?} */
NgxMultiTagsInputComponent.prototype.class;
/** @type {?} */
NgxMultiTagsInputComponent.prototype.required;
/** @type {?} */
NgxMultiTagsInputComponent.prototype.errorMessage;
/** @type {?} */
NgxMultiTagsInputComponent.prototype.output;
/** @type {?} */
NgxMultiTagsInputComponent.prototype.requiredState;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRhZ3MtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LW11bHRpLXRhZ3NpbnB1dC8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtdGFncy1pbnB1dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7O0lBNkY3RTtzQkFGOEIsSUFBSSxZQUFZLEVBQVM7UUFHckQsSUFBSSxDQUFDLElBQUksR0FBRyxFQUFFLENBQUM7UUFDZixJQUFJLENBQUMsWUFBWSxHQUFHLHlCQUF5QixDQUFDO1FBQzlDLElBQUksQ0FBQyxLQUFLLEdBQUcsWUFBWSxDQUFBO1FBQ3pCLElBQUksQ0FBQyxXQUFXLEdBQUcsWUFBWSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxhQUFhLEdBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQztLQUNyQzs7OztJQUVELDZDQUFROzs7SUFBUjtLQUNDOzs7O0lBQ00sOENBQVM7Ozs7UUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLEVBQUUsQ0FBQzs7Ozs7O0lBR1YsOENBQVM7Ozs7Y0FBQyxLQUFhOztRQUM1QixJQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN2QyxJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsRUFBRTtZQUNoQixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7U0FDNUI7UUFDRCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7Ozs7OztJQUd2Qiw2Q0FBUTs7OztjQUFDLEtBQVU7UUFDeEIsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLE9BQU8sSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLElBQUksRUFBRTtZQUMvQyxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxLQUFLLEVBQUUsRUFBRTtnQkFDN0IsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztnQkFDbkMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO2FBQ3pCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO2FBQzNCO1lBQ0QsSUFBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUM7Z0JBQ3hCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO2dCQUMzQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDN0I7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7YUFDM0I7U0FDRjs7O2dCQS9ISixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsUUFBUSxFQUFFLHMyQkFnQlQ7NkJBQ1EsNG1DQXVETjtpQkFDSjs7Ozs7d0JBR0UsS0FBSzs4QkFFTCxLQUFLO3dCQUVMLEtBQUs7MkJBRUwsS0FBSzsrQkFFTCxLQUFLO3lCQUVMLE1BQU07O3FDQTFGVDs7U0E4RWEsMEJBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE91dHB1dCwgSW5wdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3hNdWx0aVRhZ3NJbnB1dCcsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXY+XG4gIDxkaXYgY2xhc3M9XCJuZ3gtaW5wdXRjb250YWluZXJcIj5cbiAgPGxhYmVsIGNsYXNzPVwibmd4LXRhZ3NsYWJlbFwiIGZvcj1cInRhZ3NJbnB1dFwiPnt7bGFiZWx9fSA8c3BhbiBjbGFzcz1cImVycm9yXCIgKm5nSWY9XCJyZXF1aXJlZFwiPio8L3NwYW4+PC9sYWJlbD5cbiAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgaWQ9XCJ0YWdzSW5wdXRcIiBuYW1lPVwidGFnc0lucHV0XCIgXG4gICAgICAgY2xhc3M9XCJuZ3gtdGFnc2lucHV0XCIgYXV0b2NvbXBsZXRlPVwib2ZmXCIgcGxhY2Vob2xkZXI9XCJ7e3BsYWNlaG9sZGVyfX1cIiAoa2V5ZG93bik9XCJpbnB1dFRhZygkZXZlbnQpXCJcbiAgICAgIC8+XG4gIDxzbWFsbCBjbGFzcz1cImVycm9yXCIgKm5nSWY9XCJyZXF1aXJlZFN0YXRlXCI+XG4gICAgICB7e2Vycm9yTWVzc2FnZX19XG4gIDwvc21hbGw+XG48L2Rpdj5cbiAgPGRpdiBjbGFzcz1cIm5neC10YWdzY29udGFpbmVyXCI+XG4gIDxzcGFuIGNsYXNzPVwibmd4LXRhZ1wiICpuZ0Zvcj1cImxldCBlYWNoIG9mIHRhZ3M7XCI+e3tlYWNofX1cbiAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiAgKGNsaWNrKT1cInJlbW92ZVRhZyhlYWNoKVwiIHdpZHRoPVwiMjBweFwiIGhlaWdodD1cIjIwcHhcIiB2aWV3Qm94PVwiMCAwIDIwIDIwXCI+PHBhdGggZD1cIk0xOSA2LjQxTDE3LjU5IDUgMTIgMTAuNTkgNi40MSA1IDUgNi40MSAxMC41OSAxMiA1IDE3LjU5IDYuNDEgMTkgMTIgMTMuNDEgMTcuNTkgMTkgMTkgMTcuNTkgMTMuNDEgMTJ6XCIvPjxwYXRoIGQ9XCJNMCAwaDIwdjIwSDB6XCIgZmlsbD1cIm5vbmVcIi8+PC9zdmc+XG4gIDwvc3Bhbj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW2BcbiAgICAqIHtcbiAgICAgIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAgICAgZm9udC1mYW1pbHk6IC1hcHBsZS1zeXN0ZW0sQmxpbmtNYWNTeXN0ZW1Gb250LFNlZ29lIFVJLFJvYm90byxPeHlnZW4sVWJ1bnR1LENhbnRhcmVsbCxPcGVuIFNhbnMsSGVsdmV0aWNhIE5ldWUsc2Fucy1zZXJpZiFpbXBvcnRhbnQ7XG4gICAgfVxuICAgLm5neC10YWdzY29udGFpbmVye1xuICAgICB3aWR0aDogMTAwJTtcbiAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgfVxuICAgXG4gICAubmd4LXRhZyB7XG4gICAgIGNvbG9yOiAjNGE0YTRhO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2VmZWZlZjtcbiAgICAgYm9yZGVyOiAycHggc29saWQgI2VmZWZlZjtcbiAgICAgcGFkZGluZzogM3B4IDhweDtcbiAgICAgZm9udC1zaXplOiAxNnB4O1xuICAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgICAgYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICAgfVxuXG4gICAubmd4LXRhZyBzdmcge1xuICAgICBoZWlnaHQ6IDE1cHg7XG4gICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgY29sb3I6ICM2YjZiNmI7XG4gICB9XG4gICBcbiAgIC5lcnJvciB7XG4gICAgIGNvbG9yOiByZWQ7XG4gICB9XG4gICBcbiAgIC5uZ3gtaW5wdXRjb250YWluZXJ7XG4gICAgIG1hcmdpbjogMTBweCAwcHg7XG4gICB9XG4gICBcbiAgIC5uZ3gtdGFnc2xhYmVse1xuICAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG4gICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgIH1cbiAgIFxuICAgLm5neC10YWdzaW5wdXR7XG4gICAgIGFsbDogdW5zZXQ7XG4gICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICB3aWR0aDogMTAwJTtcbiAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICBtYXJnaW46IDBweDtcbiAgICAgaGVpZ2h0OiA0MnB4O1xuICAgICBib3JkZXI6IDFweCBzb2xpZCAjY2NjY2NjO1xuICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICAgICBwYWRkaW5nOiAwcHggMTVweDtcbiAgICAgYm9yZGVyLXJhZGl1czogMnB4O1xuICAgfVxuICAgXG4gICAubmd4LXRhZ3NpbnB1dDo6cGxhY2Vob2xkZXJ7XG4gICAgIGNvbG9yOiAjNmI2YjZiO1xuICAgfWBdXG59KVxuZXhwb3J0IGNsYXNzIE5neE11bHRpVGFnc0lucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgdGFnczogYW55W107XG4gIEBJbnB1dCgpXG4gIGxhYmVsOiBzdHJpbmc7XG4gIEBJbnB1dCgpXG4gIHBsYWNlaG9sZGVyOiBzdHJpbmc7XG4gIEBJbnB1dCgpXG4gIGNsYXNzOiBzdHJpbmc7XG4gIEBJbnB1dCgpXG4gIHJlcXVpcmVkOiBib29sZWFuO1xuICBASW5wdXQoKVxuICBlcnJvck1lc3NhZ2U6IHN0cmluZztcbiAgQE91dHB1dCgpXG4gIG91dHB1dDogRXZlbnRFbWl0dGVyPGFueVtdPiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55W10+KCk7XG4gIHJlcXVpcmVkU3RhdGU6IGJvb2xlYW47XG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMudGFncyA9IFtdO1xuICAgIHRoaXMuZXJyb3JNZXNzYWdlID0gJ1RhZ3MgbXVzdCBub3QgYmUgZW1wdHkuJztcbiAgICB0aGlzLmxhYmVsID0gJ0VudGVyIFRhZ3MnXG4gICAgdGhpcy5wbGFjZWhvbGRlciA9ICdFbnRlciB0YWdzJztcbiAgICB0aGlzLnJlcXVpcmVkU3RhdGUgPSAgdGhpcy5yZXF1aXJlZDtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICB9XG4gIHB1YmxpYyBjbGVhclRhZ3MoKSB7XG4gICAgdGhpcy50YWdzID0gW107XG4gIH1cblxuICBwdWJsaWMgcmVtb3ZlVGFnKHZhbHVlOiBzdHJpbmcpIHtcbiAgICBjb25zdCBpbmRleCA9IHRoaXMudGFncy5pbmRleE9mKHZhbHVlKTtcbiAgICBpZiAoaW5kZXggIT09IC0xKSB7XG4gICAgICB0aGlzLnRhZ3Muc3BsaWNlKGluZGV4LCAxKTtcbiAgICB9XG4gICAgdGhpcy5vdXRwdXQuZW1pdCh0aGlzLnRhZ3MpO1xuICB9XG5cbiAgcHVibGljIGlucHV0VGFnKGV2ZW50OiBhbnkpIHtcbiAgICBpZiAoZXZlbnQua2V5ID09PSAnRW50ZXInIHx8IGV2ZW50LmtleSA9PT0gJzEzJykge1xuICAgICAgaWYgKGV2ZW50LnRhcmdldC52YWx1ZSAhPT0gJycpIHtcbiAgICAgICAgdGhpcy50YWdzLnB1c2goZXZlbnQudGFyZ2V0LnZhbHVlKTtcbiAgICAgICAgZXZlbnQudGFyZ2V0LnZhbHVlID0gJyc7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnJlcXVpcmVkU3RhdGUgPSB0cnVlO1xuICAgICAgfVxuICAgICAgaWYodGhpcy50YWdzLmxlbmd0aCAhPT0gMCl7XG4gICAgICAgIHRoaXMucmVxdWlyZWRTdGF0ZSA9IGZhbHNlO1xuICAgICAgICB0aGlzLm91dHB1dC5lbWl0KHRoaXMudGFncyk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnJlcXVpcmVkU3RhdGUgPSB0cnVlO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG59XG4iXX0=