primeng/organizationchart/primeng-organizationchart.metadata.json

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.sv

{"__symbolic":"module","version":4,"metadata":{"OrganizationChartNode":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"[pOrganizationChartNode]","template":"\n        <tbody *ngIf=\"node\">\n            <tr>\n                <td [attr.colspan]=\"colspan\">\n                    <div [class]=\"node.styleClass\" [ngClass]=\"{'p-organizationchart-node-content': true, 'p-organizationchart-selectable-node': chart.selectionMode && node.selectable !== false,'p-highlight':isSelected()}\"\n                        (click)=\"onNodeClick($event,node)\">\n                        <div *ngIf=\"!chart.getTemplateForNode(node)\">{{node.label}}</div>\n                        <div *ngIf=\"chart.getTemplateForNode(node)\">\n                            <ng-container *ngTemplateOutlet=\"chart.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n                        </div>\n                        <a *ngIf=\"!leaf\" tabindex=\"0\" class=\"p-node-toggler\" (click)=\"toggleNode($event, node)\" (keydown.enter)=\"toggleNode($event, node)\">\n                            <i class=\"p-node-toggler-icon pi\" [ngClass]=\"{'pi-chevron-down': node.expanded, 'pi-chevron-up': !node.expanded}\"></i>\n                        </a>\n                    </div>\n                </td>\n            </tr>\n            <tr [ngClass]=\"!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'\" class=\"p-organizationchart-lines\" [@childState]=\"'in'\">\n                <td [attr.colspan]=\"colspan\">\n                    <div class=\"p-organizationchart-line-down\"></div>\n                </td>\n            </tr>\n            <tr [ngClass]=\"!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'\" class=\"p-organizationchart-lines\" [@childState]=\"'in'\">\n                <ng-container *ngIf=\"node.children && node.children.length === 1\">\n                    <td [attr.colspan]=\"colspan\">\n                        <div class=\"p-organizationchart-line-down\"></div>\n                    </td>\n                </ng-container>\n                <ng-container *ngIf=\"node.children && node.children.length > 1\">\n                    <ng-template ngFor let-child [ngForOf]=\"node.children\" let-first=\"first\" let-last=\"last\">\n                        <td class=\"p-organizationchart-line-left\" [ngClass]=\"{'p-organizationchart-line-top':!first}\">&nbsp;</td>\n                        <td class=\"p-organizationchart-line-right\" [ngClass]=\"{'p-organizationchart-line-top':!last}\">&nbsp;</td>\n                    </ng-template>\n                </ng-container>\n            </tr>\n            <tr [ngClass]=\"!leaf&&node.expanded ? 'p-organizationchart-node-visible' : 'p-organizationchart-node-hidden'\" class=\"p-organizationchart-nodes\" [@childState]=\"'in'\">\n                <td *ngFor=\"let child of node.children\" colspan=\"2\">\n                    <table class=\"p-organizationchart-table\" pOrganizationChartNode [node]=\"child\"></table>\n                </td>\n            </tr>\n        </tbody>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":53,"character":8},"arguments":["childState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":54,"character":12},"arguments":["in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":54,"character":24},"arguments":[{"opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":55,"character":11},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":56,"character":13},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":57,"character":13},"arguments":[150]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":59,"character":11},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":60,"character":13},"arguments":[150,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":60,"character":26},"arguments":[{"opacity":0}]}]}]]}]]}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":64,"character":19},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":65,"character":21},"member":"OnPush"},"styles":[".p-organizationchart-table{border-collapse:separate;border-spacing:0;margin:0 auto}.p-organizationchart-table>tbody>tr>td{padding:0 .75rem;text-align:center;vertical-align:top}.p-organizationchart-node-content{display:inline-block;position:relative}.p-organizationchart-node-content .p-node-toggler{-ms-user-select:none;-webkit-user-select:none;bottom:-.75rem;cursor:pointer;height:1.5rem;left:50%;margin-left:-.75rem;position:absolute;user-select:none;width:1.5rem;z-index:2}.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{position:relative;top:.25rem}.p-organizationchart-line-down{height:20px;margin:0 auto;width:1px}.p-organizationchart-line-left,.p-organizationchart-line-right{border-radius:0}.p-organizationchart-selectable-node{cursor:pointer}.p-organizationchart .p-organizationchart-node-hidden{display:none}.p-organizationchart-preservespace .p-organizationchart-node-hidden{display:inherit;visibility:hidden}"]}]}],"members":{"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"last":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":82,"character":17},"arguments":[{"__symbolic":"reference","name":"OrganizationChart"}]}],null],"parameters":[null,{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":82,"character":79}]}],"onNodeClick":[{"__symbolic":"method"}],"toggleNode":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"OrganizationChart":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":120,"character":1},"arguments":[{"selector":"p-organizationChart","template":"\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"{'p-organizationchart p-component': true, 'p-organizationchart-preservespace': preserveSpace}\">\n            <table class=\"p-organizationchart-table\" pOrganizationChartNode [node]=\"root\" *ngIf=\"root\"></table>\n        </div>\n    ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":127,"character":20},"member":"OnPush"}}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"selectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"preserveSpace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":152,"character":5}}]}],"onNodeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":154,"character":5}}]}],"onNodeUnselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":156,"character":5}}]}],"onNodeExpand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":158,"character":5}}]}],"onNodeCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":160,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":162,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"PrimeTemplate","line":162,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":174,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":82,"character":79}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"getTemplateForNode":[{"__symbolic":"method"}],"onNodeClick":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}]}},"OrganizationChartModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":264,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":265,"character":14}],"exports":[{"__symbolic":"reference","name":"OrganizationChart"},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":266,"character":32}],"declarations":[{"__symbolic":"reference","name":"OrganizationChart"},{"__symbolic":"reference","name":"OrganizationChartNode"}]}]}],"members":{}}},"origins":{"OrganizationChartNode":"./organizationchart","OrganizationChart":"./organizationchart","OrganizationChartModule":"./organizationchart"},"importAs":"primeng/organizationchart"}