@tots/ngx-org-chart/fesm2020/tots-ngx-org-chart.mjs

Hierarchical Organization Chart

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class NgxChartNodeComponent {
    constructor() {
        this.hasParent = false;
        this.direction = 'vertical';
        this.itemClick = new EventEmitter();
    }
}
NgxChartNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxChartNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NgxChartNodeComponent, 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: 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: "15.0.4", ngImport: i0, type: NgxChartNodeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-chart-node', 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
            }] } });

class NgxChartDesignerComponent {
    constructor() {
        this.hasParent = false;
        this.direction = 'vertical';
        this.itemClick = new EventEmitter();
    }
    get hostClass() {
        return this.direction === 'vertical' ? 'column' : '';
    }
}
NgxChartDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxChartDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NgxChartDesignerComponent, 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: "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: NgxChartNodeComponent, selector: "ngx-chart-node", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }, { kind: "component", type: NgxChartDesignerComponent, selector: "ngx-chart-designer", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-chart-designer', 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']
            }] } });

class NgxOrgChartComponent {
    constructor() {
        this.hasParent = false;
        this.direction = 'vertical';
        this.itemClick = new EventEmitter();
    }
}
NgxOrgChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxOrgChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NgxOrgChartComponent, selector: "ngx-org-chart", inputs: { nodes: "nodes", hasParent: "hasParent", direction: "direction" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div *ngIf=\"nodes?.length\">\n  <ng-container *ngFor=\"let node of nodes\">\n    <div class=\"ngx-org-self-{{direction}}\">\n      <ngx-chart-designer [node]=\"node\" [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\"></ngx-chart-designer>\n    </div>\n  </ng-container>\n</div>\n", styles: ["html,body{display:flex;flex:1}.ngx-org-name{font-family:Patua One,cursive}.ngx-org-title{font-family:Oswald,sans-serif}.ngx-org-border{border-color:#9e9e9e}.ngx-org-box{color:#000;width:10em}.ngx-org-self-vertical{margin-bottom:2%}\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: "component", type: NgxChartDesignerComponent, selector: "ngx-chart-designer", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxOrgChartComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-org-chart', template: "<div *ngIf=\"nodes?.length\">\n  <ng-container *ngFor=\"let node of nodes\">\n    <div class=\"ngx-org-self-{{direction}}\">\n      <ngx-chart-designer [node]=\"node\" [direction]=\"direction\" (itemClick)=\"itemClick.emit($event)\"></ngx-chart-designer>\n    </div>\n  </ng-container>\n</div>\n", styles: ["html,body{display:flex;flex:1}.ngx-org-name{font-family:Patua One,cursive}.ngx-org-title{font-family:Oswald,sans-serif}.ngx-org-border{border-color:#9e9e9e}.ngx-org-box{color:#000;width:10em}.ngx-org-self-vertical{margin-bottom:2%}\n"] }]
        }], propDecorators: { nodes: [{
                type: Input
            }], hasParent: [{
                type: Input
            }], direction: [{
                type: Input
            }], itemClick: [{
                type: Output
            }] } });

class NgxChartNodeModule {
}
NgxChartNodeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartNodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxChartNodeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: NgxChartNodeModule, bootstrap: [NgxChartNodeComponent], declarations: [NgxChartNodeComponent], imports: [CommonModule], exports: [NgxChartNodeComponent] });
NgxChartNodeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartNodeModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartNodeModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NgxChartNodeComponent
                    ],
                    imports: [
                        CommonModule
                    ],
                    bootstrap: [NgxChartNodeComponent],
                    exports: [NgxChartNodeComponent]
                }]
        }] });

class NgxChartDesignerModule {
}
NgxChartDesignerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxChartDesignerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerModule, bootstrap: [NgxChartDesignerComponent], declarations: [NgxChartDesignerComponent], imports: [CommonModule,
        NgxChartNodeModule], exports: [NgxChartDesignerComponent] });
NgxChartDesignerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerModule, imports: [CommonModule,
        NgxChartNodeModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxChartDesignerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NgxChartDesignerComponent
                    ],
                    imports: [
                        CommonModule,
                        NgxChartNodeModule
                    ],
                    bootstrap: [NgxChartDesignerComponent],
                    exports: [NgxChartDesignerComponent]
                }]
        }] });

class NgxOrgChartModule {
}
NgxOrgChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxOrgChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxOrgChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: NgxOrgChartModule, bootstrap: [NgxOrgChartComponent], declarations: [NgxOrgChartComponent], imports: [CommonModule,
        NgxChartDesignerModule], exports: [NgxOrgChartComponent] });
NgxOrgChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxOrgChartModule, imports: [CommonModule,
        NgxChartDesignerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxOrgChartModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NgxOrgChartComponent
                    ],
                    imports: [
                        CommonModule,
                        NgxChartDesignerModule
                    ],
                    bootstrap: [NgxOrgChartComponent],
                    exports: [NgxOrgChartComponent]
                }]
        }] });

/*
 * Public API Surface of ngx-org-chart
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgxOrgChartComponent, NgxOrgChartModule };
//# sourceMappingURL=tots-ngx-org-chart.mjs.map