@ahmedaoui/ngx-org-chart/fesm2022/ahmedaoui-ngx-org-chart.mjs

Hierarchical Organization Chart

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, HostBinding } from '@angular/core';
import { NgClass, NgIf, NgStyle, NgFor } from '@angular/common';

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
            }] } });

class NgxChartDesignerComponent {
    constructor() {
        this.hasParent = 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: "18.2.13", ngImport: i0, type: NgxChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxChartDesignerComponent, isStandalone: true, 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: "component", type: NgxChartDesignerComponent, selector: "ngx-chart-designer", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxChartNodeComponent, selector: "ngx-chart-node", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxChartDesignerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-chart-designer', standalone: true, imports: [NgClass, NgxChartNodeComponent, NgIf, NgFor], 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();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxOrgChartComponent, isStandalone: true, 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: "component", type: NgxChartDesignerComponent, selector: "ngx-chart-designer", inputs: ["node", "hasParent", "direction"], outputs: ["itemClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxOrgChartComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-org-chart', standalone: true, imports: [NgxChartDesignerComponent, NgFor, NgIf], 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
            }] } });

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

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

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