@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/admin/document-trace/trace-element.component.html

@@ -0,0 +1,57 @@
+<h3>
+  {{nodeType.title}}
+</h3>
+
+<h4 *ngIf="estimate">{{'Estimate' | translate}}</h4>
+<h4 *ngIf="none">{{'NoEstimate' | translate}}</h4>
+<h4 *ngIf="skip">{{'Skipped' | translate}}</h4>
+
+<h4 *ngIf="recurring" class="message mat-body-1"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>
+
+<table class="mat-table">
+  <tbody class="mat-table-body">
+    <tr *ngFor="let r of recipients" class="mat-row">
+      <td class="mat-cell" (click)="chat($event)" [innerHTML]="recipientInfo(r) | async | sanitizeHtml">
+      </td>
+      <td class="mat-cell">
+        <span *ngIf="r.action">
+          {{r.action | action : 'past'}}
+        </span>
+        <span *ngIf="r.pending">
+          <span *ngIf="!r.estimate; else estimate">
+            {{'IsPending' | translate}}
+          </span>
+        </span>
+      </td>
+      <td class="mat-cell">
+        <span *ngIf="!r.estimate; estimate">{{r.received || r.replied | amDateFormat: 'lll'}}</span>
+      </td>
+      <td class="mat-cell">
+        <button mat-icon-button *ngIf="!r.estimate" [matMenuTriggerFor]="options" [disabled]="!r.pending"><mat-icon>more_vert</mat-icon></button>
+        <mat-menu #options>
+          <button mat-menu-item (click)="assign.emit(r)" *ngIf="r.pending">{{'Reassign'|translate}}</button>
+        </mat-menu>
+      </td>
+    </tr>
+  </tbody>
+  <tbody class="mat-table-body">
+    <tr *ngFor="let l of log" class="mat-row">
+      <td class="mat-cell" (click)="chat($event)" [innerHTML]="logInfo(l) | async | sanitizeHtml">
+      </td>
+      <td [ngSwitch]="l.type" class="mat-cell">
+        <span *ngSwitchCase="'StateChange'">
+          {{l.state | state : (l.estimate ? 'future' : 'past')}}
+        </span>
+        <span *ngSwitchCase="'ModelChange'">
+          {{'Changed' | translate}}
+        </span>
+      </td>
+      <td class="mat-cell">
+        <span *ngIf="!l.estimate">{{l.time | amDateFormat: 'lll'}}</span>
+      </td>
+      <td class="mat-cell">
+        <button mat-icon-button (click)="compare(l)" *ngIf="l.type==='ModelChange'" [matTooltip]="'Compare'|translate"><mat-icon>visibility</mat-icon></button>
+      </td>
+    </tr>
+  </tbody>
+</table>

package/src/lib/admin/document-trace/trace-element.component.scss

