{"__symbolic":"module","version":4,"metadata":{"WorkFlowModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":11,"character":28}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"providers":[]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"app-work-flow","template":"<div class=\"work-flow-box\">\r\n  <div class=\"work-flow-box-header\">\r\n    <ng-container *ngTemplateOutlet=\"boxHeader;\"></ng-container>\r\n  </div>\r\n  <div #cardListRef class=\"work-flow-card-list\">\r\n    <div #cardRef class=\"work-flow-card\" [ngClass]=\"{'active': activedCardIndex===i}\"\r\n      *ngFor=\"let card of cardList;let i=index\" (click)=\"onClickCard(card,i,$event)\">\r\n      <div class=\"work-flow-card-content\">\r\n        <input *ngIf=\"showCardCheckbox\" type=\"checkbox\" class=\"chk\" [ngModel]=\"card.isSelected\"\r\n          (ngModelChange)=\"onChangeChecked(card,i,$event)\">\r\n        <div class=\"work-flow-card-header\">\r\n          <span *ngIf=\"!cardHeader\" class=\"title\">{{card.data[titleKey]}}</span>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"cardHeader; context:{ $implicit:card.data,cardIndex:i,isSelected:card.isSelected}\">\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"work-flow-card-body\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"cardBody;  context:{ $implicit:card.data,cardIndex:i,isSelected:card.isSelected}\">\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"work-flow-card-footer\">\r\n          <span class=\"node-name\">{{card.data.nodename}}</span>\r\n        </div>\r\n        <div class=\"node-icons\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"cardIcons;  context:{ $implicit:card.data,cardIndex:i,isSelected:card.isSelected}\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n","styles":[".work-flow-box *{box-sizing:border-box}.work-flow-box{border:1px dashed #666;border-radius:4px;margin:.5rem 0;padding:.5rem;color:#333;font-size:12px;box-sizing:border-box}.work-flow-card-list{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.work-flow-card{padding:.5rem;transition:.3s}.work-flow-card-content{padding:.5rem 1rem 25px;background:#f0f0f0;box-shadow:1px 1px 2px rgba(0,0,0,.3);width:100%;height:100%;border-radius:4px;position:relative}.work-flow-card:hover .work-flow-card-content{background:#d3e0ea}.work-flow-card.active .work-flow-card-content{background:#d3d3d3}.work-flow-card-body{margin:.5rem 0;line-height:25px;color:#515151}.work-flow-card-header{font-size:14px;margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.work-flow-card-footer{margin-top:.5rem;color:#5cb85c;position:absolute;bottom:0;left:0;width:100%;height:25px;line-height:25px;padding:0 1rem}.work-flow-card-header .title{color:#337ab7;text-decoration:underline;font-weight:700;cursor:pointer}.work-flow-card-content .chk{position:absolute;top:0;right:.5rem;width:16px;height:16px;-webkit-appearance:none;border:none;outline:0;vertical-align:middle;background:url(images/check-box-outline-blank.png) no-repeat}.work-flow-card-content .chk:checked{background:url(images/check-box-outline.png) no-repeat}.work-flow-card-content .node-icons{position:absolute;bottom:.5rem;right:.5rem}"]}]}],"members":{"itemSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"titleKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"showCardCheckbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"activedCardIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"clickCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"changeChecked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"selectAllCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"ct":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":27,"character":5},"arguments":["cellTemplate"]}]}],"cardHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":28,"character":5},"arguments":["cellTemplate"]}]}],"cardBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":29,"character":5},"arguments":["cellTemplate"]}]}],"cardIcons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":30,"character":5},"arguments":["cellTemplate"]}]}],"boxHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":31,"character":5},"arguments":["cellTemplate"]}]}],"cardListRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":5},"arguments":["cardListRef"]}]}],"cardRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":34,"character":5},"arguments":["cardRef"]}]}],"onresize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":40,"character":5},"arguments":["window:resize"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onClickCard":[{"__symbolic":"method"}],"onChangeChecked":[{"__symbolic":"method"}],"resizeCard":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[vpTemplate]"}]}],"members":{"vpTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":11,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":11,"character":17}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"WorkFlowModule":"./src/app/work-flow/index","ɵa":"./src/app/work-flow/work-flow.component","ɵb":"./src/app/work-flow/vp-template.directive"},"importAs":"victop-components"}