angular13-organization-chart
Version:
Organization chart library for angular 15+
59 lines (54 loc) • 9.03 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class OrgChartComponent {
constructor() {
this.hasParent = false;
this.zoomOut = false;
}
onClick() {
if (this.data && this.data.onClick) {
this.data.onClick();
}
}
toggleZoom() {
this.zoomOut = !this.zoomOut;
}
}
OrgChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: OrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OrgChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: OrgChartComponent, selector: "angular-org-chart", inputs: { data: "data", hasParent: "hasParent", nodeTemplate: "nodeTemplate" }, host: { properties: { "class.ng13-org-chart-zoom-out": "zoomOut" } }, exportAs: ["orgChart"], ngImport: i0, template: "<div class=\"ng13-org-chart-entity\">\n <div class=\"ng13-org-chart-entity-connector ng13-org-chart-entity-border\" *ngIf=\"hasParent\"></div>\n <div (click)=\"onClick()\" [class]=\"data?.cssClass\" class=\"ng13-org-chart-entity-box\" [style]=\"data?.css\">\n <ng-container *ngTemplateOutlet=\"nodeTemplate; context: {$implicit: data}\">\n </ng-container>\n </div>\n <div class=\"ng13-org-chart-entity-connector ng13-org-chart-entity-border\" *ngIf=\"data?.children.length && !data.hideChildren\"></div>\n</div>\n\n\n<div *ngIf=\"!data.hideChildren\" class=\"ng13-org-chart-container\">\n\t<ng-container *ngFor=\"let data of data?.children; first as isFirst; last as isLast\">\n\t\t<div class=\"ng13-org-chart-sub-container\">\n\t\t\t<div class=\"ng13-org-chart-connector-container\">\n\t\t\t\t<div class=\"ng13-org-chart-connector ng13-org-chart-entity-border\" [style.border-color]=\"isFirst?'transparent':''\"></div>\n\t\t\t\t<div class=\"ng13-org-chart-entity-border\"></div>\n\t\t\t\t<div class=\"ng13-org-chart-connector ng13-org-chart-entity-border\" [style.border-color]=\"isLast?'transparent':''\"></div>\n\t\t\t</div>\n\t\t\t<angular-org-chart [data]=\"data\" [hasParent]=\"true\" [nodeTemplate]=\"nodeTemplate\">\n </angular-org-chart>\n\t\t</div>\n\t</ng-container>\n</div>\n<div class=\"ng13-org-chart-zoom-button-container\">\n <ng-content select=\"[zoom-button]\"></ng-content>\n</div>\n", styles: ["angular-org-chart{display:inline-flex;position:relative;flex-direction:column;align-items:center;flex-wrap:wrap;padding-bottom:5px}.ng13-org-chart-entity{margin:0 1em;display:flex;flex-direction:column;align-items:center;transition:margin .25s}.ng13-org-chart-entity-border{border-left:1px solid #000040;border-top:1px solid #000040}.ng13-org-chart-zoom-button-container{position:absolute;top:0;left:0}.ng13-org-chart-sub-container{display:flex;flex-direction:column}.ng13-org-chart-container{display:flex;flex:1}.ng13-org-chart-connector{flex:1}.ng13-org-chart-connector-container{display:flex}.ng13-org-chart-entity-connector{height:1em;transition:height .25s}.ng13-org-chart-entity-box{position:relative;padding:0;display:flex;flex-direction:column;align-items:center;border:1px solid #0070B0;background-color:#0070b0;border-radius:8px;box-shadow:0 .5rem 1rem #777!important;max-width:500px;max-height:500px;min-width:32px;min-height:32px;overflow:hidden;transition:max-width .25s,max-height .25s,border-radius .25s,padding .25s,margin .25s}.ng13-org-chart-zoom-out .ng13-org-chart-entity-box:not(:hover){max-width:32px;max-height:32px;border-radius:50%;margin:0;padding:0}.ng13-org-chart-zoom-out .ng13-org-chart-entity-connector{height:.5em}.ng13-org-chart-zoom-out .ng13-org-chart-entity{margin:0 .25em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OrgChartComponent, selector: "angular-org-chart", inputs: ["data", "hasParent", "nodeTemplate"], exportAs: ["orgChart"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: OrgChartComponent, decorators: [{
type: Component,
args: [{ selector: 'angular-org-chart', exportAs: 'orgChart', host: {
'[class.ng13-org-chart-zoom-out]': 'zoomOut'
}, encapsulation: ViewEncapsulation.None, template: "<div class=\"ng13-org-chart-entity\">\n <div class=\"ng13-org-chart-entity-connector ng13-org-chart-entity-border\" *ngIf=\"hasParent\"></div>\n <div (click)=\"onClick()\" [class]=\"data?.cssClass\" class=\"ng13-org-chart-entity-box\" [style]=\"data?.css\">\n <ng-container *ngTemplateOutlet=\"nodeTemplate; context: {$implicit: data}\">\n </ng-container>\n </div>\n <div class=\"ng13-org-chart-entity-connector ng13-org-chart-entity-border\" *ngIf=\"data?.children.length && !data.hideChildren\"></div>\n</div>\n\n\n<div *ngIf=\"!data.hideChildren\" class=\"ng13-org-chart-container\">\n\t<ng-container *ngFor=\"let data of data?.children; first as isFirst; last as isLast\">\n\t\t<div class=\"ng13-org-chart-sub-container\">\n\t\t\t<div class=\"ng13-org-chart-connector-container\">\n\t\t\t\t<div class=\"ng13-org-chart-connector ng13-org-chart-entity-border\" [style.border-color]=\"isFirst?'transparent':''\"></div>\n\t\t\t\t<div class=\"ng13-org-chart-entity-border\"></div>\n\t\t\t\t<div class=\"ng13-org-chart-connector ng13-org-chart-entity-border\" [style.border-color]=\"isLast?'transparent':''\"></div>\n\t\t\t</div>\n\t\t\t<angular-org-chart [data]=\"data\" [hasParent]=\"true\" [nodeTemplate]=\"nodeTemplate\">\n </angular-org-chart>\n\t\t</div>\n\t</ng-container>\n</div>\n<div class=\"ng13-org-chart-zoom-button-container\">\n <ng-content select=\"[zoom-button]\"></ng-content>\n</div>\n", styles: ["angular-org-chart{display:inline-flex;position:relative;flex-direction:column;align-items:center;flex-wrap:wrap;padding-bottom:5px}.ng13-org-chart-entity{margin:0 1em;display:flex;flex-direction:column;align-items:center;transition:margin .25s}.ng13-org-chart-entity-border{border-left:1px solid #000040;border-top:1px solid #000040}.ng13-org-chart-zoom-button-container{position:absolute;top:0;left:0}.ng13-org-chart-sub-container{display:flex;flex-direction:column}.ng13-org-chart-container{display:flex;flex:1}.ng13-org-chart-connector{flex:1}.ng13-org-chart-connector-container{display:flex}.ng13-org-chart-entity-connector{height:1em;transition:height .25s}.ng13-org-chart-entity-box{position:relative;padding:0;display:flex;flex-direction:column;align-items:center;border:1px solid #0070B0;background-color:#0070b0;border-radius:8px;box-shadow:0 .5rem 1rem #777!important;max-width:500px;max-height:500px;min-width:32px;min-height:32px;overflow:hidden;transition:max-width .25s,max-height .25s,border-radius .25s,padding .25s,margin .25s}.ng13-org-chart-zoom-out .ng13-org-chart-entity-box:not(:hover){max-width:32px;max-height:32px;border-radius:50%;margin:0;padding:0}.ng13-org-chart-zoom-out .ng13-org-chart-entity-connector{height:.5em}.ng13-org-chart-zoom-out .ng13-org-chart-entity{margin:0 .25em}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
type: Input
}], hasParent: [{
type: Input
}], nodeTemplate: [{
type: Input
}] } });
class OrgChartModule {
}
OrgChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: OrgChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OrgChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.6", ngImport: i0, type: OrgChartModule, declarations: [OrgChartComponent], imports: [CommonModule], exports: [OrgChartComponent] });
OrgChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: OrgChartModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: OrgChartModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
declarations: [OrgChartComponent],
exports: [
OrgChartComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OrgChartComponent, OrgChartModule };
//# sourceMappingURL=angular13-organization-chart.mjs.map