ng2-org-chart
Version:
Hierarchical Organizational Chart for Angular (4+)
3 lines (2 loc) • 2.69 kB
JavaScript
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],o):o(e.ngOrgChart=e.ngOrgChart||{},e.ng.core,e.ng.common)}(this,function(e,o,r){"use strict";var t=function(){return function(){this.hasManager=!1}}();t.decorators=[{type:o.Component,args:[{selector:"ng2-org-chart",template:'<oc-employee *ngIf="topEmployee" [employee]="topEmployee" [hasManager]="hasManager"></oc-employee> <div class="oc-reports"> <ng-container *ngFor="let employee of topEmployee?.subordinates; first as isFirst; last as isLast"> <div class="oc-org-container"> <div class="oc-h-bar-container"> <div class="oc-h-bar oc-border" [style.border-color]="isFirst?\'transparent\':\'\'"></div> <div class="oc-border"></div> <div class="oc-h-bar oc-border" [style.border-color]="isLast?\'transparent\':\'\'"></div> </div> <ng2-org-chart [topEmployee]="employee" [hasManager]="true"></ng2-org-chart> </div> </ng-container> </div> ',styles:[":host { display: flex; flex-direction: column; align-items: center; } .oc-reports { display: flex; flex: 1; } .oc-org-container { display: flex; flex-direction: column; } .oc-h-bar-container { display: flex; } .oc-h-bar { flex: 1; } "]}]}],t.ctorParameters=function(){return[]},t.propDecorators={topEmployee:[{type:o.Input}],hasManager:[{type:o.Input}]};var n=function(){return function(){this.hasManager=!1}}();n.decorators=[{type:o.Component,args:[{selector:"oc-employee",template:'<div class=\"oc-h-bar oc-border\" *ngIf=\"hasManager\"></div> <div class=\"oc-box oc-border oc-background\"> <div class=\"oc-img\"><img src=\"{{employee?.img}}\"/></div> <div class=\"oc-content\"><div class=\"oc-name\">{{employee?.name}}</div> <div class=\"oc-designation\">{{employee?.designation}}</div> </div> </div> <div class=\"oc-h-bar oc-border\" *ngIf=\"employee?.subordinates.length\"></div> ',styles:[":host { margin: 0 1em; display: flex; flex-direction: column; align-items: center; } .oc-box { padding: 0.25em 1em; display: flex; flex-direction: column; align-items: center; } .oc-h-bar { height: 0.5em; } .oc-content{ display:flex; flex-direction:column; padding: 0.25em 0.5em; } "]}]}],n.ctorParameters=function(){return[]},n.propDecorators={employee:[{type:o.Input}],hasManager:[{type:o.Input}]};var a=function(){return function(){}}();a.decorators=[{type:o.NgModule,args:[{imports:[r.CommonModule],declarations:[t,n],exports:[t]}]}],a.ctorParameters=function(){return[]},e.OrgChartComponent=t,e.OrgChartModule=a,e.ɵa=n,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng2-org-chart.umd.min.js.map