ngx-flowchart/ngx-flowchart.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"NgxFlowchartService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"NgxFlowChatOptions":{"__symbolic":"interface"},"NgxFlowChatData":{"__symbolic":"interface"},"NgxFlowchartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"clickName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"clickFlow":[{"__symbolic":"method"}]}},"NgxFlowchartModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxFlowchartComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxFlowchartComponent"}]}]}],"members":{}}},"origins":{"NgxFlowchartService":"./lib/ngx-flowchart.service","NgxFlowChatOptions":"./lib/ngx-flowchart.component","NgxFlowChatData":"./lib/ngx-flowchart.component","NgxFlowchartComponent":"./lib/ngx-flowchart.component","NgxFlowchartModule":"./lib/ngx-flowchart.module"},"importAs":"ngx-flowchart"}