{"__symbolic":"module","version":4,"metadata":{"TagsInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"d-tags-input","exportAs":"TagsInput","template":"<div #selectBox class=\"devui-tags-host\" tabindex=\"-1\" (click)=\"host_click()\">\r\n  <div class=\"devui-tags\">\r\n    <ul class=\"devui-tag-list\">\r\n      <li class=\"devui-tag-item\" *ngFor=\"let tag of tags; let index = index\">\r\n        <span>{{ tag[displayProperty] }}</span>\r\n        <a class=\"remove-button\" (click)=\"removeTag(index)\">×</a>\r\n      </li>\r\n    </ul>\r\n    <input\r\n      #tagInput\r\n      class=\"input devui-input\"\r\n      [(ngModel)]=\"newTag\"\r\n      (keydown)=\"input_keydown($event)\"\r\n      (focus)=\"input_focus($event)\"\r\n      (blur)=\"input_blur($event)\"\r\n      (trim)=\"(false)\"\r\n      [placeholder]=\"placeholder\"\r\n      [spellcheck]=\"spellcheck\"\r\n      [ngClass]=\"{ 'invalid-tag': !newTagValid }\"\r\n      type=\"text\"\r\n    />\r\n  </div>\r\n  <div class=\"devui-tags-autocomplete\" *ngIf=\"showSuggestionList && availableOptions?.length\">\r\n    <ul class=\"devui-suggestion-list\">\r\n      <li\r\n        class=\"devui-suggestion-item\"\r\n        *ngFor=\"let item of availableOptions; let index = index\"\r\n        [ngClass]=\"{ selected: index === selectIndex }\"\r\n        (mousedown)=\"addSuggestionByIndex(index, item)\"\r\n      >\r\n        {{ item[displayProperty] }}\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n","styles":[":host{display:block}.devui-tags-host{position:relative;height:100%}.devui-tags-host:active{outline:0}.devui-tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:2px 5px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #adb0b8;border-radius:1px;height:100%}.devui-tags:hover{border-color:#344899}.devui-tags.focused{outline:0}.devui-tags .devui-tag-list{margin:0;padding:0;list-style-type:none}.devui-tags .devui-tag-item{margin:2px;padding:0 5px;display:inline-block;min-height:20px;line-height:20px;border-radius:1px;color:#252b3a;background-color:#eef0f5}.devui-tags .devui-tag-item .remove-button{margin:0 0 0 5px;padding:0;border:none;background:0 0;cursor:pointer;vertical-align:top;font-size:16px;line-height:20px;color:#252b3a}.devui-tags .devui-tag-item .remove-button:hover{text-decoration:none}.devui-tags input.devui-input{border:0;outline:0;float:left;width:100%;height:26px;font-size:14px;padding-left:5px}.devui-tags input.devui-input::-ms-clear{display:none}.devui-tags-autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:99999;width:100%;background-color:#fff;border:#adb0b8;box-shadow:0 5px 10px rgba(41,48,64,.2)}.devui-tags-autocomplete .devui-suggestion-list{margin:0;padding:0;list-style-type:none;max-height:280px;overflow-y:auto;position:relative}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:20px;color:#252b3a;background-color:#fff}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item:hover{background-color:#f2f5fc}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item.selected{color:#5e7ce0;background-color:#f2f5fc}"]}]}],"members":{"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"displayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"minLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"minTags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"maxTags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"spellcheck":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"suggestionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"isAddBySpace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"caseSensitivity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"checkBeforeAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":3}}]}],"tagInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":64,"character":3},"arguments":["tagInput",{"static":true}]}]}],"selectBoxElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":65,"character":3},"arguments":["selectBox",{"static":true}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"registerFilterChange":[{"__symbolic":"method"}],"reduceSuggestionList":[{"__symbolic":"method"}],"host_click":[{"__symbolic":"method"}],"input_keydown":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"input_focus":[{"__symbolic":"method"}],"input_blur":[{"__symbolic":"method"}],"addSuggestionByIndex":[{"__symbolic":"method"}],"removeTag":[{"__symbolic":"method"}],"tagIsValid":[{"__symbolic":"method"}],"isEmptyString":[{"__symbolic":"method"}],"addTag":[{"__symbolic":"method"}],"canAdd":[{"__symbolic":"method"}],"onDocumentClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":302,"character":3},"arguments":["document:click",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}]}},"TagsInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"TagsInputComponent"}],"declarations":[{"__symbolic":"reference","name":"TagsInputComponent"}]}]}],"members":{}}},"origins":{"TagsInputComponent":"./tags.input.component","TagsInputModule":"./tags.input.module"},"importAs":"ng-devui/tags-input"}