@@ -0,0 +1,21 @@
+:host {
+  padding: 8px;
+  display: block;
+
+  .message {
+    text-align: center;
+
+    > * {
+      vertical-align: text-bottom
+    }
+  }
+
+  table {
+    background: none;
+
+    tr td {
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+  }
+}

package/src/lib/admin/document-trace/trace-element.component.ts

@@ -0,0 +1,116 @@
+import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core";
+import { forkJoin, Observable, of } from "rxjs";
+import { map } from "rxjs/operators";
+import { Log, LogType, Recipient } from "../../core/models";
+import { NodeModel } from "@syncfusion/ej2-angular-diagrams";
+import { TranslateService } from '../../core/translate.service';
+import { AccountService } from '../../core/account.service';
+import { ChatInfo } from '../../chat/chat-info';
+import { DiagramInfo } from "./Timeline";
+import { Timeline } from "./Timeline";
+import { SessionService } from "../../core/session.service";
+import { PanesRouter } from "../../core/slots/router.service";
+import { OpenPolicy } from "../../core/configuration";
+
+const VISIABLE_LOG_TYPES: LogType[] = ['StateChange', 'ModelChange', 'Download'];
+
+@Component({
+  selector: 'bizdoc-document-trace-element',
+  templateUrl: 'trace-element.component.html',
+  styleUrls: ['trace-element.component.scss']
+})
+export class TraceElementComponent implements OnChanges {
+  @Output() readonly assign = new EventEmitter<Recipient>();
+
+  @Input() model: DiagramInfo;
+  @Input() timeline: Timeline;
+  @Input() node: NodeModel;
+
+  recipients: Recipient[];
+  log: Log[];
+  estimate: boolean;
+  recurring: boolean;
+  none: boolean;
+  skip: boolean;
+  nodeType: any;
+
+  constructor(
+    private _chat: ChatInfo,
+    private _router: PanesRouter,
+    private _translate: TranslateService,
+    private _accounts: AccountService,
+    private _session: SessionService
+  ) {
+  }
+  ngOnChanges(): void {
+    const { id, addInfo } = this.node;
+    const recipients = this.timeline.recipients.filter(r => r.nodeId === id),
+      log = this.timeline.log.filter(l => l.nodeId === id);
+    this.recipients = recipients,
+      this.recurring = recipients.length < this.model.recipients.filter(r => r.nodeId === id).length ||
+      log.length < this.model.log.filter(l => l.nodeId === id).length,
+      this.log = log.filter(l => VISIABLE_LOG_TYPES.indexOf(l.type) > -1),
+      this.estimate = log.find(l => l.estimate) !== undefined,
+      this.skip = log.find(l => l.type === 'Jump') !== undefined,
+      this.none = log.length === 0,
+      this.nodeType = this._session.profile.nodes.find(n => n.name === (addInfo as any).nodeType);
+  }
+
+  recipientInfo(recipient: Recipient) {
+    const observables: Observable<any>[] = [],
+      observe = this._accounts.get(recipient.userId);
+    observables.push(observe);
+    const escalations =
+      this.timeline.log.filter(l => l.time > this.timeline.startDate && l.type === 'Escalation' && l.recipientId === recipient.id);
+    if (escalations.length)
+      escalations.forEach(e => {
+        const observe = this._accounts.get(e.userId);
+        observables.push(observe);
+      });
+    else if (recipient.byId) {
+      const observe = this._accounts.get(recipient.byId);
+      observables.push(observe);
+    }
+    if (recipient.substitutingId) {
+      const observe = this._accounts.get(recipient.substitutingId);
+      observables.push(observe);
+    }
+    return forkJoin(observables).pipe(map(us => us.map(u => this._chat.format(u))),
+      map(us => {
+        if (escalations.length)
+          return this._translate.get('EscalatedBy', us[0], this._translate.join(us.slice(1)));
+        else if (recipient.byId && recipient.substitutingId)
+          return this._translate.get('SubstitutingBy', us[0], us[2], us[1]);
+        else if (recipient.substitutingId)
+          return this._translate.get('Substituting', us[0], us[1]);
+        else if (recipient.byId)
+          return this._translate.get('By', us[0], us[1]);
+        return us[0]
+      }));
+  }
+  logInfo(log: Log): Observable<string> {
+    const observables: Observable<any>[] = [];
+
+    if (log.userId) {
+      const observe = this._accounts.get(log.userId);
+      observables.push(observe);
+    }
+    if (log.byId) {
+      const observe = this._accounts.get(log.byId);
+      observables.push(observe);
+    }
+    return observables.length ? forkJoin(observables).pipe(map(us => us.map(u => this._chat.format(u))),
+      map(us =>
+        log.byId ? this._translate.get('By', us[0], us[1]) : us[0])) : of('');
+  }
+  compare(item: Log) {
+    this._router.toggle(['mailbox/d', this.model.documentId.encodeId(), 'version', new Date(item.time).valueOf().encodeId()], {
+      policy: OpenPolicy.Replace,
+    })
+  }
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId);
+  }
+}

