cm-angular-org-chart/esm2022/lib/org-chart/org-chart.component.mjs

Hierarchical Organizational Chart for Angular

import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmployeeComponent } from './employee/employee.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CmAngularOrgChartComponent {
    constructor() {
        this.topEmployee = null;
        this.hasManager = 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: "17.3.12", ngImport: i0, type: CmAngularOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CmAngularOrgChartComponent, isStandalone: true, selector: "org-chart", inputs: { topEmployee: "topEmployee", hasManager: "hasManager", direction: "direction" }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.flex-direction": "this.hostClass" } }, ngImport: i0, template: "<employee *ngIf=\"topEmployee\" ngClass=\"oc-{{direction}}\" [employee]=\"topEmployee\" [hasManager]=\"hasManager\"\r\n    [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\">\r\n</employee>\r\n<div *ngIf=\"topEmployee?.subordinates?.length\" ngClass=\"oc-reports-{{direction}}\" class=\"oc-reports\">\r\n    <ng-container *ngFor=\"let employee of topEmployee?.subordinates; first as isFirst; last as isLast\">\r\n        <div ngClass=\"oc-org-container-{{direction}}\" class=\"oc-org-container\">\r\n            <div ngClass=\"oc-connector-container-{{direction}}\" class=\"oc-connector-container\">\r\n                <div class=\"oc-connector oc-border\" [style.border-color]=\"isFirst?'transparent':''\"></div>\r\n                <div class=\"oc-border\"></div>\r\n                <div class=\"oc-connector oc-border\" [style.border-color]=\"isLast?'transparent':''\"></div>\r\n            </div>\r\n            <org-chart [topEmployee]=\"employee\" [hasManager]=\"true\" [direction]=\"direction\"\r\n                (itemClick)=\"itemClick.emit($event)\">\r\n            </org-chart>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host{display:flex;align-items:center;flex:1}.oc-horizontal{padding:1em 0}.oc-vertical{flex-direction:column;padding:0 1em}.oc-border{border:1px solid black;border-color:#000}.oc-org-container{display:flex}.oc-org-container-vertical{flex-direction:column}.oc-connector{flex:1}.oc-connector-container{display:flex}.oc-connector-container-horizontal{flex-direction:column}.oc-reports{display:flex;flex:1}.oc-reports-horizontal{flex-direction:column}\n"], dependencies: [{ kind: "component", type: CmAngularOrgChartComponent, selector: "org-chart", inputs: ["topEmployee", "hasManager", "direction"], outputs: ["itemClick"] }, { kind: "ngmodule", type: CommonModule }, { 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: EmployeeComponent, selector: "employee", inputs: ["employee", "hasManager", "direction"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CmAngularOrgChartComponent, decorators: [{
            type: Component,
            args: [{ selector: 'org-chart', standalone: true, imports: [CommonModule, EmployeeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<employee *ngIf=\"topEmployee\" ngClass=\"oc-{{direction}}\" [employee]=\"topEmployee\" [hasManager]=\"hasManager\"\r\n    [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\">\r\n</employee>\r\n<div *ngIf=\"topEmployee?.subordinates?.length\" ngClass=\"oc-reports-{{direction}}\" class=\"oc-reports\">\r\n    <ng-container *ngFor=\"let employee of topEmployee?.subordinates; first as isFirst; last as isLast\">\r\n        <div ngClass=\"oc-org-container-{{direction}}\" class=\"oc-org-container\">\r\n            <div ngClass=\"oc-connector-container-{{direction}}\" class=\"oc-connector-container\">\r\n                <div class=\"oc-connector oc-border\" [style.border-color]=\"isFirst?'transparent':''\"></div>\r\n                <div class=\"oc-border\"></div>\r\n                <div class=\"oc-connector oc-border\" [style.border-color]=\"isLast?'transparent':''\"></div>\r\n            </div>\r\n            <org-chart [topEmployee]=\"employee\" [hasManager]=\"true\" [direction]=\"direction\"\r\n                (itemClick)=\"itemClick.emit($event)\">\r\n            </org-chart>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host{display:flex;align-items:center;flex:1}.oc-horizontal{padding:1em 0}.oc-vertical{flex-direction:column;padding:0 1em}.oc-border{border:1px solid black;border-color:#000}.oc-org-container{display:flex}.oc-org-container-vertical{flex-direction:column}.oc-connector{flex:1}.oc-connector-container{display:flex}.oc-connector-container-horizontal{flex-direction:column}.oc-reports{display:flex;flex:1}.oc-reports-horizontal{flex-direction:column}\n"] }]
        }], propDecorators: { topEmployee: [{
                type: Input
            }], hasManager: [{
                type: Input
            }], direction: [{
                type: Input
            }], itemClick: [{
                type: Output
            }], hostClass: [{
                type: HostBinding,
                args: ['style.flex-direction']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3JnLWNoYXJ0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NtLWFuZ3VsYXItb3JnLWNoYXJ0L3NyYy9saWIvb3JnLWNoYXJ0L29yZy1jaGFydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jbS1hbmd1bGFyLW9yZy1jaGFydC9zcmMvbGliL29yZy1jaGFydC9vcmctY2hhcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0csT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7QUFXbEUsTUFBTSxPQUFPLDBCQUEwQjtJQVJ2QztRQVNXLGdCQUFXLEdBQWUsSUFBSSxDQUFDO1FBQy9CLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsY0FBUyxHQUE4QixVQUFVLENBQUM7UUFFakQsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFhLENBQUM7S0FPckQ7SUFMQyxJQUNJLFNBQVM7UUFDWCxPQUFPLElBQUksQ0FBQyxTQUFTLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUN2RCxDQUFDOytHQVZVLDBCQUEwQjttR0FBMUIsMEJBQTBCLHdRQ2J2Qyxrb0NBZ0JNLDJmREhPLDBCQUEwQixpSUFMM0IsWUFBWSw4VkFBRSxpQkFBaUI7OzRGQUs5QiwwQkFBMEI7a0JBUnRDLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxpQkFBaUIsQ0FBQyxtQkFHekIsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUksU0FBUztzQkFBbEIsTUFBTTtnQkFHSCxTQUFTO3NCQURaLFdBQVc7dUJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBFbXBsb3llZUNvbXBvbmVudCB9IGZyb20gJy4vZW1wbG95ZWUvZW1wbG95ZWUuY29tcG9uZW50JztcclxuaW1wb3J0IHsgSUVtcGxveWVlIH0gZnJvbSAnLi9lbXBsb3llZS9lbXBsb3llZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ29yZy1jaGFydCcsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBFbXBsb3llZUNvbXBvbmVudF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL29yZy1jaGFydC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vb3JnLWNoYXJ0LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcclxufSlcclxuZXhwb3J0IGNsYXNzIENtQW5ndWxhck9yZ0NoYXJ0Q29tcG9uZW50IHtcclxuICBASW5wdXQoKSB0b3BFbXBsb3llZTogYW55IHwgbnVsbCA9IG51bGw7XHJcbiAgQElucHV0KCkgaGFzTWFuYWdlciA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGRpcmVjdGlvbjogJ3ZlcnRpY2FsJyB8ICdob3Jpem9udGFsJyA9ICd2ZXJ0aWNhbCc7XHJcblxyXG4gIEBPdXRwdXQoKSBpdGVtQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPElFbXBsb3llZT4oKTtcclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5mbGV4LWRpcmVjdGlvbicpXHJcbiAgZ2V0IGhvc3RDbGFzcygpIHtcclxuICAgIHJldHVybiB0aGlzLmRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/ICdjb2x1bW4nIDogJyc7XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8ZW1wbG95ZWUgKm5nSWY9XCJ0b3BFbXBsb3llZVwiIG5nQ2xhc3M9XCJvYy17e2RpcmVjdGlvbn19XCIgW2VtcGxveWVlXT1cInRvcEVtcGxveWVlXCIgW2hhc01hbmFnZXJdPVwiaGFzTWFuYWdlclwiXHJcbiAgICBbZGlyZWN0aW9uXT1cImRpcmVjdGlvblwiIChpdGVtQ2xpY2spPVwiaXRlbUNsaWNrLmVtaXQoJGV2ZW50KVwiPlxyXG48L2VtcGxveWVlPlxyXG48ZGl2ICpuZ0lmPVwidG9wRW1wbG95ZWU/LnN1Ym9yZGluYXRlcz8ubGVuZ3RoXCIgbmdDbGFzcz1cIm9jLXJlcG9ydHMte3tkaXJlY3Rpb259fVwiIGNsYXNzPVwib2MtcmVwb3J0c1wiPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgZW1wbG95ZWUgb2YgdG9wRW1wbG95ZWU/LnN1Ym9yZGluYXRlczsgZmlyc3QgYXMgaXNGaXJzdDsgbGFzdCBhcyBpc0xhc3RcIj5cclxuICAgICAgICA8ZGl2IG5nQ2xhc3M9XCJvYy1vcmctY29udGFpbmVyLXt7ZGlyZWN0aW9ufX1cIiBjbGFzcz1cIm9jLW9yZy1jb250YWluZXJcIj5cclxuICAgICAgICAgICAgPGRpdiBuZ0NsYXNzPVwib2MtY29ubmVjdG9yLWNvbnRhaW5lci17e2RpcmVjdGlvbn19XCIgY2xhc3M9XCJvYy1jb25uZWN0b3ItY29udGFpbmVyXCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwib2MtY29ubmVjdG9yIG9jLWJvcmRlclwiIFtzdHlsZS5ib3JkZXItY29sb3JdPVwiaXNGaXJzdD8ndHJhbnNwYXJlbnQnOicnXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwib2MtYm9yZGVyXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwib2MtY29ubmVjdG9yIG9jLWJvcmRlclwiIFtzdHlsZS5ib3JkZXItY29sb3JdPVwiaXNMYXN0Pyd0cmFuc3BhcmVudCc6JydcIj48L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxvcmctY2hhcnQgW3RvcEVtcGxveWVlXT1cImVtcGxveWVlXCIgW2hhc01hbmFnZXJdPVwidHJ1ZVwiIFtkaXJlY3Rpb25dPVwiZGlyZWN0aW9uXCJcclxuICAgICAgICAgICAgICAgIChpdGVtQ2xpY2spPVwiaXRlbUNsaWNrLmVtaXQoJGV2ZW50KVwiPlxyXG4gICAgICAgICAgICA8L29yZy1jaGFydD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG48L2Rpdj4iXX0=