@tots/ngx-org-chart/esm2020/lib/ngx-chart-designer/ngx-chart-designer.component.mjs

Hierarchical Organization Chart

import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../ngx-chart-node/ngx-chart-node.component";
export class NgxChartDesignerComponent {
    constructor() {
        this.hasParent = false;
        this.direction = 'vertical';
        this.itemClick = new EventEmitter();
    }
    get hostClass() {
        return this.direction === 'vertical' ? 'column' : '';
    }
}
NgxChartDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxChartDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NgxChartDesignerComponent, selector: "ngx-chart-designer", inputs: { node: "node", hasParent: "hasParent", direction: "direction" }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.flex-direction": "this.hostClass" } }, ngImport: i0, template: "<ngx-chart-node *ngIf=\"node\" ngClass=\"ngx-org-{{direction}}\" [node]=\"node\" [hasParent]=\"hasParent\"\n  [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\">\n</ngx-chart-node>\n\n<div *ngIf=\"node?.childs?.length\" ngClass=\"ngx-org-reports-{{direction}}\" class=\"ngx-org-reports\">\n  <ng-container *ngFor=\"let childNode of node?.childs; first as isFirst; last as isLast\">\n    <div ngClass=\"ngx-org-org-container-{{direction}}\" class=\"ngx-org-org-container\">\n      <div ngClass=\"ngx-org-connector-container-{{direction}}\" class=\"ngx-org-connector-container\">\n        <div class=\"ngx-org-connector ngx-org-border\" [style.border-color]=\"isFirst?'transparent':''\"></div>\n        <div class=\"ngx-org-border\"></div>\n        <div class=\"ngx-org-connector ngx-org-border\" [style.border-color]=\"isLast?'transparent':''\"></div>\n      </div>\n      <ngx-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\">\n      </ngx-chart-designer>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:flex;align-items:center;flex:1}.ngx-org-vertical{flex-direction:column}.ngx-org-org-container{display:flex}.ngx-org-org-container-vertical{flex-direction:column}.ngx-org-connector{flex:1}.ngx-org-connector-container{display:flex}.ngx-org-connector-container-horizontal{flex-direction:column}.ngx-org-reports{display:flex;flex:1}.ngx-org-reports-horizontal{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgxChartNodeComponent, selector: "ngx-chart-node", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }, { kind: "component", type: NgxChartDesignerComponent, selector: "ngx-chart-designer", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-chart-designer', template: "<ngx-chart-node *ngIf=\"node\" ngClass=\"ngx-org-{{direction}}\" [node]=\"node\" [hasParent]=\"hasParent\"\n  [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\">\n</ngx-chart-node>\n\n<div *ngIf=\"node?.childs?.length\" ngClass=\"ngx-org-reports-{{direction}}\" class=\"ngx-org-reports\">\n  <ng-container *ngFor=\"let childNode of node?.childs; first as isFirst; last as isLast\">\n    <div ngClass=\"ngx-org-org-container-{{direction}}\" class=\"ngx-org-org-container\">\n      <div ngClass=\"ngx-org-connector-container-{{direction}}\" class=\"ngx-org-connector-container\">\n        <div class=\"ngx-org-connector ngx-org-border\" [style.border-color]=\"isFirst?'transparent':''\"></div>\n        <div class=\"ngx-org-border\"></div>\n        <div class=\"ngx-org-connector ngx-org-border\" [style.border-color]=\"isLast?'transparent':''\"></div>\n      </div>\n      <ngx-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\">\n      </ngx-chart-designer>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:flex;align-items:center;flex:1}.ngx-org-vertical{flex-direction:column}.ngx-org-org-container{display:flex}.ngx-org-org-container-vertical{flex-direction:column}.ngx-org-connector{flex:1}.ngx-org-connector-container{display:flex}.ngx-org-connector-container-horizontal{flex-direction:column}.ngx-org-reports{display:flex;flex:1}.ngx-org-reports-horizontal{flex-direction:column}\n"] }]
        }], propDecorators: { node: [{
                type: Input
            }], hasParent: [{
                type: Input
            }], direction: [{
                type: Input
            }], itemClick: [{
                type: Output
            }], hostClass: [{
                type: HostBinding,
                args: ['style.flex-direction']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vcmctY2hhcnQvc3JjL2xpYi9uZ3gtY2hhcnQtZGVzaWduZXIvbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vcmctY2hhcnQvc3JjL2xpYi9uZ3gtY2hhcnQtZGVzaWduZXIvbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBU3BGLE1BQU0sT0FBTyx5QkFBeUI7SUFMdEM7UUFXRSxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBR2xCLGNBQVMsR0FBOEIsVUFBVSxDQUFDO1FBRXhDLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO0tBTWpEO0lBSkMsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDdkQsQ0FBQzs7c0hBaEJVLHlCQUF5QjswR0FBekIseUJBQXlCLDZPQ1R0Qyw2akNBaUJBLDA1QkRSYSx5QkFBeUI7MkZBQXpCLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDRSxvQkFBb0I7OEJBTzlCLElBQUk7c0JBREgsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBSU4sU0FBUztzQkFEUixLQUFLO2dCQUdJLFNBQVM7c0JBQWxCLE1BQU07Z0JBR0gsU0FBUztzQkFEWixXQUFXO3VCQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBJTm9kZSB9IGZyb20gJy4uL25vZGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtY2hhcnQtZGVzaWduZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTmd4Q2hhcnREZXNpZ25lckNvbXBvbmVudCB7XG5cbiAgQElucHV0KClcbiAgbm9kZTogSU5vZGU7XG5cbiAgQElucHV0KClcbiAgaGFzUGFyZW50ID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgZGlyZWN0aW9uOiAndmVydGljYWwnIHwgJ2hvcml6b250YWwnID0gJ3ZlcnRpY2FsJztcblxuICBAT3V0cHV0KCkgaXRlbUNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxJTm9kZT4oKTtcblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmZsZXgtZGlyZWN0aW9uJylcbiAgZ2V0IGhvc3RDbGFzcygpIHtcbiAgICByZXR1cm4gdGhpcy5kaXJlY3Rpb24gPT09ICd2ZXJ0aWNhbCcgPyAnY29sdW1uJyA6ICcnO1xuICB9XG59XG4iLCI8bmd4LWNoYXJ0LW5vZGUgKm5nSWY9XCJub2RlXCIgbmdDbGFzcz1cIm5neC1vcmcte3tkaXJlY3Rpb259fVwiIFtub2RlXT1cIm5vZGVcIiBbaGFzUGFyZW50XT1cImhhc1BhcmVudFwiXG4gIFtkaXJlY3Rpb25dPVwiZGlyZWN0aW9uXCIgKGl0ZW1DbGljayk9XCJpdGVtQ2xpY2suZW1pdCgkZXZlbnQpXCI+XG48L25neC1jaGFydC1ub2RlPlxuXG48ZGl2ICpuZ0lmPVwibm9kZT8uY2hpbGRzPy5sZW5ndGhcIiBuZ0NsYXNzPVwibmd4LW9yZy1yZXBvcnRzLXt7ZGlyZWN0aW9ufX1cIiBjbGFzcz1cIm5neC1vcmctcmVwb3J0c1wiPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBjaGlsZE5vZGUgb2Ygbm9kZT8uY2hpbGRzOyBmaXJzdCBhcyBpc0ZpcnN0OyBsYXN0IGFzIGlzTGFzdFwiPlxuICAgIDxkaXYgbmdDbGFzcz1cIm5neC1vcmctb3JnLWNvbnRhaW5lci17e2RpcmVjdGlvbn19XCIgY2xhc3M9XCJuZ3gtb3JnLW9yZy1jb250YWluZXJcIj5cbiAgICAgIDxkaXYgbmdDbGFzcz1cIm5neC1vcmctY29ubmVjdG9yLWNvbnRhaW5lci17e2RpcmVjdGlvbn19XCIgY2xhc3M9XCJuZ3gtb3JnLWNvbm5lY3Rvci1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm5neC1vcmctY29ubmVjdG9yIG5neC1vcmctYm9yZGVyXCIgW3N0eWxlLmJvcmRlci1jb2xvcl09XCJpc0ZpcnN0Pyd0cmFuc3BhcmVudCc6JydcIj48L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm5neC1vcmctYm9yZGVyXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJuZ3gtb3JnLWNvbm5lY3RvciBuZ3gtb3JnLWJvcmRlclwiIFtzdHlsZS5ib3JkZXItY29sb3JdPVwiaXNMYXN0Pyd0cmFuc3BhcmVudCc6JydcIj48L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5neC1jaGFydC1kZXNpZ25lciBbbm9kZV09XCJjaGlsZE5vZGVcIiBbaGFzUGFyZW50XT1cInRydWVcIiBbZGlyZWN0aW9uXT1cImRpcmVjdGlvblwiIChpdGVtQ2xpY2spPVwiaXRlbUNsaWNrLmVtaXQoJGV2ZW50KVwiPlxuICAgICAgPC9uZ3gtY2hhcnQtZGVzaWduZXI+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG4iXX0=