{"__symbolic":"module","version":4,"metadata":{"TagsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"d-tags","exportAs":"Tags","template":"<div class=\"devui-tags\">\r\n  <d-tag\r\n    *ngFor=\"let tag of tags; let index = index\"\r\n    [tag]=\"displayProperty ? tag[displayProperty] : tag\"\r\n    [deletable]=\"deletable\"\r\n    [labelStyle]=\"tag['labelStyle']\"\r\n    [titleContent]=\"titleProperty ? tag[titleProperty] : displayProperty ? tag[displayProperty] : tag\"\r\n    [customViewTemplate]=\"customViewTemplate\"\r\n    (tagDelete)=\"removeTag(tag, index)\"\r\n  >\r\n  </d-tag>\r\n</div>\r\n","styles":[".devui-tags{padding:2px;overflow:hidden;word-wrap:break-word;height:100%}"]}]}],"members":{"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"displayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"deletable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"titleProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"customViewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":23,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":23,"character":16},{"static":false}]}]}],"tagDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"removeTag":[{"__symbolic":"method"}]}},"TagComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"d-tag","exportAs":"Tag","template":"<span class=\"devui-tag-item {{ labelStyle }}\" [style.display]=\"deleteTag ? 'none' : 'inline-block'\">\r\n  <span *ngIf=\"!customViewTemplate\" title=\"{{ titleContent ? titleContent : tag }}\">{{ tag }}</span>\r\n  <ng-template *ngIf=\"customViewTemplate\" [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ tag: tag }\"></ng-template>\r\n  <a class=\"remove-button\" *ngIf=\"deletable\" (click)=\"removeTag(tag)\">×</a>\r\n</span>\r\n","styles":[":host{display:inline-block}.devui-tag-item{display:inline-block;margin:2px;padding:0 5px;min-height:20px;font-size:14px;line-height:20px;color:#252b3a;background-color:#eef0f5;border-radius:1px;border:0 solid;border-color:inherit}.devui-tag-item .remove-button{margin-left:5px;font-size:16px;color:#252b3a;line-height:20px;vertical-align:top;cursor:pointer}.devui-tag-item .remove-button:hover{text-decoration:none}.blue-w98{color:#3383ff;background-color:#fbfdff;border-width:thin;border-color:#e1edff}.green-w98{color:#00b679;background-color:#fafefc;border-width:thin;border-color:#d9f4eb}.yellow-w98{color:#ffab05;background-color:#fffdfa;border-width:thin;border-color:#fff3da}.orange-w98{color:#ff7452;background-color:#fffcfc;border-width:thin;border-color:#ffeae5}.pink-w98{color:#ff8cc3;background-color:#fefcff;border-width:thin;border-color:#f5e8fd}.purple-w98{color:#bc67f0;background-color:#fffdfe;border-width:thin;border-color:#ffeef6}.turquoise-w98{color:#00c1de;background-color:#fafefe;border-width:thin;border-color:#d9f6fa}.olivine-w98{color:#89ba3e;background-color:#fdfefb;border-width:thin;border-color:#eef5e2}"]}]}],"members":{"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"labelStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"deletable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"titleContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"customViewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"tagDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"removeTag":[{"__symbolic":"method"}]}},"TagsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":4}],"exports":[{"__symbolic":"reference","name":"TagsComponent"},{"__symbolic":"reference","name":"TagComponent"}],"declarations":[{"__symbolic":"reference","name":"TagsComponent"},{"__symbolic":"reference","name":"TagComponent"}]}]}],"members":{}}},"origins":{"TagsComponent":"./tags.component","TagComponent":"./tag.component","TagsModule":"./tags.module"},"importAs":"ng-devui/tags"}