package/src/lib/admin/form/form.resolve.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from "@angular/core";
+import { Params } from "@angular/router";
+import { FormService } from "../../admin/form/form.service";
+import { Form } from "../../core/models";
+import { PaneResolve } from "../../core/configuration";
+
+@Injectable()
+export class FormResolve implements PaneResolve<Form> {
+    constructor(private _forms: FormService) { }
+    onResolve(params: Params): Promise<Form> {
+        return this._forms.get(params['id'] as string).toPromise();
+    }
+}

package/src/lib/admin/form/form.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Form, DocumentModel } from '../../core/models';
+
+@Injectable()
+export class FormService {
+  findAll(value: string): Observable<DocumentModel[]> {
+    return this._http.get<DocumentModel[]>('/api/form/findAll', {
+      params: { value }
+    });
+  }
+  get(name: string): Observable<Form> {
+    return this._http.get<Form>(`/api/form/${name}`);
+  }
+  save(form: Form): Observable<number> {
+    const { workflow } = form;
+    return this._http.put<number>(`/api/form/${form.name}`, {workflow });
+  }
+  constructor(private _http: HttpClient) {
+
+  }
+}

package/src/lib/admin/form/workflow/node-ref.ts

@@ -0,0 +1,8 @@
+import { FlowNode } from "../../../core/models";
+
+export class NodeRef {
+  constructor(private _node: FlowNode) { }
+  get name() { return this._node.name }
+  get arguments() { return this._node.arguments }
+
+}

package/src/lib/admin/form/workflow/node.component.html

