ngx-multi-tagsinput
Version:
Multiple tags input element
168 lines (160 loc) • 11.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, Output, Input, EventEmitter } from '@angular/core';
export class NgxMultiTagsInputComponent {
constructor() {
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 {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
clearTags() {
this.tags = [];
}
/**
* @param {?} value
* @return {?}
*/
removeTag(value) {
/** @type {?} */
const index = this.tags.indexOf(value);
if (index !== -1) {
this.tags.splice(index, 1);
}
this.output.emit(this.tags);
}
/**
* @param {?} event
* @return {?}
*/
inputTag(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: `
<div>
<div class="ngx-inputcontainer">
<label class="ngx-tagslabel" for="tagsInput">{{label}} <span class="error" *ngIf="required">*</span></label>
<input type="text" id="tagsInput" name="tagsInput"
class="ngx-tagsinput" autocomplete="off" placeholder="{{placeholder}}" (keydown)="inputTag($event)"
/>
<small class="error" *ngIf="requiredState">
{{errorMessage}}
</small>
</div>
<div class="ngx-tagscontainer">
<span class="ngx-tag" *ngFor="let each of tags;">{{each}}
<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>
</span>
</div>
`,
styles: [`
* {
-webkit-font-smoothing: antialiased;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif!important;
}
.ngx-tagscontainer{
width: 100%;
max-width: 100%;
}
.ngx-tag {
color: #4a4a4a;
background-color: #efefef;
border: 2px solid #efefef;
padding: 3px 8px;
font-size: 16px;
margin-right: 5px;
border-radius: 2px;
vertical-align: middle;
}
.ngx-tag svg {
height: 15px;
cursor: pointer;
color: #6b6b6b;
}
.error {
color: red;
}
.ngx-inputcontainer{
margin: 10px 0px;
}
.ngx-tagslabel{
margin-bottom: 5px;
display: inline-block;
}
.ngx-tagsinput{
all: unset;
display: block;
width: 100%;
max-width: 100%;
margin: 0px;
height: 42px;
border: 1px solid #cccccc;
background-color: #ffffff;
padding: 0px 15px;
border-radius: 2px;
}
.ngx-tagsinput::placeholder{
color: #6b6b6b;
}`]
}] }
];
/** @nocollapse */
NgxMultiTagsInputComponent.ctorParameters = () => [];
NgxMultiTagsInputComponent.propDecorators = {
label: [{ type: Input }],
placeholder: [{ type: Input }],
class: [{ type: Input }],
required: [{ type: Input }],
errorMessage: [{ type: Input }],
output: [{ type: Output }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRhZ3MtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LW11bHRpLXRhZ3NpbnB1dC8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtdGFncy1pbnB1dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUE4RS9FLE1BQU07SUFlSjtzQkFGOEIsSUFBSSxZQUFZLEVBQVM7UUFHckQsSUFBSSxDQUFDLElBQUksR0FBRyxFQUFFLENBQUM7UUFDZixJQUFJLENBQUMsWUFBWSxHQUFHLHlCQUF5QixDQUFDO1FBQzlDLElBQUksQ0FBQyxLQUFLLEdBQUcsWUFBWSxDQUFBO1FBQ3pCLElBQUksQ0FBQyxXQUFXLEdBQUcsWUFBWSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxhQUFhLEdBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQztLQUNyQzs7OztJQUVELFFBQVE7S0FDUDs7OztJQUNNLFNBQVM7UUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLEVBQUUsQ0FBQzs7Ozs7O0lBR1YsU0FBUyxDQUFDLEtBQWE7O1FBQzVCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3ZDLElBQUksS0FBSyxLQUFLLENBQUMsQ0FBQyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztTQUM1QjtRQUNELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQzs7Ozs7O0lBR3ZCLFFBQVEsQ0FBQyxLQUFVO1FBQ3hCLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxPQUFPLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxJQUFJLEVBQUU7WUFDL0MsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssS0FBSyxFQUFFLEVBQUU7Z0JBQzdCLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQ25DLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQzthQUN6QjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQzthQUMzQjtZQUNELElBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFDO2dCQUN4QixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztnQkFDM0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2FBQzdCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO2FBQzNCO1NBQ0Y7Ozs7WUEvSEosU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxtQkFBbUI7Z0JBQzdCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7OztHQWdCVDt5QkFDUTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQXVETjthQUNKOzs7OztvQkFHRSxLQUFLOzBCQUVMLEtBQUs7b0JBRUwsS0FBSzt1QkFFTCxLQUFLOzJCQUVMLEtBQUs7cUJBRUwsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBPdXRwdXQsIElucHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4TXVsdGlUYWdzSW5wdXQnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2PlxuICA8ZGl2IGNsYXNzPVwibmd4LWlucHV0Y29udGFpbmVyXCI+XG4gIDxsYWJlbCBjbGFzcz1cIm5neC10YWdzbGFiZWxcIiBmb3I9XCJ0YWdzSW5wdXRcIj57e2xhYmVsfX0gPHNwYW4gY2xhc3M9XCJlcnJvclwiICpuZ0lmPVwicmVxdWlyZWRcIj4qPC9zcGFuPjwvbGFiZWw+XG4gIDxpbnB1dCB0eXBlPVwidGV4dFwiIGlkPVwidGFnc0lucHV0XCIgbmFtZT1cInRhZ3NJbnB1dFwiIFxuICAgICAgIGNsYXNzPVwibmd4LXRhZ3NpbnB1dFwiIGF1dG9jb21wbGV0ZT1cIm9mZlwiIHBsYWNlaG9sZGVyPVwie3twbGFjZWhvbGRlcn19XCIgKGtleWRvd24pPVwiaW5wdXRUYWcoJGV2ZW50KVwiXG4gICAgICAvPlxuICA8c21hbGwgY2xhc3M9XCJlcnJvclwiICpuZ0lmPVwicmVxdWlyZWRTdGF0ZVwiPlxuICAgICAge3tlcnJvck1lc3NhZ2V9fVxuICA8L3NtYWxsPlxuPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJuZ3gtdGFnc2NvbnRhaW5lclwiPlxuICA8c3BhbiBjbGFzcz1cIm5neC10YWdcIiAqbmdGb3I9XCJsZXQgZWFjaCBvZiB0YWdzO1wiPnt7ZWFjaH19XG4gICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgIChjbGljayk9XCJyZW1vdmVUYWcoZWFjaClcIiB3aWR0aD1cIjIwcHhcIiBoZWlnaHQ9XCIyMHB4XCIgdmlld0JveD1cIjAgMCAyMCAyMFwiPjxwYXRoIGQ9XCJNMTkgNi40MUwxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyelwiLz48cGF0aCBkPVwiTTAgMGgyMHYyMEgwelwiIGZpbGw9XCJub25lXCIvPjwvc3ZnPlxuICA8L3NwYW4+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtgXG4gICAgKiB7XG4gICAgICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhbnRpYWxpYXNlZDtcbiAgICAgIGZvbnQtZmFtaWx5OiAtYXBwbGUtc3lzdGVtLEJsaW5rTWFjU3lzdGVtRm9udCxTZWdvZSBVSSxSb2JvdG8sT3h5Z2VuLFVidW50dSxDYW50YXJlbGwsT3BlbiBTYW5zLEhlbHZldGljYSBOZXVlLHNhbnMtc2VyaWYhaW1wb3J0YW50O1xuICAgIH1cbiAgIC5uZ3gtdGFnc2NvbnRhaW5lcntcbiAgICAgd2lkdGg6IDEwMCU7XG4gICAgIG1heC13aWR0aDogMTAwJTtcbiAgIH1cbiAgIFxuICAgLm5neC10YWcge1xuICAgICBjb2xvcjogIzRhNGE0YTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNlZmVmZWY7XG4gICAgIGJvcmRlcjogMnB4IHNvbGlkICNlZmVmZWY7XG4gICAgIHBhZGRpbmc6IDNweCA4cHg7XG4gICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgIH1cblxuICAgLm5neC10YWcgc3ZnIHtcbiAgICAgaGVpZ2h0OiAxNXB4O1xuICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgIGNvbG9yOiAjNmI2YjZiO1xuICAgfVxuICAgXG4gICAuZXJyb3Ige1xuICAgICBjb2xvcjogcmVkO1xuICAgfVxuICAgXG4gICAubmd4LWlucHV0Y29udGFpbmVye1xuICAgICBtYXJnaW46IDEwcHggMHB4O1xuICAgfVxuICAgXG4gICAubmd4LXRhZ3NsYWJlbHtcbiAgICAgbWFyZ2luLWJvdHRvbTogNXB4O1xuICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICB9XG4gICBcbiAgIC5uZ3gtdGFnc2lucHV0e1xuICAgICBhbGw6IHVuc2V0O1xuICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgd2lkdGg6IDEwMCU7XG4gICAgIG1heC13aWR0aDogMTAwJTtcbiAgICAgbWFyZ2luOiAwcHg7XG4gICAgIGhlaWdodDogNDJweDtcbiAgICAgYm9yZGVyOiAxcHggc29saWQgI2NjY2NjYztcbiAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgICAgcGFkZGluZzogMHB4IDE1cHg7XG4gICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgIH1cbiAgIFxuICAgLm5neC10YWdzaW5wdXQ6OnBsYWNlaG9sZGVye1xuICAgICBjb2xvcjogIzZiNmI2YjtcbiAgIH1gXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hNdWx0aVRhZ3NJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHRhZ3M6IGFueVtdO1xuICBASW5wdXQoKVxuICBsYWJlbDogc3RyaW5nO1xuICBASW5wdXQoKVxuICBwbGFjZWhvbGRlcjogc3RyaW5nO1xuICBASW5wdXQoKVxuICBjbGFzczogc3RyaW5nO1xuICBASW5wdXQoKVxuICByZXF1aXJlZDogYm9vbGVhbjtcbiAgQElucHV0KClcbiAgZXJyb3JNZXNzYWdlOiBzdHJpbmc7XG4gIEBPdXRwdXQoKVxuICBvdXRwdXQ6IEV2ZW50RW1pdHRlcjxhbnlbXT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueVtdPigpO1xuICByZXF1aXJlZFN0YXRlOiBib29sZWFuO1xuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLnRhZ3MgPSBbXTtcbiAgICB0aGlzLmVycm9yTWVzc2FnZSA9ICdUYWdzIG11c3Qgbm90IGJlIGVtcHR5Lic7XG4gICAgdGhpcy5sYWJlbCA9ICdFbnRlciBUYWdzJ1xuICAgIHRoaXMucGxhY2Vob2xkZXIgPSAnRW50ZXIgdGFncyc7XG4gICAgdGhpcy5yZXF1aXJlZFN0YXRlID0gIHRoaXMucmVxdWlyZWQ7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuICBwdWJsaWMgY2xlYXJUYWdzKCkge1xuICAgIHRoaXMudGFncyA9IFtdO1xuICB9XG5cbiAgcHVibGljIHJlbW92ZVRhZyh2YWx1ZTogc3RyaW5nKSB7XG4gICAgY29uc3QgaW5kZXggPSB0aGlzLnRhZ3MuaW5kZXhPZih2YWx1ZSk7XG4gICAgaWYgKGluZGV4ICE9PSAtMSkge1xuICAgICAgdGhpcy50YWdzLnNwbGljZShpbmRleCwgMSk7XG4gICAgfVxuICAgIHRoaXMub3V0cHV0LmVtaXQodGhpcy50YWdzKTtcbiAgfVxuXG4gIHB1YmxpYyBpbnB1dFRhZyhldmVudDogYW55KSB7XG4gICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VudGVyJyB8fCBldmVudC5rZXkgPT09ICcxMycpIHtcbiAgICAgIGlmIChldmVudC50YXJnZXQudmFsdWUgIT09ICcnKSB7XG4gICAgICAgIHRoaXMudGFncy5wdXNoKGV2ZW50LnRhcmdldC52YWx1ZSk7XG4gICAgICAgIGV2ZW50LnRhcmdldC52YWx1ZSA9ICcnO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5yZXF1aXJlZFN0YXRlID0gdHJ1ZTtcbiAgICAgIH1cbiAgICAgIGlmKHRoaXMudGFncy5sZW5ndGggIT09IDApe1xuICAgICAgICB0aGlzLnJlcXVpcmVkU3RhdGUgPSBmYWxzZTtcbiAgICAgICAgdGhpcy5vdXRwdXQuZW1pdCh0aGlzLnRhZ3MpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5yZXF1aXJlZFN0YXRlID0gdHJ1ZTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxufVxuIl19