cm-angular-org-chart
Version:
Hierarchical Organizational Chart for Angular
89 lines (82 loc) • 11.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class EmployeeComponent {
constructor() {
this.employee = null;
this.hasManager = false;
this.direction = 'vertical';
this.itemClick = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmployeeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EmployeeComponent, isStandalone: true, selector: "employee", inputs: { employee: "employee", hasManager: "hasManager", direction: "direction" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div ngClass=\"oc-connector-{{direction}}\" class=\"oc-border\" *ngIf=\"hasManager\"></div>\r\n<div [ngClass]=\"employee?.cssClass\" class=\"oc-box oc-border oc-background\"\r\n (click)=\"itemClick.emit(employee)\">\r\n <div *ngIf=\"employee?.imageUrl\" class=\"oc-image oc-border\"\r\n [ngStyle]=\"{ 'background-image': 'url(\\''+ employee?.imageUrl+'\\')'}\"></div>\r\n <div>\r\n <div class=\"oc-name\">{{employee?.name}}</div>\r\n <div class=\"oc-designation\">{{employee?.designation}}</div>\r\n </div>\r\n</div>\r\n<div ngClass=\"oc-connector-{{direction}}\" class=\"oc-border\" *ngIf=\"employee?.subordinates?.length\"></div>", styles: [":host{display:flex;align-items:center}.oc-box{cursor:pointer;display:flex;align-items:center;padding:.5em 1em;border-radius:.2em;box-shadow:.05em .05em .2em .05em #0000002b;color:#fff}.oc-horizontal{padding:1em 0}.oc-vertical{padding:0 1em}.oc-border{border:1px solid black;border-color:#000}.oc-image{background-repeat:no-repeat;width:4em;height:4em;margin-right:.5em;background-color:#fff;border-radius:50%;padding:.25em}.oc-superSenior{background-color:#191970}.oc-senior{background-color:brown}.oc-me{background-color:#006400}.oc-junior{background-color:#b8860b}.oc-superJunior{background-color:purple}.oc-name{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.oc-designation{font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.oc-connector-horizontal{width:1em}.oc-connector-vertical{height:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmployeeComponent, decorators: [{
type: Component,
args: [{ selector: 'employee', standalone: true, imports: [CommonModule], template: "<div ngClass=\"oc-connector-{{direction}}\" class=\"oc-border\" *ngIf=\"hasManager\"></div>\r\n<div [ngClass]=\"employee?.cssClass\" class=\"oc-box oc-border oc-background\"\r\n (click)=\"itemClick.emit(employee)\">\r\n <div *ngIf=\"employee?.imageUrl\" class=\"oc-image oc-border\"\r\n [ngStyle]=\"{ 'background-image': 'url(\\''+ employee?.imageUrl+'\\')'}\"></div>\r\n <div>\r\n <div class=\"oc-name\">{{employee?.name}}</div>\r\n <div class=\"oc-designation\">{{employee?.designation}}</div>\r\n </div>\r\n</div>\r\n<div ngClass=\"oc-connector-{{direction}}\" class=\"oc-border\" *ngIf=\"employee?.subordinates?.length\"></div>", styles: [":host{display:flex;align-items:center}.oc-box{cursor:pointer;display:flex;align-items:center;padding:.5em 1em;border-radius:.2em;box-shadow:.05em .05em .2em .05em #0000002b;color:#fff}.oc-horizontal{padding:1em 0}.oc-vertical{padding:0 1em}.oc-border{border:1px solid black;border-color:#000}.oc-image{background-repeat:no-repeat;width:4em;height:4em;margin-right:.5em;background-color:#fff;border-radius:50%;padding:.25em}.oc-superSenior{background-color:#191970}.oc-senior{background-color:brown}.oc-me{background-color:#006400}.oc-junior{background-color:#b8860b}.oc-superJunior{background-color:purple}.oc-name{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.oc-designation{font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.oc-connector-horizontal{width:1em}.oc-connector-vertical{height:1em}\n"] }]
}], propDecorators: { employee: [{
type: Input
}], hasManager: [{
type: Input
}], direction: [{
type: Input
}], itemClick: [{
type: Output
}] } });
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']
}] } });
class Employee {
constructor(orgStructure, manager) {
this.cssClass = "";
this.imageUrl = "";
this.manager = manager;
const [name, ...reports] = orgStructure;
this.name = name.split('(')[0].trim();
const desigMatch = name.match(/\(([^)]+)\)/);
this.designation = desigMatch && desigMatch[1].trim();
this.subordinates = reports.map(r => r.substring(1))
.reduce((previous, current) => {
if (!current.startsWith(' ')) {
previous.push([]);
}
previous[previous.length - 1].push(current);
return previous;
}, [])
.map(r => new Employee(r, this));
}
}
/*
* Public API Surface of cm-angular-org-chart
*/
/**
* Generated bundle index. Do not edit.
*/
export { CmAngularOrgChartComponent, Employee, EmployeeComponent };
//# sourceMappingURL=cm-angular-org-chart.mjs.map