@@ -0,0 +1,36 @@
+<ng-container #arguments>
+</ng-container>
+<form *ngIf="connectors?.length" [formGroup]="connectorInfo" fxLayout="column">
+  <mat-form-field>
+    <mat-select [placeholder]="'Action' | translate" formControlName="action">
+      <mat-option *ngFor="let action of actions" [value]="action.name">{{action.title}}</mat-option>
+      <mat-option>{{'None' | translate}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-button-toggle-group [value]="connectorInfo.controls['case'].value" #acase="matButtonToggleGroup" (change)="connectorCaseChange(acase.value)">
+    <mat-button-toggle value="true">{{'True' | translate}}</mat-button-toggle>
+    <mat-button-toggle value="false">{{'False' | translate}}</mat-button-toggle>
+    <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>
+  </mat-button-toggle-group>
+  <mat-form-field *ngIf="!connectorInfo.controls['case'].value">
+    <input matInput [placeholder]="'Case' | translate" formControlName="case" />
+  </mat-form-field>
+</form>
+<!--<mat-expansion-panel fxLayout="column" class="mat-elevation-z0" [attr.aria-label]="'Design' | translate" style="background: none">
+  <mat-expansion-panel-header>
+    <mat-panel-title>{{'Design'|translate}}</mat-panel-title>
+  </mat-expansion-panel-header>
+  <ng-container *ngIf="connectors.length">
+    <mat-color-picker (valueChanges)='strokeChange($event)' [label]="'Stroke'|translate"></mat-color-picker>
+  </ng-container>
+  <ng-container *ngIf="nodes.length">
+    <ng-container *ngIf="nodes[0].annotations.length">
+      <mat-form-field>
+        <input matInput type="number" [placeholder]="'FontSize'|translate" (change)="sizeChange($event.target.value)" [value]="fontSize" />
+      </mat-form-field>
+      <mat-color-picker (valueChanges)='colorChange($event)' [label]="'Color'|translate"></mat-color-picker>
+    </ng-container>
+    <mat-color-picker (valueChanges)='bgChange($event)' [label]="'Background'|translate"></mat-color-picker>
+    <mat-color-picker (valueChanges)='strokeChange($event)' [label]="'Stroke'|translate"></mat-color-picker>
+  </ng-container>
+</mat-expansion-panel>-->

package/src/lib/admin/form/workflow/node.component.scss

@@ -0,0 +1,4 @@
+:host {
+  padding: 8px;
+  display: block;
+}

package/src/lib/admin/form/workflow/node.component.ts

@@ -0,0 +1,128 @@
+import { ComponentFactoryResolver, OnDestroy, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, Injector } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import { AlignmentOptions, ConnectorModel, Diagram, NodeModel, Segments } from '@syncfusion/ej2-angular-diagrams';
+import { BizDocComponentFactoryResolver } from '../../../core/component-factory-resolver';
+import { Action, FlowNode } from '../../../core/models';
+import { SessionService } from '../../../core/session.service';
+import { PaneRef } from '../../../core/slots/pane-ref';
+import { NodeRef } from './node-ref';
+import { ArgumentsComponent } from '../../../core/base';
+import { EventEmitter } from '@angular/core';
+import { LayoutComponent } from '../../../core/layout/layout.component';
+import { TranslateService } from '../../../core/translate.service';
+
+
+@Component({
+  templateUrl: './node.component.html',
+  styleUrls: ['./node.component.scss'],
+})
+export
+  class WorkflowNodeComponent implements OnInit, OnDestroy {
+  @Output() readonly change = new EventEmitter();
+  @ViewChild('arguments', { static: true, read: ViewContainerRef }) argumentstemplate: ViewContainerRef;
+  nodes: NodeModel[];
+  connectors: ConnectorModel[];
+  readonly connectorInfo = this._fb.group({
+    action: '',
+    case: ''
+  });
+  actions: Action[];
+  tool?: FlowNode;
+  private _elementDestroy = new Subject<void>();
+  node: NodeModel;
+  constructor(
+    private _session: SessionService,
+    private _factoryResolver: BizDocComponentFactoryResolver,
+    private _cf: ComponentFactoryResolver,
+    private _injector: Injector,
+    private _translate: TranslateService,
+    private _fb: FormBuilder,
+    private _pane: PaneRef<WorkflowNodeComponent>) {
+    this.actions = _session.profile.actions;
+  }
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => {
+      this.nodes = d['nodes'];
+      this.connectors = d['connectors'];
+      this.tool = null;
+
+      this._elementDestroy.next();
+      if (this.connectors.length) {
+        this.connectorInfo.valueChanges.pipe(takeUntil(this._elementDestroy)).subscribe(() => {
+          this.connectors.forEach(c => {
+            Object.assign(c.addInfo, this.connectorInfo.getRawValue())
+            this.change.emit();
+          });
+        });
+        const connector = this.connectors[0];
+        this.connectors.forEach(c => { if (!c.addInfo) c.addInfo = {} });
+        const action = (connector.addInfo as any).action,
+          acase = (connector.addInfo as any).case;
+        this.connectorInfo.patchValue({
+          action: this.connectors.length === 1 || this.connectors.every(c => (c.addInfo as any).action === action) ? action : null,
+          case: this.connectors.length === 1 || this.connectors.every(c => (c.addInfo as any).case === acase) ? acase : null
+        });
+        this._pane.title = this._translate.get(this.connectors.length === 1 ? 'Connector' : 'Connectors', this.connectors.length);
+        this._pane.icon = 'link';
+      }
+      this.argumentstemplate.clear();
+      if (this.nodes.length) {
+        const node = this.node = this.nodes[0],
+          addInfo = node.addInfo as any;
+        if (addInfo && addInfo.nodeType) {
+          const nodeType = addInfo.nodeType;
+          const tool = this.tool = this._session.profile.nodes.find(n => n.name === nodeType);
+          this._pane.title = tool.title;
+          const annotationArg = tool.arguments.find(a => a.diagram);
+
+          function change(m) {
+            if (annotationArg && m[annotationArg.name] !== null && m[annotationArg.name] !== undefined) {
+              node.annotations[0].content = m[annotationArg.name];
+            }
+            Object.assign(addInfo, m);
+            this.change.emit();
+          }
+
+          if (tool.template) {
+            var instance = this._createToolTemplate(tool, node);
+
+            instance.form.valueChanges.subscribe(change.bind(this));
+          }
+          else if (tool.arguments.length) {
+            let instance = this._createLayoutArguments(tool, node);
+
+            instance.modelChange.pipe(takeUntil(this._elementDestroy)).subscribe(change.bind(this));
+          }
+        }
+      }
+    });
+  }
+  private _createLayoutArguments(tool: FlowNode, node: NodeModel) {
+    const componentFactory = this._cf.resolveComponentFactory(LayoutComponent);
+    const componentRef = this.argumentstemplate.createComponent(componentFactory, null, this._injector);
+    const instance = componentRef.instance as LayoutComponent;
+    instance.fields = tool.arguments;
+    instance.model = node.addInfo;
+    instance.create();
+    return instance;
+  }
+  private _createToolTemplate(tool: FlowNode, node: NodeModel) {
+    const componentFactory = this._factoryResolver.resolve(this.tool.template);
+    const nodeRef = new NodeRef(tool);
+    const injector = Injector.create([{ provide: NodeRef, useValue: nodeRef }], this._injector);
+    const componentRef = this.argumentstemplate.createComponent(componentFactory, null, injector);
+    const instance = componentRef.instance as ArgumentsComponent<any>;
+    instance.form.patchValue(node.addInfo, { emitEvent: false });
+    return instance;
+  }
+  connectorCaseChange(acase?: string) {
+    this.connectorInfo.controls['case'].setValue(acase);
+    this.change.emit();
+  }
+  ngOnDestroy(): void {
+    this._elementDestroy.next();
+    this._elementDestroy.complete();
+  }
+}

