@bizdoc/core 1.13.12 → 1.13.16

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

@@ -1,471 +0,0 @@
-import { Component, ViewChild, OnInit, OnDestroy, Inject, HostListener, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { trigger } from '@angular/animations';
-import {
-  DiagramConstraints, PointPortModel, NodeConstraints, ScrollSettingsModel, SelectorModel, SelectorConstraints,
-  ToolBase, Diagram, MouseEventArgs, ConnectorModel, NodeModel, SnapSettingsModel, DiagramTools, TextModel, ConnectorConstraints, ISelectionChangeEventArgs, LayerModel, ConnectionPointOrigin, LayoutModel
-} from '@syncfusion/ej2-angular-diagrams';
-import { FormBuilder } from '@angular/forms';
-import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
-import { MatDialog } from "@angular/material/dialog";
-import { Subject, Observable } from 'rxjs';
-import { takeUntil, debounceTime, switchMap, filter } from 'rxjs/operators';
-import dayjs from 'dayjs';
-import { BizDoc } from '../../core/decorators';
-import { getWarn, isObject } from '../../core/functions';
-import { Recipient, HeaderModel, DocumentModel, GuideStep } from '../../core/models';
-import { PromptService } from '../../core/prompt.service';
-import { UtilityRef } from '../utility-ref';
-import { ReassignDialog, ReassignModel } from "./reassign.dialog";
-import { FormService } from '../form/form.service';
-import { TranslateService } from '../../core/translate.service';
-import { GuideService } from '../../core/guide/guide.service';
-import { PanesRouter } from '../../core/slots/router.service';
-import { PaneRef } from '../../core/slots/pane-ref';
-import { SessionService } from '../../core/session.service';
-import { ConnectorData, DiagramInfo, MoveModel, NodeData, Timeline } from './timeline';
-import { EnterExitRight } from '../../core/animations';
-
-const WARNNING_PATH = 'M 13.763735,1.8433735 H 6.3037349 l -5.27,5.27 v 7.4599995 l 5.27,5.27 h 7.4600001 l 5.27,-5.27 V 7.1133735 Z m -3.73,14.2999995 c -0.7200001,0 -1.3000001,-0.58 -1.3000001,-1.3 0,-0.72 0.58,-1.3 1.3000001,-1.3 0.72,0 1.3,0.58 1.3,1.3 0,0.72 -0.58,1.3 -1.3,1.3 z m 1,-4.3 H 9.0337349 V 5.8433735 h 2.0000001 z',
-  JUMP_PATH = 'M 6,18 14.5,12 6,6 Z M 16,6 v 12 h 2 V 6 Z';
-
-function getPorts(): PointPortModel[] {
-  return [
-    { id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 } },
-    { id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 } },
-    { id: 'port3', shape: 'Circle', offset: { x: 1, y: 0.5 } },
-    { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 } }
-  ];
-}
-
-class InfoTool extends ToolBase {
-  public mouseDown(args: MouseEventArgs): void {
-    if (this.diagram.selectedItems.nodes.length > 0) {
-      const node = this.diagram.selectedItems.nodes[0];
-      super.mouseDown(args)
-      this.tap.next(node);
-      this.inAction = true;
-    }
-  }
-  constructor(public diagram: Diagram, public tap: Subject<NodeModel>) {
-    super(diagram.commandHandler);
-  }
-}
-
-@Component({
-  templateUrl: './document-trace.component.html',
-  styleUrls: ['./document-trace.component.scss'],
-  host: {
-    class: 'pane'
-  }, animations: [trigger('element', EnterExitRight)]
-})
-@BizDoc({ selector: 'bizdoc-trace-utility' })
-/** workflow component*/
-export class DocumentTraceComponent implements OnInit, OnDestroy {
-  @ViewChild('diagram') diagramElement: ElementRef<HTMLDivElement>;
-  diagram: Diagram;
-  readonly search = this._fb.control(null);
-  documents$: Observable<DocumentModel[]>;
-  model: DiagramInfo;
-  timeline: Timeline;
-  diagramConstraints: DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging |
-    DiagramConstraints.LineRouting |
-    DiagramConstraints.Pan |
-    DiagramConstraints.Zoom;
-  diagramTool: DiagramTools = DiagramTools.SingleSelect;
-  public readonly layout = {
-    type: 'ComplexHierarchicalTree',
-    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
-    horizontalSpacing: 50,
-    enableRouting: true,
-    verticalSpacing: 50,
-    horizontalAlignment: 'Center',
-    connectionDirection: 'Orientation',
-    orientation: 'TopToBottom'
-  } as LayoutModel;
-  readonly snapSettings: SnapSettingsModel = {
-  };
-  readonly scrollSettings: ScrollSettingsModel = {
-    minZoom: .5,
-    maxZoom: 2.5
-  };
-  private readonly _accentColor = this._session.getAccent(800);
-  private readonly _primeryColor = this._session.getPrimery();
-  public readonly selectedItems: SelectorModel = {
-    constraints: SelectorConstraints.UserHandle,
-    userHandles: [
-      {
-        name: 'info',
-        pathData: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
-        visible: true,
-        offset: 0,
-        side: 'Right',
-        verticalAlignment: 'Bottom',
-        backgroundColor: 'transparent',
-        pathColor: this._primeryColor,
-        size: 40,
-        margin: { top: 0, bottom: 0, left: 0, right: 0 }
-      }
-    ]
-  };
-  public getCustomTool: Function = this.getTool.bind(this);
-  node: NodeModel;
-  public getTool(action: string): ToolBase {
-    let tool: ToolBase;
-    if (action === 'info') {
-      tool = new InfoTool(this.diagram, this._tap);
-    }
-    return tool;
-  }
-  mode: 'diagram' | 'search' | null = 'search';
-  private _highLightedIds: string[] = [];
-  private readonly _tap = new Subject<NodeModel>();
-  private readonly _destroy = new Subject<void>();
-  /** workflow ctor */
-  constructor(
-    @Inject(UtilityRef) private _utilityRef: UtilityRef<DiagramInfo, MoveModel, DiagramInfo, number>,
-    private _service: FormService,
-    private _session: SessionService,
-    private _slot: PaneRef<DocumentTraceComponent>,
-    private _router: PanesRouter,
-    private _sb: PromptService,
-    private _translate: TranslateService,
-    private _dialog: MatDialog,
-    private _guide: GuideService,
-    private _cd: ChangeDetectorRef,
-    private _fb: FormBuilder) {
-  }
-  ngOnInit(): void {
-    this.documents$ = this.search.valueChanges.pipe(takeUntil(this._destroy), debounceTime(250),
-      filter(v => !isObject(v)),
-      switchMap(v => this._service.findAll(v)));
-    this._tap.pipe(takeUntil(this._destroy)).subscribe(n => this._info(n));
-    this._slot.queryParamsChange.subscribe(p => {
-      const { id } = p;
-      id && this._open((id as string).decodeId());
-    });
-    this._slot.resize.pipe(takeUntil(this._destroy)).subscribe(() =>
-      this.diagram?.refresh()
-    );
-  }
-  @HostListener('window:keydown.f1', ['$event'])
-  guide(evt?: Event | KeyboardEvent) {
-    const steps: GuideStep[] = [];
-    if (this.timeline) {
-      if (this.timeline.items.length > 1)
-        steps.push({
-          selector: '[data-help=timeline]',
-          content: this._translate.get('TraceTimelineHelp')
-        });
-      steps.push({
-        selector: 'g[id^=start]',
-        content: this._translate.get('TraceElementHelp'),
-      });
-    }
-    else steps.push({
-      selector: '[data-help=search]',
-      position: 'Below',
-      content: this._translate.get('TraceSearchHelp')
-    });
-    this._guide.start({
-      name: 'trace',
-      steps
-    });
-    evt && evt.preventDefault();
-  }
-
-  private _open(id: number) {
-    this.mode = null;
-    this.diagram?.destroy();
-    this._utilityRef.populate(id).subscribe(e => {
-      this._highLightedIds = [];
-      this.model = e;
-      this._timeline();
-      this.mode = 'diagram';
-      this._cd.detectChanges();
-      this.diagram = new Diagram({
-        width: '100%', height: '100%',
-        snapSettings: this.snapSettings,
-        layout: this.layout,
-        getConnectorDefaults: this.connDefaults,
-        selectedItems: this.selectedItems,
-        tool: this.diagramTool,
-        constraints: this.diagramConstraints,
-        getNodeDefaults: this.nodeDefaults,
-        scrollSettings: this.scrollSettings,
-        nodes: e.diagram.nodes,
-        connectors: e.diagram.connectors,
-        selectionChange: this.selectionChange.bind(this)
-      }, this.diagramElement.nativeElement);
-      this._version();
-      this._indicators();
-      this.diagram.fitToPage();
-
-    }, () => this._sb.error());
-  }
-  nodeDefaults = (node: NodeModel): NodeModel => {
-    const { indicator, virtual } = node.addInfo as NodeData || {};
-
-    if (indicator) {
-      node.constraints = NodeConstraints.PointerEvents | NodeConstraints.Tooltip,
-        node.style.strokeWidth = 0,
-        node.width = node.height = 15;
-    }
-    else if (node.id !== 'version') {
-      node.constraints = NodeConstraints.InConnect | NodeConstraints.OutConnect |
-        NodeConstraints.PointerEvents | NodeConstraints.Select;
-      this._decorateNode(node);
-      node.ports = getPorts();
-    }
-    return node;
-  }
-  public connDefaults = (connector: ConnectorModel) => {
-    const { virtual } = connector.addInfo as ConnectorData || {};
-    connector.constraints = ConnectorConstraints.ReadOnly & ~ConnectorConstraints.Select;
-
-    this._decorateConnector(connector);
-  }
-  display(item: HeaderModel) {
-    return item ? item.number : null;
-  }
-  change(evt: MatAutocompleteSelectedEvent) {
-    const { id } = evt.option.value;
-    this._router.navigate([], { queryParams: { id: (id as number).encodeId() } });
-  }
-
-  private _timeline() {
-    const items = [], submissions: Date[] = [];
-    let minDate: Date, maxDate: Date, estimate: boolean;
-    this.model.log.forEach(l => {
-      const { time, userId } = l;
-      switch (l.type) {
-        case 'Submit':
-          submissions.push(time);
-          break;
-        default:
-      }
-      if (!items.find(t => t.time === time))
-        items.push({ time, userId });
-      if (!minDate || dayjs(time).isBefore(minDate)) minDate = time;
-      if (!maxDate || dayjs(time).isAfter(maxDate)) maxDate = time;
-      if (l.estimate) estimate = true;
-    });
-    this.timeline = {
-      items, minDate, maxDate,
-      submissions, estimate
-    } as any;
-    this._scope(submissions[submissions.length - 1]);
-  }
-  /**
-   * 
-   * @param date
-   */
-  private _scope(date: Date) {
-    const startDate = this.timeline.submissions.reverse().
-      find(s => s <= date),
-      nextDate = this.timeline.submissions.find(s => s > date),
-      endDate = nextDate ? new Date(new Date(nextDate).valueOf() - 1).toJSON() as any : this.timeline.maxDate;
-    Object.assign(this.timeline, {
-      startDate,
-      endDate,
-      recipients: this.model.recipients.filter(r => r.received >= startDate && r.received <= endDate),
-      log: this.model.log.filter(l => l.time >= startDate && l.time <= endDate)
-    });
-  }
-  private _indicators() {
-    const indicators: NodeModel[] = [];
-    this.model.log.forEach(l => {
-      switch (l.type) {
-        case 'Node':
-          if (l.error)
-            indicators.push({
-              shape: {
-                type: 'Path',
-                data: WARNNING_PATH,
-                align: 'XMinYMax'
-              },
-              tooltip: {
-                content: l.error,
-                position: 'BottomCenter'
-              },
-              style: {
-                fill: getWarn(800)
-              },
-              addInfo: {
-                indicator: true,
-                parentId: l.nodeId
-              }
-            });
-          break;
-        case 'NodeJump':
-          //indicators.push({
-          //  shape: {
-          //    type: 'Path',
-          //    data: JUMP_PATH,
-          //    align: 'XMinYMax'
-          //  },
-          //  style: {
-          //    fill: 'black'
-          //  },
-          //  addInfo: {
-          //    indicator: true,
-          //    parentId: l.nodeId
-          //  }
-          //});
-          break;
-      }
-    });
-    this.diagram.removeLayer('indicators');
-    indicators.forEach(i => {
-      const parent = this.diagram.getNodeObject((i.addInfo as NodeData).parentId);
-      i.offsetX = parent.offsetX + parent.width / 2 - 15,
-        i.offsetY = parent.offsetY + parent.height / 2 - 15;
-      this.diagram.add(i);
-    });
-    this.diagram.addLayer({ id: 'indicators' }, indicators);
-  }
-  private _decorateNode(node: NodeModel) {
-    const log = this.timeline.log.filter(r => r.nodeId === node.id);
-
-    if (log.length) {
-      const recipients = this.timeline.recipients.filter(r => r.nodeId === node.id);
-
-      node.style.strokeColor = this._accentColor;
-      node.style.strokeDashArray = log.find(l => l.estimate) ? '3 2' : '';
-
-      node.style.fill = recipients.find(r => r.pending && !r.estimate) ? this._accentColor : 'white';
-    }
-    else
-      node.style.fill = 'transparent',
-        node.style.strokeColor = 'darkgray',
-        node.style.strokeDashArray = '6 2';
-  }
-  private _decorateConnector(connector: ConnectorModel) {
-    const log = this.timeline.log.filter(l => l.sourceId === connector.sourceID && l.targetId == connector.targetID);
-
-    if (log.length) {
-      connector.style.strokeColor = connector.targetDecorator.style.strokeColor = connector.targetDecorator.style.fill =
-        this._accentColor;
-      connector.style.strokeDashArray = log.find(l => l.estimate) ? '3 2' : '';
-    }
-    else
-      connector.style.strokeColor = connector.targetDecorator.style.strokeColor = connector.targetDecorator.style.fill = 'darkgray',
-        connector.style.strokeDashArray = '6 2';
-  }
-  private _version() {
-    this.diagram.removeLayer(
-      'version');
-    const version = {
-      id: 'version',
-      shape: {
-        type: 'Text',
-        content: this._translate.get('DiagramVersion', this.model.diagram.version)
-      },
-      offsetY: 5,
-      offsetX: 5,
-      style: {
-        fontSize: 50,
-        opacity: .1
-      },
-      constraints: NodeConstraints.ReadOnly
-    } as TextModel;
-    this.diagram.addLayer({
-      id: 'version',
-      objects: [
-        version]
-    } as LayerModel);
-    this.diagram.add(version);
-  }
-  fileName(fileId: number) {
-    const file = this.model.attachments.find(f => f.id === fileId);
-    return file.fileName;
-  }
-  selectionChange(evt: ISelectionChangeEventArgs) {
-    this._unhighlight();
-    if (evt.newValue.length) {
-      let node = evt.newValue[0] as NodeModel;
-
-      const { indicator, parentId } = node.addInfo as NodeData || {};
-
-      if (indicator) {
-        node = this.diagram.getNodeObject(parentId);
-        this.diagram.select([node]);
-      }
-      else {
-        const ids = ((node as any).inEdges).concat((node as any).outEdges);
-        ids.push(node.id);
-        this._highlight(ids);
-      }
-      this.diagram.dataBind();
-      this._info(node);
-    }
-    else
-      this.node = null;
-  }
-  /** */
-  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());
-      });
-  }
-  private _info(node: NodeModel): void {
-    this.node = node;
-  }
-  public highlightTime(time: Date) {
-    this.timeline.date = time;
-    this.diagram.clearSelection();
-    this._unhighlight();
-    if (time < this.timeline.startDate || time > this.timeline.endDate) {
-      this._scope(time);
-      for (let i = 0; i < this.diagram.nodes.length; i++)
-        this._decorateNode(this.diagram.nodes[i]);
-      for (let i = 0; i < this.diagram.connectors.length; i++)
-        this._decorateConnector(this.diagram.connectors[i]);
-    }
-
-    const ids = this.timeline.log.filter(l => l.nodeId && l.time === time).map(l => l.nodeId).
-      filter((v, i, a) => a.indexOf(v) === i);
-
-    this._highlight(ids);
-    this.diagram.dataBind();
-  }
-
-  pan() {
-    this.diagram.constraints = this.diagram.constraints | DiagramConstraints.Pan;
-    this.diagram.tool = DiagramTools.ZoomPan;
-  }
-  cursor() {
-    this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints.Pan;
-    this.diagram.tool = DiagramTools.SingleSelect;
-  }
-  private _highlight(ids: string[]) {
-    for (let i = 0; i < ids.length; i++) {
-      const obj = this.diagram.getObject(ids[i]) as any;
-      if (obj.sourceID)
-        obj.style.strokeColor =
-          obj.targetDecorator.style.strokeColor =
-          obj.targetDecorator.style.fill = this._primeryColor;
-      else
-        obj.style.strokeColor = this._primeryColor;
-    }
-    this._highLightedIds = ids;
-  }
-
-  private _unhighlight(): void {
-    for (let i: number = this._highLightedIds.length - 1; i >= 0; i--) {
-      const obj = this.diagram.getObject(this._highLightedIds[i]) as any;
-      if (obj.sourceID)
-        this._decorateConnector(obj);
-      else
-        this._decorateNode(obj);
-    }
-    this._highLightedIds = [];
-  }
-  ngOnDestroy(): void {
-    this._destroy.next();
-    this._destroy.complete();
-  }
-}

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

