@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/admin/document-trace/reassign.dialog.ts

@@ -0,0 +1,34 @@
+import { Component, Inject } from "@angular/core";
+import { FormGroup, FormControl, Validators } from "@angular/forms";
+import { SessionService } from "../../core/session.service";
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { Role, UserInfo } from "../../core/models";
+import { AccountService } from "../../core/account.service";
+import { Observable } from "rxjs";
+import { map } from "rxjs/operators";
+
+@Component({
+  templateUrl: './reassign.dialog.html'
+})
+export class ReassignDialog {
+  readonly form = new FormGroup({
+    userId: new FormControl(null, [Validators.required]),
+    note: new FormControl(null)
+  });
+  readonly roles: Role[];
+  readonly users$: Observable<UserInfo[]>;
+  constructor(@Inject(MAT_DIALOG_DATA) private _data: ReassignData, session: SessionService, account: AccountService) {
+    this.roles = session.profile.roles;
+    this.users$ = account.findAll('').
+      pipe(map(r => r.filter(u => this._data.exclude.indexOf(u.id) < 0)));
+  }
+}
+export interface ReassignData {
+  exclude: string[];
+}
+
+export interface ReassignModel {
+  userId: string;
+//  role?: string;
+  note?: string;
+}

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

@@ -0,0 +1,55 @@
+<h4 fxLayoutAlign="center" class="mat-body-2">
+  <span *ngIf="estimate">{{'Estimate' | translate}}</span>
+  <span *ngIf="none">{{'NoEstimate' | translate}}</span>
+  <span *ngIf="skip">{{'Skipped' | translate}}</span>
+</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(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'" [bizdocTooltip]="'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,23 @@
+:host {
+  padding: 8px;
+  min-width: 300px;
+  display: block;
+}
+
+.message {
+  text-align: center;
+
+  > * {
+    vertical-align: text-bottom
+  }
+}
+
+table {
+  background: none;
+  width: 100%;
+
+  tr td {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+}

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

@@ -0,0 +1,139 @@
+import { Component } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { forkJoin, Observable, of } from "rxjs";
+import { NodeModel } from "@syncfusion/ej2-angular-diagrams";
+import { map } from "rxjs/operators";
+import { Log, LogType, Recipient } from "../../core/models";
+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";
+import { PaneRef } from "../../core/slots/pane-ref";
+import { ReassignDialog, ReassignModel } from "./reassign.dialog";
+import { PromptService } from "../../core/prompt.service";
+import { UtilityRef } from "../utility-ref";
+
+const VISIABLE_LOG_TYPES: LogType[] = ['StateChange', 'ModelChange', 'Download'];
+
+export interface ElementData {
+  model: DiagramInfo;
+  timeline: Timeline;
+  node: NodeModel;
+  utilityRef: UtilityRef;
+}
+
+@Component({
+  selector: 'bizdoc-document-trace-element',
+  templateUrl: 'trace-element.component.html',
+  styleUrls: ['trace-element.component.scss']
+})
+export class TraceElementComponent {
+  model: DiagramInfo;
+  timeline: Timeline;
+  node: NodeModel;
+
+  recipients: Recipient[];
+  log: Log[];
+  estimate: boolean;
+  recurring: boolean;
+  none: boolean;
+  skip: boolean;
+  private _utilityRef: UtilityRef;
+
+  constructor(
+    private _pane: PaneRef,
+    private _chat: ChatInfo,
+    private _sb: PromptService,
+    private _router: PanesRouter,
+    private _translate: TranslateService,
+    private _accounts: AccountService,
+    private _dialog: MatDialog,
+    private _session: SessionService
+  ) {
+    _pane.dataChange.subscribe(this.change.bind(this));
+  }
+  change(state: ElementData) {
+    this.model = state.model;
+    this.timeline = state.timeline;
+    this.node = state.node;
+    this._utilityRef = state.utilityRef;
+    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;
+    const nodeType = this._session.profile.nodes.find(n => n.name === (addInfo as any).nodeType);
+    this._pane.title = nodeType.title;
+  }
+  fileName(fileId: number) {
+    const file = this.model.attachments.find(f => f.id === fileId);
+    return file.fileName;
+  }
+  /** */
+  assign(recipient: Recipient) {
+    this._dialog.open(ReassignDialog, { data: { exclude: [recipient.userId] } }).afterClosed().
+      subscribe((m: ReassignModel) => {
+        m && this._utilityRef.execute({ id: recipient.id, ...m }).subscribe(r => {
+          Object.assign(this.model, r);
+        }, () =>
+          this._sb.error());
+      });
+  }
+
+  async recipientInfo(recipient: Recipient) {
+    const info = [];
+    const who = await this._accounts.get(recipient.userId).toPromise();
+    if (recipient.escalated) {
+      const escalation = this.timeline.log.find(l => l.type === 'Escalation' && l.recipientId === recipient.originId);
+      const to = await this._accounts.get(escalation.userId).toPromise();
+      info.push(this._translate.get('EscalatedBy', this._chat.format(to), 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

@@ -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,49 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Form } from '../../core/models';
+import { isString } from '../../core/functions';
+
+@Injectable()
+export class FormService {
+  findAll(search?: string)
+  findAll(options: { search?: string, start?: Date, end?: Date, formId?: string })
+  findAll(options: string | { search?: string, start?: Date, end?: Date, formId?: string }): Observable<DocumentInfo[]> {
+    const params = {};
+    if (isString(options))
+      params['search'] = options;
+    else {
+      if (options.search) params['search'] = options.search;
+      if (options.formId) params['formId'] = options.formId;
+      if (options.start) params['start'] = new Date(options.start).toISOString();
+      if (options.end) params['end'] = new Date(options.end).toISOString();
+    }
+    return this._http.get<DocumentInfo[]>('/api/form/findAll', {
+      params
+    });
+  }
+  range(): Observable<RangeModel[]> {
+    return this._http.get<RangeModel[]>('/api/form/range', {
+    });
+  }
+  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) {
+
+  }
+}
+export interface RangeModel {
+  count: number;
+  date: Date;
+}
+export interface DocumentInfo {
+  id: number;
+  number: string;
+  subject: string;
+  stateId: string;
+}

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" autocomplete="off">
+  <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>
+    <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

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

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

@@ -0,0 +1,129 @@
+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 { ConnectorModel, NodeModel } 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

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

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

@@ -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 @@
+