@ahmedaoui/ngx-org-chart/esm2022/lib/ngx-chart-designer/ngx-chart-designer.component.mjs

Hierarchical Organization Chart

import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { NgxChartNodeComponent } from '../ngx-chart-node/ngx-chart-node.component';
import * as i0 from "@angular/core";
export class NgxChartDesignerComponent {
    constructor() {
        this.hasParent = false;
        this.direction = 'vertical';
        this.itemClick = new EventEmitter();
    }
    get hostClass() {
        return this.direction === 'vertical' ? 'column' : '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxChartDesignerComponent, isStandalone: true, 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: "component", type: NgxChartDesignerComponent, selector: "ngx-chart-designer", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxChartNodeComponent, selector: "ngx-chart-node", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxChartDesignerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-chart-designer', standalone: true, imports: [NgClass, NgxChartNodeComponent, NgIf, NgFor], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vcmctY2hhcnQvc3JjL2xpYi9uZ3gtY2hhcnQtZGVzaWduZXIvbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vcmctY2hhcnQvc3JjL2xpYi9uZ3gtY2hhcnQtZGVzaWduZXIvbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBR3BGLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDRDQUE0QyxDQUFDOztBQVNuRixNQUFNLE9BQU8seUJBQXlCO0lBUHRDO1FBYUUsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUdsQixjQUFTLEdBQThCLFVBQVUsQ0FBQztRQUV4QyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztLQU1qRDtJQUpDLElBQ0ksU0FBUztRQUNYLE9BQU8sSUFBSSxDQUFDLFNBQVMsS0FBSyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQ3ZELENBQUM7K0dBaEJVLHlCQUF5QjttR0FBekIseUJBQXlCLGlRQ2J0Qyw2akNBaUJBLG9jREphLHlCQUF5QixtSUFGM0IsT0FBTyxvRkFBQyxxQkFBcUIsK0hBQUMsSUFBSSw2RkFBQyxLQUFLOzs0RkFFdEMseUJBQXlCO2tCQVByQyxTQUFTOytCQUNFLG9CQUFvQixjQUduQixJQUFJLFdBQ1AsQ0FBQyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsSUFBSSxFQUFDLEtBQUssQ0FBQzs4QkFLbEQsSUFBSTtzQkFESCxLQUFLO2dCQUlOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBR0ksU0FBUztzQkFBbEIsTUFBTTtnQkFHSCxTQUFTO3NCQURaLFdBQVc7dUJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IElOb2RlIH0gZnJvbSAnLi4vbm9kZSc7XG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ0ZvciwgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ3hDaGFydE5vZGVDb21wb25lbnQgfSBmcm9tICcuLi9uZ3gtY2hhcnQtbm9kZS9uZ3gtY2hhcnQtbm9kZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtY2hhcnQtZGVzaWduZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LWNoYXJ0LWRlc2lnbmVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6dHJ1ZSxcbiAgaW1wb3J0czpbTmdDbGFzcyxOZ3hDaGFydE5vZGVDb21wb25lbnQsTmdJZixOZ0Zvcl1cbn0pXG5leHBvcnQgY2xhc3MgTmd4Q2hhcnREZXNpZ25lckNvbXBvbmVudCB7XG5cbiAgQElucHV0KClcbiAgbm9kZT86IElOb2RlO1xuXG4gIEBJbnB1dCgpXG4gIGhhc1BhcmVudCA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGRpcmVjdGlvbjogJ3ZlcnRpY2FsJyB8ICdob3Jpem9udGFsJyA9ICd2ZXJ0aWNhbCc7XG5cbiAgQE91dHB1dCgpIGl0ZW1DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8SU5vZGU+KCk7XG5cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5mbGV4LWRpcmVjdGlvbicpXG4gIGdldCBob3N0Q2xhc3MoKSB7XG4gICAgcmV0dXJuIHRoaXMuZGlyZWN0aW9uID09PSAndmVydGljYWwnID8gJ2NvbHVtbicgOiAnJztcbiAgfVxufVxuIiwiPG5neC1jaGFydC1ub2RlICpuZ0lmPVwibm9kZVwiIG5nQ2xhc3M9XCJuZ3gtb3JnLXt7ZGlyZWN0aW9ufX1cIiBbbm9kZV09XCJub2RlXCIgW2hhc1BhcmVudF09XCJoYXNQYXJlbnRcIlxuICBbZGlyZWN0aW9uXT1cImRpcmVjdGlvblwiIChpdGVtQ2xpY2spPVwiaXRlbUNsaWNrLmVtaXQoJGV2ZW50KVwiPlxuPC9uZ3gtY2hhcnQtbm9kZT5cblxuPGRpdiAqbmdJZj1cIm5vZGU/LmNoaWxkcz8ubGVuZ3RoXCIgbmdDbGFzcz1cIm5neC1vcmctcmVwb3J0cy17e2RpcmVjdGlvbn19XCIgY2xhc3M9XCJuZ3gtb3JnLXJlcG9ydHNcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgY2hpbGROb2RlIG9mIG5vZGU/LmNoaWxkczsgZmlyc3QgYXMgaXNGaXJzdDsgbGFzdCBhcyBpc0xhc3RcIj5cbiAgICA8ZGl2IG5nQ2xhc3M9XCJuZ3gtb3JnLW9yZy1jb250YWluZXIte3tkaXJlY3Rpb259fVwiIGNsYXNzPVwibmd4LW9yZy1vcmctY29udGFpbmVyXCI+XG4gICAgICA8ZGl2IG5nQ2xhc3M9XCJuZ3gtb3JnLWNvbm5lY3Rvci1jb250YWluZXIte3tkaXJlY3Rpb259fVwiIGNsYXNzPVwibmd4LW9yZy1jb25uZWN0b3ItY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJuZ3gtb3JnLWNvbm5lY3RvciBuZ3gtb3JnLWJvcmRlclwiIFtzdHlsZS5ib3JkZXItY29sb3JdPVwiaXNGaXJzdD8ndHJhbnNwYXJlbnQnOicnXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJuZ3gtb3JnLWJvcmRlclwiPjwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwibmd4LW9yZy1jb25uZWN0b3Igbmd4LW9yZy1ib3JkZXJcIiBbc3R5bGUuYm9yZGVyLWNvbG9yXT1cImlzTGFzdD8ndHJhbnNwYXJlbnQnOicnXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxuZ3gtY2hhcnQtZGVzaWduZXIgW25vZGVdPVwiY2hpbGROb2RlXCIgW2hhc1BhcmVudF09XCJ0cnVlXCIgW2RpcmVjdGlvbl09XCJkaXJlY3Rpb25cIiAoaXRlbUNsaWNrKT1cIml0ZW1DbGljay5lbWl0KCRldmVudClcIj5cbiAgICAgIDwvbmd4LWNoYXJ0LWRlc2lnbmVyPlxuICAgIDwvZGl2PlxuICA8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuIl19