ngx-flowchart/fesm2015/ngx-flowchart.js

`ngx-flowchart` is an Angular component to show a flow chart. You can also grouping the flow process.

import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, EventEmitter, Input, Output, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

let NgxFlowchartService = class NgxFlowchartService {
    constructor() { }
};
NgxFlowchartService.ɵprov = ɵɵdefineInjectable({ factory: function NgxFlowchartService_Factory() { return new NgxFlowchartService(); }, token: NgxFlowchartService, providedIn: "root" });
NgxFlowchartService = __decorate([
    Injectable({
        providedIn: 'root'
    })
], NgxFlowchartService);

let NgxFlowchartComponent = class NgxFlowchartComponent {
    constructor() {
        /**
         * Click Event
         */
        this.clickName = new EventEmitter();
        /**
         * option
         */
        this.options = {
            groupBackground: 'linear-gradient(to bottom,#b9b9b9 0,#fefefe 100%)',
            groupShadow: '0 0.3rem 0.5rem 0 rgba(44,51,73,.5)',
            groupBorderRadius: '3px',
            groupTextColor: '#000',
            background: '#0e3e7d',
            shadow: '0 2px 4px 0 #333',
            borderRadius: '5px',
            textColor: '#fff',
            width: '200px'
        };
    }
    ngOnInit() {
    }
    clickFlow(data) {
        this.clickName.emit(data);
    }
};
__decorate([
    Input()
], NgxFlowchartComponent.prototype, "data", void 0);
__decorate([
    Output()
], NgxFlowchartComponent.prototype, "clickName", void 0);
__decorate([
    Input()
], NgxFlowchartComponent.prototype, "options", void 0);
NgxFlowchartComponent = __decorate([
    Component({
        selector: 'ngx-flowchart',
        template: "<div class=\"flow-total\">\r\n    <ng-container *ngFor=\"let item of data; let i = index\">\r\n        <ng-container *ngIf=\"i !== 0\">\r\n            <svg style=\"margin: .1rem 0 .2rem 0; width: 24px; height: 24px;\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"#222b45\">\r\n                <g data-name=\"Layer 2\">\r\n                    <g data-name=\"arrow-downward\">\r\n                        <rect width=\"24\" height=\"24\" opacity=\"0\"></rect>\r\n                        <path\r\n                            d=\"M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z\">\r\n                        </path>\r\n                    </g>\r\n                </g>\r\n            </svg>\r\n        </ng-container>\r\n        <div *ngIf=\"item.groupData == undefined\" class=\"flow-operation\">\r\n            <span (click)=\"clickFlow(item)\"\r\n                [ngStyle]=\"{'background': options.background, 'color': options.textColor, \r\n            'border-radius': options.borderRadius,'box-shadow': options.shadow, 'min-width': options.width}\">{{item.name}}</span>\r\n        </div>\r\n        <div *ngIf=\"item.groupData !== undefined\" class=\"flow-group\" [ngStyle]=\"{'background': options.groupBackground, 'color': options.groupTextColor, \r\n                    'border-radius': options.groupBorderRadius,'box-shadow': options.groupShadow}\">\r\n            <span (click)=\"clickFlow(item)\" style='font-size: 1.2rem'>{{item.name}}</span>\r\n            <ng-container *ngFor=\"let d of item.groupData; let j = index\">\r\n                <div class=\"flow-operation\">\r\n                    <span (click)=\"clickFlow(d)\"\r\n                        [ngStyle]=\"{'background': options.background, 'color': options.textColor, \r\n                    'border-radius': options.borderRadius,'box-shadow': options.shadow, 'min-width': options.width}\">{{d.name}}</span>\r\n                    <ng-container *ngIf=\"j !== (item.groupData.length - 1)\">\r\n                        <svg style=\"margin: .3rem 0 0 0; width: 24px; height: 24px\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"#222b45\">\r\n                            <g data-name=\"Layer 2\">\r\n                                <g data-name=\"arrow-downward\">\r\n                                    <rect width=\"24\" height=\"24\" opacity=\"0\"></rect>\r\n                                    <path\r\n                                        d=\"M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z\">\r\n                                    </path>\r\n                                </g>\r\n                            </g>\r\n                        </svg>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>",
        styles: [".flow-total{text-align:center;display:flex;flex-direction:column;align-items:center}.flow-group{padding:.6rem 2rem .5rem;background:linear-gradient(to bottom,#b9b9b9 0,#fefefe 100%);color:#000;margin-bottom:.3rem;border-radius:3px;box-shadow:0 .3rem .5rem 0 rgba(44,51,73,.5);min-width:200px}.flow-operation{display:flex;margin:.3rem 0;align-items:center;justify-content:center;font-size:.89rem;flex-direction:column}.flow-operation span{background:#0e3e7d;color:#fff;padding:.5rem 2rem;border-radius:5px;box-shadow:0 2px 4px 0 #333}.flow-operation nb-icon{margin-top:.3rem;width:1.5em;height:1.5em}.flow-total span{cursor:pointer;min-width:200px}"]
    })
], NgxFlowchartComponent);

let NgxFlowchartModule = class NgxFlowchartModule {
};
NgxFlowchartModule = __decorate([
    NgModule({
        declarations: [NgxFlowchartComponent],
        imports: [
            CommonModule
        ],
        exports: [NgxFlowchartComponent]
    })
], NgxFlowchartModule);

/*
 * Public API Surface of ngx-flowchart
 */

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

export { NgxFlowchartComponent, NgxFlowchartModule, NgxFlowchartService };
//# sourceMappingURL=ngx-flowchart.js.map