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

Hierarchical Organization Chart

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgClass, NgIf, NgStyle } from '@angular/common';
import * as i0 from "@angular/core";
export class NgxChartNodeComponent {
    constructor() {
        this.hasParent = false;
        this.direction = 'vertical';
        this.itemClick = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxChartNodeComponent, isStandalone: true, selector: "ngx-chart-node", inputs: { node: "node", hasParent: "hasParent", direction: "direction" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div ngClass=\"ngx-org-connector-{{direction}}\" class=\"ngx-org-border\" *ngIf=\"hasParent\"></div>\n<div [ngClass]=\"node?.cssClass\" class=\"ngx-org-box ngx-org-border ngx-org-background\" (click)=\"itemClick.emit(node)\">\n  <div *ngIf=\"node?.image\" class=\"ngx-org-image ngx-org-border\"\n    [ngStyle]=\"{ 'background-image': 'url(\\''+ node?.image+'\\')'}\">\n  </div>\n  <div>\n    <div class=\"ngx-org-name\">{{node?.name}}</div>\n    <div class=\"ngx-org-title\">{{node?.title}}</div>\n  </div>\n</div>\n<div ngClass=\"ngx-org-connector-{{direction}}\" class=\"ngx-org-border\" *ngIf=\"node?.childs?.length\"></div>\n", styles: [":host{display:flex;align-items:center}.ngx-org-box{cursor:pointer;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxChartNodeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-chart-node', standalone: true, imports: [NgClass, NgIf, NgStyle], template: "<div ngClass=\"ngx-org-connector-{{direction}}\" class=\"ngx-org-border\" *ngIf=\"hasParent\"></div>\n<div [ngClass]=\"node?.cssClass\" class=\"ngx-org-box ngx-org-border ngx-org-background\" (click)=\"itemClick.emit(node)\">\n  <div *ngIf=\"node?.image\" class=\"ngx-org-image ngx-org-border\"\n    [ngStyle]=\"{ 'background-image': 'url(\\''+ node?.image+'\\')'}\">\n  </div>\n  <div>\n    <div class=\"ngx-org-name\">{{node?.name}}</div>\n    <div class=\"ngx-org-title\">{{node?.title}}</div>\n  </div>\n</div>\n<div ngClass=\"ngx-org-connector-{{direction}}\" class=\"ngx-org-border\" *ngIf=\"node?.childs?.length\"></div>\n", styles: [":host{display:flex;align-items:center}.ngx-org-box{cursor:pointer;display:flex;align-items:center}\n"] }]
        }], propDecorators: { node: [{
                type: Input
            }], hasParent: [{
                type: Input
            }], direction: [{
                type: Input
            }], itemClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNoYXJ0LW5vZGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW9yZy1jaGFydC9zcmMvbGliL25neC1jaGFydC1ub2RlL25neC1jaGFydC1ub2RlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vcmctY2hhcnQvc3JjL2xpYi9uZ3gtY2hhcnQtbm9kZS9uZ3gtY2hhcnQtbm9kZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBR3ZFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQVN6RCxNQUFNLE9BQU8scUJBQXFCO0lBUGxDO1FBYUUsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUdsQixjQUFTLEdBQThCLFVBQVUsQ0FBQztRQUV4QyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztLQUNqRDsrR0FaWSxxQkFBcUI7bUdBQXJCLHFCQUFxQix5TENabEMsdW5CQVdBLDhKRERZLE9BQU8sb0ZBQUMsSUFBSSw2RkFBQyxPQUFPOzs0RkFFbkIscUJBQXFCO2tCQVBqQyxTQUFTOytCQUNFLGdCQUFnQixjQUdmLElBQUksV0FDTixDQUFDLE9BQU8sRUFBQyxJQUFJLEVBQUMsT0FBTyxDQUFDOzhCQUsvQixJQUFJO3NCQURILEtBQUs7Z0JBSU4sU0FBUztzQkFEUixLQUFLO2dCQUlOLFNBQVM7c0JBRFIsS0FBSztnQkFHSSxTQUFTO3NCQUFsQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgSU5vZGUgfSBmcm9tICcuLi9ub2RlJztcbmltcG9ydCB7IE5nQ2xhc3MsIE5nSWYsIE5nU3R5bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtY2hhcnQtbm9kZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9uZ3gtY2hhcnQtbm9kZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC1jaGFydC1ub2RlLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6dHJ1ZSxcbiAgaW1wb3J0czogW05nQ2xhc3MsTmdJZixOZ1N0eWxlXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hDaGFydE5vZGVDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpXG4gIG5vZGU/OiBJTm9kZTtcblxuICBASW5wdXQoKVxuICBoYXNQYXJlbnQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBkaXJlY3Rpb246ICd2ZXJ0aWNhbCcgfCAnaG9yaXpvbnRhbCcgPSAndmVydGljYWwnO1xuXG4gIEBPdXRwdXQoKSBpdGVtQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPElOb2RlPigpO1xufVxuIiwiPGRpdiBuZ0NsYXNzPVwibmd4LW9yZy1jb25uZWN0b3Ite3tkaXJlY3Rpb259fVwiIGNsYXNzPVwibmd4LW9yZy1ib3JkZXJcIiAqbmdJZj1cImhhc1BhcmVudFwiPjwvZGl2PlxuPGRpdiBbbmdDbGFzc109XCJub2RlPy5jc3NDbGFzc1wiIGNsYXNzPVwibmd4LW9yZy1ib3ggbmd4LW9yZy1ib3JkZXIgbmd4LW9yZy1iYWNrZ3JvdW5kXCIgKGNsaWNrKT1cIml0ZW1DbGljay5lbWl0KG5vZGUpXCI+XG4gIDxkaXYgKm5nSWY9XCJub2RlPy5pbWFnZVwiIGNsYXNzPVwibmd4LW9yZy1pbWFnZSBuZ3gtb3JnLWJvcmRlclwiXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1pbWFnZSc6ICd1cmwoXFwnJysgbm9kZT8uaW1hZ2UrJ1xcJyknfVwiPlxuICA8L2Rpdj5cbiAgPGRpdj5cbiAgICA8ZGl2IGNsYXNzPVwibmd4LW9yZy1uYW1lXCI+e3tub2RlPy5uYW1lfX08L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwibmd4LW9yZy10aXRsZVwiPnt7bm9kZT8udGl0bGV9fTwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuPGRpdiBuZ0NsYXNzPVwibmd4LW9yZy1jb25uZWN0b3Ite3tkaXJlY3Rpb259fVwiIGNsYXNzPVwibmd4LW9yZy1ib3JkZXJcIiAqbmdJZj1cIm5vZGU/LmNoaWxkcz8ubGVuZ3RoXCI+PC9kaXY+XG4iXX0=