[{"__symbolic":"module","version":4,"metadata":{"TagsInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dc-tags-input","template":"\n    <div class=\"tags-input-box\" (click)=\"tagsInputFocus($event)\" [style.width]=\"options?.width || '100%'\">\n      <ul class=\"tags-input-show clearFix\" *ngIf=\"showList && showList.length > 0\">\n        <li class=\"tags-input-show-list\" *ngFor=\"let item of showList; let i = index\">\n          <span (click)=\"$event.stopPropagation()\">{{item[defaultNameKey]}}</span>\n          <img class=\"tag-remove\" title=\"Remove\" (click)=\"removeTag(item, i)\"\n               src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RDQ5NEIzNzI3NTUxMUU4OTgwOEJBMThGREI0Q0E3RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RDQ5NEIzODI3NTUxMUU4OTgwOEJBMThGREI0Q0E3RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVENDk0QjM1Mjc1NTExRTg5ODA4QkExOEZEQjRDQTdEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVENDk0QjM2Mjc1NTExRTg5ODA4QkExOEZEQjRDQTdEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+y+qW+gAAAQRJREFUeNqckk9Kw0AYxSfBZdCNzgEStN15keAm2AN0L4pnENx3Xy9gsyn0FgE3XRQkc4Chqxo3uqjvDd+E6Sht8cEPkjffm79f0jSNCnQOHkEJrsRbgTmYgLUvPAlCFZiCM7Wra+EejEFNMw1Cr3+EQp1KTeWDF+AFJOqwEqnVDN7JbE55nqssy/pKftOLVn5g8CZ0rbV92IfoRSp5OcPQ6bpOGWNUURTuv21b50UapOp/+krlnX6diSuR+Mwik8rj9tJau61ye37b9CItEnQO3ffwZg9oAy65opWO2B4R2kqt9ZfDNhqBjz0hjt3GLUfN+P7gGSzBN/gEb+BJxmpf/CPAAIzBSre1IOOtAAAAAElFTkSuQmCC\">\n        </li>\n      </ul>\n      <div class=\"tags-input-content\">\n        <input #tagsInput class=\"tags-input-text\" type=\"text\" [(ngModel)]=\"inputValue\" (focus)=\"showDropList($event)\"\n               (ngModelChange)=\"tagInputChange()\" (click)=\"showDropList($event)\" (keyup.enter)=\"addTag()\" (blur)=\"hideDropList()\"/>\n        <ul class=\"tags-input-drop\" *ngIf=\"dropList && showDropFlag\">\n          <li class=\"tags-input-drop-list\" *ngFor=\"let item of (dropList | arrFilter:defaultNameKey:inputValue); let i = index\"\n              (click)=\"addTag(item)\">{{item[defaultNameKey]}}\n          </li>\n        </ul>\n      </div>\n    </div>\n  ","styles":["\n    ul, li {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    .clearFix {\n      zoom: 1;\n    }\n\n    .clearFix:after {\n      clear: both;\n      height: 0;\n      width: 100%;\n      overflow: hidden;\n      visibility: hidden;\n      display: block;\n      content: '.';\n    }\n\n    .tags-input-box {\n      border: 1px solid #ccc;\n      padding: 15px;\n      position: relative;\n    }\n\n    .tags-input-show-list {\n      display: inline-block;\n      max-width: 150px;\n      padding-right: 30px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      position: relative;\n      height: 30px;\n      line-height: 30px;\n      padding-left: 10px;\n      border: 1px solid #ccc;\n      margin-right: 15px;\n    }\n    .tags-input-content{\n      position: relative;\n    }\n    .tags-input-text{\n      height: 30px;\n      line-height: 30px;\n      width: 100%;\n    }\n    .tag-remove{\n      margin: 0;\n      padding: 0;\n      border: none;\n      width: 14px;\n      height: 14px;\n      overflow: hidden;\n      cursor: pointer;\n      position: absolute;\n      right: 5px;\n      top: 8px;\n    }\n    .tags-input-drop{\n      position: absolute;\n      left: 0;\n      top: 29px;\n      width: 100%;\n      height: auto;\n      max-height: 200px;\n      overflow: auto;\n      border: 1px solid #ccc;\n      background: #fff;\n    }\n    .tags-input-drop-list {\n      cursor: pointer;\n      width: 100%;\n      height: 30px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      line-height: 30px;\n      text-indent: 10px;\n    }\n\n    .tags-input-drop-list:hover {\n      color: #fff;\n      background-color: #0081cc;\n    }\n\n  "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tagDatas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tagsInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["tagsInput"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"tagsInputFocus":[{"__symbolic":"method"}],"tagInputChange":[{"__symbolic":"method"}],"removeTag":[{"__symbolic":"method"}],"addTag":[{"__symbolic":"method"}],"showDropList":[{"__symbolic":"method"}],"hideDropList":[{"__symbolic":"method"}],"onDocumentClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click",["$event"]]}]}],"getCheckedTags":[{"__symbolic":"method"}]}}}}]