package/src/lib/admin/form/workflow/role-node.component.html

@@ -0,0 +1,36 @@
+<form [formGroup]="form" autocomplete="off" fxLayout="column">
+  <mat-form-field>
+    <bizdoc-select formControlName="roleName" cdkFocusInitial [placeholder]="'Role'|translate" required [type]="roles"></bizdoc-select>
+    <mat-error *ngIf="form.controls.roleName.hasError('required')">{{'Required'|translate:('Roles'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-select formControlName="condition" [placeholder]="'Requirments'|translate">
+      <mat-option value="Anyone">{{'Anyone'|translate}}</mat-option>
+      <mat-option value="Everyone">{{'Everyone'|translate}}</mat-option>
+      <mat-option value="Count">{{'Minimum'|translate}}</mat-option>
+      <mat-option value="Percent">{{'Percent'|translate}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field [style.display]="form.value.condition === 'Count' || form.value.condition === 'Percent' ? '' : 'none'">
+    <input matInput formControlName="minimum" [placeholder]="'RequirmentsValue'|translate" type="number" required />
+    <span matSuffix *ngIf="form.value.condition === 'Percent'">%</span>
+  </mat-form-field>
+  <mat-checkbox formControlName="optional" required>{{'OptionalRole'|translate}}</mat-checkbox>
+  <mat-form-field>
+    <bizdoc-ace-input formControlName="message" [placeholder]="'Message'|translate"></bizdoc-ace-input>
+    <mat-hint>{{'ProgrammableExpression'|translate}}</mat-hint>
+  </mat-form-field>
+  <mat-checkbox formControlName="fyi" required>{{'FYI'|translate}}</mat-checkbox><mat-form-field>
+    <bizdoc-timespan-input formControlName="standardTime" [placeholder]="'StandardTime'|translate"></bizdoc-timespan-input>
+    <mat-icon matSuffix>timer</mat-icon>
+  </mat-form-field>
+  <mat-form-field>
+    <bizdoc-select formControlName="escalateRole" [placeholder]="'EscalateRole'|translate" [type]="roles"></bizdoc-select>
+  </mat-form-field>
+  <mat-form-field *ngIf="form.controls.escalateRole.value">
+    <bizdoc-timespan-input formControlName="escalateTime" [placeholder]="'EscalateIn'|translate"
+                           required></bizdoc-timespan-input>
+    <mat-icon matSuffix>timer</mat-icon>
+  </mat-form-field>
+  <mat-checkbox formControlName="skipInRoute" required>{{'SkipInRoute'|translate}}</mat-checkbox>
+</form>

package/src/lib/admin/form/workflow/role-node.component.ts

@@ -0,0 +1,65 @@
+import { AfterViewInit, Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { ArgumentsComponent } from '../../../core/base';
+import { BizDoc } from '../../../core/decorators';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { NodeRef } from './node-ref';
+import { TypeSelect } from '../../../core/controls/select.input';
+
+@Component({
+  templateUrl: './role-node.component.html',
+  styles: [':host{display: inline}']
+})
+@BizDoc({
+  selector: 'bizdoc-role-node'
+}) 
+export class RoleNodeComponent implements ArgumentsComponent, OnDestroy,AfterViewInit, OnInit {
+  @ViewChild(TypeSelect) input: TypeSelect;
+  public readonly roles :string;
+  readonly form = this._fb.group({
+    roleName: this._fb.control(null, Validators.required),
+    condition: this._fb.control('Anyone'),
+    minimum: this._fb.control(null),
+    optional: false,
+    message: null,
+    fyi: false,
+    skipInRoute: false,
+    standardTime: null,
+    escalateRole: null,
+    escalateTime: null
+  });
+  readonly _destroy = new Subject<void>();
+  /** ctor */
+  constructor(
+    @Inject(NodeRef) private _nodeRef: NodeRef,
+    private _fb: FormBuilder) {
+    const arg = this._nodeRef.arguments.find(a => a.name == 'roleName');
+    this.roles = arg.source;
+  }
+  ngAfterViewInit(): void {
+    this.input.focus();
+    }
+  ngOnInit(): void {
+    this.form.controls['condition'].valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => {
+      const ctrl = this.form.controls['minimum'];
+      switch (v) {
+        case 'Count':
+          ctrl.setValidators([Validators.min(1), Validators.required]);
+          ctrl.setValue(1);
+          break;
+        case 'Percent':
+          ctrl.setValidators([Validators.min(1), Validators.max(100), Validators.required]);
+          ctrl.setValue(100);
+          break;
+        default:
+          ctrl.clearValidators();
+          ctrl.setValue(null);
+      }
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/admin/form/workflow/tools.component.exp.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { PaneRef } from '../../../core/slots/pane-ref';
+
+
+@Component({
+    selector: 'bizdoc-workflow-tools',
+  templateUrl: './tools.component.html',
+})
+export
+    class WorkflowToolsComponent {
+    constructor(private _slot: PaneRef<WorkflowToolsComponent>) {
+    }
+}

package/src/lib/admin/form/workflow/tools.component.html

@@ -0,0 +1 @@
+

package/src/lib/admin/form/workflow/workflow.component.html

@@ -0,0 +1,73 @@
+<mat-toolbar>
+  <button mat-icon-button (click)="tools = !tools" [matTooltip]="'Collapse' | translate"><mat-icon>view_sidebar</mat-icon></button>
+  <button mat-button (click)="save()" color="primary" [disabled]="!dirty || saving">{{'SaveChanges' | translate}}</button>
+  <button mat-icon-button (click)="diagram.fitToPage()" [matTooltip]="'FitToPage' | translate"><mat-icon>fullscreen_exit</mat-icon></button>
+  <button mat-icon-button (click)="diagram.undo()" [matTooltip]="'Undo' | translate" [disabled]="!diagram.historyManager?.canUndo"><mat-icon>undo</mat-icon></button>
+  <button mat-icon-button (click)="diagram.redo()" [matTooltip]="'Redo' | translate" [disabled]="!diagram.historyManager?.canRedo"><mat-icon>redo</mat-icon></button>
+  &nbsp;
+  <button mat-icon-button (click)="pan()" [matTooltip]="'Pan' | translate"><span class="e-icons sf-icon-pan"></span></button>
+  <button mat-icon-button (click)="cursor()" [matTooltip]="'Cursor' | translate"><span class="e-icons sf-icon-cursor"></span></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="addText()" [matTooltip]="'Text' | translate"><mat-icon>title</mat-icon></button>
+  <button mat-button [matMenuTriggerFor]="lineMenu" [disabled]="!diagram.selectedItems?.connectors.length" [matTooltip]="'ConnectorMode'|translate">
+    <span class="e-menu-icon" [ngClass]="{'sf-icon-straight-line': connectorType === 'Straight',
+          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',
+          'sf-icon-beizer-line': connectorType === 'Bezier'}"></span>
+    <mat-icon>arrow_drop_down</mat-icon>
+  </button>
+  <mat-menu #lineMenu panelClass="icon-menu-panel">
+    <button mat-menu-item (click)="connectorTypeChange('Straight')">
+      <span class="e-menu-icon sf-icon-straight-line"></span>
+    </button>
+    <button mat-menu-item (click)="connectorTypeChange('Orthogonal')">
+      <span class="e-menu-icon sf-icon-orthogonal-line"></span>
+    </button>
+    <button mat-menu-item (click)="connectorTypeChange('Bezier')">
+      <span class="e-menu-icon sf-icon-beizer-line"></span>
+    </button>
+  </mat-menu>
+  &nbsp;
+  <button mat-button [matMenuTriggerFor]="alignMenu" [disabled]="!diagram.selectedItems?.nodes.length && !diagram.selectedItems?.connectors.length" [matTooltip]="'Align'|translate">
+    <span class="e-icons" [ngClass]="{'sf-icon-top': alignment === 'Top',
+          'sf-icon-left': alignment === 'Left',
+          'sf-icon-center': alignment === 'Center',
+          'sf-icon-bottom': alignment === 'Bottom',
+          'sf-icon-right': alignment === 'Right'}"></span>
+    <mat-icon>arrow_drop_down</mat-icon>
+  </button>
+  <mat-menu #alignMenu panelClass="icon-menu-panel">
+    <button mat-menu-item (click)="align('Top')">
+      <span class="e-icons sf-icon-top"></span>
+    </button>
+    <button mat-menu-item (click)="align('Left')">
+      <span class="e-icons sf-icon-left"></span>
+    </button>
+    <button mat-menu-item (click)="align('Center')">
+      <span class="e-icons sf-icon-center"></span>
+    </button>
+    <button mat-menu-item (click)="align('Bottom')">
+      <span class="e-icons sf-icon-bottom"></span>
+    </button>
+    <button mat-menu-item (click)="align('Right')">
+      <span class="e-icons sf-icon-right"></span>
+    </button>
+  </mat-menu>
+</mat-toolbar>
+<div class="row container">
+  <div id="symbolpalette" *ngIf="tools">
+  <ejs-symbolpalette dir="ltr" expandMode='Multiple' [palettes]='palettes' width="100%" height="100%" [symbolHeight]=80
+                     [enableRtl]="false" [enableAnimation]="false" [symbolWidth]=80 [symbolMargin]='symbolMargin' [getSymbolInfo]='getSymbolInfo' [getNodeDefaults]='getSymbolDefaults'>
+  </ejs-symbolpalette>
+  </div>
+  <ejs-diagram #diagram id="diagram" width="100%" height="100%" dir="ltr" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' fxFlex
+               [constraints]="diagramConstraints" [tool]=diagramTool [getNodeDefaults]='nodeDefaults' [getCustomTool]='getCustomTool' [scrollSettings]="scrollSettings"
+               [selectedItems]="selectedItems"
+               [rulerSettings]="rulerSettings"
+               (dragEnter)='dragEnter($event)'
+               (connectionChange)="change()"
+               (collectionChange)="change()"
+               (propertyChange)="propertyChange($event)"
+               (selectionChange)="selectionChange()"
+               (created)="diagramCreate()">
+  </ejs-diagram>
+</div>

package/src/lib/admin/form/workflow/workflow.component.scss

@@ -0,0 +1,52 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.container {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  overflow-y: auto
+}
+
+#diagram {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+}
+
+#symbolpalette {
+  width: 210px;
+}
+
+::ng-deep .e-rtl {
+  direction: ltr;
+}
+
+::ng-deep .mat-toolbar .mat-button-toggle {
+  background: transparent !important;
+}
+
+::ng-deep .e-diagram-userhandle-circle {
+  /*cursor: pointer*/
+}
+
+.e-menu-icon {
+  font-family: 'diagram-icons' !important;
+  speak: none;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::ng-deep .icon-menu-panel {
+  min-width: 0;
+}