ngx-flowchart
Version:
`ngx-flowchart` is an Angular component to show a flow chart. You can also grouping the flow process.
47 lines • 8.14 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
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);
export { NgxFlowchartComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtZmxvd2NoYXJ0LyIsInNvdXJjZXMiOlsibGliL25neC1mbG93Y2hhcnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBeUIvRSxJQUFhLHFCQUFxQixHQUFsQyxNQUFhLHFCQUFxQjtJQTJCaEM7UUFwQkE7O1dBRUc7UUFDTyxjQUFTLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFNUQ7O1dBRUc7UUFDTSxZQUFPLEdBQXVCO1lBQ3JDLGVBQWUsRUFBRSxtREFBbUQ7WUFDcEUsV0FBVyxFQUFFLHFDQUFxQztZQUNsRCxpQkFBaUIsRUFBRSxLQUFLO1lBQ3hCLGNBQWMsRUFBRSxNQUFNO1lBQ3RCLFVBQVUsRUFBRSxTQUFTO1lBQ3JCLE1BQU0sRUFBRSxrQkFBa0I7WUFDMUIsWUFBWSxFQUFFLEtBQUs7WUFDbkIsU0FBUyxFQUFFLE1BQU07WUFDakIsS0FBSyxFQUFFLE9BQU87U0FDZixDQUFDO0lBRWMsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUVELFNBQVMsQ0FBQyxJQUFJO1FBQ1osSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQztDQUVGLENBQUE7QUEvQlU7SUFBUixLQUFLLEVBQUU7bURBQXVCO0FBS3JCO0lBQVQsTUFBTSxFQUFFO3dEQUFtRDtBQUtuRDtJQUFSLEtBQUssRUFBRTtzREFVTjtBQXpCUyxxQkFBcUI7SUFMakMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLGVBQWU7UUFDekIsa21HQUE2Qzs7S0FFOUMsQ0FBQztHQUNXLHFCQUFxQixDQW9DakM7U0FwQ1kscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIE5neEZsb3dDaGF0T3B0aW9ucyB7XG4gIGdyb3VwQmFja2dyb3VuZD86IHN0cmluZyxcbiAgZ3JvdXBTaGFkb3c/OiBzdHJpbmcsXG4gIGdyb3VwQm9yZGVyUmFkaXVzPzogc3RyaW5nLFxuICBncm91cFRleHRDb2xvcj86IHN0cmluZyxcbiAgYmFja2dyb3VuZD86IHN0cmluZyxcbiAgc2hhZG93Pzogc3RyaW5nLFxuICBib3JkZXJSYWRpdXM/OiBzdHJpbmcsXG4gIHRleHRDb2xvcj86IHN0cmluZyxcbiAgd2lkdGg/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGludGVyZmFjZSBOZ3hGbG93Q2hhdERhdGEge1xuICBpZDogc3RyaW5nLFxuICBuYW1lOiBzdHJpbmcsXG4gIGdyb3VwRGF0YT86IEFycmF5PGFueT5cbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LWZsb3djaGFydCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9uZ3gtZmxvd2NoYXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LWZsb3djaGFydC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE5neEZsb3djaGFydENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgLyoqXG4gICAqIEZsb3cgRGF0YVxuICAgKi9cbiAgQElucHV0KCkgZGF0YTogTmd4Rmxvd0NoYXREYXRhO1xuXG4gIC8qKlxuICAgKiBDbGljayBFdmVudFxuICAgKi9cbiAgQE91dHB1dCgpIGNsaWNrTmFtZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgLyoqXG4gICAqIG9wdGlvblxuICAgKi9cbiAgQElucHV0KCkgb3B0aW9uczogTmd4Rmxvd0NoYXRPcHRpb25zID0ge1xuICAgIGdyb3VwQmFja2dyb3VuZDogJ2xpbmVhci1ncmFkaWVudCh0byBib3R0b20sI2I5YjliOSAwLCNmZWZlZmUgMTAwJSknLFxuICAgIGdyb3VwU2hhZG93OiAnMCAwLjNyZW0gMC41cmVtIDAgcmdiYSg0NCw1MSw3MywuNSknLFxuICAgIGdyb3VwQm9yZGVyUmFkaXVzOiAnM3B4JyxcbiAgICBncm91cFRleHRDb2xvcjogJyMwMDAnLFxuICAgIGJhY2tncm91bmQ6ICcjMGUzZTdkJyxcbiAgICBzaGFkb3c6ICcwIDJweCA0cHggMCAjMzMzJyxcbiAgICBib3JkZXJSYWRpdXM6ICc1cHgnLFxuICAgIHRleHRDb2xvcjogJyNmZmYnLFxuICAgIHdpZHRoOiAnMjAwcHgnXG4gIH07XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG4gIGNsaWNrRmxvdyhkYXRhKSB7XG4gICAgdGhpcy5jbGlja05hbWUuZW1pdChkYXRhKTtcbiAgfVxuXG59XG4iXX0=