ngx-flowchart
Version:
`ngx-flowchart` is an Angular component to show a flow chart. You can also grouping the flow process.
48 lines • 8.35 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
var NgxFlowchartComponent = /** @class */ (function () {
function NgxFlowchartComponent() {
/**
* 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'
};
}
NgxFlowchartComponent.prototype.ngOnInit = function () {
};
NgxFlowchartComponent.prototype.clickFlow = function (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);
return NgxFlowchartComponent;
}());
export { NgxFlowchartComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtZmxvd2NoYXJ0LyIsInNvdXJjZXMiOlsibGliL25neC1mbG93Y2hhcnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBeUIvRTtJQTJCRTtRQXBCQTs7V0FFRztRQUNPLGNBQVMsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUU1RDs7V0FFRztRQUNNLFlBQU8sR0FBdUI7WUFDckMsZUFBZSxFQUFFLG1EQUFtRDtZQUNwRSxXQUFXLEVBQUUscUNBQXFDO1lBQ2xELGlCQUFpQixFQUFFLEtBQUs7WUFDeEIsY0FBYyxFQUFFLE1BQU07WUFDdEIsVUFBVSxFQUFFLFNBQVM7WUFDckIsTUFBTSxFQUFFLGtCQUFrQjtZQUMxQixZQUFZLEVBQUUsS0FBSztZQUNuQixTQUFTLEVBQUUsTUFBTTtZQUNqQixLQUFLLEVBQUUsT0FBTztTQUNmLENBQUM7SUFFYyxDQUFDO0lBRWpCLHdDQUFRLEdBQVI7SUFDQSxDQUFDO0lBRUQseUNBQVMsR0FBVCxVQUFVLElBQUk7UUFDWixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBN0JRO1FBQVIsS0FBSyxFQUFFO3VEQUF1QjtJQUtyQjtRQUFULE1BQU0sRUFBRTs0REFBbUQ7SUFLbkQ7UUFBUixLQUFLLEVBQUU7MERBVU47SUF6QlMscUJBQXFCO1FBTGpDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxlQUFlO1lBQ3pCLGttR0FBNkM7O1NBRTlDLENBQUM7T0FDVyxxQkFBcUIsQ0FvQ2pDO0lBQUQsNEJBQUM7Q0FBQSxBQXBDRCxJQW9DQztTQXBDWSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmd4Rmxvd0NoYXRPcHRpb25zIHtcbiAgZ3JvdXBCYWNrZ3JvdW5kPzogc3RyaW5nLFxuICBncm91cFNoYWRvdz86IHN0cmluZyxcbiAgZ3JvdXBCb3JkZXJSYWRpdXM/OiBzdHJpbmcsXG4gIGdyb3VwVGV4dENvbG9yPzogc3RyaW5nLFxuICBiYWNrZ3JvdW5kPzogc3RyaW5nLFxuICBzaGFkb3c/OiBzdHJpbmcsXG4gIGJvcmRlclJhZGl1cz86IHN0cmluZyxcbiAgdGV4dENvbG9yPzogc3RyaW5nLFxuICB3aWR0aD86IHN0cmluZ1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIE5neEZsb3dDaGF0RGF0YSB7XG4gIGlkOiBzdHJpbmcsXG4gIG5hbWU6IHN0cmluZyxcbiAgZ3JvdXBEYXRhPzogQXJyYXk8YW55PlxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtZmxvd2NoYXJ0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC1mbG93Y2hhcnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9uZ3gtZmxvd2NoYXJ0LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTmd4Rmxvd2NoYXJ0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAvKipcbiAgICogRmxvdyBEYXRhXG4gICAqL1xuICBASW5wdXQoKSBkYXRhOiBOZ3hGbG93Q2hhdERhdGE7XG5cbiAgLyoqXG4gICAqIENsaWNrIEV2ZW50XG4gICAqL1xuICBAT3V0cHV0KCkgY2xpY2tOYW1lOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAvKipcbiAgICogb3B0aW9uXG4gICAqL1xuICBASW5wdXQoKSBvcHRpb25zOiBOZ3hGbG93Q2hhdE9wdGlvbnMgPSB7XG4gICAgZ3JvdXBCYWNrZ3JvdW5kOiAnbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwjYjliOWI5IDAsI2ZlZmVmZSAxMDAlKScsXG4gICAgZ3JvdXBTaGFkb3c6ICcwIDAuM3JlbSAwLjVyZW0gMCByZ2JhKDQ0LDUxLDczLC41KScsXG4gICAgZ3JvdXBCb3JkZXJSYWRpdXM6ICczcHgnLFxuICAgIGdyb3VwVGV4dENvbG9yOiAnIzAwMCcsXG4gICAgYmFja2dyb3VuZDogJyMwZTNlN2QnLFxuICAgIHNoYWRvdzogJzAgMnB4IDRweCAwICMzMzMnLFxuICAgIGJvcmRlclJhZGl1czogJzVweCcsXG4gICAgdGV4dENvbG9yOiAnI2ZmZicsXG4gICAgd2lkdGg6ICcyMDBweCdcbiAgfTtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgY2xpY2tGbG93KGRhdGEpIHtcbiAgICB0aGlzLmNsaWNrTmFtZS5lbWl0KGRhdGEpO1xuICB9XG5cbn1cbiJdfQ==