@bizdoc/core 1.13.12 → 1.13.16

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

@@ -1,106 +0,0 @@
-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 { Timeline, DiagramInfo } 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 === 'NodeJump') !== undefined,
-      this.none = log.length === 0,
-      this.nodeType = this._session.profile.nodes.find(n => n.name === (addInfo as any).nodeType);
-  }
-
-  async recipientInfo(recipient: Recipient) {
-    const info = [];
-    const who = await this._accounts.get(recipient.userId).toPromise();
-    if (recipient.escalated) {
-      const escalations = this.timeline.log.filter(l => l.type === 'Escalation' && l.recipientId === recipient.id);
-      const escalate = await this._accounts.get(escalations[0].userId).toPromise();
-      info.push(this._translate.get('EscalatedBy', this._chat.format(escalate), this._chat.format(who)));
-    }
-    if (recipient.substituteId) {
-      const substitute = await this._accounts.get(recipient.substituteId).toPromise();
-      if (recipient.byId) {
-        const by = await this._accounts.get(recipient.byId).toPromise();
-        info.push(this._translate.get('SubstitutingBy', this._chat.format(who), this._chat.format(substitute), this._chat.format(by)));
-      }
-      else info.push(this._translate.get('Substituting', this._chat.format(who), this._chat.format(substitute)));
-    }
-    else if (recipient.byId) {
-      const by = await this._accounts.get(recipient.byId).toPromise();
-      info.push(this._translate.get('By', this._chat.format(who), this._chat.format(by)));
-    }
-    else info.push(this._chat.format(who));
-    return info.join(this._translate.comma);
-  }
-  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.navigate(['mailbox/d', this.model.documentId.encodeId(), 'version', new Date(item.time).valueOf().encodeId()], {
-      policy: OpenPolicy.Tab | OpenPolicy.Toggle,
-    })
-  }
-  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

@@ -1,13 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,36 +0,0 @@
-<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.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]="'Stroke'|translate"></ mat.get-color-from-palette-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.get-color-from-palette-picker (valueChanges)='colorChange($event)' [label]="'Color'|translate"></ mat.get-color-from-palette-picker>
-    </ng-container>
-    < mat.get-color-from-palette-picker (valueChanges)='bgChange($event)' [label]="'Background'|translate"></ mat.get-color-from-palette-picker>
-    < mat.get-color-from-palette-picker (valueChanges)='strokeChange($event)' [label]="'Stroke'|translate"></ mat.get-color-from-palette-picker>
-  </ng-container>
-</mat-expansion-panel>-->

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

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

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

@@ -1,129 +0,0 @@
-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';
-import { cleanup } from '../../../core/functions';
-
-
-@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, cleanup(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, 0, 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, 0, 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

@@ -1,40 +0,0 @@
-<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-form-field>
-    <bizdoc-ace-input [placeholder]="'Condition'|translate" formControlName="if"></bizdoc-ace-input>
-    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>
-  </mat-form-field>
-  <mat-checkbox formControlName="skipInRoute" required>{{'SkipInRoute'|translate}}</mat-checkbox>
-</form>

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

@@ -1,66 +0,0 @@
-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{}']
-})
-@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,
-    if: 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

@@ -1,13 +0,0 @@
-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

@@ -1 +0,0 @@
-

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

@@ -1,73 +0,0 @@
-<mat-toolbar>
-  <button mat-icon-button (click)="tools = !tools" [bizdocTooltip]="'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()" [bizdocTooltip]="'FitToPage' | translate"><mat-icon>fullscreen_exit</mat-icon></button>
-  <button mat-icon-button (click)="diagram.undo()" [bizdocTooltip]="'Undo' | translate" [disabled]="!diagram.historyManager?.canUndo"><mat-icon>undo</mat-icon></button>
-  <button mat-icon-button (click)="diagram.redo()" [bizdocTooltip]="'Redo' | translate" [disabled]="!diagram.historyManager?.canRedo"><mat-icon>redo</mat-icon></button>
-  &nbsp;
-  <button mat-icon-button (click)="pan()" [bizdocTooltip]="'Pan' | translate"><span class="e-icons sf-icon-pan"></span></button>
-  <button mat-icon-button (click)="cursor()" [bizdocTooltip]="'Cursor' | translate"><span class="e-icons sf-icon-cursor"></span></button>
-  <span class="divider"></span>
-  <button mat-icon-button (click)="addText()" [bizdocTooltip]="'Text' | translate"><mat-icon>title</mat-icon></button>
-  <button mat-button [matMenuTriggerFor]="lineMenu" [disabled]="!diagram.selectedItems?.connectors.length" [bizdocTooltip]="'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" [bizdocTooltip]="'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

@@ -1,52 +0,0 @@
-: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;
-}