@@ -1,24 +0,0 @@
-<h2 mat-dialog-title>{{'Reassign' | translate }}</h2>
-<mat-dialog-content>
-  <form [formGroup]="form" autocomplete="off" fxLayout="column">
-    <mat-form-field>
-      <mat-select placeholder="{{'Who' | translate}}" formControlName="userId" required>
-        <mat-option *ngFor="let u of users$ | async" [value]="u.id">{{u.name}}</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <!--<mat-form-field>
-      <mat-select placeholder="{{'Role' | translate}}" formControlName="role">
-        <mat-option>{{'None'| translate}}</mat-option>
-        <mat-option *ngFor="let r of roles" [value]="r.name">{{r.title}}</mat-option>
-      </mat-select>
-    </mat-form-field>-->
-  <mat-form-field>
-    <textarea matInput cdkTextareaAutosize formControlName="note" placeholder="{{'Note'| translate}}" maxlength="200"></textarea>
-    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
-  </mat-form-field>
-  </form>
-</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="form.value" color="primary" [disabled]="!form.valid">{{'OK' | translate}}</button>
-  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
-</mat-dialog-actions>

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

@@ -1,34 +0,0 @@
-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/timeline.ts

@@ -1,45 +0,0 @@
-import { Attachment, Log, Recipient, Workflow } from '../../core/models';
-
-export interface MoveModel {
-  id: number;
-  userId: string;
-  note?: string;
-  role?: string;
-}
-
-export interface DiagramInfo {
-  diagram: Workflow;
-  documentId: number;
-  log: Log[];
-  form: string;
-  model: any;
-  attachments: Attachment[];
-  recipients: Recipient[];
-}
-
-export interface NodeData {
-  parentId?: string;
-  indicator?: boolean;
-  virtual?: boolean;
-}
-
-export interface ConnectorData {
-  virtual?: boolean;
-}
-
-export interface Timeline {
-    date: Date;
-    submissions: Date[];
-    minDate: Date;
-    maxDate: Date;
-    items: {
-        time?: Date;
-        userId?: string;
-        state?: string;
-    }[];
-    estimate: boolean;
-    startDate: Date;
-    endDate: Date;
-    recipients?: Recipient[];
-    log?: Log[];
-}

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

@@ -1,57 +0,0 @@
-<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'" [bizdocTooltip]="'Compare'|translate"><mat-icon>visibility</mat-icon></button>
-      </td>
-    </tr>
-  </tbody>
-</table>

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

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